/* TokScore Pro homepage hero film "THE CLIMB" — made by Kimi K3 (2026-09-29).
   Kimi's own styles, scoped to the film so they never touch the rest of the site.
   Frames: hero-film/frames/ (gitignored, MASTER in media/hero-film/frames/). */
:root{
  --kf-bg:#F5F7FA; --kf-ink:#0F172A; --kf-slate:#334155; --kf-mute:#64748B; --kf-faint:#94A3B8;
  --kf-blue:#2563EB; --kf-blue-dark:#1D4ED8;
  --kf-dark:#060A14; --seam:#E9EEF4; /* refined at runtime from the final frame */
  --kf-ease:cubic-bezier(.16,1,.3,1);
}
html.lenis,html.lenis body{height:auto}
/* phones: nothing may widen the layout viewport (it pushed the page to 495-595px wide on a 390px phone
   and the fixed buttons off-screen). clip, not hidden: hidden would make body a scroller and break the sticky film */
html,body{overflow-x:clip}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ============ loader ============ */
#kfLoader{
  position:fixed; inset:0; z-index:200; background:var(--kf-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:opacity .8s var(--kf-ease);
}
#kfLoader.done{opacity:0; pointer-events:none}
#kfLoader .l-ring{width:74px; height:74px; animation:kf-spin 2.4s linear infinite}
@keyframes kf-spin{to{transform:rotate(360deg)}}
#kfLoader .l-word{color:#fff; font-weight:800; letter-spacing:.42em; font-size:13px; text-indent:.42em}
#kfLoader .l-bar{width:min(280px,60vw); height:2px; background:rgba(255,255,255,.14); border-radius:2px; overflow:hidden}
#kfLoader .l-bar i{display:block; height:100%; width:0%; background:var(--kf-blue); transition:width .25s ease}
#kfLoader .l-pct{color:var(--kf-faint); font-size:12px; letter-spacing:.18em; font-variant-numeric:tabular-nums}

/* ============ film header (shown while the film is on screen; the site nav takes over after) ============ */
#siteHeader{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; gap:34px;
  padding:18px clamp(20px,4vw,56px);
  color:#fff; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  transition:color .45s ease, opacity .4s ease, transform .4s var(--kf-ease);
}
#siteHeader a{color:inherit; text-decoration:none}
#siteHeader::before{
  content:""; position:absolute; inset:0 0 auto 0; height:200%; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(4,7,14,.66), rgba(4,7,14,0));
  transition:opacity .45s ease;
}
#siteHeader.on-light{color:var(--kf-ink)}
#siteHeader.on-light::before{opacity:0}
#siteHeader .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.02em}
#siteHeader .brand svg{width:26px; height:26px; filter:drop-shadow(0 1px 8px rgba(0,0,0,.35))}
#siteHeader nav{display:flex; gap:26px; margin-left:8px}
#siteHeader nav a{font-size:13.5px; font-weight:500; opacity:.82; letter-spacing:.01em; text-shadow:0 1px 14px rgba(0,0,0,.35); transition:opacity .2s}
#siteHeader.on-light nav a{text-shadow:none}
#siteHeader nav a:hover{opacity:1}
#siteHeader .hud{margin-left:auto; display:flex; align-items:center; gap:18px}
#siteHeader .hud .score{display:flex; align-items:baseline; gap:8px; text-shadow:0 1px 14px rgba(0,0,0,.35)}
#siteHeader.on-light .hud .score{text-shadow:none}
#siteHeader .hud .score b{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
#siteHeader .hud .score span{font-size:9.5px; font-weight:700; letter-spacing:.24em; opacity:.72}
#siteHeader .hud .chapter{display:flex; flex-direction:column; gap:5px; min-width:118px; transition:opacity .4s}
#siteHeader .hud .chapter span{font-size:9.5px; font-weight:700; letter-spacing:.22em; opacity:.72; font-variant-numeric:tabular-nums}
#siteHeader .hud .chapter .cb{height:2px; background:rgba(128,148,178,.35); border-radius:2px; overflow:hidden}
#siteHeader .hud .chapter .cb i{display:block; height:100%; width:0%; background:currentColor; opacity:.9}
#siteHeader .cta-pill{
  background:var(--kf-blue); color:#fff; font-weight:700; font-size:13.5px;
  padding:9px 18px; border-radius:999px; white-space:nowrap;
  box-shadow:0 6px 20px rgba(37,99,235,.35);
  transition:transform .18s var(--kf-ease), box-shadow .18s, background .18s;
}
#siteHeader .cta-pill:hover{background:var(--kf-blue-dark); transform:translateY(-1px); box-shadow:0 10px 26px rgba(37,99,235,.45)}
/* hand-off: film header while the film plays, the site's own nav once past it */
body.has-film:not(.film-past) .nav{opacity:0; pointer-events:none; transform:translateY(-100%)}
body.has-film .nav{transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1)}
body.film-past #siteHeader{opacity:0; pointer-events:none; transform:translateY(-100%)}

