/* ============================================================
   FOR ALI KORD
   A letter, not a landing page. Ink on a dark page that warms
   from night-blue to gold as the story is told.
   ============================================================ */

:root{
  /* surfaces */
  --void:    #050608;
  --ink:     #080a0f;
  --ash:     #0e1018;

  /* text */
  --bone:    #ece7dd;
  --bone-dim:#b9b4ab;
  --muted:   #7b7e88;
  --faint:   #474a54;

  /* the journey: blended by scroll progress in JS */
  --cold:    110, 168, 255;   /* night blue */
  --warm:    240, 184, 92;    /* ember gold */
  --accent:  rgb(110,168,255);
  --accent-rgb: 110,168,255;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --body:  "EB Garamond", Georgia, serif;

  --ease: cubic-bezier(.16,.84,.36,1);
  --slow: cubic-bezier(.22,1,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(18px,1.2vw,22px);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:none;
}
@media (hover:none){ body{ cursor:auto; } }
body[data-state="locked"]{ overflow:hidden; height:100vh; }

::selection{ background:rgba(var(--accent-rgb),.26); color:#fff; }

em{ font-style:italic; }

/* ============================================================
   FILM LAYERS — grain, vignette, embers, spotlight, cursor
   ============================================================ */
.grain{
  position:fixed; inset:-50%; z-index:60; pointer-events:none;
  opacity:.045; mix-blend-mode:screen;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,2%)}
  80%{transform:translate(4%,-2%)} 100%{transform:translate(0,0)}
}

.vignette{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:
    radial-gradient(140% 100% at 50% 16%, transparent 36%, rgba(0,0,0,.58) 100%),
    radial-gradient(120% 120% at 50% 120%, rgba(var(--accent-rgb),.06), transparent 55%);
}

#embers{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  width:100%; height:100%; opacity:0; transition:opacity 2s ease;
}
body[data-state="live"] #embers{ opacity:.85; }

.spotlight{
  position:fixed; z-index:1; pointer-events:none; inset:0;
  background:radial-gradient(calc(620px + var(--pulse,0)*220px) calc(620px + var(--pulse,0)*220px)
            at var(--mx,50%) var(--my,30%),
            rgba(var(--accent-rgb), calc(.07 + var(--pulse,0)*.08)), transparent 70%);
}

.cursor{
  position:fixed; top:0; left:0; z-index:90; pointer-events:none;
  width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.5);
  box-shadow:0 0 22px rgba(var(--accent-rgb),.28);
  transition:transform .14s var(--ease), opacity .3s, width .2s, height .2s;
  opacity:0;
}
.cursor::after{
  content:""; position:absolute; inset:0; margin:auto; width:3px; height:3px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent);
}
body[data-state="live"] .cursor{ opacity:1; }
.cursor.is-hover{ width:52px; height:52px; margin:-26px 0 0 -26px; }
@media (hover:none){ .cursor{ display:none; } }

/* ============================================================
   ENTER GATE
   ============================================================ */
