/* ============================================================
   ADAYA — About · F1RST core values  (v2 · spotlight sweep)
   A giant kinetic "F 1 R S T" wordmark. As the pinned section
   scrolls, a glowing spotlight sweeps left→right; the letter it
   lands on ignites with the brand gradient while its value panel
   crossfades in below. Static fallback reveals letters + a list.
   Builds on styles.css + about.css tokens. Theme-aware.
   ============================================================ */

.fk-cinema{position:relative}
.fk-pin{position:relative}

/* heading */
.fk-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:var(--s8)}
.fk-head h2{max-width:680px}

/* ---------- giant wordmark ---------- */
.fk-word{position:relative;display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,2.2vw,40px);width:min(1120px,94vw);margin:clamp(20px,4vh,46px) auto 0;
  isolation:isolate}

.fk-letter{position:relative;z-index:1;
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;line-height:.82;
  font-size:clamp(76px,15.5vw,260px);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:2px var(--border-strong);
  opacity:.45;transform:translateZ(0);
  transition:opacity .5s var(--ease),transform .5s var(--ease),-webkit-text-stroke-color .5s var(--ease)}
.fk-one{font-feature-settings:"tnum"}

/* ignited letter — gradient fill + lift + glow */
.fk-letter.on{
  opacity:1;-webkit-text-stroke:0 transparent;
  background:var(--grad-core);-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(-3%) scale(1.05);
  filter:drop-shadow(0 14px 30px rgba(26,132,242,.35)) drop-shadow(0 0 34px rgba(34,205,241,.45))}

/* travelling spotlight glow behind the active letter */
.fk-spot{position:absolute;top:50%;left:0;z-index:0;width:clamp(220px,30vw,440px);aspect-ratio:1;
  border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--sky) 42%,transparent),
    color-mix(in srgb,var(--sapphire) 16%,transparent) 48%,transparent 70%);
  filter:blur(8px);transition:opacity .5s var(--ease)}
.fk-cinema.swept .fk-spot{opacity:1}

/* ---------- crossfading value panels ---------- */
.fk-stage{position:relative;width:min(620px,92vw);margin:clamp(26px,4vh,46px) auto 0;
  min-height:clamp(150px,22vh,210px)}
.fk-panel{text-align:center}
.fk-idx{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-brand);margin-bottom:14px}
.fk-name{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1;margin-bottom:16px;color:var(--text)}
.fk-name em{font-style:normal;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.fk-desc{font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.55;color:var(--text-2);
  text-wrap:pretty;max-width:46ch;margin:0 auto}

/* ---------- progress rail ---------- */
.fk-rail{display:flex;gap:10px;justify-content:center;margin:clamp(22px,3.4vh,40px) auto 0;width:max-content}
.fk-rail span{width:34px;height:5px;border-radius:var(--r-pill);background:var(--border-strong);
  position:relative;overflow:hidden;transition:width .4s var(--ease)}
.fk-rail span::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--grad-cta);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fk-rail span.on{width:54px}
.fk-rail span.on::after{transform:scaleX(1)}

/* ============================================================
   STATIC (default / no-cinema) — reveal letters + show all panels
   ============================================================ */
.fk-letter{opacity:.45}
.fk-cinema:not(.cinema-on) .fk-stage{display:flex;flex-direction:column;gap:30px;min-height:0}
.fk-cinema:not(.cinema-on) .fk-panel{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.fk-cinema:not(.cinema-on) .fk-panel.show{opacity:1;transform:none}
.fk-cinema:not(.cinema-on) .fk-rail,
.fk-cinema:not(.cinema-on) .fk-hint{display:none}
.no-js-anim .fk-cinema .fk-panel{opacity:1;transform:none}

/* ============================================================
   CINEMA (JS-enhanced · pinned)
   ============================================================ */
.cinema-on .fk-pin{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:clamp(48px,8vh,100px) 0}
.cinema-on .fk-head{position:absolute;top:clamp(34px,6vh,70px);left:0;right:0;margin:0}
.cinema-on .fk-head h2{font-size:clamp(1.2rem,2vw,1.6rem)}
.cinema-on .fk-stage .fk-panel{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start}

/* scroll hint */
.fk-hint{position:absolute;left:50%;bottom:clamp(20px,3.6vh,42px);transform:translateX(-50%);z-index:4;
  display:none;align-items:center;gap:9px;font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  transition:opacity .5s var(--ease)}
.cinema-on .fk-hint{display:flex}
.fk-hint svg{width:18px;height:18px;animation:fk-bob 1.8s var(--ease) infinite}
.fk-cinema.hint-off .fk-hint{opacity:0;pointer-events:none}
@keyframes fk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){ .fk-hint svg{animation:none} }

@media (max-width:560px){
  .fk-word{gap:6px}
  .fk-letter{-webkit-text-stroke-width:1.5px}
}