/* =============================================================
   JUST A CHILL PIGEON - $PIGEON
   A refined, royal meme. Pewter · Gold · Sage · Rose · Lavender · Blueberry
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Royal ink base */
  --ink:        #100E17;
  --ink-1:      #15121F;
  --ink-2:      #1B1827;
  --ink-3:      #221E31;
  --ink-glass:  rgba(21, 18, 31, 0.62);

  /* Text */
  --cream:      #F2EDE4;
  --muted:      #A8A2B6;
  --muted-2:    #76718A;

  /* Hairlines */
  --line:        rgba(242, 237, 228, 0.10);
  --line-strong: rgba(242, 237, 228, 0.20);

  /* The neon empire palette — pulled straight from the art: an electric-violet
     CHILL sign with a blue-white core, vibrant lavender bloom, electric-blue
     city light, and a thin magenta + sunset-ember edge. Violet/blue lead;
     magenta is a single accent note, not the whole sign. */
  --pewter:      #C6C9D3;
  --pewter-deep: #8A8E9E;
  --neon:        #9D4EDF;     /* electric violet — primary brand */
  --neon-2:      #C77DFF;     /* vibrant lavender — highlight */
  --neon-deep:   #5B2A9E;     /* shadowed violet */
  --electric:    #5B8DEF;     /* electric blue — city light */
  --electric-2:  #8FB6FF;     /* lighter electric blue */
  --magenta:     #E831A0;     /* magenta edge accent (sparing) */
  --grape:       #6E2E9F;     /* sky purple */
  --grape-deep:  #2A0F47;     /* deep night */
  --ember:       #E55E2D;     /* sunset orange */
  --gold:        #D9B66E;     /* gold-chain accent (tiny doses) */
  --gold-2:      #EFD79A;
  --gold-deep:   #B8954E;
  --sage:        #A9BD9A;
  --rose:        #DDABB2;
  --lavender:    #C8A2FF;
  --blueberry:   #7280BE;

  /* Signature gradients — electric blue → violet → lavender, like the sign. */
  --grad-gold:  linear-gradient(135deg, #7FB0FF 0%, #9D4EDF 52%, #C77DFF 100%);
  --grad-royal: linear-gradient(120deg, #5B8DEF 0%, #9D4EDF 50%, #E0B6FF 100%);
  --grad-text:  linear-gradient(100deg, #7FB0FF 0%, #A855F7 50%, #E0B6FF 100%);
  --grad-sky:   linear-gradient(180deg, #1A0B3F 0%, #6E2E9F 45%, #E55E2D 100%);

  /* Type */
  --serif:   'Fraunces', 'Georgia', 'Times New Roman', serif;
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 18px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.js { scroll-behavior: auto; } /* JS drives smooth scroll */

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--cream);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--neon); color: #fff; }

/* Keyboard focus - always visible, even when the custom cursor hides the pointer */
:focus-visible { outline: 2px solid var(--neon-2); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

/* Anchor offset for the fixed header (helps even without JS smooth-scroll) */
section[id], #top { scroll-margin-top: 90px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- Type scale ---------- */
.h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: #F2EBFF;
  /* Unified neon-sign glow — every header lights up the same way now. */
  text-shadow:
    0 0 2px  rgba(255,255,255,.45),
    0 0 14px rgba(199,125,255,.5),
    0 0 30px rgba(157,78,223,.36),
    0 0 60px rgba(91,141,239,.22);
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.65;
}
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Neon-sign glow so gradient text reads electric, not washed out. */
  filter: drop-shadow(0 0 18px rgba(157,78,223,0.35));
}

.section { padding-block: clamp(80px, 13vh, 170px); position: relative; }

.section__kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: clamp(20px, 3vw, 34px);
  display: flex; align-items: center; gap: 0.7em;
}
.section__kicker span {
  color: var(--neon-2);
  text-shadow: 0 0 12px rgba(157,78,223,0.55);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   AMBIENT LAYERS - grain + mesh
   ============================================================= */
.grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mesh {
  position: fixed; inset: -10%; z-index: -2; pointer-events: none;
  filter: blur(70px) saturate(115%);
  opacity: 0.7;
}
.blob {
  position: absolute; display: block; border-radius: 50%;
  width: 46vmax; height: 46vmax;
  opacity: 0.5;
  will-change: transform;
  animation: drift 26s var(--ease) infinite alternate;
}
.blob--lavender  { background: radial-gradient(circle, var(--neon), transparent 62%); top: -14%; left: -8%; opacity: 0.5; }
.blob--blueberry { background: radial-gradient(circle, var(--electric), transparent 62%); top: 18%; right: -12%; animation-delay: -6s; opacity: 0.45; }
.blob--sage      { background: radial-gradient(circle, var(--grape), transparent 60%); bottom: -16%; left: 14%; animation-delay: -12s; opacity: 0.45; }
.blob--rose      { background: radial-gradient(circle, var(--lavender), transparent 62%); bottom: 6%; right: 6%; animation-delay: -18s; opacity: 0.4; }
.blob--gold      { background: radial-gradient(circle, var(--ember), transparent 60%); top: 44%; left: 38%; width: 28vmax; height: 28vmax; opacity: 0.18; animation-delay: -9s; }

@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(4vw, 5vh, 0) scale(1.18); }
}

/* Black gothic velvet damask wallpaper across the WHOLE site, fixed so it
   doesn't scroll. Layered under content but above the abstract blob mesh so
   it reads as actual fabric, not a flat color. Opacity is dialed to be
   visibly there without competing with typography. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url('/assets/textures/black-felt.png') repeat,
    url('/assets/velvet-damask.png') repeat;
  background-size: 180px 180px, clamp(280px, 24vw, 420px) auto;
  background-blend-mode: overlay, normal;
  opacity: 0.42;
}

/* A soft vignette to seat the content over the mesh */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, transparent 40%, rgba(10,8,14,0.45) 100%),
    linear-gradient(180deg, rgba(10,8,14,0.35), rgba(10,8,14,0.65));
}

/* =============================================================
   CUSTOM CURSOR
   ============================================================= */
.cursor { position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none; mix-blend-mode: difference; display: none; }
.cursor__ring {
  position: absolute; width: 38px; height: 38px; border: 1.5px solid #fff; border-radius: 50%;
  transform: translate(-50%, -50%); transition: width .3s var(--ease), height .3s var(--ease), opacity .3s;
}
.cursor__dot {
  position: absolute; width: 5px; height: 5px; background: #fff; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor__label {
  position: absolute; transform: translate(-50%, -50%); color: var(--ink); background: var(--cream);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0 0; border-radius: 100px; white-space: nowrap; opacity: 0; scale: 0.6;
  transition: opacity .25s, scale .25s var(--ease), padding .25s; mix-blend-mode: normal;
}
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; opacity: 0.5; }
.cursor.is-label .cursor__ring { width: 0; height: 0; opacity: 0; }
.cursor.is-label .cursor__dot  { opacity: 0; }
.cursor.is-label .cursor__label { opacity: 1; scale: 1; padding: 6px 14px; }
@media (pointer: fine) { .cursor { display: block; } body.has-cursor { cursor: none; } }

/* =============================================================
   SCROLL PROGRESS
   ============================================================= */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 8000; pointer-events: none;
  background: var(--line);
}
.scroll-progress i {
  display: block; height: 100%; width: 0%;
  background: var(--grad-gold);
  box-shadow: 0 0 14px rgba(217,182,110,0.6);
}

/* =============================================================
   PRELOADER · Cinematic title sequence
   Black velvet gothic. Layered:
     1. Deep velvet radial (warm-black, vignetted)
     2. Baroque damask wallpaper (gold filigree, low opacity)
     3. Subtle vertical "drape" sheen (fabric specular)
     4. Letterbox bars, framed pigeon portrait, title, meter
     5. Film grain on top
   ============================================================= */
.preloader.cinema {
  position: fixed; inset: 0; z-index: 9999;
  background-color: #15131c;
  overflow: hidden; isolation: isolate;
  /* `safe center` is the fix for the clipped title: normal `center` would
     push the top of the content ABOVE the viewport when the stage is taller
     than the screen (short laptop / landscape / devtools open), and
     overflow:hidden then cut the top of "Just A Chill". `safe` falls back to
     top-alignment the moment centering would overflow, so the title's top is
     never lost. Padding gives breathing room in that top-aligned case. */
  display: grid; place-items: safe center;
  padding: clamp(0.75rem, 3.5vh, 2.5rem) 1rem;
  transition: opacity 1.05s var(--ease-expo) .25s, visibility 1.4s, transform 1.4s var(--ease-expo);
  will-change: opacity, transform;
}
/* Black gothic velvet damask wallpaper — the dominant surface. Satin charcoal
   ground + matte-black flocked baroque motif, layered with a felt micro-grain
   so it reads as real fabric, not flat vector. */
.preloader.cinema::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    /* felt micro-grain — light enough that it doesn't crush the damask */
    url('/assets/textures/black-felt.png') repeat,
    /* the actual damask wallpaper */
    url('/assets/velvet-damask.png') repeat;
  background-size: 180px 180px, clamp(280px, 24vw, 420px) auto;
  background-blend-mode: soft-light, normal;
  opacity: 1;
}
/* Velvet sheen + soft vignette. Important: the vignette is now light enough
   that the damask shows through everywhere except deep corners — that's the
   whole point of having wallpaper. */
.preloader.cinema::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(58,53,71,.35) 0%, transparent 70%),
    radial-gradient(140% 100% at 50% 50%, transparent 45%, rgba(5,3,8,.35) 85%, rgba(5,3,8,.7) 100%),
    linear-gradient(180deg, rgba(5,3,8,.45) 0%, transparent 18%, transparent 82%, rgba(5,3,8,.45) 100%);
}
.preloader.cinema.is-done { opacity: 0; transform: scale(1.04); visibility: hidden; pointer-events: none; }

/* ----- Letterbox bars (A24 / Apple keynote framing) ----- */
.cinema__bar {
  position: absolute; left: -2vw; right: -2vw; height: 12vh; z-index: 6;
  background: #050308;
  box-shadow: 0 0 80px 0 rgba(0,0,0,.6), inset 0 0 0 1px rgba(217,182,110,.04);
  transform: translateY(0);
  transition: transform 1.1s var(--ease-expo);
}
.cinema__bar--top    { top: 0;    transform: translateY(-100%); }
.cinema__bar--bottom { bottom: 0; transform: translateY( 100%); }
.preloader.cinema.is-cued .cinema__bar--top    { transform: translateY(0); }
.preloader.cinema.is-cued .cinema__bar--bottom { transform: translateY(0); }
.preloader.cinema.is-done .cinema__bar--top    { transform: translateY(-100%); transition-duration: .9s; }
.preloader.cinema.is-done .cinema__bar--bottom { transform: translateY( 100%); transition-duration: .9s; }
/* Hairline gold trim on the inner edge of each bar */
.cinema__bar--top::after, .cinema__bar--bottom::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239,215,154,.45) 30%, rgba(239,215,154,.7) 50%, rgba(239,215,154,.45) 70%, transparent);
}
.cinema__bar--top::after    { bottom: 0; }
.cinema__bar--bottom::after { top: 0; }

/* ----- Aperture iris (closes inward on exit) ----- */
.cinema__iris {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 60%, #050308 100%);
  opacity: 0; transition: opacity 1.1s var(--ease-expo);
}
.preloader.cinema.is-done .cinema__iris { opacity: 1; }

/* ----- Grain (locked to preloader, won't leak to page) ----- */
.cinema__grain {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: cinemaGrain .3s steps(3) infinite;
}
@keyframes cinemaGrain {
  0%   { transform: translate3d( 0,  0, 0); }
  33%  { transform: translate3d(-2%, 1%, 0); }
  66%  { transform: translate3d( 1%,-2%, 0); }
  100% { transform: translate3d( 0,  0, 0); }
}

/* ----- Center stage ----- */
.cinema__stage {
  position: relative; z-index: 4; text-align: center;
  width: min(92vw, 640px); padding: 1rem;
}

/* Emblem (framed pigeon portrait) */
.cinema__emblem {
  position: relative; width: clamp(120px, 14vw, 168px); aspect-ratio: 1;
  /* Larger bottom margin so the glow's breathing inset can never grow into
     the top of the title (was clipping the P/i ascenders). */
  margin: 0 auto clamp(2.8rem, 5vw, 4rem);
  opacity: 0; transform: scale(.7); filter: blur(8px);
  transition:
    opacity 1.4s var(--ease-expo),
    transform 1.6s var(--ease-expo),
    filter 1.4s var(--ease);
}
.preloader.cinema.is-cued .cinema__emblem { opacity: 1; transform: scale(1); filter: blur(0); transition-delay: .15s; }

/* Soft warm aureole behind the photo - breathes gently, no spinning */
.cinema__emblem-glow {
  position: absolute; inset: -35%; border-radius: 50%; z-index: 0;
  background:
    radial-gradient(circle, rgba(239,215,154,.45) 0%, rgba(217,182,110,.2) 30%, transparent 62%);
  animation: cinemaBreathe 5.2s var(--ease) infinite;
  filter: blur(2px);
}
/* Static gold-leaf rim — layered: outer shadow, inner highlight, brass ring */
.cinema__emblem-ring {
  position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  background:
    linear-gradient(140deg, #F4DDA0 0%, #D9B66E 40%, #8E6B33 78%, #EFD79A 100%);
  padding: 3px; pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 0 0 2px rgba(239,215,154,.18),
    0 28px 80px -22px rgba(0,0,0,.95),
    0 8px 28px -8px rgba(217,182,110,.4);
}
/* Inner brass bevel under the photo */
.cinema__emblem-ring::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(60% 80% at 50% 100%, rgba(0,0,0,.35), transparent 60%);
  pointer-events: none;
}
.cinema__emblem-photo {
  position: absolute; inset: 5px; z-index: 3; border-radius: 50%;
  /* Frame the whole glowing bird (golden aura visible), not a tight crop of
     the black sweater — that read as an eclipse before. */
  background-size: 120%;
  background-position: 50% 22%;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.5),
    inset 0 -10px 30px -10px rgba(0,0,0,.35),
    inset 0 6px 20px -6px rgba(255,235,200,.1);
  filter: contrast(1.05) saturate(1.06) brightness(1.04);
}
@keyframes cinemaBreathe {
  /* Lower amplitude so the aureole can't grow into the title beneath it. */
  0%,100% { transform: scale(1);     opacity: .65; }
  50%     { transform: scale(1.025); opacity: .95; }
}

