/* ===== site v8 · scroll effects (fx.js) =====
   Base rules = static layout (no JS / reduced motion).
   .fx-on (set in <head> unless prefers-reduced-motion) = pinned, scroll-driven versions. */

/* 1) title with footage inside the letters */
.mask-stage{position:relative;background:#000;z-index:2}
.mask-stick{position:relative;height:70vh;overflow:hidden;background:#000}
.mask-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.12) saturate(1.08)}
.mask-cut,.mask-line{position:absolute;inset:0;display:grid;place-items:center;opacity:var(--o,1)}
.mask-cut{background:var(--ink);mix-blend-mode:multiply;will-change:opacity}
.mask-line{pointer-events:none}
.mask-floor{position:absolute;inset:0;display:grid;place-items:center;mix-blend-mode:lighten;pointer-events:none;opacity:var(--o,1)}
.mask-floor .mask-word{color:#4a3424}
.mask-word{display:block;color:#fff;font:900 min(30vw,52vh)/1 "Noto Serif KR",serif;letter-spacing:-.02em;white-space:nowrap;
  transform:scale(var(--s,1));transform-origin:50% 52%;will-change:transform}
.mask-line .mask-word{color:transparent;-webkit-text-stroke:1.5px rgba(239,231,214,.42)}
.mask-sub{position:absolute;left:0;right:0;bottom:12vh;text-align:center;pointer-events:none}
.mask-sub b{display:block;font:700 12px/1 var(--sans);letter-spacing:.4em;color:var(--red-hi);margin-bottom:12px;padding-left:.4em}
.mask-sub span{font:700 clamp(28px,4.4vw,60px)/1 "Archivo",sans-serif;font-stretch:112%;font-style:italic;letter-spacing:-.02em;text-shadow:0 6px 40px rgba(0,0,0,.8)}
@media (max-width:860px) and (orientation:portrait){
  .mask-word{writing-mode:vertical-rl;font-size:min(23vh,46vw);letter-spacing:.02em}
  .mask-video{object-position:50% 50%}
}
.fx-on .mask-stage{height:260vh}
.fx-on .mask-stick{position:sticky;top:0;height:100vh;height:100svh}
.fx-on .mask-stick::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:calc(1 - var(--o,1));pointer-events:none}
.mask-sub{z-index:1}
.fx-on .mask-sub{opacity:var(--t,0);transform:translateY(calc((1 - var(--t,0)) * 20px))}

/* 2) EP.00 stills scroll sideways */
.hreel{position:relative;margin:clamp(56px,8vw,104px) calc(50% - 50vw) 0}
.hreel-stick{position:relative;padding:24px 0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hreel .reel-label{padding:0 var(--gutter);max-width:1180px;margin:0 auto 22px;width:100%}
.hreel-track{display:flex;gap:clamp(14px,2vw,28px);padding:0 max(var(--gutter),calc(50vw - 590px + var(--gutter)));overflow-x:auto;scroll-snap-type:x mandatory}
.hreel-track figure{flex:none;width:min(80vw,640px);scroll-snap-align:center}
.hf-img{aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--ink-2);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.hf-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.05)}
.hreel-track figcaption{margin-top:12px;font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--mute)}
.hreel-track figcaption b{color:var(--gold);font-weight:600}
.hreel-bar{display:none;max-width:1180px;width:calc(100% - 2 * var(--gutter));margin:26px auto 0;height:2px;background:var(--line)}
.hreel-bar i{display:block;height:100%;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.fx-on .hreel{height:300vh}
.fx-on .hreel-stick{position:sticky;top:0;height:100vh;height:100svh;padding:0}
.fx-on .hreel-track{width:max-content;overflow:visible;scroll-snap-type:none;will-change:transform}
.fx-on .hreel-track figure{width:min(50vw,calc(60vh * 16 / 9))}
.fx-on .hf-img img{width:118%;max-width:none;transform:translateX(var(--px,-7.6%));will-change:transform}
.fx-on .hreel-bar{display:block}
@media (max-width:860px){
  .fx-on .hreel{height:240vh}
  .fx-on .hreel-track figure{width:82vw}
  .fx-on .hf-img img{width:100%;transform:none}
}

/* 3) cast cards: stacked → fanned out */
.cast-stage{position:relative}
.fx-on .cast-card{will-change:transform}
.cast-stage.fx .cast-card figcaption{opacity:var(--c,0);transform:translateY(calc((1 - var(--c,0)) * 14px))}
.cast-stage.fx .cast-card:focus-within figcaption,.cast-stage.fx .cast-card:focus figcaption{opacity:1;transform:none}
@media (min-width:861px){
  .cast-stage.fx{height:220vh}
  .cast-stage.fx .cast-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
  .cast-stage.fx .cast{margin-top:0;width:100%}
}
.cast-stage.mob .cast-card{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.cast-stage.mob .cast-card:nth-child(2){transition-delay:.08s}
.cast-stage.mob .cast-card:nth-child(3){transition-delay:.16s}
.cast-stage.mob .cast-card:nth-child(4){transition-delay:.24s}
.cast-stage.mob .cast-card figcaption{opacity:var(--c,0);transform:translateY(calc((1 - var(--c,0)) * 14px));transition:opacity .7s .7s, transform .7s .7s}
.cast-stage .cast-card.nofx{transition:none!important}

/* 4) a talisman burns away to the games */
.burn{position:relative;z-index:2;background:var(--ink)}
.burn-stick{position:relative;padding:clamp(96px,14vw,180px) 0 0}
.burn-under,.burn-canvas{display:none}
.burn-head{position:relative;display:grid;place-items:center;text-align:center;padding:0 var(--gutter)}
.burn-head .sec-head{margin:0}
.burn-head .lede{margin-left:auto;margin-right:auto}
.burn + .games{padding-top:clamp(40px,6vw,80px)}
.fx-on .burn{height:260vh}
.fx-on .burn-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0}
.fx-on .burn-under{display:grid;position:absolute;inset:0;grid-template-columns:1fr 1fr;opacity:.5}
.burn-under img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.55)}
.burn-under::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(11,10,9,.35),rgba(11,10,9,.92) 75%),linear-gradient(transparent 60%,var(--ink))}
.fx-on .burn-head{position:absolute;inset:0;opacity:var(--r,0);transform:scale(calc(.94 + .06 * var(--r,0)))}
.fx-on .burn-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Lenis smooth wheel (only the rules we need; lenis.css would also disable clicks on the YouTube iframe) */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}