/* ============================================================================
   TWO STARS — a cinematic space love story
   styles.css
   ----------------------------------------------------------------------------
   Design language:
     • Deep-space palette with aurora accents (violet / cyan / rose / gold)
     • Glassmorphism UI, soft bloom, cinematic serif typography
     • Everything animated with transforms/opacity for 60fps
   ========================================================================== */

/* ---------- Design tokens -------------------------------------------------
   Palette derived from the story itself: warm light against a deep night.
   Nehmia (the girl star) is pink. The lonely star's returning warmth is amber
   gold. The void is a deep indigo night, never a cold black — the whole arc is
   "her light made even the dark feel safe."
   Sources: "Couple & Relationship App — romance rose", "Alarm & World Clock —
   time amber", "Podcast Platform — dark + warm accent".
   ------------------------------------------------------------------------- */
:root {
  --bg-0: #0F0F23;          /* deep indigo night */
  --bg-1: #1B1B30;          /* card / raised surface */
  --ink: #FDF6F8;           /* warm starlight text */
  --ink-soft: #B0A8C8;      /* dusk lavender — secondary text */
  --ink-faint: #7B7398;     /* captions / eyebrows at rest */

  /* The story's cast, as colour */
  --nehmia:   #F472B6;      /* pink — the girl star */
  --lone:     #FBBF24;      /* amber gold — his warmth returning */
  --lavender: #A78BFA;      /* soft dusk violet — the night between them */
  --peach:    #FDBA74;      /* warm apricot */
  --star:     #FDF6F8;

  /* Legacy accent names aliased onto the story palette, so every existing
     rule inherits the mood without being rewritten. */
  --violet: var(--lavender);
  --cyan:   var(--peach);
  --rose:   var(--nehmia);
  --gold:   var(--lone);

  /* Glass surfaces (crisp hairline + subtle inner top-highlight) */
  --glass: rgba(255, 255, 255, 0.045);
  --glass-brd: #2A2545;
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --blur: blur(14px) saturate(115%);

  /* Elevation */
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 40px rgba(167, 139, 250, 0.28);

  /* Radii */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* Eyebrow / label tracking scale (consistent across the whole UI) */
  --track-eyebrow: 0.42em;
  --track-label: 0.2em;

  /* Easing vocabulary. Different motions deserve different curves — one curve
     everywhere is what makes motion feel machine-made. Nothing here is linear. */
  --ease-cine:   cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out: arrivals, reveals */
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);      /* standard: small state changes */
  --ease-drift:  cubic-bezier(0.33, 0, 0.15, 1);    /* long, weighted: things that travel */
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);    /* quart-out: comes to rest */
  --ease-exit:   cubic-bezier(0.55, 0, 0.9, 0.35);  /* accelerates away: departures */
  --ease-press:  cubic-bezier(0.34, 0.8, 0.42, 1);  /* quick, tactile: button compression */

  /* Type: high-contrast Didone display + geometric sans */
  --serif: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset --------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  color-scheme: dark;              /* native controls (range slider) render dark */
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;                    /* kills the 300ms tap delay */
  -webkit-tap-highlight-color: transparent;      /* no blue flash on tap */
}

/* Chrome is a story, not a document: don't let stray drags select the UI.
   Story prose and captions stay selectable below. */
button, .btn, .lab, .cursor, .sound-toggle, .forget-device,
.continue, .skip, .player, .pl-progress { user-select: none; -webkit-user-select: none; }

/* ---------- Microinteraction: everything you press gives a little -----------
   A real object compresses under a finger and springs back. This is one rule
   instead of per-button special cases, so the whole UI answers the same way. */
button:active, .mc-photo:active {
  transform: scale(0.972);
  transition: transform 90ms var(--ease-press);
}
/* Buttons that own their transform keep it; only add the squash on press. */
.btn-yes:active { transform: scale(calc(var(--grow, 1) * 0.972)); }
.lb-prev:active, .lb-next:active { transform: translateY(-50%) scale(0.94); }
@media (prefers-reduced-motion: reduce) {
  button:active, .mc-photo:active, .btn-yes:active { transform: none; }
}

body {
  position: fixed;
  inset: 0;
  cursor: none;                 /* replaced by custom cursor on desktop */
}

/* Re-enable native cursor on touch devices */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor { display: none !important; }
}

button { font-family: inherit; color: inherit; }

/* ---------- Didone readability -------------------------------------------
   Bodoni's hairlines vanish at small sizes on a black field. Optical sizing
   thickens them automatically as text shrinks; a heavier base weight keeps
   every serif run above the contrast floor. Jost's 300 is also too thin here.
   ------------------------------------------------------------------------- */
html { font-optical-sizing: auto; }
.line, .whisper, .ask, .gate-msg p, .love-message, .journey-sub, .timeline-sub,
.mc-caption, .mc-empty, .lb-story, .lb-title, .cb-sub, .ff-cap, .ri-sub,
.finale-line, .future-line { font-weight: 500; }
.forget-device, .made-by, .cc-sub { font-weight: 400; }

/* Selection + keyboard focus (the pointer is hidden, so focus must be visible) */
::selection { background: rgba(167, 139, 250, 0.35); color: #fff; }
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Don't show the ring on plain mouse clicks, only keyboard traversal */
:focus:not(:focus-visible) { outline: none; }

/* ---------- Icon system (bespoke SVG icons — see sprite in index.html) ---- */
.ic {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.14em;      /* sit on the text baseline */
  flex: 0 0 auto;
  overflow: visible;
  color: inherit;
}
.ic-gold   { color: var(--gold); }
.ic-rose   { color: var(--rose); }
.ic-cyan   { color: var(--cyan); }
.ic-violet { color: var(--violet); }
/* a touch of air between an icon and the word it precedes */
.lab .ic, .mc-cat .ic, .mc-anniv .ic, .mc-monthsary .ic,
.gate-btn .ic, .replay-story .ic, .cb-title .ic, .mb-title .ic { margin-right: 0.42em; }
.mc-label .ic { margin-right: 0.28em; }
/* counter labels: one warm, unified accent — reads as a system, not emoji */
.lab .ic { color: var(--gold); opacity: 0.9; margin-right: 0.34em; }

/* ---------- The universe canvas ------------------------------------------ */
#space {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* ---------- Full-screen FX overlays -------------------------------------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

/* Layer 4 — very faint volumetric light.
   This used to be three big drifting colour blobs, which is the single most
   recognisable "AI galaxy page" tell. It's now one soft shaft of light falling
   across the sky from a direction, plus a barely-there warm counter-light.
   --sky is driven by the story's density: when the universe empties, the light
   goes with it. */
.aurora {
  background:
    linear-gradient(168deg, rgba(167, 139, 250, 0.10) 0%, transparent 44%),
    radial-gradient(115% 75% at 74% 6%, rgba(253, 186, 116, 0.05), transparent 62%);
  mix-blend-mode: screen;
  filter: blur(26px);
  opacity: calc(0.5 * var(--sky, 1));
  animation: auroraDrift 68s ease-in-out infinite alternate;   /* barely perceptible */
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
  100% { transform: translate3d(1.5%, 1%, 0)   scale(1.08); }
}

/* Cinematic vignette so edges fall into darkness */
.vignette {
  background: radial-gradient(120% 100% at 50% 45%, transparent 50%, rgba(0,0,0,0.6) 100%);
  z-index: 2;
}

/* Subtle film grain — dialled back so it's texture, not TV static */
.grain {
  z-index: 3;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1.8s steps(2) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0,0); } 100% { transform: translate(-6%, 4%); }
}