/* Letter-by-letter title */
.cinema__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.2rem, 7.5vw, 5.6rem);
  /* Generous line-height + neutral letter-spacing so italic ascenders (P, l,
     h) and descenders (g, p) read clean. The negative tracking was crowding
     "Pi" together. Fraunces has deep descenders, so 1.08 was clipping the
     tails of J / g / p and the dot on the i — bumped to 1.28. */
  line-height: 1.28; letter-spacing: 0;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  padding-block: .12em;   /* breathing room for ascenders/descenders */
  font-optical-sizing: auto;
}
.cinema__line { display: block; white-space: nowrap; padding-block: .06em; }
.cinema__line--em { font-style: italic; font-weight: 500; letter-spacing: .005em; }
.cinema__line--em i { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cinema__title i {
  display: inline-block; font-style: inherit; font-weight: inherit;
  /* Vertical padding on each letter box is essential for the gradient line:
     -webkit-background-clip:text paints the gradient only inside the box, so
     without this the descenders of g / p / italic-P get no fill and vanish.
     The padding also gives the i-dot and J/Q tails room so nothing clips. */
  padding-block: .1em .16em;
  opacity: 0; transform: translateY(.32em) rotateX(-65deg); transform-origin: 50% 100%;
  filter: blur(6px);
  transition:
    opacity .9s var(--ease),
    transform 1.1s var(--ease-expo),
    filter .9s var(--ease);
}
.cinema__title i.sp { width: .35em; opacity: 1; filter: none; transform: none; padding-block: 0; }
.preloader.cinema.is-cued .cinema__title i {
  opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0);
}
/* Stagger - each letter ~50ms after the previous, starting at .45s */
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(1) i:nth-child(1)  { transition-delay: .45s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(1) i:nth-child(2)  { transition-delay: .5s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(1) i:nth-child(3)  { transition-delay: .55s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(1) i:nth-child(4)  { transition-delay: .6s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(1) i:nth-child(5)  { transition-delay: .65s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(1) i:nth-child(6)  { transition-delay: .7s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(1) i:nth-child(7)  { transition-delay: .75s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(1) i:nth-child(8)  { transition-delay: .8s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(1) i:nth-child(9)  { transition-delay: .85s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(1) i:nth-child(10) { transition-delay: .9s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(1) i:nth-child(11) { transition-delay: .95s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(1) i:nth-child(12) { transition-delay: 1s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(2) i:nth-child(1)  { transition-delay: 1.1s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(2) i:nth-child(2)  { transition-delay: 1.15s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(2) i:nth-child(3)  { transition-delay: 1.2s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(2) i:nth-child(4)  { transition-delay: 1.25s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(2) i:nth-child(5)  { transition-delay: 1.3s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(2) i:nth-child(6)  { transition-delay: 1.35s; }
.preloader.cinema.is-cued .cinema__title .cinema__line:nth-child(2) i:nth-child(7)  { transition-delay: 1.4s; }

/* Tagline with hairline dashes */
.cinema__tag {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  font-family: var(--sans); text-transform: uppercase;
  letter-spacing: .42em; font-size: clamp(.62rem, 1.4vw, .72rem); color: var(--muted);
  margin-bottom: clamp(1.2rem, 2.4vw, 1.7rem);
  opacity: 0; transition: opacity 1.1s var(--ease) 1.85s;
}
.preloader.cinema.is-cued .cinema__tag { opacity: 1; }
.cinema__tag-dash {
  display: inline-block; width: clamp(28px, 8vw, 56px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}

/* Status rotator */
.cinema__status {
  height: 1.4em; font-size: clamp(.78rem, 1.4vw, .88rem); color: var(--muted-2);
  display: flex; align-items: center; justify-content: center; gap: 1px;
  opacity: 0; transition: opacity .9s var(--ease) 2.05s;
  margin-bottom: 1.1rem;
}
.preloader.cinema.is-cued .cinema__status { opacity: 1; }
.cinema__status #preloaderStatus { transition: opacity .28s var(--ease), transform .28s var(--ease); display: inline-block; }
.cinema__status.swapping #preloaderStatus { opacity: 0; transform: translateY(-6px); }
.cinema__status .dots { display: inline-flex; }
.cinema__status .dots i { font-style: normal; animation: blink 1.4s infinite both; }
.cinema__status .dots i:nth-child(2) { animation-delay: .2s; }
.cinema__status .dots i:nth-child(3) { animation-delay: .4s; }

/* Hairline meter */
.cinema__meter {
  width: min(420px, 80%); margin: 0 auto;
  opacity: 0; transition: opacity .9s var(--ease) 2.15s;
}
.preloader.cinema.is-cued .cinema__meter { opacity: 1; }
.cinema__meter-track {
  position: relative; height: 1px; background: rgba(242,237,228,.12); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(242,237,228,.04);
}
.cinema__meter-track i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, transparent, var(--gold-2) 30%, var(--gold) 70%, transparent);
  box-shadow: 0 0 12px rgba(217,182,110,.7);
  transition: width .25s var(--ease);
}
.cinema__meter-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .7rem; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted-2); font-variant-numeric: tabular-nums;
}
.cinema__meter-meta i { color: var(--gold); font-style: normal; font-size: .8rem; }
.cinema__meter-meta em { color: var(--muted-2); font-style: normal; margin-left: 2px; }
.cinema__meter-spec { color: var(--muted-2); }

/* Short viewports: shrink the whole title sequence so it fits without
   overflowing — overflow is what pushed the top of "Just A Chill" off-screen
   and got it clipped. Placed AFTER the base .cinema__* rules so these win the
   cascade when the media condition matches (equal specificity → source order). */
@media (max-height: 760px) {
  .cinema__emblem { width: clamp(84px, 12vh, 120px); margin-bottom: clamp(1.2rem, 3vh, 2rem); }
  .cinema__title  { font-size: clamp(1.9rem, 6.2vh, 4.2rem); }
  .cinema__tag    { margin-top: clamp(0.4rem, 2vh, 1rem); }
  .cinema__meter  { margin-top: clamp(1rem, 3vh, 2rem); }
}
@media (max-height: 560px) {
  .cinema__emblem { width: clamp(60px, 10vh, 92px); margin-bottom: 0.9rem; }
  .cinema__title  { font-size: clamp(1.5rem, 7vh, 2.8rem); line-height: 1.2; }
  .cinema__tag    { font-size: .6rem; }
}

@keyframes blink   { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes rise    { to { opacity: 1; transform: none; } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* =============================================================
   HEADER + NAV
   ============================================================= */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 7000;
  transition: transform .5s var(--ease), background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: var(--ink-glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.header.is-hidden { transform: translateY(-100%); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1rem; }

.brand { display: flex; align-items: center; gap: 0.65em; font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em; }
.brand__glyph { font-size: 1.2em; filter: drop-shadow(0 2px 10px rgba(217,182,110,0.4)); }
.brand__text em { font-style: italic; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Bordered circular pigeon logo (top-left) */
.brand__avatar {
  width: 42px; height: 42px; border-radius: 50%; padding: 2px; flex: 0 0 auto;
  background: linear-gradient(135deg, #5B8DEF, #9D4EDF 55%, #E831A0);
  box-shadow: 0 6px 18px -6px rgba(157,78,223,0.75), 0 0 14px -4px rgba(91,141,239,.5);
  transition: transform .5s var(--ease), box-shadow .5s;
}
.brand:hover .brand__avatar { transform: rotate(-6deg) scale(1.05); box-shadow: 0 8px 24px -6px rgba(157,78,223,0.95), 0 0 20px -4px rgba(232,49,160,.5); }
.brand__avatar-img {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: url('/assets/brand/cover-chill.jpg') no-repeat 50% 26% / 150%;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* Header right-side actions */
.header__actions { display: flex; align-items: center; gap: 0.6rem; }
.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--cream); flex: 0 0 auto;
  transition: transform .4s var(--ease), background .35s, color .35s, border-color .35s; will-change: transform;
}
.icon-btn:hover { background: var(--cream); color: var(--ink); border-color: transparent; transform: translateY(-2px); }

.nav { display: flex; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.nav__link {
  font-size: 0.86rem; font-weight: 500; color: var(--muted); position: relative; padding: 4px 0;
  transition: color .3s;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav__link:hover { color: var(--cream); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link--accent { color: var(--gold-2); display: inline-flex; align-items: center; gap: .45em; }
.nav__link--accent:hover { color: var(--cream); }
.nav__link-tag {
  font-size: .56rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .15em .5em; border-radius: 100px;
  background: linear-gradient(105deg, rgba(239,215,154,.18), rgba(188,171,223,.18));
  color: var(--gold-2); border: 1px solid rgba(239,215,154,.3);
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  --bg: transparent;
  position: relative; display: inline-flex; align-items: center; gap: 0.6em;
  font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em;
  padding: 0.85em 1.5em; border-radius: 100px;
  transition: transform .35s var(--ease), box-shadow .4s, color .35s, background .35s, border-color .35s;
  white-space: nowrap; will-change: transform; isolation: isolate; overflow: hidden;
}
.btn svg { transition: transform .4s var(--ease); }
.btn--sm { padding: 0.62em 1.15em; font-size: 0.84rem; }
.btn--lg { padding: 1.02em 1.9em; font-size: 1rem; }

.btn--gold {
  color: #fff; background: var(--grad-gold);
  box-shadow: 0 8px 26px -8px rgba(157,78,223,0.6), 0 0 20px -6px rgba(91,141,239,0.5), inset 0 0 0 1px rgba(255,255,255,0.25);
}
.btn--gold::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(105deg, #8FB6FF, #A855F7 50%, #E0B6FF);
  transition: opacity .4s;
}
.btn--gold:hover { box-shadow: 0 16px 44px -8px rgba(157,78,223,0.8), 0 0 28px -4px rgba(91,141,239,0.65), inset 0 0 0 1px rgba(255,255,255,0.4); }
.btn--gold:hover::before { opacity: 1; }
.btn--gold:hover svg { transform: translate(2px, -2px); }

.btn--ghost {
  color: var(--cream); border: 1px solid var(--line-strong); background: rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--neon); color: var(--neon-2); background: rgba(157,78,223,0.08); }

.btn:active { transform: scale(0.97); }

/* mobile menu toggle */
.menu-toggle { display: none; width: 44px; height: 44px; position: relative; }
.menu-toggle span { position: absolute; left: 11px; width: 22px; height: 1.6px; background: var(--cream); transition: .35s var(--ease); }
.menu-toggle span:nth-child(1) { top: 18px; }
.menu-toggle span:nth-child(2) { top: 25px; }
.menu-toggle.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 9600;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(26,9,56,.98) 0%, rgba(6,3,15,.99) 70%),
    #06030F;
  display: flex; flex-direction: column;
  padding: clamp(74px, 12vh, 110px) clamp(20px, 5vw, 32px) clamp(28px, 4vh, 44px);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .45s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
/* When the drawer is open, hide the header AND the corner widgets so nothing
   bleeds through (the vinyl + Coo FAB sit at the page's z-index frontier). */
body:has(.drawer.is-open) .header,
body:has(.drawer.is-open) .vinyl,
body:has(.drawer.is-open) .chillai { opacity: 0; pointer-events: none; transition: opacity .25s ease; }

.drawer__nav { display: flex; flex-direction: column; gap: .9rem; text-align: left; max-width: 480px; margin: 0 auto; width: 100%; }
.drawer__nav a { font-family: var(--display); font-weight: 600; font-size: 1.45rem; color: var(--cream); padding: .35em 0; text-decoration: none; }
.drawer__nav .btn { font-family: var(--sans); font-size: 1rem; margin-top: 1rem; justify-content: center; }
/* Floating close button inside the drawer so users can always exit */
.drawer__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: rgba(20,12,30,.85); backdrop-filter: blur(10px);
  border: 1px solid rgba(199,125,255,.45);
  box-shadow: 0 0 16px rgba(157,78,223,.5);
}
.drawer__close:hover { background: rgba(157,78,223,.25); }
/* Branded title at the top of the drawer */
.drawer__title {
  display: flex; align-items: center; gap: .55em; margin: 0 auto 1rem;
  font: 700 .68rem/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .3em; text-transform: uppercase; color: var(--neon-2);
  text-shadow: 0 0 10px rgba(199,125,255,.55);
}
.drawer__title-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--neon-2);
  box-shadow: 0 0 8px rgba(199,125,255,.95); animation: pulse 1.6s infinite;
}

/* =============================================================
   HERO
   ============================================================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 96px; padding-bottom: 60px; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; width: 100%;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px; padding: 0.5em 1em; margin-bottom: 1.6rem;
  background: rgba(255,255,255,0.02);
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 0 rgba(169,189,154,0.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(169,189,154,0.55)} 70%{box-shadow:0 0 0 9px rgba(169,189,154,0)} 100%{box-shadow:0 0 0 0 rgba(169,189,154,0)} }

.hero__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3.2rem, 11vw, 8.2rem); line-height: 0.94; letter-spacing: -0.04em;
  margin-bottom: 1.6rem;
  color: #F4EEFF;
  text-shadow:
    0 0 3px  rgba(255,255,255,.5),
    0 0 18px rgba(199,125,255,.55),
    0 0 42px rgba(157,78,223,.4),
    0 0 90px rgba(91,141,239,.28);
}
/* The hero is THE sign — give it a slow neon buzz once it has landed. */
body.is-loaded .hero__title { animation: heroNeonFlicker 8s linear 1.6s infinite; }
@keyframes heroNeonFlicker {
  0%, 6%, 8%, 19%, 21%, 53%, 56%, 100% { opacity: 1; }
  7%  { opacity: .66; }
  20% { opacity: .82; }
  54% { opacity: .58; }
  55% { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  body.is-loaded .hero__title { animation: none; }
}
/* Clip-free reveal: NO overflow:hidden, so italic descenders (p, g, J) can
   never be clipped. Lines fade + rise into place instead of using a mask. */
.hero__title .line { display: block; overflow: visible; }
.hero__title .line__in { display: block; transform: translateY(0.45em); opacity: 0; will-change: transform, opacity; }
.no-js .hero__title .line__in { transform: none; opacity: 1; }
.hero__title em {
  font-style: italic; font-weight: 500;
  color: var(--cream); -webkit-text-fill-color: var(--cream);
}
body.is-loaded .hero__title .line__in { transition: transform 1.05s var(--ease-expo), opacity .9s var(--ease); transform: none; opacity: 1; }
body.is-loaded .hero__title .line:nth-child(2) .line__in { transition-delay: .08s; }
body.is-loaded .hero__title .line:nth-child(3) .line__in { transition-delay: .16s; }

.hero__lede { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--muted); max-width: 44ch; margin-bottom: 2rem; }
.hero__lede strong { color: var(--cream); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.2rem; }

.hero__ca { display: flex; align-items: center; gap: 0.8rem; }
.hero__ca-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-2); }
.ca-copy {
  display: inline-flex; align-items: center; gap: 0.6em;
  border: 1px dashed var(--line-strong); border-radius: 100px; padding: 0.5em 0.95em;
  font-family: var(--sans); font-size: 0.84rem; color: var(--pewter); transition: .35s var(--ease);
}
.ca-copy code { font-family: 'SF Mono', ui-monospace, monospace; letter-spacing: 0.02em; }
.ca-copy svg { color: var(--gold); transition: transform .35s var(--ease); }
.ca-copy:hover { border-color: var(--gold); color: var(--cream); border-style: solid; }
.ca-copy:hover svg { transform: scale(1.15); }

/* Hero media */
.hero__media { position: relative; display: grid; place-items: center; }
.hero__frame {
  position: relative; border-radius: 26px; overflow: hidden; z-index: 2;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(242,237,228,0.08);
  opacity: 0; transform: translateY(40px) scale(0.96);
  will-change: transform;
}
body.is-loaded .hero__frame { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease-expo); transition-delay: .25s; opacity: 1; transform: none; }
.hero__frame img { width: 100%; aspect-ratio: 1024/1008; object-fit: cover; }
.hero__halo {
  position: absolute; inset: -2px; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(60% 50% at 50% 35%, rgba(239,215,154,0.32), transparent 70%);
}
.hero__chip {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--ink-glass); backdrop-filter: blur(10px); border: 1px solid var(--line);
  padding: 0.5em 0.9em; border-radius: 100px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pewter);
}
.hero__chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.hero__ring {
  position: absolute; width: 116%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%;
  z-index: 1; animation: spin 60s linear infinite;
}
.hero__ring::before { content: "✦"; position: absolute; top: -10px; left: 50%; color: var(--gold); font-size: 0.8rem; }
@keyframes spin { to { transform: rotate(360deg); } }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.7em;
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted-2);
}
.scroll-cue i { width: 1px; height: 42px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: var(--gold); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0%{transform:translateY(-100%)} 100%{transform:translateY(280%)} }

/* =============================================================
   MARQUEE
   ============================================================= */
.marquee {
  border-block: 1px solid var(--line); padding-block: 1.1rem; overflow: hidden;
  background: linear-gradient(90deg, rgba(188,171,223,0.05), rgba(114,128,190,0.05));
  white-space: nowrap;
}
.marquee__track { display: inline-flex; align-items: center; gap: 2.2rem; will-change: transform; }
.marquee__track span {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 3vw, 2.1rem);
  color: var(--cream); opacity: 0.92;
}
.marquee__track .star { color: var(--gold); font-style: normal; font-size: 1rem; opacity: 0.8; }

/* =============================================================
   MANIFESTO - scroll-linked text fill
   ============================================================= */
/* Subtle baroque damask whispers behind premium sections — recolored to gold,
   masked to fade at the edges so it never fights the type. */
.manifesto, .nft { position: relative; }
.manifesto::before, .nft::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url('/assets/velvet-damask.png');
  background-repeat: repeat; background-size: clamp(180px, 22vw, 320px);
  opacity: .035;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000, transparent 80%);
          mask-image: radial-gradient(80% 70% at 50% 50%, #000, transparent 80%);
}
.manifesto > .container, .nft > .container { position: relative; z-index: 1; }

.manifesto { text-align: left; }
.manifesto__text {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 4.2vw, 3.5rem); line-height: 1.28; letter-spacing: -0.015em;
  max-width: 18em; margin-block: 0.4em 1.2em;
}
.manifesto__text .w { color: rgba(242,237,228,0.13); transition: color .5s var(--ease); display: inline-block; }
.manifesto__text .w.on { color: var(--cream); }
.manifesto__sign { font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); }

/* =============================================================
   STAND OUT
   ============================================================= */
.standout__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.frame { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.75), inset 0 0 0 1px var(--line); }
.frame img { width: 100%; }
.frame--wide img { aspect-ratio: 1280/426; object-fit: cover; }

/* Image reveal - slide up into frame.
   NOTE: we deliberately hide via overflow + transform (not clip-path).
   clip-path collapses the box to zero area, which makes IntersectionObserver
   report 0% intersection and the reveal would never trigger. */
.reveal-img { overflow: hidden; }
.reveal-img img { transform: translateY(102%) scale(1.04); transition: transform 1.3s var(--ease-expo); will-change: transform; }
.reveal-img.is-in img { transform: translateY(0) scale(1); }

.standout__copy .h2 { margin-block: 0.4em 0.8em; }
.stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.4rem; }
.stat { display: flex; flex-direction: column; gap: 0.2em; }
.stat__num {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }

/* =============================================================
   LIFESTYLE - horizontal scroll
   ============================================================= */
.lifestyle { padding-top: clamp(80px, 13vh, 170px); overflow: clip; }
.lifestyle__intro { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.hscroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll__track { display: flex; gap: clamp(1rem, 2vw, 1.6rem); padding-inline: var(--pad); width: max-content; }

/* desktop pinned mode set via JS */
.hscroll--pin { overflow: hidden; position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.hscroll--pin .hscroll__track { will-change: transform; }

.card-life {
  flex: 0 0 auto; width: min(78vw, 380px); height: min(74vh, 560px);
  border-radius: var(--radius); overflow: hidden; position: relative;
  scroll-snap-align: center; background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; justify-content: flex-end;
}
.card-life__media { position: absolute; inset: 0; z-index: 0; }
.card-life__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.card-life::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(16,14,23,0.92) 8%, rgba(16,14,23,0.1) 60%, transparent); }
.card-life:hover .card-life__media img { transform: scale(1.06); }
.card-life__body { position: relative; z-index: 2; padding: clamp(1.4rem, 3vw, 2rem); }
.card-life__no { font-family: 'SF Mono', ui-monospace, monospace; font-size: 0.78rem; color: var(--gold); letter-spacing: 0.1em; }
.card-life__body h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 0.3em; }
.card-life__body p { color: var(--muted); font-size: 0.95rem; margin-top: 0.5em; max-width: 30ch; }

.card-life--quote { background: var(--grad-royal); }
.card-life--quote::after { display: none; }
.card-life__body--center { display: grid; place-content: center; height: 100%; text-align: center; }
.card-life--quote blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.35; color: var(--ink); font-weight: 500; }
.card-life--quote cite { display: block; margin-top: 1.2rem; font-style: normal; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(16,14,23,0.6); }

/* =============================================================
   NFT MINT
   Hand-tuned: Hermès meets a Series-A pitch deck.
   The whole section is rarity-tier color-coded.
   ============================================================= */
:root {
  --rar-common:    #A8A2B6;
  --rar-uncommon:  #A9BD9A;
  --rar-rare:      #7280BE;
  --rar-epic:      #BCABDF;
  --rar-legendary: #EFD79A;
}

.nft { position: relative; }
.nft__head { max-width: 64ch; margin-bottom: clamp(2.8rem, 6vw, 4.6rem); }
.nft__head .h2 { margin-block: 0.3em 0.7em; }
.nft__head .lede { max-width: 56ch; }

.h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.08; letter-spacing: -0.02em;
  color: #F2EBFF;
  text-shadow:
    0 0 2px  rgba(255,255,255,.4),
    0 0 12px rgba(199,125,255,.45),
    0 0 24px rgba(157,78,223,.3);
}