/* ============ film ============ */
#film{height:850vh; position:relative; background:var(--kf-dark); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
#film .stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--kf-dark)}
#filmCanvas,#ambient{position:absolute; inset:0; width:100%; height:100%; display:block}
#ambient{pointer-events:none; z-index:2}
#film .grain{
  position:absolute; inset:-60px; z-index:3; 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='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:kf-grain 1.1s steps(4) infinite;
}
@keyframes kf-grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-18px,12px)}
  50%{transform:translate(14px,-20px)} 75%{transform:translate(-10px,-14px)} 100%{transform:translate(0,0)}
}
#film .vignette{position:absolute; inset:0; z-index:3; pointer-events:none; background:radial-gradient(120% 92% at 50% 46%, transparent 58%, rgba(2,5,10,.42) 100%)}
#film .seam-fade{position:absolute; left:0; right:0; bottom:0; height:34vh; z-index:4; pointer-events:none; opacity:0; background:linear-gradient(to bottom, rgba(0,0,0,0), var(--seam))}

/* beats */
#film .beats{position:absolute; inset:0; z-index:5; pointer-events:none}
#film .beat{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; opacity:0; padding:0 clamp(20px,6vw,80px); will-change:opacity,transform}
#film .beat h2{color:#fff; font-weight:800; letter-spacing:-.035em; line-height:1.04; font-size:clamp(2.1rem,5.6vw,4.6rem); text-shadow:0 2px 34px rgba(2,6,14,.6); max-width:16ch; margin:0}
#film .beat p{margin:18px 0 0; color:rgba(226,235,245,.92); font-weight:500; font-size:clamp(.95rem,1.6vw,1.2rem); letter-spacing:.005em; max-width:46ch; text-shadow:0 1px 18px rgba(2,6,14,.55); line-height:1.6}
#film .beat::before{content:""; position:absolute; z-index:-1; inset:-8% -10%; background:radial-gradient(52% 46% at 50% 52%, rgba(3,7,14,.52), rgba(3,7,14,.22) 55%, transparent 80%); transition:opacity .5s ease}
#film .beats.light .beat h2{color:var(--kf-ink); text-shadow:0 2px 30px rgba(255,255,255,.75)}
#film .beats.light .beat p{color:var(--kf-slate); text-shadow:0 1px 16px rgba(255,255,255,.65)}
#film .beats.light .beat::before{background:radial-gradient(52% 46% at 50% 52%, rgba(245,247,250,.62), rgba(245,247,250,.28) 55%, transparent 80%)}
#film .beat.hero-beat h2{font-size:clamp(2.6rem,7vw,6rem); max-width:13ch}
#film .beat.hero-beat .kicker{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:26px;
  color:#8fd6a8; background:rgba(22,163,74,.14); border:1px solid rgba(52,199,123,.35);
  font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:7px 16px; border-radius:999px; backdrop-filter:blur(6px);
}
#film .beat.hero-beat .kicker i{width:6px;height:6px;border-radius:50%;background:#34c77b;box-shadow:0 0 10px #34c77b}
/* finale — ink on the light final frames: the site arriving */
#film .beat.finale::before{display:none}
#film .finale-score{position:absolute; left:50.2%; top:51.4%; transform:translate(-50%,-50%); text-align:center}
#film .finale-score .fs-label{font-size:11px; font-weight:700; letter-spacing:.34em; color:var(--kf-mute); text-indent:.34em}
#film .finale-score .fs-num{font-size:clamp(3.4rem,10vh,6.2rem); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--kf-ink); font-variant-numeric:tabular-nums}
#film .finale-score .fs-sub{font-size:11.5px; font-weight:600; color:var(--kf-mute); letter-spacing:.02em}
#film .finale-block{position:absolute; left:0; right:0; bottom:clamp(24px,7vh,64px); display:flex; flex-direction:column; align-items:center; gap:16px; padding:0 20px}
#film .finale-block h1{color:var(--kf-ink); font-weight:800; letter-spacing:-.04em; line-height:1.05; font-size:clamp(1.7rem,4vw,3.1rem); max-width:21ch; text-align:center; margin:0}
#film .finale-block .fb-ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; pointer-events:auto}
#film .kf-btn{display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:0; text-decoration:none; font-weight:700; font-size:15px; padding:14px 28px; border-radius:999px; transition:transform .18s var(--kf-ease), box-shadow .18s, background .18s}
#film .kf-btn-primary{background:var(--kf-blue); color:#fff; box-shadow:0 10px 30px rgba(37,99,235,.4)}
#film .kf-btn-primary:hover{background:var(--kf-blue-dark); transform:translateY(-2px); box-shadow:0 16px 38px rgba(37,99,235,.5)}
#film .kf-btn-ghost{background:#fff; color:var(--kf-ink); box-shadow:0 0 0 1px rgba(15,23,42,.1), 0 6px 18px rgba(15,23,42,.06)}
#film .kf-btn-ghost:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(15,23,42,.14), 0 12px 26px rgba(15,23,42,.1)}
#film .finale-block .fb-note{font-size:12.5px; color:var(--kf-mute); font-weight:500}
/* scroll hint */
#film .scroll-hint{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:6; display:flex; flex-direction:column; align-items:center; gap:9px; color:rgba(255,255,255,.75); pointer-events:none; transition:opacity .4s}
#film .scroll-hint span{font-size:9.5px; font-weight:700; letter-spacing:.34em; text-indent:.34em}
#film .scroll-hint .chev{width:16px; height:16px; animation:kf-chev 1.8s var(--kf-ease) infinite}
@keyframes kf-chev{0%{transform:translateY(-4px);opacity:0}35%{opacity:1}100%{transform:translateY(6px);opacity:0}}
/* the section right under the film starts on the film's last color */
#videoMode + section{background:linear-gradient(to bottom, var(--seam), var(--bg) 320px)}