/* ---------- Letterbox bars ----------------------------------------------- */
.letterbox {
  position: fixed;
  left: 0; right: 0;
  height: 0;
  background: #000;
  z-index: 40;
  pointer-events: none;
  transition: height 1.1s var(--ease-cine);
}
.letterbox.top { top: 0; }
.letterbox.bottom { bottom: 0; }
body.cinemascope .letterbox { height: 9vh; }

/* ---------- Transition curtain + flash ----------------------------------- */
.curtain {
  position: fixed; inset: 0; z-index: 60;
  background: #000; opacity: 0; pointer-events: none;
  transition: opacity 1.2s var(--ease-cine);
}
.curtain.show { opacity: 1; }

.flash {
  position: fixed; inset: 0; z-index: 61;
  background: radial-gradient(circle at 50% 50%, #fff, rgba(255,255,255,0.6) 40%, transparent 72%);
  opacity: 0; pointer-events: none;
}
.flash.fire { animation: flashFire 0.9s var(--ease-cine); }
@keyframes flashFire {
  0% { opacity: 0; }
  22% { opacity: 0.95; }
  100% { opacity: 0; }
}

/* ---------- Custom cursor ------------------------------------------------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 90;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}
.cursor-dot {
  position: absolute; top: 50%; left: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(255,255,255,0.9);
}
.cursor-ring {
  position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.55);
  transform: translate(-50%, -50%);
  transition: width .25s var(--ease-soft), height .25s var(--ease-soft), border-color .25s;
}
body.cursor-hot .cursor-ring {
  width: 52px; height: 52px;
  border-color: var(--gold);
}

/* ---------- Screens ------------------------------------------------------- */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 1.2s var(--ease-cine), visibility 1.2s;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
}
.screen.is-active { opacity: 1; visibility: visible; }

/* =========================================================================
   LANDING
   ========================================================================= */
.landing-inner {
  position: relative;
  text-align: center;
  max-width: min(760px, 92vw);
}
.whisper {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 4.5vw, 2.1rem);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin-bottom: 0.35em;
}
.ask {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 7vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-wrap: balance;
  color: var(--ink);                       /* solid starlight — quiet & confident */
  text-shadow: 0 0 32px rgba(167, 139, 250, 0.28);
  margin-bottom: 1.4em;
}

/* Reveal-on-load animation */
.reveal { opacity: 0; transform: translateY(18px); animation: revealUp 1.4s var(--ease-cine) forwards; }
.reveal-2 { animation-delay: 0.45s; }
.reveal-3 { animation-delay: 1.5s; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

/* Button field must be a positioning context for the roaming No button */
.btn-field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 40px);
  min-height: 140px;
  opacity: 0;
  animation: revealUp 1.4s var(--ease-cine) 0.9s forwards;
}

.btn {
  position: relative;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: var(--ink);
  font-weight: 500;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  letter-spacing: 0.04em;
  padding: 0.85em 2.2em;
  border-radius: 999px;
  cursor: none;
  overflow: hidden;
  transition:
    transform 0.35s var(--ease-cine),
    box-shadow 0.4s var(--ease-soft),
    background 0.4s, filter 0.4s, opacity 0.4s;
  will-change: transform;
}
@media (hover: none), (pointer: coarse) { .btn { cursor: pointer; } }

.btn::before {           /* sheen */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-cine);
}
.btn:hover::before { transform: translateX(120%); }

.btn-yes {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.25), inset 0 0 18px rgba(251, 191, 36,0.12);
}
.btn-yes:hover { transform: translateY(-2px) scale(1.04); }

/* Yes grows more radiant each time No is refused (JS toggles --grow) */
.btn-yes {
  --grow: 1;
  transform: scale(var(--grow));
}
.btn-yes.radiant {
  background: linear-gradient(120deg, rgba(251, 191, 36,0.22), rgba(244, 114, 182,0.22));
  box-shadow:
    0 0 42px rgba(251, 191, 36, 0.55),
    0 0 90px rgba(244, 114, 182, 0.30),
    inset 0 0 26px rgba(255,255,255,0.18);
  animation: yesPulse 2.4s ease-in-out infinite;
}
@keyframes yesPulse {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.18); }
}

.btn-no {
  border-color: rgba(255,255,255,0.16);
  transition:
    left 0.45s var(--ease-cine), top 0.45s var(--ease-cine),
    transform 0.4s var(--ease-cine), opacity 0.5s;
}

/* When roaming, the No button becomes absolutely positioned */
.btn-no.roaming {
  position: absolute;
  margin: 0;
}
.btn-no.gone { opacity: 0; transform: scale(0) rotate(160deg); pointer-events: none; }

.nice-try {
  position: relative;
  margin-top: 1.6em;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 3.4vw, 1.6rem);
  color: var(--gold);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s var(--ease-cine), transform 0.9s var(--ease-cine);
}
.nice-try.show { opacity: 1; transform: translateY(0); }

.hint {
  margin-top: 2.4em;
  font-size: 0.82rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(185, 192, 230, 0.5);
  animation-name: revealUp, floaty;
  animation-duration: 1.4s, 3.4s;
  animation-timing-function: var(--ease-cine), ease-in-out;
  animation-delay: 1.5s, 1.5s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* =========================================================================
   STORY
   ========================================================================= */
.story { flex-direction: column; }

/* A soft scrim pooling behind the story text: gives the galaxy depth and lets
   the lines read cleanly without dimming the whole sky. */
.story::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(58% 44% at 50% 50%,
    rgba(15, 15, 35, 0.6) 0%,
    rgba(15, 15, 35, 0.34) 45%,
    rgba(15, 15, 35, 0.08) 70%,
    transparent 85%);
}