/* ---------- Mint widget ---------- */
.mint {
  position: relative; display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  background:
    linear-gradient(160deg, rgba(188,171,223,0.06), rgba(114,128,190,0.04) 50%, rgba(217,182,110,0.06)),
    radial-gradient(140% 80% at 0% 0%, rgba(239,215,154,0.05), transparent 60%),
    var(--ink-1);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.02);
  margin-bottom: clamp(3.2rem, 6vw, 5.4rem);
  overflow: hidden; isolation: isolate;
}
.mint::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from 140deg at 50% 50%,
    rgba(157,78,223,0) 0%, rgba(157,78,223,0.55) 12%, rgba(110,46,159,0.4) 22%,
    rgba(229,94,45,0) 40%, rgba(157,78,223,0) 70%, rgba(157,78,223,0.45) 88%, rgba(157,78,223,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px; opacity: 0.32;
  animation: mintHaloBreathe 9s ease-in-out infinite;
}
@keyframes mintHaloBreathe {
  0%, 100% { opacity: 0.22; }
  50%      { opacity: 0.42; }
}

/* Museum-grade corner brackets — thin gold L-shapes at the four corners of
   the card. Static, elegant, signal craft over motion. */
.mint__corner {
  position: absolute; width: 28px; height: 28px; pointer-events: none; z-index: 1;
  opacity: 0.55;
}
.mint__corner::before, .mint__corner::after {
  content: ""; position: absolute; background: linear-gradient(90deg, rgba(157,78,223,0) 0%, rgba(199,125,255,0.95) 100%);
  box-shadow: 0 0 6px rgba(157,78,223,0.6);
}
.mint__corner::before { left: 0; top: 0; width: 100%; height: 1px; }
.mint__corner::after  { left: 0; top: 0; width: 1px; height: 100%; }
.mint__corner--tl { top: 14px;    left: 14px;    }
.mint__corner--tr { top: 14px;    right: 14px;   transform: scaleX(-1); }
.mint__corner--bl { bottom: 14px; left: 14px;    transform: scaleY(-1); }
.mint__corner--br { bottom: 14px; right: 14px;   transform: scale(-1, -1); }

.mint__media { position: relative; display: grid; place-items: center; min-height: 320px; }
.mint__preview {
  position: relative; border-radius: 22px; overflow: hidden; z-index: 2;
  width: 100%; max-width: 460px; aspect-ratio: 1;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(242,237,228,0.08);
  transition: transform .9s var(--ease);
}
.mint__preview img { width: 100%; height: 100%; object-fit: cover; }

/* Soft gold aura behind the pigeon. Replaces the old rotating text ring with
   a still, breathing halo — what a proper auction-house spotlight feels like. */
.mint__preview-halo {
  position: absolute; inset: -18%; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(50% 40% at 50% 42%, rgba(157,78,223,0.55), transparent 70%),
    radial-gradient(80% 70% at 50% 50%, rgba(110,46,159,0.3), transparent 70%);
  filter: blur(2px);
  animation: mintAuraBreathe 7s ease-in-out infinite;
}
@keyframes mintAuraBreathe {
  0%, 100% { transform: scale(1);     opacity: 0.85; }
  50%      { transform: scale(1.04);  opacity: 1;    }
}

.mint__preview-chip {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--ink-glass); backdrop-filter: blur(12px); border: 1px solid var(--line);
  padding: 0.5em 0.9em; border-radius: 100px; font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--pewter);
}
.mint__preview-chip .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
  box-shadow: 0 0 0 0 rgba(169,189,154,0.55); animation: pulse 2.4s infinite;
}

/* Drifting gold motes — a small constellation of slow-rising particles around
   the pigeon. Six dots, each on its own slow drift loop with a different speed
   and starting offset so the field never repeats visibly. Tasteful, not noisy. */
.mint__motes {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  border-radius: 22px;
}
.mint__mote {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, #ECDBFF 0%, #C77DFF 50%, transparent 75%);
  box-shadow: 0 0 8px rgba(157,78,223,0.75);
  opacity: 0;
  animation: moteDrift var(--mote-dur, 14s) linear infinite;
  animation-delay: var(--mote-delay, 0s);
  left: var(--mote-x, 50%); top: 110%;
}
.mint__mote--lg { width: 4px; height: 4px; box-shadow: 0 0 14px rgba(157,78,223,0.9); }
@keyframes moteDrift {
  0%   { transform: translateY(0)       translateX(0);                                   opacity: 0; }
  10%  {                                                                                  opacity: 1; }
  50%  { transform: translateY(-55%)    translateX(calc(var(--mote-sway, 18px) * -1));   opacity: 0.9; }
  90%  {                                                                                  opacity: 0.6; }
  100% { transform: translateY(-115%)   translateX(var(--mote-sway, 18px));              opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mint::before, .mint__preview-halo, .mint__mote { animation: none; }
}

.mint__panel { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }

.mint__statusrow {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.mint__badge {
  display: inline-flex; align-items: center; gap: 0.6em;
  border: 1px solid var(--line-strong); padding: 0.45em 0.95em; border-radius: 100px;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pewter); background: rgba(255,255,255,0.02);
}
.mint__badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(217,182,110,0.55); animation: pulse 2.4s infinite;
}
.mint[data-mint-status="live"] .mint__badge { color: var(--cream); border-color: rgba(169,189,154,0.45); background: rgba(169,189,154,0.07); }
.mint[data-mint-status="live"] .mint__badge-dot { background: var(--sage); }
.mint[data-mint-status="ended"] .mint__badge-dot { background: var(--muted-2); animation: none; }

.mint__counter {
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 0.84rem; color: var(--muted);
}
.mint__counter strong { color: var(--gold); font-variant-numeric: tabular-nums; }

.mint__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.04; letter-spacing: -0.02em;
  color: #F2EBFF;
  text-shadow: 0 0 2px rgba(255,255,255,.4), 0 0 12px rgba(199,125,255,.45), 0 0 26px rgba(157,78,223,.3);
}
.mint__lede { color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 48ch; }
.mint__lede strong { color: var(--cream); font-weight: 600; }

