/* The landing reel (owner decision 2026-10-29): a full-screen stage where the works' silent loops cut from one to the next,
   letterboxed on the stage black so the studio line and the current work's name pop out over the bars. reel.js owns the
   cuts; this file only lays out, keeps the header transparent over the hero (html.reel-hero) and animates the hold ruler
   and the name slam. Under 900px the stage is a 16:9 band under the header with the copy below it. */
.reel{position:relative;background:#05070a;color:var(--text-1)}
.reel-stage{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#05070a}
.reel-screen{position:absolute;inset:0;cursor:pointer}
.reel-screen>:is(img,video){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.reel-poster{z-index:1;transition:opacity var(--d-4) var(--ease-std)}
.reel-stage[data-state=live] .reel-poster{opacity:0}
.reel-clip{z-index:0;opacity:0;pointer-events:none}
.reel-clip.is-on{z-index:2;opacity:1}
/* scrims under the HUD, the studio line and the work's name so they stay legible on a bright frame (NO CENTER's close-up
   fills the lower half with white hair); vignettes rather than a wash so the middle of the picture keeps its light */
.reel-stage::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to bottom,rgba(5,7,10,.55),rgba(5,7,10,0) 22%),radial-gradient(50% 55% at 16% 84%,rgba(5,7,10,.82),rgba(5,7,10,.5) 42%,rgba(5,7,10,0) 100%),radial-gradient(42% 30% at 86% 90%,rgba(5,7,10,.72),rgba(5,7,10,0) 100%),linear-gradient(to top,rgba(5,7,10,.6),rgba(5,7,10,0) 24%)}
.reel-copy,.reel-work{text-shadow:0 1px 2px rgba(5,7,10,.6),0 2px 28px rgba(5,7,10,.55)}

/* the header over the hero: transparent with the film's top gradient, solid again once the stage leaves */
html.reel-hero .site-header.spine{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
html.reel-hero .site-header.spine::before{opacity:1}

/* HUD */
.reel-hud{position:absolute;z-index:4;margin:0;font:400 11px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,233,.86);text-shadow:0 1px 8px rgba(0,0,0,.7);pointer-events:none}
.reel-hud-tl{top:calc(var(--header-h) + 14px);left:var(--gutter);display:flex;align-items:center;gap:14px}
.reel-hud-tr{top:calc(var(--header-h) + 14px);right:var(--gutter);display:grid;justify-items:end;gap:10px;text-align:right}
.reel-count .reel-i{font-weight:400;color:var(--sun)}
.reel-ruler{display:block;width:120px;height:1px;background:rgba(243,241,233,.22);overflow:hidden}
.reel-ruler i{display:block;height:100%;width:100%;background:var(--sun);transform:scaleX(0);transform-origin:0 50%}
.reel-stage[data-state=live] .reel-ruler i{animation:reel-hold var(--hold,8s) linear forwards}
@keyframes reel-hold{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.reel-kind{display:grid;gap:3px;margin:0}
.reel-kind-ja{font:400 11px/1.4 var(--font-ja);letter-spacing:.08em;text-transform:none;color:rgba(243,241,233,.62)}
.reel-next{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid rgba(243,241,233,.3);border-radius:var(--r-pill);background:rgba(8,11,16,.35);color:var(--text-1);font:500 12px/1 var(--font-sans);letter-spacing:.02em;text-transform:none;cursor:pointer;pointer-events:auto;transition:border-color var(--d-1) var(--ease-std),background-color var(--d-1) var(--ease-std)}
.reel-next .i{width:12px;height:12px}
@media (hover:hover) and (pointer:fine){.reel-next:hover{border-color:var(--text-1);background:rgba(243,241,233,.08)}}
.reel-next:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* the current work: its name slams on every cut; the link opens its world */
.reel-work{position:absolute;z-index:4;right:var(--gutter);bottom:clamp(28px,5vh,64px);display:grid;justify-items:end;gap:8px;max-width:46vw;text-align:right;color:var(--text-1);text-decoration:none}
.reel-work-label{font:400 11px/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,233,.74)}
.reel-work-name{display:block;font:300 clamp(30px,3.6vw,60px)/1 var(--font-sans);letter-spacing:-.04em;text-wrap:balance;transform-origin:100% 100%}
.reel-work-name[lang=ko]{font-family:var(--font-ko-title);font-weight:400;letter-spacing:-.02em}
.reel-work-name.is-slam{animation:reel-slam var(--d-5) var(--ease-expo)}
@keyframes reel-slam{from{opacity:0;transform:translate3d(0,.22em,0) scale(1.12)}to{opacity:1;transform:none}}
.reel-work-open{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--font-sans);color:var(--text-2);transition:color var(--d-1) var(--ease-std)}
.reel-work-open .i{width:12px;height:12px;transition:transform var(--d-1) var(--ease-std)}
@media (hover:hover) and (pointer:fine){.reel-work:hover .reel-work-open{color:var(--text-1)}.reel-work:hover .reel-work-open .i{transform:translateY(2px)}}
.reel-work:focus-visible{outline:2px solid var(--focus);outline-offset:4px}