/* intro controls: prominent sound, replay, skip — one bottom-center cluster */
#kfControls{
  position:fixed; left:50%; bottom:max(26px, env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:115; display:none; gap:12px; align-items:center;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body.kf-booted:not(.reduced-motion) #kfControls{display:flex}
#kfControls button{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:0;
  font-family:inherit; white-space:nowrap;
  transition:transform .18s var(--kf-ease), box-shadow .18s, background .18s, opacity .3s;
}
#soundBtn{
  background:var(--kf-blue); color:#fff; font-weight:800; font-size:16px; letter-spacing:.01em;
  padding:16px 32px; border-radius:999px;
  box-shadow:0 14px 40px rgba(37,99,235,.5);
  animation:kf-pulse 2.2s var(--kf-ease) infinite;
}
#soundBtn:hover{background:var(--kf-blue-dark); transform:translateY(-2px) scale(1.03); box-shadow:0 20px 52px rgba(37,99,235,.6)}
@keyframes kf-pulse{
  0%{box-shadow:0 14px 40px rgba(37,99,235,.5), 0 0 0 0 rgba(37,99,235,.55)}
  70%{box-shadow:0 14px 40px rgba(37,99,235,.5), 0 0 0 18px rgba(37,99,235,0)}
  100%{box-shadow:0 14px 40px rgba(37,99,235,.5), 0 0 0 0 rgba(37,99,235,0)}
}
#soundBtn .ic-vol{display:none}
#soundBtn.on{animation:none; background:#16A34A; box-shadow:0 12px 34px rgba(22,163,74,.45)}
#soundBtn.on:hover{background:#15803d}
#soundBtn.on .ic-vol{display:block}
#soundBtn.on .ic-play{display:none}
#replayBtn{
  background:#fff; color:var(--kf-ink); font-weight:800; font-size:15.5px;
  padding:15px 30px; border-radius:999px;
  box-shadow:0 0 0 1px rgba(15,23,42,.12), 0 12px 34px rgba(15,23,42,.22);
}
#replayBtn:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 0 0 1px rgba(15,23,42,.16), 0 18px 44px rgba(15,23,42,.28)}
#skipBtn{
  background:rgba(10,16,28,.55); color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.18)!important;
  backdrop-filter:blur(8px); font-weight:600; font-size:13px; padding:10px 18px; border-radius:999px;
}
#skipBtn:hover{background:rgba(16,24,40,.75); color:#fff}
/* which buttons show, by where the visitor is */
body:not(.film-past) #replayBtn{display:none}      /* replay appears once the film has been passed */
body.film-past #soundBtn,
body.film-past #skipBtn{display:none}             /* past the film: replay is the control */
/* reduced motion: no film controls (the plain video has its own) */
body.reduced-motion #kfControls{display:none!important}

/* reduced-motion: the film plays as a plain video instead of the scroll film */
#videoMode{display:none; background:var(--kf-dark); padding:64px 0 0}
#videoMode video{display:block; width:100%; max-height:100vh}
body.reduced-motion #film,
body.reduced-motion #siteHeader,
body.reduced-motion #kfControls,
body.reduced-motion #kfLoader{display:none}
body.reduced-motion #videoMode{display:block}

/* responsive */
@media (max-width:900px){
  #siteHeader nav{display:none}
  #siteHeader .hud .chapter{display:none}
}
@media (max-width:760px){
  #siteHeader{gap:16px; padding:14px 18px}
  #siteHeader .hud{display:none}
  #siteHeader .cta-pill{padding:8px 14px; font-size:12.5px; margin-left:auto}
  #film .beat.hero-beat .kicker{font-size:11px; padding:6px 13px; margin-bottom:20px}
  #film .finale-block h1{font-size:clamp(1.35rem,5.6vw,1.9rem)}
  #film .beat h2{font-size:clamp(1.8rem,7.4vw,2.6rem)}
  #film .scroll-hint span{display:none}
  #kfControls{bottom:max(16px, env(safe-area-inset-bottom)); gap:9px}
  #soundBtn{font-size:15px; padding:14px 26px}
  #replayBtn{font-size:14px; padding:13px 24px}
}