.mint__progress { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.2rem; }
.mint__progress-track {
  height: 6px; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 100px; overflow: hidden;
}
.mint__progress-track i {
  display: block; height: 100%; width: 0%;
  background: var(--grad-gold);
  box-shadow: 0 0 14px rgba(217,182,110,0.55);
  border-radius: inherit;
  transition: width 1.4s var(--ease-expo);
}
.mint__progress-meta {
  display: flex; justify-content: space-between;
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 0.78rem; color: var(--muted-2); letter-spacing: 0.04em;
}
.mint__progress-meta :first-child { color: var(--gold); }

.mint__pricing {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  margin-top: 0.4rem;
}
.mint__price-cell {
  display: flex; flex-direction: column; gap: 0.25em;
  padding: 0.95rem 1rem; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.012);
}
.mint__price-label {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2);
}
.mint__price-value {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mint__price-value em { font-style: normal; color: var(--gold); font-size: 0.78em; letter-spacing: 0.02em; }
.mint__price-sub { font-size: 0.74rem; color: var(--muted-2); }
.mint__price-cell:first-child {
  background: linear-gradient(160deg, rgba(217,182,110,0.10), rgba(217,182,110,0.02));
  border-color: rgba(217,182,110,0.32);
}
.mint__price-cell:first-child .mint__price-value { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.mint__controls {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  margin-top: 0.5rem;
}

.qty {
  display: inline-flex; align-items: center; height: 52px;
  border: 1px solid var(--line-strong); border-radius: 100px;
  background: rgba(255,255,255,0.02); padding: 4px;
}
.qty__btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream); font-size: 1.2rem; font-weight: 500;
  transition: background .3s, color .3s, transform .25s var(--ease);
}
.qty__btn:hover { background: var(--cream); color: var(--ink); }
.qty__btn:active { transform: scale(0.92); }
.qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qty__btn:disabled:hover { background: transparent; color: var(--cream); }
.qty__input {
  width: 48px; height: 42px; text-align: center;
  background: none; border: none; outline: none; color: var(--cream);
  font-family: var(--serif); font-weight: 500; font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.mint__connect { flex: 0 0 auto; }
.mint__connect.is-connected {
  border-color: var(--sage); color: var(--sage);
  background: rgba(169,189,154,0.07);
}
.mint__cta { flex: 1 1 auto; justify-content: center; min-width: 200px; }
.mint__cta:disabled {
  background: var(--ink-2); color: var(--muted-2); cursor: not-allowed;
  box-shadow: none; transform: none;
  border: 1px solid var(--line);
}
.mint__cta:disabled::before { display: none; }

.mint__total {
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 0.82rem; color: var(--muted); letter-spacing: 0.04em;
}
.mint__total strong { color: var(--gold); font-weight: 600; }

.mint__hint {
  font-size: 0.85rem; color: var(--muted); line-height: 1.5;
  padding: 0.85rem 1rem; border-radius: 14px;
  border: 1px dashed var(--line-strong);
  background: rgba(217,182,110,0.025);
}
.mint__hint a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.mint__hint a:hover { color: var(--gold-2); }

.mint__secondary {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-top: 0.4rem; border-top: 1px solid var(--line); margin-top: 0.4rem;
}
.mint__market {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.5em 0.95em; border-radius: 100px;
  border: 1px solid var(--line); font-size: 0.82rem; color: var(--muted);
  transition: border-color .3s, color .3s, background .3s;
}
.mint__market:hover { border-color: var(--gold); color: var(--cream); background: rgba(217,182,110,0.04); }
.mint__market-icon { display: inline-grid; place-items: center; color: var(--gold); }

/* ---------- Sample grid ---------- */
.nft__sample-head { max-width: 60ch; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.nft__sample-head .h3 { margin-block: 0.3em 0.5em; }
.nft__sample-head .lede { font-size: 1rem; }

.nft-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.nft-card {
  position: relative; aspect-ratio: 3/4; min-height: 280px;
  border-radius: 18px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line);
  transition: transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.nft-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 30px 60px -28px rgba(0,0,0,0.8); }

.nft-card__bg {
  position: absolute; inset: 0; z-index: 0;
  /* Each card sets --bg (image), --bp (background-position) and --tint
     (filter chain) so even cards sharing the same source photo look
     visually distinct — no more "four of the same shit". */
  background: var(--bg) var(--bp, 50% 30%) / cover no-repeat, var(--ink-2);
  transition: transform 1.1s var(--ease);
  filter: var(--tint, saturate(1.1));
}
.nft-card:hover .nft-card__bg { transform: scale(1.08); }

.nft-card__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 30%, rgba(16,14,23,0.78) 76%, rgba(16,14,23,0.96) 100%);
}

.nft-card__no {
  position: absolute; top: 12px; left: 14px; z-index: 3;
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 0.7rem; letter-spacing: 0.1em; color: rgba(242,237,228,0.7);
  padding: 0.3em 0.7em; border-radius: 100px;
  background: rgba(16,14,23,0.6); backdrop-filter: blur(8px);
  border: 1px solid var(--line);
}

.nft-card__body {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1rem 1.1rem;
}
.nft-card__name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.1; letter-spacing: -0.01em;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.nft-card__rar {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.34em 0.85em; border-radius: 100px;
  border: 1px solid currentColor; background: rgba(16,14,23,0.4); backdrop-filter: blur(8px);
}
.nft-card__quote {
  font-size: 0.74rem; color: var(--muted); line-height: 1.45;
  margin-top: 0.55rem; font-style: italic;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s, margin-top .4s;
}
.nft-card:hover .nft-card__quote { max-height: 4em; opacity: 1; }

.rar--common    { color: var(--rar-common); }
.rar--uncommon  { color: var(--rar-uncommon); }
.rar--rare      { color: var(--rar-rare); }
.rar--epic      { color: var(--rar-epic); }
.rar--legendary { color: var(--rar-legendary); }

.nft-card--legendary { box-shadow: 0 0 0 1px rgba(239,215,154,0.35), 0 30px 60px -28px rgba(239,215,154,0.3); }
.nft-card--legendary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(135deg, rgba(239,215,154,0.18), transparent 50%);
  mix-blend-mode: screen;
}
.nft-card--epic       { box-shadow: 0 0 0 1px rgba(188,171,223,0.22); }
.nft-card--rare       { box-shadow: 0 0 0 1px rgba(114,128,190,0.20); }
.nft-card--uncommon   { box-shadow: 0 0 0 1px rgba(169,189,154,0.18); }

/* ---------- Rarity legend strip (sits above the sample card grid) ---------- */
/* Five chips, one per tier, with a glowing dot, the tier name, and the live
   Genesis count. The dot colour comes from the same --rar-* variables that
   power the card glow + the rarity label on each card, so the legend reads
   as a key for the cards below it. */
.rarity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.2vw, 0.85rem);
  margin: clamp(1.4rem, 3vw, 2rem) 0 clamp(1.6rem, 3vw, 2.2rem);
  padding: 0.4rem;
  border-radius: 999px;
}
.rarity-legend__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem 0.5rem 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft, #cdcad6);
  white-space: nowrap;
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}
.rarity-legend__chip:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.05);
}
.rarity-legend__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dot, #888);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 12px var(--glow, rgba(0,0,0,0));
  flex-shrink: 0;
}
.rarity-legend__tier { font-weight: 600; color: var(--dot, #cdcad6); }
.rarity-legend__count {
  font-feature-settings: "tnum";
  color: var(--ink-mute, #9a96a8);
  padding-left: 0.25rem;
  border-left: 1px solid rgba(255,255,255,0.08);
  margin-left: 0.05rem;
}
.rarity-legend__chip--legendary { --dot: var(--rar-legendary); --glow: rgba(239,215,154,0.45); border-color: rgba(239,215,154,0.35); }
.rarity-legend__chip--epic      { --dot: var(--rar-epic);      --glow: rgba(188,171,223,0.35); border-color: rgba(188,171,223,0.25); }
.rarity-legend__chip--rare      { --dot: var(--rar-rare);      --glow: rgba(114,128,190,0.30); border-color: rgba(114,128,190,0.22); }
.rarity-legend__chip--uncommon  { --dot: var(--rar-uncommon);  --glow: rgba(169,189,154,0.28); border-color: rgba(169,189,154,0.20); }
.rarity-legend__chip--common    { --dot: var(--rar-common);    --glow: rgba(168,162,182,0.22); border-color: rgba(168,162,182,0.18); }

/* ---------- Mint "how it works" steps ---------- */
.mint__steps {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: grid; gap: 0.5rem;
}
.mint__step {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.mint__step-no {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700;
  color: #12101a;
  background: var(--grad-text, linear-gradient(135deg,#EFD79A,#BCABDF));
  box-shadow: 0 0 12px rgba(239,215,154,0.25);
}
.mint__step-body { display: flex; flex-direction: column; gap: 1px; }
.mint__step-body strong { font-size: 0.86rem; color: var(--ink, #f2ede4); letter-spacing: 0.01em; }
.mint__step-body span { font-size: 0.78rem; color: var(--muted-2, #9a96a8); line-height: 1.35; }

/* ---------- Mint money-flow strip (live burned / treasury) ---------- */
.mint__flow {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem; margin: 0.9rem 0 0.2rem;
}
.mint__flow-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0.7rem 0.8rem; border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(199,125,255,0.18);
  box-shadow: inset 0 0 18px rgba(157,78,223,.05);
}
.mint__flow-num {
  /* WAS color: var(--ink, ...) which resolves to #100E17 (dark bg) and made
     MINTED nearly invisible. Bright cream now, with a faint violet glow so
     it feels like part of the electric trio next to burn + treasury. */
  font-family: var(--serif, Fraunces), serif;
  font-size: clamp(1.2rem, 2.6vw, 1.65rem); font-weight: 700;
  color: var(--cream);
  text-shadow: 0 0 14px rgba(199,125,255,0.35);
  font-feature-settings: "tnum"; line-height: 1.1;
  letter-spacing: -0.005em;
}
.mint__flow-label {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242,237,228,0.55);
}
/* Burn → hot magenta (deflationary, on-brand). Treasury → electric blue (money). */
.mint__flow-cell--burn .mint__flow-num {
  color: #FF4DB8;
  text-shadow: 0 0 16px rgba(232,49,160,0.55);
}
.mint__flow-cell--burn { border-color: rgba(255,77,184,0.32); box-shadow: inset 0 0 18px rgba(232,49,160,.08); }
.mint__flow-cell--treasury .mint__flow-num {
  color: #8FB6FF;
  text-shadow: 0 0 16px rgba(91,141,239,0.55);
}
.mint__flow-cell--treasury { border-color: rgba(143,182,255,0.32); box-shadow: inset 0 0 18px rgba(91,141,239,.08); }
@media (max-width: 540px) {
  .mint__flow { grid-template-columns: 1fr; }
  .mint__flow-cell { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

/* ---------- Mint button: live "working" state ---------- */
/* While a mint is in flight the CTA gets an animated sheen so the user never
   sees a frozen button — it reads as actively processing. */
.mint__cta.is-working {
  position: relative; overflow: hidden;
  cursor: progress;
}
.mint__cta.is-working::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.45) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: mintSheen 1.25s ease-in-out infinite;
}
@keyframes mintSheen { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .mint__cta.is-working::after { animation: none; opacity: 0.25; }
}

/* ---------- Rarity tier table ---------- */
.rarity {
  margin-block: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
}
.rarity__head { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.rarity__head .h3 { margin-top: 0.3em; }
.rarity__rows { display: flex; flex-direction: column; gap: 0.7rem; }
.rarity__row {
  display: grid;
  grid-template-columns: 130px 60px 1fr 110px;
  gap: 1rem; align-items: center;
}
.rarity__pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.5em 0.9em; border-radius: 100px;
  border: 1px solid currentColor;
}
.rarity__count {
  font-family: var(--serif); font-weight: 500; font-size: 1.1rem;
  color: var(--cream); font-variant-numeric: tabular-nums;
}
.rarity__bar {
  height: 4px; background: var(--ink-3); border-radius: 100px; overflow: hidden;
  position: relative;
}
.rarity__bar i {
  display: block; width: var(--w); height: 100%;
  background: var(--grad-gold);
  border-radius: inherit;
  animation: barGrow 1.6s var(--ease-expo) both;
}
@keyframes barGrow { from { width: 0; } }
.rarity__qty { font-size: 0.85rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Perks ---------- */
.perks { margin-block: clamp(3rem, 6vw, 5rem); }
.perks__head { max-width: 60ch; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.perks__head .h3 { margin-top: 0.3em; }
.perks__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.3rem);
}
.perk {
  padding: clamp(1.4rem, 2.4vw, 1.8rem);
  border: 1px solid var(--line); border-radius: 18px;
  background: rgba(255,255,255,0.012);
  transition: transform .5s var(--ease), border-color .5s, background .5s;
}
.perk:hover { transform: translateY(-5px); border-color: var(--gold); background: rgba(217,182,110,0.04); }
.perk__no {
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.2em; color: var(--gold); display: block;
  margin-bottom: 0.9rem;
}
.perk h4 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.perk p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; }

/* ---------- FAQ ---------- */
.faq { margin-top: clamp(3rem, 6vw, 5rem); }
.faq__head { max-width: 60ch; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.faq__head .h3 { margin-top: 0.3em; }
.faq__list { display: flex; flex-direction: column; gap: 0.55rem; }
.faq__item {
  border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255,255,255,0.012);
  transition: border-color .4s, background .4s;
  overflow: hidden;
}
.faq__item[open] { border-color: var(--line-strong); background: rgba(255,255,255,0.025); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  cursor: pointer; list-style: none;
  letter-spacing: -0.005em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 1.5px 100% no-repeat;
  transition: transform .4s var(--ease);
}
.faq__item[open] summary::after {
  transform: rotate(135deg);
}
.faq__item p {
  padding: 0 1.3rem 1.2rem;
  color: var(--muted); font-size: 0.95rem; line-height: 1.65; max-width: 70ch;
}
.faq__item p strong { color: var(--cream); }
.faq__item p a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.faq__item p a:hover { color: var(--gold-2); }

/* ---------- NFT responsive ---------- */
@media (max-width: 1080px) {
  .mint { grid-template-columns: 1fr; }
  .mint__media { max-width: 440px; justify-self: center; }
  .mint__pricing { grid-template-columns: repeat(3, 1fr); }
  .nft-grid { grid-template-columns: repeat(3, 1fr); }
  .perks__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .nft-grid { grid-template-columns: repeat(2, 1fr); }
  .rarity__row { grid-template-columns: 110px 50px 1fr; }
  .rarity__qty { display: none; }
}
@media (max-width: 540px) {
  .mint { padding: 1.2rem; }
  .mint__pricing { grid-template-columns: 1fr; }
  .mint__controls { flex-direction: column; align-items: stretch; }
  .qty { align-self: center; }
  .mint__connect, .mint__cta { width: 100%; justify-content: center; }
  .perks__grid { grid-template-columns: 1fr; }
  .nft-grid { gap: 0.5rem; }
  .nft-card { min-height: 230px; }
}

/* =============================================================
   TOKENOMICS
   ============================================================= */
.tokenomics__head { max-width: 60ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.tokenomics__head .h2 { margin-block: 0.4em 0.7em; }
.tok-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 1.6vw, 1.2rem); }
.tok-card {
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem); position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 0.5em; min-height: 190px; justify-content: space-between;
  transition: transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.tok-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-gold);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
.tok-card.is-in::before, .tok-card:hover::before { transform: scaleX(1); }
.tok-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 24px 50px -28px rgba(0,0,0,0.8); }
.tok-card__label { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); }
.tok-card__value { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.tok-card__value--sm { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.tok-card__sub { font-size: 0.84rem; color: var(--muted); }
.tok-card--feature { grid-column: span 1; background: linear-gradient(160deg, rgba(188,171,223,0.14), rgba(114,128,190,0.08)); border-color: rgba(188,171,223,0.25); }
.tok-card--feature .tok-card__value { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.tok-bar { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.tok-bar__row { display: flex; justify-content: space-between; font-size: 0.86rem; color: var(--muted); margin-bottom: 0.7em; }
.tok-bar__row span:last-child { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.tok-bar__track { height: 8px; background: var(--ink-2); border-radius: 100px; overflow: hidden; border: 1px solid var(--line); }
.tok-bar__track i { display: block; height: 100%; width: 0%; background: var(--grad-gold); border-radius: 100px; transition: width 1.6s var(--ease-expo); }

/* =============================================================
   HOW TO BUY
   ============================================================= */
.buy .h2 { margin-block: 0.3em 2.6rem; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); counter-reset: step; }
.step {
  position: relative; padding: clamp(1.6rem, 2.6vw, 2rem) clamp(1.4rem, 2vw, 1.7rem);
  border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.015);
  transition: transform .5s var(--ease), background .5s, border-color .5s;
}
.step:hover { transform: translateY(-6px); border-color: var(--line-strong); background: rgba(255,255,255,0.03); }
.step__no { font-family: var(--serif); font-size: 2.6rem; color: transparent; -webkit-text-stroke: 1px var(--gold); display: block; line-height: 1; margin-bottom: 0.6rem; opacity: 0.85; }
.step h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin-bottom: 0.5rem; }
.step p { color: var(--muted); font-size: 0.92rem; }
.step strong { color: var(--cream); font-weight: 600; }
.buy__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* Where to buy - venue links */
.venues { margin-top: clamp(2.6rem, 5vw, 3.8rem); }
.venues__label { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1.1rem; }
.venues__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.7rem, 1.4vw, 1.1rem); }
.venue {
  display: flex; flex-direction: column; gap: 0.3em; position: relative; overflow: hidden;
  padding: clamp(1.1rem, 2vw, 1.5rem); border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255,255,255,0.015); transition: transform .45s var(--ease), border-color .45s, background .45s;
}
.venue::after { content: "↗"; position: absolute; top: 1rem; right: 1.1rem; color: var(--gold); opacity: 0; transform: translate(-4px,4px); transition: .45s var(--ease); }
.venue:hover { transform: translateY(-5px); border-color: var(--gold); background: rgba(217,182,110,0.05); }
.venue:hover::after { opacity: 1; transform: none; }
.venue__name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.venue__tag { font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted-2); }
.venue--x:hover { border-color: var(--lavender); background: rgba(188,171,223,0.07); }
.venue--x:hover::after { color: var(--lavender); }

/* =============================================================
   ROADMAP - timeline
   ============================================================= */
.roadmap .h2 { margin-block: 0.3em clamp(2.8rem, 6vw, 4.4rem); }
.timeline { position: relative; padding-left: clamp(28px, 5vw, 60px); }
.timeline__line { position: absolute; left: clamp(7px, 1.5vw, 14px); top: 6px; bottom: 6px; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.timeline__line i { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--grad-gold); box-shadow: 0 0 12px rgba(217,182,110,0.5); }
.phase { position: relative; padding-bottom: clamp(2.4rem, 5vw, 4rem); }
.phase:last-child { padding-bottom: 0; }
.phase__dot {
  position: absolute; left: calc(-1 * clamp(28px, 5vw, 60px) + clamp(2px, 1.1vw, 9px)); top: 6px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--pewter-deep);
  transition: border-color .5s, background .5s, box-shadow .5s;
}
.phase.is-in .phase__dot { border-color: var(--neon); background: var(--neon); box-shadow: 0 0 0 5px rgba(157,78,223,0.16); }
.phase__dot--final { width: 16px; height: 16px; }
/* Completed phases — lit dot + electric tag with a small live pip */
.phase--done .phase__dot { border-color: var(--neon-2); background: var(--neon-2); box-shadow: 0 0 0 5px rgba(199,125,255,0.18), 0 0 14px rgba(157,78,223,0.7); }
.phase__tag { font-family: 'SF Mono', ui-monospace, monospace; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon-2); }
.phase__tag--done { display: inline-flex; align-items: center; gap: .5em; color: var(--neon-2); }
.phase__tag--done::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neon-2); box-shadow: 0 0 8px rgba(199,125,255,.9); }
.phase__body h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.2rem); margin-block: 0.3em 0.4em; }
.phase__body p { color: var(--muted); max-width: 56ch; }