.chapter-badge {
  position: absolute;
  top: clamp(48px, 12vh, 120px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 1s var(--ease-cine), transform 1s var(--ease-cine);
  white-space: nowrap;
}
.chapter-badge.show { opacity: 1; }
.chapter-badge .num {
  display: inline-block;
  color: var(--gold);
  margin-left: 0.4em;
  letter-spacing: 0.2em;
}

/* Full-screen chapter title card (anime episode-title feel) */
.chapter-card {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, rgba(15, 15, 35,0.35), rgba(15, 15, 35,0.72));
  transition: opacity 1.1s var(--ease-cine), visibility 1.1s;
}
.chapter-card.show { opacity: 1; visibility: visible; }

.cc-inner { display: flex; flex-direction: column; align-items: center; }
.cc-kicker {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s var(--ease-cine) 0.15s, transform 1s var(--ease-cine) 0.15s;
}
.cc-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3.4rem, 13vw, 7rem);
  line-height: 1;
  margin: 0.06em 0 0.14em;
  color: var(--gold);                       /* solid gold — one hue, calmer */
  text-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
  opacity: 0; transform: translateY(20px) scale(0.94);
  transition: opacity 1.2s var(--ease-cine) 0.3s, transform 1.2s var(--ease-cine) 0.3s;
}
.cc-rule {
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36,0.8), transparent);
  transition: width 1.1s var(--ease-cine) 0.55s;
}
.cc-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 6vw, 3rem);
  color: var(--ink);
  margin-top: 0.5em;
  text-shadow: 0 0 30px rgba(167, 139, 250, 0.4);
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.1s var(--ease-cine) 0.7s, transform 1.1s var(--ease-cine) 0.7s;
}
.cc-sub {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.85rem, 2.6vw, 1.05rem);
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  margin-top: 0.9em;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.1s var(--ease-cine) 0.95s, transform 1.1s var(--ease-cine) 0.95s;
}
/* Staggered reveal when card is shown */
.chapter-card.show .cc-kicker,
.chapter-card.show .cc-num,
.chapter-card.show .cc-title,
.chapter-card.show .cc-sub { opacity: 1; transform: translateY(0) scale(1); }
.chapter-card.show .cc-rule { width: min(260px, 60vw); }

.stage {
  width: min(880px, 92vw);
  text-align: center;
  position: relative;
  z-index: 2;                    /* story text sits above the background scrim */
}
.lines { position: relative; }

/* Each line of story — set like a subtitle in an animated film: quiet, high
   contrast, generously spaced, and it never glows for attention. */
.line {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 4.1vw, 2.35rem);   /* smaller: subtitles, not titles */
  line-height: 1.5;                             /* room to breathe */
  letter-spacing: 0.005em;
  color: var(--ink);
  max-width: 34ch;                              /* comfortable reading measure */
  margin: 0.34em auto;                          /* generous air between lines */
  text-wrap: balance;
  opacity: 0;
  transform: translateY(14px);                  /* a smaller, calmer arrival */
  filter: blur(5px);
  /* A legibility shadow against the sky, not a bloom effect. */
  text-shadow: 0 1px 18px rgba(15, 15, 35, 0.85);
  /* Arrives slowly and settles; leaves faster than it came (a line that lingers
     on its way out reads as lag, not grace). */
  transition:
    opacity 1.5s var(--ease-settle),
    transform 1.5s var(--ease-settle),
    filter 1.5s var(--ease-settle);
}
.line.in { opacity: 1; transform: translateY(0); filter: blur(0); }
.line.out {
  opacity: 0; transform: translateY(-10px); filter: blur(4px);
  transition:
    opacity 0.75s var(--ease-exit),
    transform 0.75s var(--ease-exit),
    filter 0.75s var(--ease-exit);
}

/* Emphasis line (her name, the turns of the story). Bright — but earned, and
   only because everything around it is restrained. */
.line.accent {
  font-style: italic;
  font-size: clamp(1.7rem, 5vw, 2.9rem);
  font-weight: 600;
  max-width: 30ch;
  background: linear-gradient(115deg, var(--gold), var(--rose) 65%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(244, 114, 182, 0.28));
}
.line.small {
  font-size: clamp(1.1rem, 3.6vw, 1.7rem);
  color: var(--ink-soft);
  font-style: italic;
}

/* Continue affordance */
.continue {
  position: absolute;
  bottom: clamp(40px, 10vh, 96px);
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0;
  cursor: none;
  color: rgba(185, 192, 230, 0.75);
  opacity: 0; pointer-events: none;
  transition: opacity 0.8s var(--ease-cine);
}
@media (hover: none),(pointer: coarse){ .continue { cursor: pointer; } }
.continue.show { opacity: 1; pointer-events: auto; }
.continue-label {
  font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase;
}
.continue-arrow {
  font-size: 1.4rem; line-height: 1;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(7px);} }

.skip {
  position: absolute;
  /* Sits to the LEFT of the 44px sound toggle (which is pinned at right:18px),
     and matches its height/top so the two read as one row. */
  top: max(18px, env(safe-area-inset-top));
  right: calc(max(18px, env(safe-area-inset-right)) + 56px);
  height: 44px;                      /* aligns with the toggle + meets 44px touch target */
  display: inline-flex;
  align-items: center;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 0 1.1em;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
  cursor: none;
  opacity: 0.6;
  transition: opacity 0.3s, transform 0.3s;
}
@media (hover: none),(pointer: coarse){ .skip { cursor: pointer; } }
.skip:hover { opacity: 1; transform: translateY(-1px); }

/* =========================================================================
   FINALE
   ========================================================================= */
.finale { flex-direction: column; }
#constellation {
  position: fixed; inset: 0; z-index: 11;
  width: 100%; height: 100%;
  pointer-events: none;
}
.finale-text {
  position: relative; z-index: 12;
  text-align: center;
  width: min(900px, 92vw);
}
.finale-line {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 6vw, 3.6rem);
  line-height: 1.3;
  margin: 0.15em 0;
  opacity: 0;
  transform: scale(0.94);
  filter: blur(10px);
  transition: opacity 1.6s var(--ease-cine), transform 1.6s var(--ease-cine), filter 1.6s var(--ease-cine);
}
.finale-line.in { opacity: 1; transform: scale(1); filter: blur(0); }
.finale-line.glow {
  font-weight: 600;
  background: linear-gradient(120deg, #fff, var(--gold) 40%, var(--rose) 75%, var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 34px rgba(251, 191, 36, 0.6));
}
.finale-line.heart {
  font-size: clamp(2.6rem, 9vw, 5rem);
  animation: heartBeat 1.8s ease-in-out infinite;
}
.finale-line.heart .ic {
  vertical-align: middle;
  filter: drop-shadow(0 0 26px rgba(255, 120, 160, 0.55));
}
@keyframes heartBeat {
  0%,100% { transform: scale(1); }
  15% { transform: scale(1.18); }
  30% { transform: scale(1); }
  45% { transform: scale(1.12); }
}

.replay {
  margin-top: 2.4em;
  position: relative; z-index: 12;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 0.8em 2em;
  font-size: 0.9rem; letter-spacing: 0.2em;
  color: var(--ink);
  cursor: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-cine), transform 0.3s;
}
@media (hover: none),(pointer: coarse){ .replay { cursor: pointer; } }
.replay.show { opacity: 1; }
.replay:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(251, 191, 36,0.35); }

