/* VIXART v02 · Cinematic layer. Pure #000/#FFF: every effect is a cut, a mask, an inversion or 1-bit pixels.
   Nothing loops on its own: effects run on load once, on scroll, or on hover. Off under reduced motion. */

/* G1 camera dolly (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* G2 cut to black: letterbox shutters between pages */
.shutter{position:fixed;left:0;right:0;height:50.5vh;background:#000;z-index:200;pointer-events:none;transition:transform 520ms cubic-bezier(.76,0,.24,1)}
.shutter.t{top:0;transform:translateY(-100%)}
.shutter.b{bottom:0;transform:translateY(100%)}
html.cut-in .shutter{transform:none;transition:none}
html.cut-close .shutter{transform:none}

/* G3 1-bit film grain (canvas, difference blend keeps it B/W) */
.grain{position:fixed;inset:0;width:100%;height:100%;z-index:150;pointer-events:none;mix-blend-mode:difference}

/* G4 viewfinder cursor over images */
.vf{position:fixed;left:0;top:0;width:120px;height:80px;z-index:160;pointer-events:none;mix-blend-mode:difference;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity 200ms linear,transform 450ms cubic-bezier(.32,.72,0,1)}
.vf.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.vf i{position:absolute;width:16px;height:16px;border:0 solid #fff}
.vf i:nth-child(1){left:0;top:0;border-left-width:2px;border-top-width:2px}
.vf i:nth-child(2){right:0;top:0;border-right-width:2px;border-top-width:2px}
.vf i:nth-child(3){left:0;bottom:0;border-left-width:2px;border-bottom-width:2px}
.vf i:nth-child(4){right:0;bottom:0;border-right-width:2px;border-bottom-width:2px}
.vf span{position:absolute;left:0;right:0;top:calc(100% + 8px);text-align:center;color:#fff;font-family:Mono,monospace;font-size:10px;letter-spacing:.14em}
.vf b{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff}

/* H1 hero letterbox (opens with scroll) */
.lb{position:absolute;left:0;right:0;height:11vh;background:#000;z-index:3;pointer-events:none;transform-origin:50% 0}
.lb.t{top:0}.lb.b{bottom:0;transform-origin:50% 100%}

/* H2 light beam sweep (one pass, inverts what it crosses) */
.beam{position:absolute;top:-20%;bottom:-20%;left:0;width:22vw;background:#fff;mix-blend-mode:difference;z-index:4;pointer-events:none;transform:translateX(-40vw) skewX(-18deg);opacity:0}
.hero.beam-go .beam{animation:beam 1700ms cubic-bezier(.45,0,.2,1) forwards}
@keyframes beam{0%{opacity:1;transform:translateX(-40vw) skewX(-18deg)}100%{opacity:1;transform:translateX(140vw) skewX(-18deg)}}

/* H4 projector dither canvases */
.dith{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:1}

/* H5 spotlight over index lists */
.spot{position:fixed;left:0;top:0;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:25;opacity:0;transform:scale(.4);transition:opacity 250ms linear,transform 500ms cubic-bezier(.32,.72,0,1)}
.spot.on{opacity:1;transform:scale(1)}

/* H6 timecode on figures */
.tc{font-variant-numeric:tabular-nums}

/* H7 film strip method rail */
.rail.film{position:relative;padding:34px 0;border-top:0!important;border-left:0!important}
.rail.film::before,.rail.film::after{content:"";position:absolute;left:0;right:0;height:14px;background:radial-gradient(circle,transparent 0 0) ;background-image:linear-gradient(90deg,currentColor 0 14px,transparent 14px 34px);background-size:34px 14px;opacity:1}
.rail.film::before{top:8px}.rail.film::after{bottom:8px}

/* H9 projector-lit lines */
.lit{--p:0;background:linear-gradient(90deg,currentColor 0 calc(var(--p)*100%),transparent calc(var(--p)*100%) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px currentColor}

/* H11 iris */
.band.iris{clip-path:circle(calc(var(--iris,1)*85%) at 50% 50%)}

/* H12 end credits */
.credits{display:flex;justify-content:center;gap:28px;padding:28px 0 6px;border-top:1px solid var(--k);margin-top:28px}
.credits span{overflow:hidden;display:block}
.credits span i{display:block;font-style:normal;transform:translateY(105%)}
.credits.on span i{animation:rise 800ms cubic-bezier(.32,.72,0,1) forwards}
.credits.on span:nth-child(2) i{animation-delay:120ms}.credits.on span:nth-child(3) i{animation-delay:240ms}

@media (max-width:900px){.vf,.spot{display:none}.lb{height:7vh}.beam{width:40vw}.credits{flex-direction:column;align-items:center;gap:8px}}
@media (prefers-reduced-motion:reduce){.grain,.vf,.spot,.beam,.lb,.shutter{display:none!important}.band.iris{clip-path:none}.lit{-webkit-text-fill-color:currentColor;background:none}}

/* ===== Premium layer (texture · shadow · light), 1-bit only ===== */
.dshadow{position:absolute;z-index:0;pointer-events:none;image-rendering:pixelated}
.dshadow + *{position:relative;z-index:1}
.dlight{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;image-rendering:pixelated}
.sec.inv > :not(.dlight),.band > :not(.dlight){position:relative;z-index:1}
.band .icon{z-index:1}
/* P3 engraved capsules: a hairline ring inside black buttons and the island (pure B/W) */
.cta{box-shadow:inset 0 0 0 3px var(--k),inset 0 0 0 4px var(--w)}
.inv .cta,.hero .cta,.nav .cta,.menu .cta{box-shadow:inset 0 0 0 3px var(--w),inset 0 0 0 4px var(--k)}
.hero .cta.o{box-shadow:none}
.nav .in{box-shadow:inset 0 0 0 4px var(--k),inset 0 0 0 5px var(--w)}
.island{box-shadow:inset 0 0 0 4px var(--k),inset 0 0 0 5px var(--w)}
/* P4 paper texture: 1-bit stipple on light surfaces (static) */
.paper{position:fixed;inset:0;z-index:149;pointer-events:none;mix-blend-mode:difference;opacity:1}
@media (prefers-reduced-motion:reduce){.dlight{display:block}}

/* keep effects inside their panels */
.sec.inv,.band{overflow:hidden}
html,body{overflow-x:clip}