/* =============================================================
   CTA
   ============================================================= */
.cta { position: relative; overflow: hidden; text-align: center; }
.cta__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0.22; filter: saturate(115%); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 80% at 50% 50%, rgba(16,14,23,0.55), var(--ink) 88%); }
.cta__inner { position: relative; z-index: 2; display: grid; place-items: center; }
.cta__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 7vw, 5.4rem); line-height: 1.02; letter-spacing: -0.025em; }
.cta__lede { color: var(--muted); font-size: 1.1rem; margin-block: 1.2rem 2.4rem; }

.ca-block { width: min(680px, 100%); margin-bottom: 2.2rem; }
.ca-block__label { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.8rem; }
.ca-block__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  border: 1px solid var(--line-strong); border-radius: 100px; padding: 0.7em 0.8em 0.7em 1.4em;
  background: var(--ink-glass); backdrop-filter: blur(10px); transition: border-color .35s, box-shadow .35s;
}
.ca-block__btn code { font-family: 'SF Mono', ui-monospace, monospace; font-size: clamp(0.7rem, 2.2vw, 0.95rem); color: var(--pewter); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-block__btn:hover { border-color: var(--gold); box-shadow: 0 0 30px -10px rgba(217,182,110,0.4); }
.ca-block__copy { display: inline-flex; align-items: center; gap: 0.5em; flex: 0 0 auto; background: var(--grad-gold); color: #2A2113; font-weight: 600; font-size: 0.84rem; padding: 0.55em 1.1em; border-radius: 100px; }

/* =============================================================
   FOOTER
   ============================================================= */
.footer { border-top: 1px solid var(--line); padding-top: clamp(48px, 7vw, 80px); padding-bottom: 36px; position: relative; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 2.5rem; align-items: start; padding-bottom: clamp(36px, 5vw, 56px); }
.footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; }
.footer__brand .brand__text { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.footer__brand .brand__text em { font-style: italic; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.footer__tag { flex-basis: 100%; color: var(--muted-2); font-size: 0.9rem; margin-top: 0.4rem; }
.footer__links { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__links a { color: var(--muted); font-size: 0.92rem; transition: color .3s; width: fit-content; }
.footer__links a:hover { color: var(--gold-2); }
.footer__social { display: flex; gap: 0.7rem; }
.footer__social a {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); color: var(--muted); transition: .4s var(--ease); will-change: transform;
}
.footer__social a:hover { color: var(--ink); background: var(--grad-gold); border-color: transparent; transform: translateY(-3px); }

.footer__bottom { display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid var(--line); padding-top: 28px; }
.footer__bottom p { font-size: 0.82rem; color: var(--muted-2); }
.footer__disclaimer { max-width: 90ch; line-height: 1.7; }

/* =============================================================
   TOAST
   ============================================================= */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 220%);
  z-index: 9600; background: var(--cream); color: var(--ink); font-weight: 600; font-size: 0.9rem;
  padding: 0.8em 1.4em; border-radius: 100px; box-shadow: 0 20px 50px -16px rgba(0,0,0,0.6);
  transition: transform .55s var(--ease), opacity .4s, visibility .55s;
  white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* =============================================================
   REVEAL - base states (JS adds .is-in)
   ============================================================= */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1.1s var(--ease-expo); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1080px) {
  .tok-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .venues__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .header__cta { display: none; }
  .menu-toggle { display: block; }

  .hero { padding-top: 110px; }
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__media { order: -1; max-width: 440px; margin-inline: auto; }
  .hero__title { font-size: clamp(3.4rem, 18vw, 6rem); }
  .scroll-cue { display: none; }

  .standout__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer__social { gap: 0.6rem; }
}

@media (max-width: 540px) {
  .tok-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .venues__list { grid-template-columns: 1fr; }
  .stats { gap: 1.6rem 2.2rem; }
  .btn--lg { width: 100%; justify-content: center; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .buy__cta, .cta__actions { width: 100%; }
  .buy__cta .btn { width: 100%; justify-content: center; }

  /* Hide the decorative rotating ring so nothing can bleed past the viewport */
  .hero__ring { display: none; }

  /* Contract pill: show the full address, stacked, with a big tap target */
  .ca-block__btn { flex-direction: column; align-items: stretch; gap: 0.8rem; border-radius: 18px; padding: 1rem; }
  .ca-block__btn code { white-space: normal; word-break: break-all; text-align: center; line-height: 1.5; }
  .ca-block__copy { justify-content: center; padding: 0.7em 1.1em; }

  .hero__ca { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .blob { animation: none; }
  [data-reveal], .hero__frame, .hero__title .line__in { opacity: 1 !important; transform: none !important; }
  .reveal-img { clip-path: none !important; }
  .reveal-img img { transform: none !important; }
  .cursor { display: none !important; }
  body.has-cursor { cursor: auto !important; }
}

/* =============================================================
   FLOCK MAP — live world map of game players
   ============================================================= */
.flock-map { position: relative; }
.flock-map .h2 { margin-block: .4em .7em; }
.flock-map__board {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(26,22,38,.85), rgba(16,14,23,.95));
  border: 1px solid var(--line-strong);
  box-shadow: 0 50px 120px -40px #000, inset 0 0 0 1px rgba(239,215,154,.06);
}
.flock-map__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  padding-bottom: clamp(1.4rem, 3vw, 1.8rem);
  border-bottom: 1px solid var(--line);
}
.flock-stat__num {
  display: block;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  margin-bottom: .35em;
}
.flock-stat__label {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2);
}

.flock-map__canvas {
  position: relative;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(58,49,72,.4), transparent 60%),
    linear-gradient(180deg, #0d0a14 0%, #060409 100%);
  border: 1px solid var(--line);
  aspect-ratio: 2 / 1;
}
.flock-map__canvas svg { width: 100%; height: 100%; display: block; }

/* Dots — gold core, pulsing outer ring */
.flock-svg-core {
  fill: #C77DFF;
  filter: drop-shadow(0 0 8px rgba(199,125,255,.95)) drop-shadow(0 0 14px rgba(157,78,223,.55));
}
.flock-svg-ring {
  fill: none; stroke: #C77DFF; stroke-width: 1.4; opacity: 0;
  transform-origin: center;
  animation: flockPulse 2.6s var(--ease) infinite;
}
@keyframes flockPulse {
  0%   { opacity: .55; r: 4; }
  100% { opacity: 0;  r: 22; }
}
.flock-dot-grp { cursor: crosshair; }

.flock-map__status {
  position: absolute; left: 16px; bottom: 14px;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); padding: .5em .9em;
  background: rgba(13,11,21,.6); border: 1px solid var(--line);
  border-radius: 100px; backdrop-filter: blur(10px);
}
.flock-map__tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  font-size: .82rem; font-weight: 600; color: var(--cream);
  padding: .4em .8em; border-radius: 8px;
  background: var(--ink); border: 1px solid var(--gold);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.8);
}