/* ---------- Sound toggle -------------------------------------------------- */
.sound-toggle {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  z-index: 80;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: none;
  display: grid; place-items: center;
  transition: transform 0.3s, box-shadow 0.3s, opacity .6s;
  opacity: 0;
}
.sound-toggle.show { opacity: 1; }
@media (hover: none),(pointer: coarse){ .sound-toggle { cursor: pointer; } }
.sound-toggle:hover { transform: scale(1.08); box-shadow: 0 0 22px rgba(253, 186, 116,0.35); }
.sound-toggle .ico-off { display: none; }
.sound-toggle.muted .ico-on { display: none; }
.sound-toggle.muted .ico-off { display: inline; }

/* ---------- Motion-reduction courtesy ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .aurora, .grain, .continue-arrow, .btn-yes.radiant, .finale-line.heart { animation: none !important; }
  * { transition-duration: 0.35s !important; }
}

/* ---------- Small-screen tuning ------------------------------------------ */
@media (max-width: 520px) {
  .btn-field { min-height: 120px; }
  .chapter-badge { letter-spacing: 0.35em; font-size: 0.68rem; }
  .line { margin: 0.14em 0; }
}

/* ============================================================================
   ============================================================================
   POST-CREDITS EPILOGUE  — fantasy becomes reality
   (all additive; nothing above is modified)
   ============================================================================
   ========================================================================== */

/* ---------- Bridge: darken + fly toward one bright star ------------------ */
.reality-dim {
  position: fixed; inset: 0; z-index: 45;
  background: #0F0F23;
  opacity: 0; pointer-events: none;
  transition: opacity 4.5s var(--ease-cine);
}
.reality-dim.show { opacity: 0.7; }

.bright-star {
  position: fixed; z-index: 55;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0; pointer-events: none;
  transition: opacity 1.4s ease;
}
.bright-star.show { opacity: 1; }
.bs-core {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #FFF6DD 30%, rgba(251, 191, 36,0.6) 55%, transparent 72%);
  box-shadow: 0 0 40px 10px rgba(255,255,255,0.9), 0 0 120px 40px rgba(251, 191, 36,0.6);
  transition: transform 5s var(--ease-cine), opacity 1.2s ease;
  will-change: transform;
}
.bright-star.approach .bs-core { transform: scale(80); }   /* camera flies in */

.bs-photo {
  position: absolute; top: 50%; left: 50%;
  width: min(72vw, 440px); aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%) scale(0.2);
  border-radius: 18px;
  background-size: cover; background-position: center;
  box-shadow: 0 0 60px rgba(255,255,255,0.5), 0 20px 60px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.35);
  opacity: 0;
  transition: opacity 1.6s ease, transform 1.8s var(--ease-cine);
}
.bright-star.photo .bs-photo { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bright-star.photo .bs-core { opacity: 0; }

/* ---------- The scrollable reality layer --------------------------------- */
.epilogue {
  position: fixed; inset: 0; z-index: 50;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;      /* no scroll chaining to the page behind */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 1.6s var(--ease-cine), visibility 1.6s;
}
.epilogue.show { opacity: 1; visibility: visible; pointer-events: auto; }

.epi-block {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(48px, 10vh, 120px) 22px;
}

/* Generic scroll-reveal element */
.reveal-el {
  opacity: 0; transform: translateY(40px);
  transition: opacity 1.1s var(--ease-cine), transform 1.1s var(--ease-cine);
  will-change: transform, opacity;
}
.reveal-el.in { opacity: 1; transform: translateY(0); }

/* ---------- Reality intro ------------------------------------------------ */
.ri-inner { max-width: min(900px, 92vw); }
.ri-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 6.5vw, 4rem);
  line-height: 1.12;
  background: linear-gradient(120deg, #fff, var(--gold) 40%, var(--rose) 75%, var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 34px rgba(251, 191, 36, 0.5));
  margin-bottom: 0.6em;
}
.ri-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 3.6vw, 1.9rem);
  color: var(--ink-soft);
  line-height: 1.6;
  text-wrap: balance;
}
/* the line that lands the metaphor: upright against the italic, and brighter */
.ri-sub em {
  font-style: normal;
  color: var(--ink);
  display: inline-block;
  margin-top: 0.5em;
}
.ri-scrollcue {
  margin-top: 3em;
  font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(185,192,230,0.6);
  animation: floaty 3s ease-in-out infinite;
}

/* ---------- Journey + counter ------------------------------------------- */
.journey-head { margin-bottom: clamp(28px, 6vh, 56px); max-width: min(820px, 92vw); }
.journey-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 5.4vw, 3.2rem);
  color: var(--ink);
  text-shadow: 0 0 30px rgba(167, 139, 250,0.4);
  margin-bottom: 0.4em;
}
.journey-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1rem, 3.2vw, 1.5rem);
  color: var(--ink-soft);
}

.counter-card {
  position: relative;
  width: min(860px, 94vw);
  padding: clamp(28px, 5vw, 52px) clamp(20px, 4vw, 44px);
  border-radius: 28px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-brd);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-2), inset 0 0 40px rgba(167, 139, 250,0.08), var(--glass-hi);
  overflow: hidden;
}
/* Gentle breathing glow */
.cc-glow {
  position: absolute; inset: -40%;
  background: radial-gradient(circle at 50% 40%, rgba(244, 114, 182,0.11), transparent 55%);
  animation: ccBreathe 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ccBreathe { 0%,100%{opacity:0.35;transform:scale(1);} 50%{opacity:0.6;transform:scale(1.05);} }

/* A faint orbiting mote — ambient, not a distraction from the numbers */
.cc-orbit { position: absolute; inset: 0; pointer-events: none; opacity: 0.4; }
.cc-orbit::before, .cc-orbit::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px 1.5px rgba(251, 191, 36,0.6);
  margin: -2px;
  transform-origin: 0 0;
}
.cc-orbit::before { animation: orbit1 24s linear infinite; }
.cc-orbit::after  { animation: orbit2 30s linear infinite; background: var(--cyan); box-shadow: 0 0 8px 1.5px rgba(253, 186, 116,0.5); }
@keyframes orbit1 { from{ transform: rotate(0deg) translateX(min(40vw,300px)) rotate(0deg);} to{ transform: rotate(360deg) translateX(min(40vw,300px)) rotate(-360deg);} }
@keyframes orbit2 { from{ transform: rotate(120deg) translateX(min(34vw,250px)) rotate(0deg);} to{ transform: rotate(480deg) translateX(min(34vw,250px)) rotate(-360deg);} }

