/* Proof of work, direction A: Night reel. Page-only styles; loads after portfolio.css. */
html{scroll-padding-top:80px}
.pow-page{--pow-film:#0c0a08;--pow-film-2:#14100b;--pow-base:#2b2219;--pow-frame-w:clamp(150px,15vw,208px);--pow-ease-out:cubic-bezier(.2,.7,.2,1);--pow-ease-gate:steps(3,end);background:var(--pow-film)}
.pow-page .header{border-color:#2e271e}

/* Hero: title left, contact strip right, one flat projector beam across both. */
.pow-hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 55% 75% at 80% 45%,#2a2016 0,transparent 70%),var(--pow-film)}
.pow-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:#ede8e0;opacity:.05;clip-path:polygon(0 0,24% 0,74% 100%,44% 100%)}
.pow-hero-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center;padding:16px 0 80px}
.pow-hero h1{font:400 clamp(52px,6.2vw,92px)/1.02 Cinzel,Georgia,serif;letter-spacing:-.05em;margin:0 0 24px}
.pow-hero .dek{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--muted);max-width:28ch;margin:0}

/* Contact strip: four frames on a film base, sprocket rows above and below. */
.pow-strip ol{position:relative;overflow:hidden;list-style:none;margin:0;padding:26px 14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:var(--pow-base);box-shadow:0 30px 80px #000a}
.pow-strip ol::before,.pow-strip ol::after,.pow-rail::before,.pow-rail::after{content:'';position:absolute;left:-24px;right:0;height:16px;background:url(/assets/pow/a/sprocket.svg?v=20260927) 0 0/24px 16px repeat-x;pointer-events:none;transition:transform 150ms steps(1,end)}
.pow-strip ol::before{top:5px}
.pow-strip ol::after{bottom:5px}
.pow-strip ol:has(.pow-frame:is(:hover,:focus-visible))::before,.pow-strip ol:has(.pow-frame:is(:hover,:focus-visible))::after{transform:translateX(24px)}
.pow-frame{position:relative;display:flex;flex-direction:column-reverse;justify-content:space-between;gap:16px;aspect-ratio:3/4;padding:14px 12px;background:radial-gradient(ellipse at 50% 38%,#33281b 0,var(--pow-film-2) 70%);border-radius:3px;color:var(--ink);text-decoration:none;opacity:.72;transition:opacity 150ms ease-out}
.pow-frame::before{content:'';position:absolute;left:50%;top:40%;width:46%;aspect-ratio:1;border:1px solid #827b6f66;border-radius:50%;transform:translate(-50%,-50%);transition:border-color 150ms ease-out}
.pow-frame:is(:hover,:focus-visible){opacity:1}
.pow-frame:is(:hover,:focus-visible)::before{border-color:var(--accent)}
.pow-frame:focus-visible{outline-offset:-3px}
.pow-frame-name{position:relative;font:400 clamp(16px,1.45vw,21px)/1.15 Cinzel,Georgia,serif;letter-spacing:-.02em}
.pow-frame-note{position:relative;font:11px/1.4 Mono,monospace;color:var(--muted)}

/* Rail: the strip at 56px, sticky. The gate stays centered; the film moves under it. */
.pow-rail{position:sticky;top:0;z-index:5;height:56px;overflow:hidden;background:var(--pow-base);border-block:1px solid var(--pow-film)}
.pow-rail::before,.pow-rail::after{left:-12px;height:8px;background-size:12px 8px}
.pow-rail::before{top:0}
.pow-rail::after{bottom:0}
.pow-rail:has(.pow-rail-frame:is(:hover,:focus-visible))::before,.pow-rail:has(.pow-rail-frame:is(:hover,:focus-visible))::after{transform:translateX(12px)}
.pow-rail-track{position:relative;display:flex;gap:8px;height:100%;padding:12px 0;transition:transform 180ms var(--pow-ease-gate)}
.pow-rail-frame{flex:none;width:var(--pow-frame-w);display:flex;align-items:center;justify-content:center;background:var(--pow-film-2);border-radius:2px;color:var(--ink);font:400 14px/1 Cinzel,Georgia,serif;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;opacity:.72;transition:opacity 150ms ease-out}
.pow-rail-frame:is(:hover,:focus-visible,[aria-current]){opacity:1}
.pow-rail-frame:focus-visible{outline-offset:-3px}
.pow-gate{position:absolute;top:9px;bottom:9px;left:50%;width:calc(var(--pow-frame-w) + 10px);transform:translateX(-50%);border:1px solid var(--accent);border-radius:3px;pointer-events:none}
.pow-gate::before,.pow-gate::after{content:'';position:absolute;top:50%;width:6px;height:1px;background:var(--accent)}
.pow-gate::before{left:-10px}
.pow-gate::after{right:-10px}

/* Reels: one screening per case, spliced together with a sprocket strip. */
.pow-reels .case-section{position:relative;border:0;scroll-margin-top:64px}
.pow-reels .case-section+.case-section::before{content:'';position:absolute;top:0;left:0;right:0;height:20px;background:url(/assets/pow/a/sprocket.svg?v=20260927) 0 2px/24px 16px repeat-x var(--pow-base)}
.pow-reels .case-section+.case-section{padding-top:84px}
@keyframes pow-gate-pull{from{transform:translateY(-6px)}to{transform:none}}
html[data-paused=false] .pow-reels .board-wrap.is-gated{animation:pow-gate-pull 180ms var(--pow-ease-gate)}
@media(min-width:1200px){
  .pow-reels .case-section{min-height:calc(100svh - 56px);display:flex;flex-direction:column;justify-content:center;padding:88px 0}
  .pow-reels .case-section+.case-section{padding-top:108px}
  .pow-reels .case-section>.container{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:56px}
  .pow-reels .case-grid{display:contents}
  .pow-reels .section-head{grid-column:2;grid-row:1;align-self:end;margin:0 0 28px}
  .pow-reels .case-visual{grid-column:1;grid-row:1/span 2;align-self:center}
  .pow-reels .case-copy{grid-column:2;grid-row:2;align-self:start}
  .pow-reels .case-section:nth-of-type(even)>.container{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .pow-reels .case-section:nth-of-type(even) :is(.section-head,.case-copy){grid-column:1}
  .pow-reels .case-section:nth-of-type(even) .case-visual{grid-column:2}
}

/* Entry: the strip advances into the gate once, frame by frame. */
@keyframes pow-advance{from{opacity:0;transform:translateX(28px)}}
@keyframes pow-beam{from{opacity:0}}
html[data-paused=false] .pow-hero::before{animation:pow-beam 900ms var(--pow-ease-out) backwards}
html[data-paused=false] .pow-strip li{animation:pow-advance 600ms var(--pow-ease-out) backwards}
html[data-paused=false] .pow-strip li:nth-child(2){animation-delay:80ms}
html[data-paused=false] .pow-strip li:nth-child(3){animation-delay:160ms}
html[data-paused=false] .pow-strip li:nth-child(4){animation-delay:240ms}
html[data-paused=true] :is(.pow-rail-track,.pow-strip ol,.pow-rail)::before,html[data-paused=true] :is(.pow-strip ol,.pow-rail)::after,html[data-paused=true] .pow-rail-track{transition:none}

@media(max-width:900px){
  .pow-hero-grid{grid-template-columns:1fr;gap:36px;padding-bottom:56px}
}
@media(max-width:760px){
  .pow-page{--pow-frame-w:140px}
  .pow-hero h1{font-size:clamp(44px,12vw,64px)}
  .pow-strip ol{grid-template-columns:repeat(2,minmax(0,1fr));padding:26px 12px}
  .pow-frame{aspect-ratio:4/3}
  .pow-frame::before{display:none}
  .pow-frame-name{font-size:18px}
  .pow-rail-frame{font-size:13px}
}
@media(prefers-reduced-motion:reduce){html:not([data-motion=playing]) :is(.pow-strip ol,.pow-rail)::before,html:not([data-motion=playing]) :is(.pow-strip ol,.pow-rail)::after{transition:none}}