/* the studio line over the lower-left bar */
.reel-copy{position:absolute;z-index:4;left:var(--gutter);right:max(var(--gutter),46vw);bottom:clamp(28px,5vh,64px);margin:0}
.reel-kicker{margin:0;font:400 12px/1.5 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sun)}
.reel-title{margin:12px 0 0;font:300 clamp(40px,6.6vw,112px)/.96 var(--font-sans);letter-spacing:-.05em;color:var(--text-1);text-wrap:balance}
.reel-title em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.reel-ja{margin:14px 0 0;font-size:14px;color:var(--text-2)}
.reel-lede{margin:12px 0 0;max-width:30em;font:400 15px/1.6 var(--font-sans);color:var(--text-2);text-wrap:pretty}
.reel-actions{display:flex;flex-wrap:wrap;gap:12px 28px;margin:22px 0 0}
.reel-film span{color:var(--text-3)}

/* scroll cue */
.reel-cue{position:absolute;z-index:4;left:50%;bottom:18px;display:flex;align-items:center;gap:10px;margin:0;transform:translateX(-50%);font:400 11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);pointer-events:none}
.reel-cue .i{width:12px;height:12px;animation:reel-cue 2.2s var(--ease-std) infinite}
@keyframes reel-cue{0%,100%{transform:translateY(-2px);opacity:.5}50%{transform:translateY(2px);opacity:1}}
@media (hover:none){.reel-cue .cue-fine{display:none}}
@media (hover:hover){.reel-cue .cue-touch{display:none}}

/* phones and narrow windows: a 16:9 band under the header, the copy in flow below it */
@media (max-width:899.98px){
  .reel{padding-top:var(--header-h)}
  .reel-stage{height:auto;min-height:0;aspect-ratio:16/9}
  .reel-screen>:is(img,video){object-fit:cover}
  .reel-hud-tl,.reel-hud-tr{top:12px}
  .reel-hud-tr{gap:8px}
  .reel-next{min-height:32px;padding:0 12px;font-size:11px}
  .reel-hud-tr .reel-kind{display:none}
  .reel-ruler{width:72px}
  .reel-stage::before{background:linear-gradient(to bottom,rgba(5,7,10,.5),rgba(5,7,10,0) 30%),linear-gradient(to top,rgba(5,7,10,.7),rgba(5,7,10,.3) 32%,rgba(5,7,10,0) 60%)}
  .reel-work{left:var(--gutter);right:auto;bottom:14px;max-width:calc(100% - 2*var(--gutter));justify-items:start;text-align:left}
  .reel-work-name{font-size:clamp(24px,7vw,34px)}
  .reel-cue{display:none}
  .reel-copy{position:static;padding:28px var(--gutter) 40px}
  .reel-title{font-size:clamp(38px,11vw,60px)}
}
@media (max-width:899.98px) and (orientation:landscape){.reel-stage{aspect-ratio:auto;height:100svh;min-height:0}.reel-copy{padding-top:20px}}

/* motion off: the poster stays, nothing animates */
html.reduced-motion .reel-ruler i,html.reduced-motion .reel-cue .i,html.reduced-motion .reel-work-name{animation:none}
html.reduced-motion .reel-screen{cursor:default}
html:not(.js) .reel-next,html.reduced-motion .reel-next{display:none}
@media print{.reel-stage{height:auto;aspect-ratio:16/9}.reel-clip,.reel-hud,.reel-cue,.reel-next{display:none!important}.reel-copy{position:static}}