.gate{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center; text-align:center;
  background:radial-gradient(120% 90% at 50% 42%, #0a0d14, #020304 76%);
  transition:opacity 1.5s var(--slow), visibility 1.5s;
}
.gate.is-gone{ opacity:0; visibility:hidden; }
.gate__inner{ padding:8vw 7vw; max-width:780px; }
.gate__kicker{
  font-family:var(--body); font-style:italic; font-size:1.05rem;
  letter-spacing:.04em; color:var(--muted); margin-bottom:2.2rem;
  animation:fadeUp 1.4s var(--slow) both;
}
.gate__title{
  font-family:var(--serif); font-weight:340; line-height:1.12;
  font-size:clamp(2.3rem,6vw,4.6rem); letter-spacing:-.01em;
  color:var(--bone); margin-bottom:3.2rem;
  animation:fadeUp 1.6s .22s var(--slow) both;
}
.gate__btn{
  position:relative; appearance:none; background:none; border:none; cursor:pointer;
  width:142px; height:142px; border-radius:50%; color:var(--bone);
  font-family:var(--serif); font-style:italic; font-size:1.25rem; letter-spacing:.01em;
  display:grid; place-items:center; margin:0 auto;
  animation:fadeUp 1.6s .46s var(--slow) both;
}
.gate__btn-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(236,231,221,.22);
  box-shadow:0 0 40px rgba(110,168,255,.12), inset 0 0 30px rgba(110,168,255,.05);
  transition:transform .6s var(--ease), border-color .6s, box-shadow .6s;
}
.gate__btn-ring::before{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid transparent; border-top-color:rgba(110,168,255,.65);
  animation:spin 8s linear infinite;
}
.gate__btn:hover .gate__btn-ring{
  transform:scale(1.07); border-color:rgba(110,168,255,.45);
  box-shadow:0 0 70px rgba(110,168,255,.28), inset 0 0 40px rgba(110,168,255,.1);
}
.gate__btn-label{ position:relative; }
.gate__hint{
  font-family:var(--body); font-style:italic; font-size:1rem;
  color:var(--faint); margin-top:2.6rem; letter-spacing:.02em;
  animation:fadeUp 1.6s .72s var(--slow) both;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes fadeUp{ from{opacity:0; transform:translateY(22px); filter:blur(6px);} to{opacity:1;transform:none;filter:none;} }

/* ============================================================
   HUD — quiet sound toggle + thread of light
   ============================================================ */
.hud{ opacity:0; transition:opacity 1.6s ease 1s; }
body[data-state="live"] .hud{ opacity:1; }

.sound{
  position:fixed; left:clamp(20px,3.4vw,46px); bottom:clamp(20px,3.4vw,46px); z-index:70;
  display:flex; align-items:center; gap:.55rem; cursor:pointer;
  background:none; border:none; color:var(--muted);
  font-family:var(--body); font-style:italic; font-size:1.05rem; letter-spacing:.02em;
  transition:color .4s;
}
.sound:hover{ color:var(--bone); }
.sound__note{ font-style:normal; font-size:1.1rem; opacity:.55; transition:opacity .4s, color .4s, text-shadow .4s; }
.sound[aria-pressed="true"] .sound__note{
  opacity:1; color:var(--accent); text-shadow:0 0 14px var(--accent);
  animation:notefloat 2.6s ease-in-out infinite;
}
@keyframes notefloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

.rail{
  position:fixed; right:clamp(20px,2.4vw,40px); top:50%; transform:translateY(-50%); z-index:70;
}
.rail__track{
  width:1px; height:34vh; max-height:300px; background:rgba(236,231,221,.10);
  position:relative; border-radius:2px;
}
.rail__fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(var(--accent), rgba(var(--accent-rgb),.2));
  box-shadow:0 0 12px rgba(var(--accent-rgb),.6); border-radius:2px;
}
@media (max-width:680px){ .rail{ display:none; } }

/* ============================================================
   SCENES
   ============================================================ */
#film{ position:relative; z-index:3; }

.scene{
  min-height:100vh; display:grid; place-items:center;
  padding:18vh clamp(30px,9vw,170px); position:relative;
}
.scene--dark{ background:linear-gradient(180deg, transparent, rgba(0,0,0,.4), transparent); }
.scene--wide{ padding-left:clamp(30px,6vw,90px); padding-right:clamp(30px,6vw,90px); }

.chap{ max-width:760px; width:100%; }
.chap--center{ text-align:center; margin:0 auto; }