.flock-map__legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem;
  margin-top: 1.2rem;
  font-size: .82rem; color: var(--muted);
}
.flock-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: .4em; vertical-align: middle;
}
.flock-dot--pulse  { background: #EFD79A; box-shadow: 0 0 10px rgba(239,215,154,.9); }
.flock-dot--recent { background: rgba(239,215,154,.35); }
.flock-map__cta { margin-left: auto; color: var(--gold-2); font-weight: 600; }
.flock-map__cta:hover { color: var(--cream); }

@media (max-width: 720px) {
  .flock-map__stats { grid-template-columns: repeat(3, 1fr); gap: .8rem; }
  .flock-stat__num { font-size: 1.8rem; }
  .flock-map__canvas { aspect-ratio: 16 / 11; }
  .flock-map__legend { font-size: .76rem; gap: .8rem; }
  .flock-map__cta { margin-left: 0; flex-basis: 100%; }
}

/* ------------------------------------------------------------------
   In-page AI assistant ("Chill Pigeon AI") — floating button + panel
   Mounted by /js/assistant.js. Stays off the page entirely when the
   server reports no key. Mobile-first: panel becomes a full-bleed sheet.
------------------------------------------------------------------- */
.chillai { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 9999; }
.chillai__fab {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .7em 1.1em .7em .9em;
  background: linear-gradient(135deg, #5B8DEF 0%, #9D4EDF 55%, #E831A0 100%);
  color: #fff; font: 600 .92rem/1 'Inter', system-ui, sans-serif;
  border: 1px solid rgba(199,125,255,.4); border-radius: 100px; cursor: pointer;
  box-shadow: 0 14px 32px -10px rgba(0,0,0,.7),
              0 0 22px -4px rgba(157,78,223,.6),
              0 0 36px -8px rgba(91,141,239,.45),
              inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(0); transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.chillai__fab-coo {
  font-style: italic; font-weight: 700;
  background: linear-gradient(180deg, #fff 0%, #ECDBFF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(255,255,255,.55);
  letter-spacing: .01em;
  position: relative;
  animation: cooBob 2.2s ease-in-out infinite;
}
.chillai__fab-coo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, #C77DFF 50%, transparent);
  filter: blur(.5px);
}
@keyframes cooBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
.chillai__fab:hover  { transform: translateY(-2px); box-shadow: 0 22px 42px -10px rgba(0,0,0,.75), 0 0 30px -2px rgba(157,78,223,.75), 0 0 48px -8px rgba(91,141,239,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.chillai__fab:active { transform: translateY(0); }
.chillai__fab.is-hidden { opacity: 0; pointer-events: none; transform: scale(.85); }
.chillai__fab-icon { display: inline-block; }
.chillai__fab-label { letter-spacing: .01em; }
.chillai__fab-dot {
  position: absolute; top: 8px; right: 10px;
  width: 9px; height: 9px; border-radius: 50%; background: #6cd58a;
  box-shadow: 0 0 0 3px rgba(108,213,138,.25); animation: chillai-pulse 2.2s ease-in-out infinite;
}
@keyframes chillai-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(108,213,138,.25); }
  50%      { box-shadow: 0 0 0 6px rgba(108,213,138,0); }
}

.chillai__panel {
  position: absolute; bottom: 0; right: 0;
  width: min(380px, 92vw); height: min(560px, 78vh);
  background: #1a1320; color: #F2EDE4;
  border: 1px solid rgba(239,215,154,.18); border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.75);
  display: none; flex-direction: column; overflow: hidden;
  font: 14px/1.5 'Inter', system-ui, sans-serif;
  transform: translateY(8px); opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.chillai__panel.is-open { display: flex; transform: translateY(0); opacity: 1; }

.chillai__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem .85rem 1.1rem;
  background: linear-gradient(180deg, rgba(239,215,154,.08) 0%, rgba(239,215,154,0) 100%);
  border-bottom: 1px solid rgba(239,215,154,.10);
}
.chillai__head-l { display: flex; align-items: center; gap: .7em; }
.chillai__head-dot { width: 9px; height: 9px; border-radius: 50%; background: #6cd58a; box-shadow: 0 0 0 3px rgba(108,213,138,.2); }
.chillai__head-title { font-weight: 700; font-size: .98rem; letter-spacing: .01em; }
.chillai__head-sub   { font-size: .76rem; color: rgba(242,237,228,.55); margin-top: 1px; }
.chillai__head-sub span { color: #6cd58a; }
.chillai__close {
  background: transparent; border: 0; color: rgba(242,237,228,.6); cursor: pointer; padding: 6px;
  border-radius: 8px;
}
.chillai__close:hover { color: #F2EDE4; background: rgba(255,255,255,.06); }

.chillai__messages {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 1rem 1rem .4rem; display: flex; flex-direction: column; gap: .55rem;
  scrollbar-width: thin; scrollbar-color: rgba(239,215,154,.25) transparent;
}
.chillai__messages::-webkit-scrollbar { width: 6px; }
.chillai__messages::-webkit-scrollbar-thumb { background: rgba(239,215,154,.25); border-radius: 4px; }

.chillai__msg { display: flex; }
.chillai__msg--user      { justify-content: flex-end; }
.chillai__msg--assistant { justify-content: flex-start; }
.chillai__bubble {
  max-width: 84%; padding: .6rem .85rem; border-radius: 14px;
  font-size: .92rem; line-height: 1.45;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.chillai__msg--user .chillai__bubble {
  background: linear-gradient(135deg, #5B8DEF 0%, #9D4EDF 55%, #E831A0 100%); color: #fff;
  border-bottom-right-radius: 4px;
}
.chillai__msg--assistant .chillai__bubble {
  background: rgba(255,255,255,.04); color: #F2EDE4;
  border: 1px solid rgba(239,215,154,.10);
  border-bottom-left-radius: 4px;
}
.chillai__bubble a       { color: #EFD79A; text-decoration: underline; text-underline-offset: 2px; }
.chillai__bubble a:hover { color: #fff5d6; }
.chillai__bubble strong  { font-weight: 700; }
.chillai__bubble em      { font-style: italic; }

.chillai__bubble.is-typing { display: inline-flex; gap: .25em; align-items: center; padding: .7rem .85rem; }
.chillai__bubble.is-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(242,237,228,.55);
  animation: chillai-typing 1.1s ease-in-out infinite;
}
.chillai__bubble.is-typing span:nth-child(2) { animation-delay: .15s; }
.chillai__bubble.is-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes chillai-typing {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-2px); }
}

.chillai__suggest {
  display: flex; flex-wrap: wrap; gap: .35em; padding: .35rem 1rem .25rem;
}
.chillai__chip {
  font: 500 .76rem/1 'Inter', system-ui, sans-serif; color: rgba(242,237,228,.85);
  background: rgba(239,215,154,.07); border: 1px solid rgba(239,215,154,.18);
  padding: .42em .75em; border-radius: 100px; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.chillai__chip:hover { background: rgba(239,215,154,.14); border-color: rgba(239,215,154,.35); }

.chillai__bar {
  display: flex; align-items: flex-end; gap: .5rem; padding: .65rem .8rem .75rem;
  border-top: 1px solid rgba(239,215,154,.10);
  background: rgba(0,0,0,.18);
}
.chillai__input {
  flex: 1 1 auto; resize: none; max-height: 140px;
  background: rgba(255,255,255,.04); color: #F2EDE4;
  border: 1px solid rgba(239,215,154,.16); border-radius: 12px;
  font: 14px/1.4 'Inter', system-ui, sans-serif;
  padding: .55rem .75rem;
}
.chillai__input::placeholder { color: rgba(242,237,228,.4); }
.chillai__input:focus { outline: none; border-color: rgba(239,215,154,.45); background: rgba(255,255,255,.06); }
.chillai__send {
  flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #5B8DEF 0%, #9D4EDF 55%, #E831A0 100%); color: #fff;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(157,78,223,.7);
}
.chillai__send:disabled { opacity: .55; cursor: progress; }
.chillai__foot {
  padding: .45rem .9rem .65rem; font-size: .68rem; color: rgba(242,237,228,.42); text-align: center;
  border-top: 1px solid rgba(239,215,154,.06);
}

@media (max-width: 540px) {
  .chillai { right: 12px; bottom: 12px; }
  .chillai__fab-label { display: none; }
  .chillai__fab { padding: .8em; border-radius: 50%; }
  .chillai__fab-dot { top: 6px; right: 6px; }
  .chillai__panel {
    position: fixed; left: 8px; right: 8px; bottom: 8px; top: 8px;
    width: auto; height: auto; max-height: none; border-radius: 18px;
  }
}

/* ------------------------------------------------------------------
   Hero kicker — small neon tag above the hero title
------------------------------------------------------------------- */
.hero__kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font: 600 .76rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--neon-2);
  padding: .55em .9em; border-radius: 100px;
  background: rgba(157,78,223,.08);
  border: 1px solid rgba(199,125,255,.32);
  box-shadow: 0 0 22px rgba(157,78,223,.18), inset 0 0 12px rgba(157,78,223,.08);
  margin-bottom: 1.2rem;
}
.hero__kicker-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--neon-2);
  box-shadow: 0 0 8px rgba(199,125,255,.9);
  animation: pulse 2.2s infinite;
}

/* ------------------------------------------------------------------
   LIVE MINTS GRID — only real, on-chain pigeons. Filled by main.js.
   Replaces the old fake "Six revealed looks" mockups.
------------------------------------------------------------------- */
.livemints__grid {
  display: grid; gap: clamp(1rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  min-height: 200px;
}
.livemints__grid.is-empty {
  grid-template-columns: 1fr;
  place-items: center; text-align: center;
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 1px dashed rgba(199,125,255,.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(157,78,223,.05) 0%, transparent 70%);
}
.livemints__grid.is-empty .livemints__empty {
  font: 500 .98rem/1.5 'Inter', system-ui, sans-serif;
  color: rgba(242,237,228,.7); max-width: 36ch;
}

.livemint-card {
  position: relative; overflow: hidden;
  border-radius: 18px;
  background: var(--ink-1);
  border: 1px solid rgba(199,125,255,.18);
  box-shadow: 0 20px 40px -22px rgba(0,0,0,.7);
  transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
}
.livemint-card:hover {
  transform: translateY(-4px);
  border-color: rgba(199,125,255,.55);
  box-shadow: 0 26px 60px -22px rgba(157,78,223,.45), 0 0 22px -8px rgba(157,78,223,.5);
}
.livemint-card__img {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: linear-gradient(135deg, var(--grape-deep), var(--ink-1));
}
.livemint-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease);
}
.livemint-card:hover .livemint-card__img img { transform: scale(1.06); }
.livemint-card__id {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font: 700 .68rem/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .12em;
  color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
  padding: .4em .65em; border-radius: 100px;
  border: 1px solid rgba(199,125,255,.4);
}
.livemint-card__body {
  padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .25em;
}
.livemint-card__name {
  font: 600 1rem/1.25 'Inter', system-ui, sans-serif; color: var(--cream);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.livemint-card__owner {
  font: 500 .72rem/1.2 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(242,237,228,.55); letter-spacing: .04em;
}
.livemint-card__owner b { color: var(--neon-2); font-weight: 600; }

.livemints__foot {
  margin-top: clamp(1.4rem, 3vw, 2rem); text-align: center;
}


/* ------------------------------------------------------------------
   Top-shelf motion: 3D tilt + mouse-following spotlight + neon edge.
   Applied to elements tagged data-tilt-card. JS in main.js drives the
   --rx / --ry / --mx / --my CSS vars per element on pointermove.
------------------------------------------------------------------- */
[data-tilt-card] {
  position: relative;
  perspective: 1100px;
  transform-style: preserve-3d;
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
  transition: transform .55s cubic-bezier(.18,.78,.32,1.02),
              box-shadow .55s ease,
              filter .35s ease;
  will-change: transform;
}
[data-tilt-card]:hover {
  filter: saturate(1.06) brightness(1.04);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,0.85),
    0 0 0 1px rgba(199,125,255,0.20),
    0 14px 60px -10px rgba(91,141,239,0.25);
}
/* Internal layers lift forward, image pushes back — creates real depth. */
[data-tilt-card] > * { transform-style: preserve-3d; }
[data-tilt-card] .card-life__body { transform: translateZ(36px); transition: transform .6s var(--ease); }
[data-tilt-card] .card-life__media { transform: translateZ(-24px); }
[data-tilt-card]:hover .card-life__body { transform: translateZ(56px); }

/* Mouse-following spotlight — radial gradient driven by --mx/--my (0..100%).
   Sits above the image, below the body text. Bright violet that fades. */
.card-life::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    rgba(199,125,255,0.32),
    rgba(91,141,239,0.16) 28%,
    transparent 60%
  );
  opacity: 0; transition: opacity .35s var(--ease);
  mix-blend-mode: screen;
}
.card-life:hover::before { opacity: 1; }

/* Neon edge — a thin gradient ring that tracks the cursor. Pure CSS via a
   conic-gradient anchored to --mx/--my so the highlight chases the mouse. */
.card-life__edge {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  z-index: 3; padding: 1px;
  background: conic-gradient(from calc(var(--mx, 50%) * 3.6deg) at var(--mx, 50%) var(--my, 50%),
    rgba(199,125,255,0) 0%,
    rgba(199,125,255,0.9) 18%,
    rgba(91,141,239,0.6) 36%,
    rgba(199,125,255,0) 58%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--ease);
}
.card-life:hover .card-life__edge { opacity: .9; }

/* Lifestyle card text — kill the leftover gold on /01 chip. */
.card-life__no { color: var(--neon-2); text-shadow: 0 0 10px rgba(199,125,255,.55); }
.card-life__body h3 {
  background: linear-gradient(180deg, #fff 0%, #E8DFFF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -.005em;
}

/* "Why he's different" image — premium frame with a chasing shine + neon edge */
.frame { will-change: transform; }
.frame__shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(232,225,255,0.18) 50%,
    transparent 62%);
  transform: translateX(-110%); transition: transform 1.2s cubic-bezier(.18,.78,.32,1.02);
}
.frame:hover .frame__shine { transform: translateX(110%); }
.frame__edge {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  z-index: 3; padding: 1px;
  background: conic-gradient(from var(--frame-spin, 0deg) at 50% 50%,
    rgba(157,78,223,0) 0%, rgba(199,125,255,0.7) 16%,
    rgba(91,141,239,0.55) 34%, rgba(157,78,223,0) 56%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55; animation: frameSpin 14s linear infinite;
}
@keyframes frameSpin { to { --frame-spin: 360deg; } }
@property --frame-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

@media (prefers-reduced-motion: reduce) {
  [data-tilt-card] { transform: none !important; }
  .card-life::before, .card-life__edge, .frame__edge { animation: none; }
}


/* ====================================================================
   NEON CHILL PRELOADER — replaces the gold velvet cinema sequence.
   A magenta-violet sign that flickers to life over a scanline grid,
   then irises out into the page. On-brand, cyberpunk, no nostalgic gold.
==================================================================== */
.preloader.neon {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(120% 80% at 50% 35%, #1A0938 0%, #06030F 80%);
  overflow: hidden; isolation: isolate;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vh, 3rem) 1rem;
  transition: opacity .8s var(--ease-expo) .15s, visibility 1.2s, transform 1.2s var(--ease-expo);
}
.preloader.neon.is-done { opacity: 0; transform: scale(1.06); visibility: hidden; pointer-events: none; }

/* Horizontal scanlines + soft CRT vignette */
.neon__scan {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: overlay;
}
/* Perspective neon grid floor */
.neon__grid {
  position: absolute; left: 50%; bottom: -8%; transform: translateX(-50%) rotateX(58deg);
  width: 220vw; height: 60vh; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(91,141,239,.22) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(199,125,255,.22) 1px, transparent 1px) 0 0 / 60px 60px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 80%);
          mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 80%);
  filter: drop-shadow(0 0 12px rgba(157,78,223,.35));
  animation: neonGridGlide 9s linear infinite;
}
@keyframes neonGridGlide { to { background-position: 0 60px, 60px 0; } }

