/* ═══════════════════════════════════════════════════════════════════
   Glass Marcano — Redesign Oct 2026
   Type: Bebas Neue (hero name only) · Archivo variable superfamily
         (condensed widths for display, normal for labels) · Newsreader (reading)
   Colour: "Maiquetía" — blue / amber / green on ivory, light backgrounds only
   Loaded AFTER each page's inline <style>, so it overrides it.
   Previous design is preserved in git tag v1-contenido-oct14.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg:     #FBF8F1;
  --light:  #F3EEE2;
  --ink:    #16191A;
  --blue:   #2457D6;
  --amber:  #F2A71B;
  --green:  #3FAF4A;
  --blue-ink:  #1E4FC9;   /* text-safe blue on ivory */
  --green-ink: #0E2A12;
  --gold:   #1E4FC9;      /* legacy accent token → Maiquetía blue */
  --muted:  rgba(22,25,26,.66);
  --border: rgba(22,25,26,.09);

  --f-display: 'Archivo', sans-serif;
  --f-read: 'Newsreader', Georgia, serif;
  --label: 600 .9rem/1.4 var(--f-display);
}

body {
  background: var(--bg);
  font-family: var(--f-read);
  font-weight: 400;
  color: var(--ink);
  font-optical-sizing: auto;
}

/* ── Shared building blocks ─────────────────────────────────────── */
.display,
.bio-headline,
.milestones-header h2,
.video-head h2,
.seasons-header h2,
.press-header h2,
#contact h2,
.gallery-page-header h1,
.bio-article-header h1 {
  font-family: var(--f-display) !important;
  font-variation-settings: 'wdth' 62;
  font-weight: 850 !important;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .9 !important;
}
.milestones-header h2,
.video-head h2,
.seasons-header h2,
.press-header h2,
#contact h2,
.gallery-page-header h1,
.bio-article-header h1 { font-size: clamp(4.5rem, 8.2vw, 9rem) !important; }

.bio-headline em,
.milestones-header h2 em,
#contact h2 em {
  font-family: var(--f-read);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-variation-settings: normal;
  letter-spacing: -.01em;
  color: var(--blue-ink);
}

/* Labels: one size, one weight, one tracking everywhere */
.nav-links a,
.section-label,
.bio-readmore,
.bio-photo-label,
.milestone-title,
.fq-source,
.vcap,
.season-tab-btn,
.engagement-link,
.engagement-loc,
.press-source,
.press-kit-label,
.press-kit-dl,
.contact-block-label,
.footer-socials a,
footer p {
  font-family: var(--f-display) !important;
  font-variation-settings: 'wdth' 100;
  font-weight: 600 !important;
  font-size: .82rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}
.bio-photo-label, footer p { letter-spacing: .1em !important; text-transform: none; }

/* ── Nav ────────────────────────────────────────────────────────── */
.nav-logo { font-family: var(--f-display); font-weight: 800; font-size: .95rem; letter-spacing: .22em; }
.nav-links a { font-size: .8rem !important; }