.counter-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2.5vw, 26px);
}
.unit {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: clamp(12px, 2vw, 20px) 6px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.unit .num {
  font-family: var(--sans);           /* Space Grotesk — instrument readout */
  font-weight: 500;
  font-size: clamp(1.9rem, 7vw, 3.7rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 0 26px rgba(251, 191, 36, 0.45);
  font-variant-numeric: tabular-nums;  /* digits never shift width as they tick */
  font-feature-settings: "tnum" 1, "zero" 1;  /* slashed zero */
  transition: transform 0.25s var(--ease-cine), color 0.25s;
}
.unit .num.pulse { transform: scale(1.16); color: var(--gold); }
.unit .lab {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(0.58rem, 1.9vw, 0.8rem);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.counter-since {
  position: relative; z-index: 1;
  margin-top: 1.6em;
  font-size: 0.82rem; letter-spacing: 0.14em;
  color: rgba(185,192,230,0.7);
}
.love-message {
  position: relative; z-index: 1;
  margin-top: 1.1em;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 3.4vw, 1.6rem);
  color: var(--ink);
  min-height: 1.6em;
  transition: opacity 0.8s var(--ease-cine);
}
.love-message.swap { opacity: 0; }

/* "Another beautiful day" toast */
.day-toast {
  position: relative; z-index: 1;
  margin: 1.2em auto 0;
  display: inline-block;
  padding: 0.6em 1.4em; border-radius: 999px;
  background: rgba(251, 191, 36,0.12);
  border: 1px solid rgba(251, 191, 36,0.4);
  color: var(--gold);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(0.95rem, 3vw, 1.3rem);
  opacity: 0; transform: translateY(10px) scale(0.96);
  transition: opacity 0.8s var(--ease-cine), transform 0.8s var(--ease-cine);
  pointer-events: none;
}
.day-toast.show { opacity: 1; transform: translateY(0) scale(1); }

/* Milestone celebration banner (created by JS) */
.milestone-banner {
  position: fixed; z-index: 70;
  top: 12%; left: 50%; transform: translateX(-50%) translateY(-20px);
  text-align: center;
  padding: 1em 2em; border-radius: 22px;
  background: rgba(10,6,32,0.55);
  border: 1px solid rgba(251, 191, 36,0.45);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 60px rgba(251, 191, 36,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 1s var(--ease-cine), transform 1s var(--ease-cine);
  max-width: 92vw;
}
.milestone-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.milestone-banner .mb-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  background: linear-gradient(120deg, var(--gold), var(--rose), var(--cyan));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 0.2em;
}
.milestone-banner .mb-msg { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: clamp(0.95rem, 3vw, 1.3rem); }

/* ---------- Timeline ----------------------------------------------------- */
.timeline-section { padding-top: clamp(60px, 12vh, 140px); }
.timeline-head { margin-bottom: clamp(30px, 7vh, 70px); }
.timeline-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 5.4vw, 3rem);
  color: var(--ink); margin-bottom: 0.35em;
  text-shadow: 0 0 30px rgba(167, 139, 250,0.4);
}
.timeline-sub { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: clamp(1rem, 3vw, 1.4rem); }

/* Vertical constellation timeline (mobile-first) */
.timeline-track {
  position: relative;
  width: min(1100px, 96vw);
  display: flex; flex-direction: column;
  gap: clamp(40px, 8vh, 90px);
  padding: 20px 0 60px;
}
/* the glowing spine */
.timeline-track::before {
  content: ""; position: absolute;
  top: 0; bottom: 0; left: 22px; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(167, 139, 250,0.5), rgba(244, 114, 182,0.5), rgba(253, 186, 116,0.4), transparent);
  box-shadow: 0 0 16px rgba(167, 139, 250,0.5);
}

.month-card {
  position: relative;
  margin-left: 58px;
  padding: clamp(16px, 2.5vw, 24px);
  border-radius: 20px;
  /* Solid-ish glass (no backdrop-filter here: there can be ~37 cards, and
     stacking that many blur layers is expensive on mobile). */
  background: rgba(18, 12, 42, 0.55);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  opacity: 0; transform: translateY(50px);
  transition: opacity 1s var(--ease-cine), transform 1s var(--ease-cine), box-shadow 0.5s;
}
.month-card.in { opacity: 1; transform: translateY(0); animation: cardFloat 7s ease-in-out infinite; }
@keyframes cardFloat { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }

/* the constellation node on the spine */
.month-card::before {
  content: ""; position: absolute;
  left: -47px; top: 26px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--gold) 55%, transparent 75%);
  box-shadow: 0 0 0 4px rgba(251, 191, 36,0.12), 0 0 20px 4px rgba(251, 191, 36,0.6);
  transition: box-shadow 0.6s, transform 0.6s;
}
.month-card.in::before { animation: nodePulse 3.4s ease-in-out infinite; }
@keyframes nodePulse { 0%,100%{ box-shadow: 0 0 0 4px rgba(251, 191, 36,0.12), 0 0 18px 3px rgba(251, 191, 36,0.55);} 50%{ box-shadow: 0 0 0 7px rgba(251, 191, 36,0.16), 0 0 30px 8px rgba(251, 191, 36,0.85);} }

.mc-label {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.2rem, 4vw, 1.9rem);
  color: #fff; margin-bottom: 0.15em;
}
.mc-caption {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-soft); font-size: clamp(0.9rem, 2.8vw, 1.15rem);
  margin-bottom: 1em;
}
.mc-note { color: var(--ink-soft); font-size: 0.86rem; margin-bottom: 1em; opacity: 0.85; }

.mc-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.mc-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px; overflow: hidden;
  cursor: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}