.neon__stage {
  position: relative; z-index: 4; text-align: center;
  width: min(92vw, 720px);
}

/* Small mark above the sign (tiny circular photo of the flock) */
.neon__mark {
  width: clamp(56px, 7vw, 72px); aspect-ratio: 1; margin: 0 auto 1.4rem;
  border-radius: 50%; border: 1px solid rgba(199,125,255,.6);
  box-shadow: 0 0 22px rgba(157,78,223,.55), inset 0 0 0 1px rgba(255,255,255,.08);
  overflow: hidden;
  opacity: 0; transform: scale(.6) translateY(8px);
  transition: opacity .9s var(--ease-expo) .1s, transform 1s var(--ease-expo) .1s;
}
.preloader.neon.is-cued .neon__mark { opacity: 1; transform: scale(1) translateY(0); }
.neon__mark-bg { display:block; width:100%; height:100%; background-size: 140%; background-position: 50% 30%; }

/* The CHILL sign — heavy display type with stacked text-shadows that read as
   real neon tubes glowing. Uses a layered approach for richer color. */
.neon__sign {
  position: relative; display: inline-block;
  font-family: 'Fraunces', 'Inter', sans-serif;
  font-weight: 900; letter-spacing: .04em;
  font-size: clamp(4.5rem, 16vw, 11rem); line-height: 1;
  color: #FFFFFF;
  margin: 0 auto .4em;
  /* The neon tube — magenta core with violet/blue halo + outer bloom */
  text-shadow:
    0 0 6px  rgba(255,255,255,.9),
    0 0 14px rgba(232,49,160,.95),
    0 0 28px rgba(199,125,255,.85),
    0 0 60px rgba(91,141,239,.6),
    0 0 120px rgba(157,78,223,.4);
  animation: neonFlicker 5s steps(60) infinite, neonHum 4.5s ease-in-out infinite;
}
.neon__sign-text { display: inline-block; }
/* The flicker — irregular drops in opacity like a real starting neon tube */
@keyframes neonFlicker {
  0%,18%,22%,25%,53%,57%,100% { opacity: 1; }
  20%,24%,55% { opacity: .35; }
}
@keyframes neonHum {
  0%,100% { text-shadow:
    0 0 6px  rgba(255,255,255,.9),
    0 0 14px rgba(232,49,160,.95),
    0 0 28px rgba(199,125,255,.85),
    0 0 60px rgba(91,141,239,.6),
    0 0 120px rgba(157,78,223,.4); }
  50%     { text-shadow:
    0 0 8px  rgba(255,255,255,1),
    0 0 18px rgba(232,49,160,1),
    0 0 38px rgba(199,125,255,.95),
    0 0 78px rgba(91,141,239,.75),
    0 0 150px rgba(157,78,223,.55); }
}

/* Tagline with hairlines */
.neon__tag {
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: var(--sans); text-transform: uppercase;
  letter-spacing: .42em; font-size: clamp(.62rem, 1.4vw, .72rem); color: var(--neon-2);
  text-shadow: 0 0 10px rgba(199,125,255,.65);
  opacity: 0; transition: opacity .9s var(--ease) 1.2s;
  margin-bottom: 1.2rem;
}
.preloader.neon.is-cued .neon__tag { opacity: 1; }
.neon__tag-line {
  width: clamp(28px, 8vw, 64px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,125,255,.95) 50%, transparent);
}

.neon__brand {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(.66rem, 1.4vw, .78rem); letter-spacing: .42em; color: rgba(242,237,228,.45);
  margin-bottom: 1.6rem;
  opacity: 0; transition: opacity .9s var(--ease) 1.45s;
}
.preloader.neon.is-cued .neon__brand { opacity: 1; }

.neon__meter {
  width: min(420px, 84%); margin: 0 auto;
  opacity: 0; transition: opacity .9s var(--ease) 1.65s;
}
.preloader.neon.is-cued .neon__meter { opacity: 1; }
.neon__meter-track {
  position: relative; height: 2px; background: rgba(199,125,255,.12); overflow: hidden; border-radius: 2px;
}
.neon__meter-track i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #8FB6FF, #C77DFF 50%, #E831A0);
  box-shadow: 0 0 12px rgba(232,49,160,.65), 0 0 18px rgba(157,78,223,.5);
  transition: width .25s var(--ease);
}
.neon__meter-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .85rem; font: 500 .64rem/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .28em; text-transform: uppercase; color: rgba(242,237,228,.55);
  font-variant-numeric: tabular-nums;
}
.neon__status {
  display: inline-flex; align-items: center; gap: 1px;
}
.neon__status #preloaderStatus {
  transition: opacity .28s var(--ease), transform .28s var(--ease); display: inline-block;
}
.neon__status.swapping #preloaderStatus { opacity: 0; transform: translateY(-6px); }
.neon__status .dots i { font-style: normal; animation: blink 1.4s infinite both; }
.neon__status .dots i:nth-child(2) { animation-delay: .2s; }
.neon__status .dots i:nth-child(3) { animation-delay: .4s; }
.neon__meter-meta i { color: var(--neon-2); font-style: normal; font-size: .82rem; text-shadow: 0 0 10px rgba(199,125,255,.7); }
.neon__meter-meta em { color: rgba(242,237,228,.4); font-style: normal; margin-left: 2px; }

.neon__grain {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: neonGrain .3s steps(3) infinite;
}
@keyframes neonGrain {
  0%   { transform: translate3d( 0,  0, 0); }
  33%  { transform: translate3d(-2%, 1%, 0); }
  66%  { transform: translate3d( 1%,-2%, 0); }
  100% { transform: translate3d( 0,  0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .neon__sign { animation: none; }
  .neon__grid { animation: none; }
}


/* ====================================================================
   CUSTOM CURSOR · revamp — magenta crosshair with corner lock + neon glow
==================================================================== */
.cursor { mix-blend-mode: normal; }
.cursor__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow:
    0 0 8px rgba(232,49,160,.95),
    0 0 18px rgba(157,78,223,.7),
    0 0 32px rgba(91,141,239,.45);
}
.cursor__ring {
  width: 28px; height: 28px; border: 1px solid rgba(199,125,255,.85);
  border-radius: 50%;
  box-shadow:
    0 0 10px rgba(157,78,223,.55),
    inset 0 0 8px rgba(232,49,160,.18);
  opacity: .85;
  transition: width .25s var(--ease), height .25s var(--ease),
              opacity .2s ease, border-color .2s ease, background .2s ease, transform .25s var(--ease);
}
/* Corner brackets that appear on hover state — top-left & bottom-right */
.cursor__ring::before, .cursor__ring::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border: 1px solid rgba(143,182,255,.95);
  opacity: 0; transition: opacity .2s var(--ease), transform .25s var(--ease);
  filter: drop-shadow(0 0 4px rgba(91,141,239,.7));
}
.cursor__ring::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; transform: translate(-4px,-4px); }
.cursor__ring::after  { bottom: -4px; right: -4px; border-left: 0; border-top: 0; transform: translate(4px,4px); }
.cursor.is-hover .cursor__ring {
  width: 54px; height: 54px;
  border-color: rgba(143,182,255,.95);
  background: radial-gradient(circle, rgba(199,125,255,.15) 0%, transparent 70%);
}
.cursor.is-hover .cursor__ring::before,
.cursor.is-hover .cursor__ring::after { opacity: 1; transform: translate(0,0); }
.cursor.is-label .cursor__label {
  background: linear-gradient(135deg, #9D4EDF 0%, #E831A0 100%);
  color: #fff; font-weight: 700;
  border: 1px solid rgba(199,125,255,.5);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.6),
              0 0 16px rgba(157,78,223,.6),
              inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow: 0 0 8px rgba(255,255,255,.45);
}

/* ====================================================================
   CUSTOM SCROLLBAR · thin neon violet rail (whole page)
==================================================================== */
:root { scrollbar-color: rgba(157,78,223,.55) transparent; scrollbar-width: thin; }
html { scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background:
    linear-gradient(180deg, rgba(157,78,223,.04) 0%, rgba(91,141,239,.03) 50%, rgba(232,49,160,.04) 100%);
  border-left: 1px solid rgba(199,125,255,.10);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5B8DEF 0%, #9D4EDF 55%, #E831A0 100%);
  border-radius: 100px; border: 2px solid transparent; background-clip: padding-box;
  box-shadow:
    0 0 8px rgba(157,78,223,.55),
    inset 0 0 6px rgba(255,255,255,.18);
}
::-webkit-scrollbar-thumb:hover {
  box-shadow:
    0 0 14px rgba(232,49,160,.75),
    inset 0 0 8px rgba(255,255,255,.28);
}
::-webkit-scrollbar-corner { background: transparent; }

/* Scroll progress bar (top of page) flip from gold to electric */
.scroll-progress i {
  background: linear-gradient(90deg, #5B8DEF 0%, #C77DFF 50%, #E831A0 100%) !important;
  box-shadow: 0 0 10px rgba(157,78,223,.7), 0 0 18px rgba(232,49,160,.45);
}

/* ====================================================================
   ANTHEM SECTION · clickable poster
==================================================================== */
.anthem { padding-block: clamp(80px, 13vh, 170px); }
.anthem__inner { text-align: left; }
.anthem .lede { max-width: 56ch; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.anthem__poster {
  display: block; position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(199,125,255,.25);
  background: var(--ink-1); cursor: pointer;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.85), 0 0 60px -20px rgba(157,78,223,.4);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.anthem__poster:hover {
  transform: translateY(-4px);
  border-color: rgba(199,125,255,.6);
  box-shadow: 0 50px 130px -40px rgba(0,0,0,.95), 0 0 80px -10px rgba(157,78,223,.6);
}
.anthem__poster-bg {
  position: absolute; inset: 0; background-size: cover; background-position: 50% 30%;
  filter: saturate(1.1) brightness(.8);
  transform: scale(1.06); transition: transform 1.2s var(--ease);
}
.anthem__poster:hover .anthem__poster-bg { transform: scale(1.12); }
.anthem__poster-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 30% 80%, rgba(157,78,223,.5) 0%, transparent 60%),
    linear-gradient(180deg, transparent 30%, rgba(10,5,18,.55) 70%, rgba(10,5,18,.85) 100%);
}
.anthem__poster-grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay; opacity: .6;
}
.anthem__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(72px, 8vw, 96px); height: clamp(72px, 8vw, 96px); border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #5B8DEF, #9D4EDF 55%, #E831A0);
  color: #fff;
  box-shadow:
    0 16px 36px -8px rgba(0,0,0,.65),
    0 0 28px rgba(157,78,223,.7),
    inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .25s var(--ease);
}
.anthem__poster:hover .anthem__play { transform: translate(-50%, -50%) scale(1.06); }
.anthem__play::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(199,125,255,.4);
  animation: anthemPing 2.4s ease-out infinite;
}
@keyframes anthemPing {
  0%   { opacity: .8; transform: scale(.85); }
  100% { opacity: 0;  transform: scale(1.35); }
}
.anthem__poster-meta {
  position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 24px);
  display: flex; flex-direction: column; gap: .25em; z-index: 2; text-align: left;
}
.anthem__poster-eyebrow {
  font: 600 .68rem/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .28em; text-transform: uppercase; color: var(--neon-2);
  text-shadow: 0 0 10px rgba(199,125,255,.6);
}
.anthem__poster-title {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  color: #fff; letter-spacing: -.01em;
  text-shadow: 0 4px 24px rgba(0,0,0,.65);
}
.anthem__poster-runtime {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7);
}
.anthem__poster-runtime i {
  width: 6px; height: 6px; border-radius: 50%; background: #FF4DB8;
  box-shadow: 0 0 8px rgba(255,77,184,.85); animation: pulse 2s ease-in-out infinite;
}