/* the hairline flourish that replaces "CH. 01" tags */
.flourish{
  display:block; width:56px; height:1px; margin:0 0 2.1rem;
  background:linear-gradient(90deg, var(--accent), transparent); position:relative;
}
.flourish::after{
  content:""; position:absolute; left:0; top:-2px; width:5px; height:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 12px var(--accent);
}
.chap--center .flourish{
  margin-left:auto; margin-right:auto;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.chap--center .flourish::after{ left:50%; transform:translateX(-50%); }

.chap__title{
  font-family:var(--serif); font-weight:330; font-style:italic;
  font-size:clamp(2.4rem,6.4vw,4.8rem); line-height:1.02; color:var(--bone);
  margin-bottom:2.4rem; letter-spacing:-.015em;
}

.line{
  font-family:var(--serif); font-weight:320; font-optical-sizing:auto;
  font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.36; color:var(--bone);
  margin-bottom:1.5rem; max-width:34ch; letter-spacing:-.005em;
}
.chap--center .line{ margin-left:auto; margin-right:auto; }
.line--mute{
  font-family:var(--body); font-size:clamp(1.1rem,1.65vw,1.32rem);
  line-height:1.78; color:var(--bone-dim); max-width:46ch; font-weight:400; letter-spacing:0;
}
.line--big{ font-size:clamp(2rem,4.6vw,3.3rem); line-height:1.16; }
.line--accent{
  color:#fff; font-style:italic;
  text-shadow:0 0 32px rgba(var(--accent-rgb),.32); position:relative;
}

/* the hours — rendered as verse, not a stat block */
.hours{ margin:2.4rem 0 2.6rem; text-align:center; }
.hours__row{ display:inline-flex; align-items:baseline; gap:clamp(1.2rem,4vw,3rem); }
.hours__num{
  font-family:var(--serif); font-weight:430; font-style:italic;
  font-size:clamp(4rem,13vw,8.6rem); line-height:.92; color:#fff;
  background:linear-gradient(180deg,#fff, rgba(var(--accent-rgb),.85));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 48px rgba(var(--accent-rgb),.32);
}
.hours__sep{
  font-family:var(--serif); font-style:italic; color:var(--faint);
  font-size:clamp(2rem,6vw,4rem); transform:translateY(-.1em);
}
.hours__cap{
  font-family:var(--body); font-style:italic; color:var(--muted);
  font-size:clamp(1.05rem,1.6vw,1.25rem); margin-top:1.3rem;
}

/* ============================================================
   HERO
   ============================================================ */
.scene--hero{ min-height:100vh; }
.hero{ text-align:center; max-width:1100px; }
.stamp{
  font-family:var(--body); font-style:italic; font-size:1.05rem;
  letter-spacing:.03em; color:var(--muted); margin-bottom:3.4rem;
}
.hero__over{
  font-family:var(--serif); font-style:italic; font-weight:320;
  font-size:clamp(1.35rem,2.7vw,2.05rem); color:var(--bone-dim); line-height:1.42;
  margin-bottom:2.4rem; letter-spacing:-.005em;
}
.hero__name{
  font-family:var(--serif); font-weight:480; font-optical-sizing:auto;
  font-size:clamp(3.6rem,17vw,14rem); line-height:.86; letter-spacing:-.02em;
  margin-bottom:1.7rem; position:relative;
}
.hero__name::before, .finale__name::before{
  content:""; position:absolute; inset:-30% -12%; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%,
            rgba(var(--accent-rgb), calc(.10 + var(--pulse,0)*.22)), transparent 70%);
  filter:blur(34px); opacity:.9;
}
.shine{
  background:linear-gradient(100deg,
    rgba(236,231,221,.5) 20%, #fff 38%, rgba(var(--accent-rgb),.95) 50%,
    #fff 62%, rgba(236,231,221,.5) 80%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:shine 7.5s ease-in-out infinite;
}
@keyframes shine{ 0%,100%{background-position:120% 0} 50%{background-position:-20% 0} }
.hero__sub{
  font-family:var(--serif); font-style:italic; font-weight:340;
  font-size:clamp(1.15rem,2vw,1.6rem); color:var(--bone-dim); letter-spacing:.01em;
}
.scrollcue{ margin-top:7vh; display:inline-flex; flex-direction:column; align-items:center; gap:.9rem; }
.scrollcue span{
  font-family:var(--body); font-style:italic; font-size:1rem; color:var(--muted);
}
.scrollcue i{
  width:1px; height:48px; background:linear-gradient(var(--accent), transparent);
  position:relative; overflow:hidden;
}
.scrollcue i::after{
  content:""; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:#fff; animation:drip 2.4s var(--ease) infinite;
}
@keyframes drip{ 0%{top:-50%} 60%,100%{top:100%} }

/* ============================================================
   QUOTE INTERLUDES
   ============================================================ */
.scene--quote{ min-height:88vh; }
.bigquote{
  text-align:center; max-width:920px;
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(2rem,6vw,4.4rem); line-height:1.16; color:var(--bone); letter-spacing:-.015em;
}
.bigquote span{ display:block; }
.bigquote span:nth-child(2){ color:var(--muted); }
.bigquote .bigquote--accent{
  color:#fff; text-shadow:0 0 40px rgba(var(--accent-rgb),.4);
}

/* ============================================================
   FINALE
   ============================================================ */
.scene--finale{
  text-align:center; min-height:120vh;
  background:radial-gradient(120% 90% at 50% 80%, rgba(var(--accent-rgb),.14), transparent 60%);
}
.finale{ max-width:880px; }
.finale__ded{
  font-family:var(--body); font-style:italic; font-size:clamp(1.1rem,1.8vw,1.35rem);
  color:var(--muted); margin-bottom:1.8rem;
}
.finale__name{
  font-family:var(--serif); font-weight:480;
  font-size:clamp(3.6rem,16vw,13rem); line-height:.86; letter-spacing:-.02em;
  margin-bottom:3rem; position:relative;
}
.finale__creed{ list-style:none; margin-bottom:2.8rem; }
.finale__creed li{
  font-family:var(--serif); font-weight:320; font-style:italic;
  font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.5; color:var(--bone); letter-spacing:-.01em;
}
.finale__creed li:last-child{ color:var(--bone-dim); }
.finale__roles{
  font-family:var(--serif); font-style:italic; font-weight:360;
  font-size:clamp(1.3rem,2.6vw,1.9rem); color:#fff; margin-bottom:6rem;
  text-shadow:0 0 30px rgba(var(--accent-rgb),.4);
}
.finale__beg{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3rem,9vw,6.6rem); line-height:1.04; color:var(--bone); margin-bottom:6rem;
  letter-spacing:-.02em;
}
.finale__beg em{ color:#fff; text-shadow:0 0 50px rgba(var(--accent-rgb),.5); }
.finale__closer{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.5rem); line-height:1.5; color:var(--bone-dim);
  margin-bottom:5rem; letter-spacing:-.01em;
}
.finale__closer span{ display:block; }
.finale__hit{
  font-weight:420; color:#fff; margin-top:1.2rem;
  font-size:clamp(2rem,4.6vw,3.4rem);
  text-shadow:0 0 50px rgba(var(--accent-rgb),.55);
}
.finale__sign{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,1.9vw,1.4rem);
  color:var(--muted); line-height:1.6; margin-bottom:1.4rem;
}
.finale__date{
  font-family:var(--body); font-style:italic; font-size:1rem; color:var(--faint);
}

/* ============================================================
   REVEAL SYSTEM
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(34px); filter:blur(8px);
  transition:opacity 1.3s var(--slow), transform 1.3s var(--slow),
             filter 1.3s var(--slow), letter-spacing 1.5s var(--slow);
  transition-delay:calc(var(--i,0) * .15s);
}
.reveal.in{ opacity:1; transform:none; filter:blur(0); }

/* the title that assembles itself out of the dark */
.reveal--title{ letter-spacing:.5em; transform:translateY(34px) scale(1.04); }
.reveal--title.in{ letter-spacing:-.02em; transform:none; }

/* parallax containers — JS owns their transform */
[data-para]{ will-change:transform; }

/* word-by-word reveal for the lines that have to land */
.reveal[data-words]{ opacity:1; transform:none; filter:none; transition:none; }
.word{
  display:inline-block; opacity:0; filter:blur(9px); transform:translateY(22px);
  transition:opacity .8s var(--slow), transform .8s var(--slow), filter .8s var(--slow);
}
.in .word{ opacity:1; filter:blur(0); transform:none; }

@media (prefers-reduced-motion:reduce){
  [data-para]{ transform:none !important; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.2s !important; scroll-behavior:auto !important; }
  .reveal{ filter:none; transform:none; }
}