@media (hover: none),(pointer: coarse){ .mc-photo { cursor: pointer; } }
.mc-photo img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1s var(--ease-cine), transform 6s var(--ease-cine);
}
.mc-photo img.loaded { opacity: 1; transform: scale(1); }
.mc-photo:hover img { transform: scale(1.1); }
.mc-photo .mc-cat {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 0.72rem; padding: 2px 8px; border-radius: 999px;
  background: rgba(10,6,32,0.6); border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* placeholder frame when a photo file isn't there yet */
.mc-photo.empty {
  display: grid; place-items: center;
  color: rgba(185,192,230,0.6); font-size: 1.6rem;
  background:
    radial-gradient(circle at 50% 40%, rgba(167, 139, 250,0.14), transparent 60%),
    rgba(255,255,255,0.03);
}
.mc-photo.empty::after {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(166, 173, 218, 0.5);
  box-shadow: 0 0 10px 2px rgba(167, 139, 250, 0.35);
}

/* empty month card */
.month-card.empty { text-align: left; }
.mc-empty {
  font-family: var(--serif); font-style: italic;
  color: rgba(185,192,230,0.55);
  font-size: clamp(0.92rem, 2.8vw, 1.15rem);
}

/* Special (December 2023) month treatment */
.month-card.special {
  border-color: rgba(251, 191, 36,0.5);
  box-shadow: 0 0 50px rgba(251, 191, 36,0.28), 0 20px 60px rgba(0,0,0,0.4);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(251, 191, 36,0.12), transparent 60%),
    rgba(255,255,255,0.05);
}
.month-card.special::before {
  width: 20px; height: 20px; left: -50px;
  background: radial-gradient(circle, #fff, var(--gold) 50%, var(--rose) 80%, transparent);
  box-shadow: 0 0 0 6px rgba(251, 191, 36,0.16), 0 0 34px 10px rgba(251, 191, 36,0.85);
}
.month-card.special .mc-label {
  background: linear-gradient(120deg, var(--gold), var(--rose));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* lens-flare sweep on the special card */
.month-card.special::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  background-size: 250% 250%;
  animation: flareSweep 6s ease-in-out infinite;
}
@keyframes flareSweep { 0%{ background-position: 120% 0;} 100%{ background-position: -60% 0;} }

/* Desktop: horizontal constellation timeline */
@media (min-width: 900px) {
  .timeline-track {
    flex-direction: row;
    align-items: stretch;
    gap: 40px;
    width: min(96vw, 1400px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 60px 20px 40px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .timeline-track::before {
    top: 78px; bottom: auto; left: 0; right: 0;
    width: auto; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250,0.5), rgba(244, 114, 182,0.5), rgba(253, 186, 116,0.4), transparent);
  }
  .month-card {
    flex: 0 0 min(340px, 74vw);
    margin-left: 0; margin-top: 64px;
    scroll-snap-align: center; text-align: left;
  }
  .month-card::before { left: 50%; top: -46px; transform: translateX(-50%); }
  .month-card.special::before { left: 50%; transform: translateX(-50%); }
  .timeline-hint { display: block; }
}
.timeline-hint {
  display: none; margin-top: 8px;
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(185,192,230,0.5);
}

/* ---------- Future section + replay ------------------------------------- */
/* Extra bottom inset so the signature always clears the fixed player /
   forget-device that float above the page. */
.future-section {
  padding-top: clamp(70px, 14vh, 160px);
  padding-bottom: clamp(140px, 20vh, 220px);
}
.future-inner { max-width: min(760px, 92vw); display: flex; flex-direction: column; align-items: center; }
.future-frame {
  width: min(280px, 70vw); aspect-ratio: 4/3;
  border-radius: 18px;
  border: 1.5px dashed rgba(251, 191, 36,0.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(251, 191, 36,0.08), transparent 65%);
  box-shadow: 0 0 40px rgba(251, 191, 36,0.15);
  margin-bottom: 2.4em;
  animation: framePulse 4.5s ease-in-out infinite;
}
@keyframes framePulse { 0%,100%{ box-shadow: 0 0 34px rgba(251, 191, 36,0.14);} 50%{ box-shadow: 0 0 60px rgba(251, 191, 36,0.32);} }
.ff-plus { font-size: 2rem; color: var(--gold); }
.ff-cap { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: 1rem; padding: 0 1em; }

.future-line {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 5vw, 2.6rem);
  color: var(--ink); margin: 0.3em 0;
  text-shadow: 0 0 30px rgba(167, 139, 250,0.4);
}
.future-line.dim { color: var(--ink-soft); font-style: italic; font-size: clamp(1.1rem, 3.6vw, 1.7rem); }

.replay-story {
  margin-top: 2.6em;
  padding: 1em 2.4em; border-radius: 999px;
  font-family: var(--sans); font-size: 1rem; letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(120deg, rgba(251, 191, 36,0.22), rgba(244, 114, 182,0.22));
  border: 1px solid rgba(251, 191, 36,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 40px rgba(251, 191, 36,0.4), inset 0 0 22px rgba(255,255,255,0.12);
  cursor: none;
  animation: yesPulse 2.6s ease-in-out infinite;
  transition: transform 0.3s var(--ease-cine), box-shadow 0.3s;
}
@media (hover: none),(pointer: coarse){ .replay-story { cursor: pointer; } }
.replay-story:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 0 60px rgba(251, 191, 36,0.6); }

/* Closing signature — a dedication, then the credit beneath it */
.made-by {
  margin-top: 3.4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.mb-dedication {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 3vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 28ch;
  text-wrap: balance;
}
.mb-name {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--sans);
  font-size: clamp(0.85rem, 2.4vw, 1rem);
}
.mb-by {
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
/* The signature itself — starlight slowly catches it and passes across. */
.mb-who {
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 38%,
    var(--gold) 50%,
    var(--ink) 62%, var(--ink) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mbShine 6s linear infinite;
}
@keyframes mbShine {
  0%   { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-who {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--ink);
  }
}

/* ---------- Cinematic lightbox ------------------------------------------ */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  overscroll-behavior: contain;      /* modal: don't scroll the timeline behind */
  padding: 24px;
  background: rgba(3,1,10,0.72);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  opacity: 0; transition: opacity 0.5s var(--ease-cine);
}
.lightbox.open { display: flex; }
.lightbox.visible { opacity: 1; }
.lb-figure {
  margin: 0; max-width: min(1100px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  transform: scale(0.92); opacity: 0;
  transition: transform 0.6s var(--ease-cine), opacity 0.6s var(--ease-cine);
}
.lightbox.visible .lb-figure { transform: scale(1); opacity: 1; }
.lb-imgwrap {
  max-width: 94vw; max-height: 70vh; border-radius: 16px; overflow: hidden;
  min-width: min(240px, 60vw); min-height: min(200px, 30vh);   /* reserve space → no jump on load */
  display: grid; place-items: center;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.16);
  background: #1B1B30;
}
/* width/height attrs give the intrinsic ratio; these keep it fitting the box */
.lb-imgwrap img { display: block; width: auto; height: auto; max-width: 94vw; max-height: 70vh; object-fit: contain; }
/* When the photo hasn't been uploaded yet */
.lb-imgwrap.noimg {
  width: min(70vw, 460px); height: min(48vh, 340px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(167, 139, 250,0.18), transparent 65%), #1B1B30;
}
.lb-imgwrap.noimg img { display: none; }
.lb-imgwrap.noimg::after {
  content: "photo coming soon";
  font-family: var(--serif); font-style: italic;
  color: var(--ink-soft); font-size: clamp(1rem, 3vw, 1.3rem);
}
.lb-cap { text-align: center; display: flex; flex-direction: column; gap: 5px; max-width: min(700px, 90vw); }
.lb-badge { font-size: 0.9rem; color: var(--gold); }
.lb-badge:empty { display: none; }
.lb-month { font-size: 0.76rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); }
.lb-title { font-family: var(--serif); font-size: clamp(1.1rem, 3.4vw, 1.6rem); color: #fff; }
.lb-story { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: clamp(0.9rem, 2.6vw, 1.1rem); }
.lb-story:empty { display: none; }

.lb-close, .lb-nav {
  position: absolute; z-index: 2;
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-brd);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; border-radius: 50%;
  width: 48px; height: 48px; font-size: 1.4rem; line-height: 1;
  cursor: none; display: grid; place-items: center;
  transition: transform 0.25s, background 0.25s;
}
@media (hover: none),(pointer: coarse){ .lb-close, .lb-nav { cursor: pointer; } }
.lb-close:hover, .lb-nav:hover { transform: scale(1.1); background: rgba(255,255,255,0.14); }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) scale(1.1); }
.lb-next:hover { transform: translateY(-50%) scale(1.1); }