/* ====================================================================
   ANTHEM MODAL · fullscreen video
==================================================================== */
.anthem-modal {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(10,4,18,.92); backdrop-filter: blur(18px);
  display: grid; place-items: center; padding: clamp(16px, 4vw, 56px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), visibility .4s;
}
.anthem-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.anthem-modal__shell {
  position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(199,125,255,.35);
  box-shadow: 0 60px 160px -40px rgba(0,0,0,1), 0 0 80px -20px rgba(157,78,223,.6);
  background: #000;
  transform: scale(.96); transition: transform .45s var(--ease-expo);
}
.anthem-modal.is-open .anthem-modal__shell { transform: scale(1); }
.anthem-modal__video { width: 100%; height: 100%; display: block; background: #000; }
.anthem-modal__corner {
  position: absolute; width: 26px; height: 26px; pointer-events: none;
  border-color: rgba(199,125,255,.95);
  filter: drop-shadow(0 0 6px rgba(157,78,223,.7));
}
.anthem-modal__corner--tl { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; }
.anthem-modal__corner--tr { top: 10px; right: 10px; border-top: 1px solid; border-right: 1px solid; }
.anthem-modal__corner--bl { bottom: 10px; left: 10px; border-bottom: 1px solid; border-left: 1px solid; }
.anthem-modal__corner--br { bottom: 10px; right: 10px; border-bottom: 1px solid; border-right: 1px solid; }
.anthem-modal__close {
  position: absolute; top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(20,12,30,.85); color: #fff;
  border: 1px solid rgba(199,125,255,.4); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 0 18px rgba(157,78,223,.4);
}
.anthem-modal__close:hover { background: rgba(157,78,223,.25); border-color: rgba(199,125,255,.8); }
.anthem-modal__hint {
  position: absolute; left: 50%; bottom: clamp(14px, 3vh, 28px); transform: translateX(-50%);
  font: 500 .72rem/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(242,237,228,.55);
}
.anthem-modal__hint kbd {
  font-family: inherit; padding: .25em .55em; border-radius: 6px;
  background: rgba(199,125,255,.12); border: 1px solid rgba(199,125,255,.3); color: var(--neon-2);
}

/* ====================================================================
   FLOATING VINYL PLAYER · bottom-left, persistent
==================================================================== */
.vinyl {
  position: fixed; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 9997;
  width: 78px; height: 78px; border: 0; background: transparent; cursor: pointer; padding: 0;
  outline: none;
}
.vinyl__glow {
  position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(157,78,223,.55), transparent 65%);
  opacity: .55; filter: blur(2px);
  animation: vinylGlowPulse 3.6s ease-in-out infinite;
}
@keyframes vinylGlowPulse {
  0%,100% { opacity: .35; transform: scale(.96); }
  50%     { opacity: .75; transform: scale(1.05); }
}
.vinyl__disc {
  position: relative; width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1a0b22 0%, #06030F 70%);
  box-shadow:
    0 18px 36px -10px rgba(0,0,0,.85),
    0 0 0 1px rgba(199,125,255,.35),
    inset 0 0 0 2px rgba(255,255,255,.03);
  overflow: hidden;
  display: grid; place-items: center;
  transition: transform .35s var(--ease);
  animation: vinylSpin 6s linear infinite paused;
}
.vinyl.is-playing .vinyl__disc { animation-play-state: running; }
@keyframes vinylSpin { to { transform: rotate(360deg); } }
.vinyl__grooves {
  position: absolute; inset: 8%; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.02) 0px 1px, transparent 1px 3px);
}
.vinyl__label {
  position: relative; width: 40%; aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(135deg, #5B8DEF 0%, #9D4EDF 55%, #E831A0 100%);
  display: grid; place-items: center;
  box-shadow: 0 0 12px rgba(157,78,223,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.vinyl__label::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #06030F; box-shadow: 0 0 0 1px rgba(199,125,255,.6);
}
.vinyl__label-mark {
  font: 800 .58rem/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .04em; color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,.55);
  transform: translateY(-9px);
}
/* Pro tonearm — chrome rod, counterweight at the pivot, cylindrical
   cartridge with a fine needle dipping into the record when playing. */
.vinyl__arm {
  position: absolute; top: 2px; right: -2px;
  width: 50px; height: 2px;
  border-radius: 100px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45) 0%, transparent 50%),
    linear-gradient(90deg, #D7D9E2 0%, #8A8E9E 60%, #4F525E 100%);
  transform-origin: right center; transform: rotate(-42deg);
  box-shadow:
    0 2px 4px rgba(0,0,0,.55),
    0 0 6px rgba(199,125,255,.18);
  transition: transform .65s cubic-bezier(.5,1.8,.4,1);
  z-index: 4;
}
/* Counterweight + pivot disc at the back (the chunky cylinder) */
.vinyl__arm::before {
  content: ""; position: absolute; right: -7px; top: -4px;
  width: 12px; height: 10px; border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(135deg, #6E7280 0%, #2A2A33 80%);
  box-shadow:
    0 1px 2px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(199,125,255,.35);
}
/* Cartridge head with needle — small, refined, dips toward groove */
.vinyl__arm::after {
  content: ""; position: absolute; left: -3px; top: -2px;
  width: 7px; height: 6px; border-radius: 2px;
  background: linear-gradient(135deg, #9D4EDF, #E831A0);
  box-shadow:
    0 0 6px rgba(232,49,160,.7),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.vinyl.is-playing .vinyl__arm { transform: rotate(-18deg); }

/* Pivot disc sitting under the counterweight (visible chrome base) */
.vinyl::before {
  content: ""; position: absolute; top: -6px; right: -6px;
  width: 14px; height: 14px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff, #8A8E9E 50%, #2A2A33 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,.6),
    0 0 8px rgba(157,78,223,.35),
    inset 0 0 0 1px rgba(255,255,255,.15);
  z-index: 5;
}

/* SOUND WAVES — expanding concentric rings from the vinyl when playing.
   Three rings on staggered cycles read like sound radiating out. */
.vinyl::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; z-index: 0;
  box-shadow:
    0 0 0 0 rgba(232,49,160,.55),
    0 0 0 0 rgba(199,125,255,.45),
    0 0 0 0 rgba(91,141,239,.4);
  opacity: 0;
}
.vinyl.is-playing::after {
  animation: vinylWaves 2.4s ease-out infinite;
  opacity: 1;
}
@keyframes vinylWaves {
  0%   {
    box-shadow:
      0 0 0 0px rgba(232,49,160,.55),
      0 0 0 0px rgba(199,125,255,.45),
      0 0 0 0px rgba(91,141,239,.4);
  }
  100% {
    box-shadow:
      0 0 0 20px rgba(232,49,160,0),
      0 0 0 36px rgba(199,125,255,0),
      0 0 0 52px rgba(91,141,239,0);
  }
}

/* Tiny LED on the player — green pinhead that lights when playing */
.vinyl__led {
  position: absolute; right: -2px; bottom: 2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #2c1a3d;
  box-shadow: inset 0 0 0 1px rgba(199,125,255,.4);
  z-index: 5;
  transition: background .25s ease, box-shadow .25s ease;
}
.vinyl.is-playing .vinyl__led {
  background: #6CFF92;
  box-shadow: 0 0 6px rgba(108,255,146,.95), 0 0 12px rgba(108,255,146,.5);
}

.vinyl__tip {
  position: absolute; left: 100%; top: 50%; transform: translate(8px, -50%);
  white-space: nowrap;
  padding: .45em .85em; border-radius: 100px;
  background: rgba(20,12,30,.85); backdrop-filter: blur(10px);
  border: 1px solid rgba(199,125,255,.35);
  font: 600 .72rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.vinyl:hover .vinyl__tip { opacity: 1; transform: translate(14px, -50%); }
.vinyl.is-playing .vinyl__tip::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon-2); margin-right: .55em; vertical-align: middle;
  box-shadow: 0 0 8px rgba(199,125,255,.9); animation: pulse 1.6s infinite;
}

@media (max-width: 540px) {
  .vinyl { width: 64px; height: 64px; left: 12px; bottom: 12px; }
  .vinyl__tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vinyl__disc, .vinyl__glow, .anthem__play::before { animation: none; }
}


/* ====================================================================
   NAV · electric featured links (Mint / Game / Anthem) + sep
==================================================================== */
.nav__link--feature {
  display: inline-flex; align-items: center; gap: .55em;
  color: var(--cream); padding: .35em .85em; border-radius: 100px;
  border: 1px solid rgba(199,125,255,.2);
  background: linear-gradient(135deg, rgba(91,141,239,.06), rgba(232,49,160,.06));
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.nav__link--feature:hover {
  background: linear-gradient(135deg, rgba(91,141,239,.16), rgba(232,49,160,.18));
  border-color: rgba(199,125,255,.6);
  transform: translateY(-1px);
  color: #fff;
}
.nav__link--feature::after { display: none; }
.nav__sep {
  display: inline-block; width: 1px; height: 18px;
  background: linear-gradient(180deg, transparent, rgba(199,125,255,.4), transparent);
  align-self: center; margin: 0 .2rem;
}
.nav__link-tag--live, .nav__link-tag--new {
  font: 700 .56rem/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .25em .55em; border-radius: 100px;
  display: inline-flex; align-items: center; gap: .35em;
}
.nav__link-tag--live {
  background: linear-gradient(135deg, rgba(232,49,160,.3), rgba(255,77,184,.18));
  color: #fff; border: 1px solid rgba(255,77,184,.55);
  box-shadow: 0 0 10px rgba(232,49,160,.4);
}
.nav__link-tag--live i {
  width: 5px; height: 5px; border-radius: 50%; background: #FF4DB8;
  box-shadow: 0 0 6px rgba(255,77,184,.95); animation: pulse 1.6s infinite;
}
.nav__link-tag--new {
  background: linear-gradient(135deg, rgba(91,141,239,.3), rgba(199,125,255,.2));
  color: #fff; border: 1px solid rgba(143,182,255,.55);
  box-shadow: 0 0 10px rgba(91,141,239,.35);
}

/* Brand glow flip from gold to electric */
.brand:hover .brand__avatar {
  transform: rotate(-6deg) scale(1.05);
  box-shadow: 0 8px 24px -6px rgba(157,78,223,.9), 0 0 18px rgba(91,141,239,.5);
}

/* ====================================================================
   MOBILE polish for all the new components (<= 720 / <= 540 / <= 420)
==================================================================== */
@media (max-width: 720px) {
  /* Anthem section: smaller meta block, tighter paddings */
  .anthem__poster-meta { left: 14px; bottom: 14px; }
  .anthem__poster-title { font-size: 1.3rem; }
  .anthem__poster-eyebrow { font-size: .6rem; }
  .anthem__play { width: 64px; height: 64px; }

  /* Anthem modal: kill the corner brackets (visual noise on small) */
  .anthem-modal__corner { display: none; }
  .anthem-modal__shell { aspect-ratio: 16 / 9; max-height: calc(100vh - 96px); }

  /* Vinyl: don't fight the Coo FAB for space — keep it tight, lower opacity until tap */
  .vinyl { width: 60px; height: 60px; left: 10px; bottom: 10px; }
  .vinyl__arm { width: 46px; }
  .vinyl__tip { display: none; }
}
@media (max-width: 540px) {
  /* Anthem section: stack everything */
  .anthem { padding-block: clamp(60px, 11vh, 110px); }
  .anthem__poster { border-radius: 18px; }
  .anthem-modal { padding: 8px; }
  .anthem-modal__close { top: 8px; right: 8px; width: 36px; height: 36px; }
  .anthem-modal__hint { font-size: .58rem; bottom: 10px; }

  /* Assistant FAB shrinks to a circle on phones (already in CSS) — make sure
     vinyl + Coo button don't stack on the same x. */
  .chillai { right: 12px; bottom: 12px; }
  .vinyl { left: 12px; bottom: 12px; }

  /* Live mints grid: 2 cols max so cards stay big enough */
  .livemints__grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }

  /* Mint widget money-flow cells: stack to one column so the cream numbers
     read clean on a narrow phone instead of squishing. */
  .mint__flow { grid-template-columns: 1fr 1fr; }
  .mint__flow-cell { padding: .55rem .65rem; }
}
@media (max-width: 420px) {
  .vinyl { width: 54px; height: 54px; }
  .vinyl__arm { width: 38px; top: -6px; right: -8px; }
  .livemints__grid { grid-template-columns: 1fr; }
  .mint__flow { grid-template-columns: 1fr; }
}

/* When the assistant panel is open on phones, lift the vinyl out of the way */
@media (max-width: 540px) {
  body:has(.chillai__panel.is-open) .vinyl { opacity: 0; pointer-events: none; transform: scale(.8); transition: opacity .2s ease, transform .25s var(--ease); }
}


/* ====================================================================
   Mobile drawer · feature pills mirror the desktop nav highlights
==================================================================== */
.drawer__features {
  display: grid; gap: 10px; margin-bottom: 6px;
}
.drawer__feature {
  display: flex; align-items: center; gap: .7em;
  padding: .85em 1em; border-radius: 14px;
  background: linear-gradient(135deg, rgba(91,141,239,.12), rgba(232,49,160,.12));
  border: 1px solid rgba(199,125,255,.32);
  box-shadow: 0 0 18px -8px rgba(157,78,223,.45), inset 0 0 14px rgba(157,78,223,.06);
  color: #fff !important; text-decoration: none;
  font-family: var(--display); font-weight: 700;
  font-size: 1.15rem !important; letter-spacing: -.01em;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.drawer__feature:hover, .drawer__feature:active {
  background: linear-gradient(135deg, rgba(91,141,239,.22), rgba(232,49,160,.22));
  border-color: rgba(199,125,255,.7);
  transform: translateY(-1px);
}
.drawer__feature svg { margin-left: auto; color: var(--neon-2); }
.drawer__feature-label { flex: 0 1 auto; }
.drawer__feature-tag {
  font: 700 .58rem/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .35em .6em; border-radius: 100px;
  display: inline-flex; align-items: center; gap: .4em;
  background: linear-gradient(135deg, rgba(91,141,239,.3), rgba(199,125,255,.2));
  color: #fff; border: 1px solid rgba(143,182,255,.55);
  box-shadow: 0 0 10px rgba(91,141,239,.35);
  flex: 0 0 auto;
}
.drawer__feature-tag--live {
  background: linear-gradient(135deg, rgba(232,49,160,.32), rgba(255,77,184,.2));
  border-color: rgba(255,77,184,.55);
  box-shadow: 0 0 12px rgba(232,49,160,.5);
}
.drawer__feature-tag--live i {
  width: 5px; height: 5px; border-radius: 50%; background: #FF4DB8;
  box-shadow: 0 0 6px rgba(255,77,184,.95); animation: pulse 1.6s infinite;
}
.drawer__sep {
  display: block; height: 1px; margin: 14px 4px;
  background: linear-gradient(90deg, transparent, rgba(199,125,255,.4) 50%, transparent);
}

/* Tighten drawer link sizing so the new featured pills aren't dwarfed by
   the secondary links beneath them. */
@media (max-width: 720px) {
  .drawer__nav a { font-size: 1.45rem; }
}


/* When the nav has all 4 feature pills, the secondary links eat space.
   Below 1100px, drop the lower-priority secondaries; below 820px the nav
   collapses to the hamburger entirely. */
@media (max-width: 1100px) {
  .nav__link:not(.nav__link--feature):where(:nth-child(n+8)) { display: none; }
  .nav__sep ~ .nav__link:nth-of-type(n+3) { display: none; }
}
@media (max-width: 820px) and (min-width: 721px) {
  .nav { gap: clamp(.6rem, 1.4vw, 1.2rem); }
  .nav__link:not(.nav__link--feature) { display: none; }
}