/* ── Hero: satellites sized to live next to the Bebas name ─────── */
.hero-tag {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  letter-spacing: .24em;
  color: var(--amber);
  margin-bottom: .6rem;
}
.hero-meta { gap: 1.8rem; margin-top: 1.6rem; }
.hero-meta span {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 75;
  font-weight: 650;
  font-size: clamp(1.1rem, 1.9vw, 1.75rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: 1;
}
.hero-meta .dot { background: var(--amber); width: 7px; height: 7px; }
.hero-scroll { font-family: var(--f-display); font-weight: 600; font-size: .75rem; letter-spacing: .24em; }

/* ── Ticker: Maiquetía blue band ───────────────────────────────── */
.ticker { background: var(--blue); }
.ticker-item {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 75;
  font-weight: 750;
  font-size: 1.25rem;
  letter-spacing: .08em;
  color: #fff;
}

/* ── Bio ───────────────────────────────────────────────────────── */
.bio-headline { font-size: clamp(3.2rem, 5.6vw, 6.4rem) !important; }
.bio-body p { font-family: var(--f-read); font-size: 1.3rem; line-height: 1.6; color: #2c3236; }
.bio-readmore { color: var(--blue-ink); }

/* ── Milestones: a composition of the press-card shapes ──────── */
.milestones-header::before { display: none !important; }
/* the old stripes needed the header to clip; the shapes must not be cut while they move */
.milestones-header { overflow: visible !important; }
.ms-shapes { position: relative; width: 560px; height: 300px; flex-shrink: 0; }
.ms-shapes span { position: absolute; display: block; opacity: 0; transform: translateY(24px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1), translate .9s cubic-bezier(.16,1,.3,1); }
.ms-shapes.visible span { opacity: 1; transform: none; }
.ms-shapes .s1 { left: 0; top: 70px; width: 230px; height: 230px; border-radius: 50%; background: var(--blue); }
.ms-shapes .s2 { left: 170px; top: 170px; width: 260px; height: 130px; border-radius: 260px 260px 0 0; background: var(--amber); transition-delay: .12s; }
.ms-shapes .s3 { left: 360px; top: 135px; width: 190px; height: 165px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--green); transition-delay: .24s; }
.ms-shapes .s4 { left: 425px; top: 22px; width: 96px; height: 96px; background: var(--amber); transition-delay: .36s; }
.ms-shapes.visible .s4 { transform: rotate(12deg); }
.ms-shapes .s5 { left: 268px; top: 34px; width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--blue); transition-delay: .48s; }
.ms-shapes .s5::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--amber); }
/* Motion: each shape breathes at its own tempo; the mouse adds a light parallax (redesign.js sets --px/--py) */
.ms-shapes span { translate: calc(var(--px, 0) * var(--d, 10px)) calc(var(--py, 0) * var(--d, 10px)); }
.ms-shapes .s1 { --d: 14px; } .ms-shapes .s2 { --d: 8px; } .ms-shapes .s3 { --d: 18px; } .ms-shapes .s4 { --d: 26px; } .ms-shapes .s5 { --d: 34px; }
.ms-shapes.visible .s1 { animation: ms-breathe 7s ease-in-out 1.2s infinite; }
.ms-shapes.visible .s2 { animation: ms-rise 5.5s ease-in-out 1.4s infinite; transform-origin: 50% 100%; }
.ms-shapes.visible .s3 { animation: ms-sway 6.5s ease-in-out 1.6s infinite; transform-origin: 50% 100%; }
.ms-shapes.visible .s4 { animation: ms-spin 9s ease-in-out 1.8s infinite; }
.ms-shapes.visible .s5 { animation: ms-orbit 8s ease-in-out 2s infinite; }
.ms-shapes.visible .s5::after { animation: ms-pulse 2.4s ease-in-out 2s infinite; }
@keyframes ms-breathe { 0%,100% { transform: none; } 50% { transform: translateY(-14px) scale(1.03); } }
@keyframes ms-rise    { 0%,100% { transform: none; } 50% { transform: scaleY(1.12); } }
@keyframes ms-sway    { 0%,100% { transform: none; } 30% { transform: rotate(-4deg); } 70% { transform: rotate(3deg); } }
@keyframes ms-spin    { 0%,100% { transform: rotate(12deg); } 50% { transform: rotate(57deg) translateY(-10px); } }
@keyframes ms-orbit   { 0%,100% { transform: none; } 25% { transform: translate(18px,-10px); } 50% { transform: translate(30px,6px); } 75% { transform: translate(10px,14px); } }
@keyframes ms-pulse   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.6); } }
@media (max-width: 1100px) { .ms-shapes { zoom: .72; } }
@media (max-width: 900px) { .ms-shapes { zoom: .5; } }
@media (prefers-reduced-motion: reduce) { .ms-shapes span, .ms-shapes span::after { transition: none; animation: none !important; opacity: 1; transform: none; translate: none; } .ms-shapes .s4 { transform: rotate(12deg); } }
.milestone { border-top: 6px solid var(--blue); padding-top: 2.4rem; }
.milestone:nth-child(2) { border-top-color: var(--amber); }
.milestone:nth-child(3) { border-top-color: var(--green); }
.milestone-year {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 62;
  font-weight: 850;
  font-size: clamp(4.5rem, 7vw, 7rem);
  color: var(--ink);
}
.milestone-bg-num { display: none; }
.milestone-title { color: var(--blue-ink); margin-top: .6rem; }
.milestone-desc { font-family: var(--f-read); font-size: 1.15rem; line-height: 1.6; color: #2c3236; }

/* ── Featured quote ────────────────────────────────────────────── */
.featured-quote { background: var(--bg); }
.featured-quote::before { font-family: var(--f-read); color: var(--amber); opacity: .35; }
.fq-text {
  font-family: var(--f-read);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 1.15;
}
.fq-source { color: var(--blue-ink); }

/* ── Video ─────────────────────────────────────────────────────── */
.video-head p, .seasons-header p { font-family: var(--f-read); font-size: 1.25rem; line-height: 1.6; color: #2c3236; }
.vcap strong { color: var(--blue-ink); }
/* Caption never widens its card: width comes from the video frame only */
.vcap { width: 0; min-width: 100%; }
.vplay::after { background-color: rgba(36,87,214,.94); }
.video-nav button:hover { color: var(--blue); }

/* ── Season: big dates, featured next concert ─────────────────── */
.season-tab-btn.active { color: var(--ink); border-bottom-color: var(--blue); }
.season-tab-btn.active::after { background: var(--blue) !important; }

.engagement {
  grid-template-columns: 9.5rem 1fr auto !important;
  align-items: start !important;
  gap: 2.5rem !important;
  padding: 2.4rem 0 !important;
}
.eng-date { line-height: .9; }
.eng-day {
  display: block;
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 62;
  font-weight: 850;
  font-size: 5.6rem;
  color: var(--ink);
}
.eng-mon {
  display: block;
  margin-top: .55rem;
  font: var(--label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.engagement-name {
  font-family: var(--f-display) !important;
  font-variation-settings: 'wdth' 75;
  font-weight: 750 !important;
  font-size: clamp(1.5rem, 2.3vw, 2.1rem) !important;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .01em;
}
.engagement-note {
  display: block;
  font-family: var(--f-read) !important;
  font-size: 1.15rem !important;
  line-height: 1.55;
  color: #3a4044;
  margin: .6rem 0 .9rem;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.engagement-link { color: var(--blue-ink) !important; margin-top: 0 !important; }
.engagement-loc { padding-top: .8rem; color: var(--muted); }

/* featured (next) concert */
.eng-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--blue);
  color: #fff;
  margin: 0 0 1rem;
  position: relative;
  overflow: hidden;
}
.eng-feature img { width: 100%; height: 100%; min-height: 26rem; object-fit: cover; object-position: 50% 30%; display: block; }
.eng-feature-body { padding: 3.2rem 3rem 3rem; position: relative; z-index: 1; }
.eng-feature .eng-kicker { font: var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 1.6rem; }
.eng-feature .eng-day { color: #fff; font-size: clamp(6rem, 10vw, 9rem); }
.eng-feature .eng-mon { color: #fff; opacity: .9; }
.eng-feature .engagement-name { color: #fff; font-size: clamp(2rem, 3.2vw, 3rem) !important; margin-top: 1.8rem; }
.eng-feature .engagement-note { color: rgba(255,255,255,.88); }
.eng-feature .engagement-link { color: #fff !important; border-bottom: 2px solid var(--amber); padding-bottom: .2rem; }
.eng-feature .engagement-loc { color: rgba(255,255,255,.75); padding: 0; margin-top: 1.4rem; display: block; }
.eng-feature::after {
  content: ""; position: absolute; right: -90px; bottom: -90px; width: 260px; height: 260px;
  border-radius: 50%; background: var(--amber); opacity: .95;
}

/* ── Press: each quote its own colour + shape ─────────────────── */
#press-section { background: var(--bg); }
.press-grid {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 1.6rem !important;
  align-items: start;
}
.press-card {
  position: relative;
  overflow: hidden;
  padding: 3rem 2.6rem 2.6rem !important;
  min-height: 15rem;
  background: var(--light);
}
.press-card .press-quote,
.press-card .press-source { position: relative; z-index: 2; max-width: calc(100% - 7.5rem); }
.press-quote {
  font-family: var(--f-read) !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem) !important;
  line-height: 1.32;
}
.press-card .press-quote { color: inherit !important; }
.press-card .press-source { display: block; margin-top: 1.4rem; color: inherit !important; opacity: .82; }
.press-shape { position: absolute; z-index: 1; }
.press-shape.circle { width: 210px; height: 210px; border-radius: 50%; right: -72px; top: -72px; }
.press-shape.square { width: 140px; height: 140px; right: -38px; bottom: -48px; transform: rotate(12deg); }
.press-shape.tri { width: 168px; height: 146px; clip-path: polygon(50% 0, 100% 100%, 0 100%); right: -46px; bottom: -42px; }
.press-shape.half { width: 190px; height: 95px; border-radius: 190px 190px 0 0; right: -38px; bottom: 0; }

.press-card.pc1 { grid-column: 1 / span 7; background: var(--blue); color: #fff; }
.press-card.pc1 .press-quote { font-size: clamp(1.7rem, 2.6vw, 2.4rem) !important; }
.press-card.pc1 .press-shape { background: var(--amber); }
.press-card.pc2 { grid-column: 8 / span 5; margin-top: 5rem; background: var(--amber); color: var(--ink); }
.press-card.pc2 .press-shape { background: var(--green); }
.press-card.pc3 { grid-column: 1 / span 5; margin-top: -2rem; background: var(--green); color: var(--green-ink); }
.press-card.pc3 .press-shape { background: var(--blue); }
.press-card.pc4 { grid-column: 6 / span 7; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
.press-card.pc4 .press-shape { background: var(--amber); }
.press-card.pc5 { grid-column: 3 / span 8; background: var(--ink); color: #fff; }
.press-card.pc5 .press-shape { background: var(--blue); }
.press-card:hover { background-color: inherit; }
.press-card.pc1:hover { background: var(--blue); }
.press-card.pc2:hover { background: var(--amber); }
.press-card.pc3:hover { background: var(--green); }
.press-card.pc4:hover { background: #fff; }
.press-card.pc5:hover { background: var(--ink); }

.press-kit-desc { font-family: var(--f-read) !important; font-size: 1.2rem !important; }
.press-kit-dl { color: var(--blue-ink); }

/* ── Contact: blue band ───────────────────────────────────────── */
#contact { background: var(--blue) !important; color: #fff; }
#contact h2 em { color: var(--amber); }
.contact-block-label { color: rgba(255,255,255,.78) !important; }
.contact-block-name {
  font-family: var(--f-read) !important;
  font-weight: 400 !important;
  font-size: clamp(1.4rem, 2vw, 1.9rem) !important;
}
.contact-block-email { font-family: var(--f-read); font-size: 1.2rem; }

/* ── Sub-pages ────────────────────────────────────────────────── */
.bio-lede { font-family: var(--f-read) !important; }
.bio-closer { font-family: var(--f-read) !important; font-style: italic; }

/* ── Small screens ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .milestones-header h2, .video-head h2, .seasons-header h2, .press-header h2, #contact h2,
  .gallery-page-header h1, .bio-article-header h1 { font-size: clamp(3.4rem, 16vw, 5.5rem) !important; }
  .bio-headline { font-size: clamp(2.6rem, 11vw, 4.2rem) !important; }
  .hero-tag { font-size: .95rem; }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .hero-meta .dot { display: none; }
  .hero-meta span { font-size: .86rem; white-space: nowrap; letter-spacing: .04em; }
  .bio-body p, .milestone-desc { font-size: 1.12rem; }

  .engagement { grid-template-columns: 5.2rem 1fr !important; gap: 1.2rem !important; padding: 1.8rem 0 !important; }
  .eng-day { font-size: 3.8rem; }
  .eng-feature { grid-template-columns: 1fr; }
  .eng-feature img { min-height: 0; height: 62vw; }
  .eng-feature-body { padding: 2.2rem 1.6rem 2.4rem; }
  .eng-feature::after { width: 120px; height: 120px; right: -48px; top: -48px; bottom: auto; }

  .press-grid { grid-template-columns: 1fr !important; }
  .press-card[class*="pc"] { grid-column: 1 !important; margin-top: 0 !important; }
  .press-card { padding: 2.4rem 1.8rem 2rem !important; min-height: 0; }
  .press-card .press-quote, .press-card .press-source { max-width: 100%; }
  .press-card .press-quote, .press-card.pc1 .press-quote { font-size: 1.3rem !important; }
  .press-shape.circle { width: 110px; height: 110px; right: -55px; top: -55px; }
  .press-shape.square { width: 70px; height: 70px; right: -22px; bottom: -26px; }
  .press-shape.tri { width: 88px; height: 76px; right: -26px; bottom: -20px; }
  .press-shape.half { width: 100px; height: 50px; border-radius: 100px 100px 0 0; right: -20px; }
}

/* ── Fixes after review ───────────────────────────────────────── */
#contact .contact-block-name a,
#contact .contact-block-email,
#contact .contact-block-email a { color: #fff !important; opacity: .92; }
#contact .contact-block-email a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
footer a { color: var(--amber) !important; }
.press-kit-dl {
  border: 0 !important;
  border-bottom: 2px solid var(--amber) !important;
  padding: 0 0 .25rem !important;
  width: auto !important;
  display: inline-block !important;
  background: none !important;
}

/* ── Gallery: Maiquetía colour wash, original photo on hover ───── */
.gallery-item::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: var(--tint, var(--blue));
  mix-blend-mode: multiply;
  opacity: .92;
  pointer-events: none;
  transition: opacity .7s ease;
}
.gallery-item:nth-child(3n+2) { --tint: var(--amber); }
.gallery-item:nth-child(3n+3) { --tint: var(--green); }
.gallery-item img { filter: grayscale(1) contrast(1.1) brightness(1.12) !important; transition: filter .7s ease, transform .8s cubic-bezier(.16,1,.3,1) !important; }
.gallery-item .expand-hint { z-index: 2; }
.gallery-item:hover::before,
.gallery-item.is-seen::before { opacity: 0; }
.gallery-item:hover img,
.gallery-item.is-seen img { filter: none !important; }

/* ── Cursor: amber dot, blue ring; fills amber over anything clickable ── */
:root { --cursor-a: #F2A71B; --cursor-b: rgba(36,87,214,.75); }
.cursor { background: var(--amber) !important; width: 9px; height: 9px; }
.cursor-ring { width: 36px !important; height: 36px !important; border-width: 1.5px !important; transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .3s, opacity .3s !important; }
.cursor-ring.is-hover {
  transform: translate(-50%, -50%) scale(1.8);
  background: transparent;
  border-color: var(--amber) !important;
}

/* ── Desktop nav: each link lights up in its own colour block ── */
.nav-links a {
  padding: .5rem .75rem;
  transition: background-color .25s, color .25s, opacity .25s;
}
.nav-links li:nth-child(3n+1) a:hover { background: var(--blue);  color: #fff; opacity: 1; }
.nav-links li:nth-child(3n+2) a:hover { background: var(--amber); color: var(--ink); opacity: 1; }
.nav-links li:nth-child(3n+3) a:hover { background: var(--green); color: var(--ink); opacity: 1; }

/* ── Mobile menu: stacked colour blocks ── */
.mobile-menu {
  background: var(--ink) !important;
  backdrop-filter: none !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding-top: 4.6rem;
}
.mobile-menu a {
  flex: 1 1 0;
  display: flex; align-items: center;
  padding: 0 1.6rem;
  font-family: var(--f-display) !important;
  font-variation-settings: 'wdth' 62;
  font-weight: 850 !important;
  font-size: clamp(2.2rem, 10.5vw, 3.4rem) !important;
  letter-spacing: 0 !important;
  line-height: 1;
  opacity: 1 !important;
  transform: translateX(-100%);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.mobile-menu.open a { transform: none; }
.mobile-menu a:nth-of-type(1) { background: var(--blue);  color: #fff;        transition-delay: .00s; }
.mobile-menu a:nth-of-type(2) { background: var(--amber); color: var(--ink);  transition-delay: .04s; }
.mobile-menu a:nth-of-type(3) { background: var(--green); color: var(--ink);  transition-delay: .08s; }
.mobile-menu a:nth-of-type(4) { background: var(--bg);    color: var(--ink);  transition-delay: .12s; }
.mobile-menu a:nth-of-type(5) { background: var(--blue);  color: #fff;        transition-delay: .16s; }
.mobile-menu a:nth-of-type(6) { background: var(--amber); color: var(--ink);  transition-delay: .20s; }
.mobile-menu .lang-switch { padding: 1.1rem 1.6rem 1.4rem; justify-content: flex-start; }
.nav-logo { white-space: nowrap; }
.nav-links { gap: .35rem !important; }
@media (max-width: 1180px) { .nav-links a { padding: .45rem .5rem; letter-spacing: .12em !important; } }
/* the photo drifts a few px for parallax; a dark cell behind it keeps the colour wash from showing as a stripe at the edges */
.gallery-item { background: #0b0b0b; }
@media (max-width: 900px) {
  /* stripes become a thin band under the heading instead of sitting behind it */
  .milestones-header::before {
    inset: auto 0 -1.6rem 0 !important;
    width: 100% !important;
    height: 12px;
    -webkit-mask: none; mask: none;
  }
  .contact-block-name { font-size: 1.15rem !important; overflow-wrap: anywhere; }
}

/* ── Logo: a wave of Maiquetía colours runs through the letters on hover ── */
.nav-logo .lt { display: inline-block; transition: color .3s; }
.nav-logo:hover .lt,
.nav-logo:focus-visible .lt,
.nav-logo.wave .lt {
  animation: logo-wave 1.1s cubic-bezier(.45,0,.55,1) both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes logo-wave {
  0%   { color: inherit; transform: translateY(0); }
  20%  { color: var(--blue);  transform: translateY(-3px); }
  45%  { color: var(--amber); transform: translateY(0); }
  70%  { color: var(--green); }
  100% { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-logo .lt { animation: none !important; }
}

/* ── Cursor: Glass's own hand and baton (traced from a photo), mouse devices only ── */
html.baton-on, html.baton-on * { cursor: none !important; }
html.baton-on .cursor, html.baton-on .cursor-ring { display: none !important; }
.baton-cursor { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; width: 64px; height: 64px;
  opacity: 0; transition: opacity .2s; will-change: transform; }
.baton-cursor.is-in { opacity: 1; }
.baton-cursor img { display: block; width: 64px; height: 64px; transform-origin: 2.2px 1.6px; }
/* the baton tip: lights up amber over anything clickable */
.baton-cursor::before { content: ""; position: absolute; left: 2.2px; top: 1.6px; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--amber); transform: scale(0); transition: transform .25s cubic-bezier(.16,1,.3,1); }
.baton-cursor.is-hover::before { transform: scale(1); }
.baton-cursor.is-hover img { animation: baton-tick .55s cubic-bezier(.3,0,.2,1); }
.baton-cursor.is-down img { animation: baton-beat .28s ease-out; }
@keyframes baton-tick { 0% { transform: none; } 35% { transform: rotate(-14deg); } 70% { transform: rotate(5deg); } 100% { transform: none; } }
@keyframes baton-beat { 0% { transform: none; } 40% { transform: rotate(12deg) scale(.96); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .baton-cursor img { animation: none !important; } }