/* ---------- Floating music player --------------------------------------- */
/* Anchored bottom-RIGHT so it never sits on top of the centred content
   (the signature lives at the bottom of the page). Collapsible to a pill. */
.player {
  position: fixed; z-index: 85;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateY(0);
  display: flex; align-items: center; gap: 14px;
  width: min(380px, calc(100vw - 36px));
  padding: 10px 16px; border-radius: 18px;
  background: rgba(27, 27, 48, 0.62);
  border: 1px solid var(--glass-brd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-2), var(--glass-hi);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.6s var(--ease-cine), transform 0.6s var(--ease-cine),
              visibility 0.6s, width 0.5s var(--ease-cine), padding 0.5s var(--ease-cine);
}
.player.show { opacity: 1; visibility: visible; pointer-events: auto; }
.player.idle { opacity: 0.22; transform: translateY(6px); }
.player.idle:hover { opacity: 1; }

/* Collapsed → a compact pill: just play/pause + the expand chevron */
.player.collapsed { width: auto; gap: 6px; padding: 8px 10px; }
.player.collapsed .pl-meta,
.player.collapsed .pl-vol { display: none; }

.pl-collapse {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: none; border: 0;
  color: var(--ink-soft);
  font-size: 1rem; line-height: 1;
  cursor: none;
  display: grid; place-items: center;
  transition: transform 0.35s var(--ease-cine), color 0.25s;
}
@media (hover: none),(pointer: coarse){ .pl-collapse { cursor: pointer; } }
.pl-collapse:hover { color: var(--ink); }
.player.collapsed .pl-collapse { transform: rotate(180deg); }

.pl-toggle {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(120deg, rgba(251, 191, 36,0.25), rgba(244, 114, 182,0.25));
  border: 1px solid rgba(251, 191, 36,0.5);
  color: #fff; font-size: 1rem; cursor: none;
  display: grid; place-items: center;
  transition: transform 0.25s, box-shadow 0.25s;
}
@media (hover: none),(pointer: coarse){ .pl-toggle { cursor: pointer; } }
.pl-toggle:hover { transform: scale(1.08); box-shadow: 0 0 22px rgba(251, 191, 36,0.5); }

.pl-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pl-now { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.pl-song { font-family: var(--serif); font-size: 0.95rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-progress { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; cursor: none; }
@media (hover: none),(pointer: coarse){ .pl-progress { cursor: pointer; } }
.pl-bar { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--rose)); transition: width 0.2s linear; }

.pl-vol { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.pl-volico { font-size: 0.9rem; }
.pl-volslider { width: 74px; accent-color: var(--gold); cursor: none; }
@media (hover: none),(pointer: coarse){ .pl-volslider { cursor: pointer; } }
@media (max-width: 520px) {
  .pl-vol { display: none; }        /* keep the player compact on phones */
  .player { gap: 10px; padding: 9px 13px; }
}

/* Sparkle burst element (JS-spawned for minute sparkles / milestones) */
.spark {
  position: fixed; z-index: 68; pointer-events: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(251, 191, 36,0.9);
  opacity: 0;
}

/* Motion-reduction courtesy for the epilogue */
@media (prefers-reduced-motion: reduce) {
  .cc-orbit::before, .cc-orbit::after, .cc-glow, .month-card.in,
  .month-card.special::after, .future-frame, .replay-story, .ri-scrollcue,
  .month-card.in::before { animation: none !important; }
}

/* ============================================================================
   ============================================================================
   SECRET PASSWORD GATE + RELATIONSHIP CELEBRATIONS
   ============================================================================
   ========================================================================== */

/* Galaxy dim layer (sits above the canvas/fx but below the screens) */
.gate-dark {
  position: fixed; inset: 0; z-index: 6;
  background: #0F0F23;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease-cine);
}
.gate-dark.show { opacity: 0.66; }

/* ---------- The gate screen --------------------------------------------- */
.gate .gate-inner {
  position: relative;
  text-align: center;
  max-width: min(680px, 92vw);
  display: flex; flex-direction: column; align-items: center;
}
.gate-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 6.5vw, 3.6rem);
  line-height: 1.1;
  background: linear-gradient(120deg, #fff 0%, var(--cyan) 45%, var(--rose) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(167, 139, 250, 0.32));
  margin-bottom: 0.9em;
  animation: gateTitleGlow 7s ease-in-out infinite;
}
@keyframes gateTitleGlow {
  0%,100% { filter: drop-shadow(0 0 20px rgba(167, 139, 250,0.3)); }
  50%     { filter: drop-shadow(0 0 30px rgba(244, 114, 182,0.4)); }
}
/* Flicker when the password is wrong */
.gate.flicker .gate-title { animation: gateFlicker 0.7s steps(2) 1; }
@keyframes gateFlicker {
  0%,100% { opacity: 1; }
  20% { opacity: 0.25; } 35% { opacity: 0.9; }
  55% { opacity: 0.2; } 70% { opacity: 0.85; } 85% { opacity: 0.4; }
}

.gate-msg { margin-bottom: 2em; }
.gate-msg p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 3.2vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0.15em 0;
}
.gate-msg p:last-child { color: var(--ink); margin-top: 0.5em; }

.gate-form {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; width: 100%;
}
.gate-inputwrap {
  position: relative; width: min(420px, 88vw);
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(120deg, rgba(251, 191, 36,0.4), rgba(167, 139, 250,0.4), rgba(253, 186, 116,0.4));
  box-shadow: 0 0 28px rgba(167, 139, 250, 0.3);
  transition: box-shadow 0.4s;
}
.gate-inputwrap:focus-within { box-shadow: 0 0 44px rgba(244, 114, 182, 0.5); }
.gate-input {
  width: 100%;
  border: 0; outline: none;
  background: rgba(10, 6, 32, 0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1rem, 3.2vw, 1.3rem);
  text-align: center;
  letter-spacing: 0.04em;
  padding: 0.85em 1.4em;
  border-radius: 999px;
  cursor: none;
}
@media (hover: none),(pointer: coarse){ .gate-input { cursor: text; } }
.gate-input::placeholder { color: rgba(185, 192, 230, 0.6); font-style: italic; }
/* Gentle shake on a wrong answer */
.gate.shake .gate-inputwrap { animation: gateShake 0.5s var(--ease-soft); }
@keyframes gateShake {
  0%,100% { transform: translateX(0); }
  15% { transform: translateX(-10px); } 30% { transform: translateX(9px); }
  45% { transform: translateX(-7px); } 60% { transform: translateX(6px); }
  75% { transform: translateX(-4px); } 90% { transform: translateX(2px); }
}

.gate-btn {
  position: relative;
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: linear-gradient(120deg, rgba(251, 191, 36,0.2), rgba(244, 114, 182,0.2));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  letter-spacing: 0.04em;
  padding: 0.85em 2.2em;
  border-radius: 999px;
  cursor: none; overflow: hidden;
  box-shadow: 0 0 26px rgba(251, 191, 36, 0.3), inset 0 0 18px rgba(255,255,255,0.1);
  transition: transform 0.35s var(--ease-cine), box-shadow 0.4s, filter 0.4s;
}
@media (hover: none),(pointer: coarse){ .gate-btn { cursor: pointer; } }
.gate-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 44px rgba(251, 191, 36,0.55); }
.gate-btn.unlocking {
  animation: gateUnlockGlow 1.4s ease-in-out;
  box-shadow: 0 0 80px rgba(251, 191, 36,0.9), 0 0 140px rgba(244, 114, 182,0.6);
  filter: brightness(1.4);
}
@keyframes gateUnlockGlow { 0%{ filter: brightness(1);} 100%{ filter: brightness(1.6);} }

.gate-error {
  margin-top: 1.6em;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: var(--rose);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.6s var(--ease-cine), transform 0.6s var(--ease-cine);
  pointer-events: none;
  min-height: 1.4em;
}
.gate-error.show { opacity: 1; transform: translateY(0); }

/* Dissolve the whole gate into stardust on success */
.gate.dissolve {
  opacity: 0 !important;
  filter: blur(14px) brightness(1.6);
  transform: scale(1.12);
  transition: opacity 1.6s var(--ease-cine), filter 1.6s var(--ease-cine), transform 1.6s var(--ease-cine);
}

/* ---------- Forget-this-device footer link ------------------------------ */
.forget-device {
  position: fixed; z-index: 80;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  background: none; border: 0;
  font-family: var(--sans); font-weight: 300;
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-faint);
  cursor: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s, color 0.3s, visibility 0.5s;
}
@media (hover: none),(pointer: coarse){ .forget-device { cursor: pointer; } }
.forget-device.show { opacity: 1; visibility: visible; }
.forget-device:hover { color: rgba(244, 114, 182, 0.85); }
/* armed = one more tap wipes access; make that unmistakable */
.forget-device.armed { color: var(--nehmia); font-weight: 500; }

/* ---------- Celebration greeting banner --------------------------------- */
.celebrate-banner {
  position: fixed; z-index: 72;
  top: 9%; left: 50%;
  transform: translateX(-50%) translateY(-24px);
  text-align: center; max-width: 92vw;
  padding: 1em 2.2em; border-radius: 22px;
  background: rgba(10, 6, 32, 0.55);
  border: 1px solid rgba(251, 191, 36, 0.45);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 60px rgba(251, 191, 36, 0.35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 1.1s var(--ease-cine), transform 1.1s var(--ease-cine), visibility 1.1s;
}
.celebrate-banner.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.celebrate-banner.anniversary {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 90px rgba(251, 191, 36, 0.55);
}
.cb-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.3rem, 5vw, 2.3rem);
  background: linear-gradient(120deg, var(--gold), var(--rose) 60%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 0.2em;
}
.cb-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(0.9rem, 3vw, 1.25rem);
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ---------- Floating heart particles ------------------------------------ */
.hearts-layer { position: fixed; inset: 0; z-index: 67; pointer-events: none; overflow: hidden; }
/* soft glowing celebration particle (drifts upward) */
.heart {
  position: fixed; bottom: -40px;
  border-radius: 50%;
  will-change: transform, opacity;
  pointer-events: none;
}

/* ---------- Celebration treatment for the live counter ------------------ */
.counter-card.monthsary {
  border-color: rgba(244, 114, 182, 0.5);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 60px rgba(244, 114, 182, 0.35);
  animation: monthsaryGlow 4s ease-in-out infinite;
}
@keyframes monthsaryGlow {
  0%,100% { box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 46px rgba(244, 114, 182,0.28); }
  50%     { box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 80px rgba(244, 114, 182,0.5); }
}
.counter-card.anniversary {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 30px 90px rgba(0,0,0,0.5), 0 0 90px rgba(251, 191, 36, 0.5);
}
/* Golden celestial numbers on the anniversary */
.counter-card.anniversary .unit .num {
  background: linear-gradient(120deg, #fff, var(--gold) 55%, var(--rose));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 22px rgba(251, 191, 36, 0.7));
}

/* ---------- Timeline celebration decorations ---------------------------- */
/* Every December card gets a subtle anniversary accent */
.month-card.anniversary-month { border-color: rgba(251, 191, 36, 0.45); }
.mc-anniv {
  display: inline-block;
  margin-bottom: 0.5em;
  font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--gold);
  padding: 3px 10px; border-radius: 999px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
}
/* Monthsary memory badge on a photo */
.mc-photo .mc-monthsary {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: 0.72rem; padding: 2px 8px; border-radius: 999px;
  background: rgba(244, 114, 182, 0.22); border: 1px solid rgba(244, 114, 182,0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  .gate-title, .counter-card.monthsary { animation: none !important; }
}