/* Afterimage — motion layer. Loaded after the page styles; everything here is
   switched on only when effects.js adds .fx to <html>, so the page reads fine without it. */

#bg-code { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none }
main, footer { position: relative; z-index: 1 }
/* flying letters and drifting layers must never widen the page */
main { overflow-x: clip }
.fx .facts { background: rgba(14, 22, 32, .82) }
.fx .cast-band { background: rgba(14, 22, 32, .8) }

/* code trickles for the boot and booking-sheet drips */
#drip-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 62; pointer-events: none }

/* boot sequence */
#boot { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: grid; place-items: center; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); cursor: pointer }
#boot .box { width: min(560px, 100%); font: 400 13px/1.9 var(--mono); color: rgba(160, 236, 244, .85); text-shadow: 0 0 10px rgba(79, 216, 232, .45); white-space: pre-wrap }
#boot .box .hd { color: var(--fg); letter-spacing: .18em }
#boot .box .m { color: var(--rust) }
#boot .bar { height: 2px; background: var(--line-2); margin-top: 14px }
#boot .bar i { display: block; height: 100%; width: 0; background: var(--amber); box-shadow: 0 0 12px var(--amber); transition: width .12s linear }
#boot .bar i { transition: width .3s ease-out }
#boot .box { transition: opacity .9s ease, filter .9s ease }
#boot.out .box { opacity: .25; filter: blur(2px) }
#boot .skip { margin-top: 18px; font: 400 10px var(--mono); letter-spacing: .2em; color: var(--muted); text-transform: uppercase }
html.booting, html.booting body { overflow: hidden }

/* story text: letters fly in and settle */
.fx .asm .w { display: inline-block; white-space: nowrap }
.fx .asm .ch { display: inline-block; opacity: 0; color: var(--amber); transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.7); filter: blur(3px); transition: transform 1.05s cubic-bezier(.16, .84, .24, 1), opacity .45s ease, filter .8s ease, color 1.4s ease; transition-delay: var(--d) }
.fx .asm.in .ch { opacity: 1; color: inherit; transform: none; filter: none }

/* hero title: clean white, with a short two-tick glitch now and then */
.title.glitching .g1 { animation: tick-a .46s steps(1) }
.title.glitching .g2 { animation: tick-b .46s steps(1) }
.title.glitching > span:not(.ghost) { animation: tick-main .46s steps(1) }
@keyframes tick-a {
  0%, 26%, 44%, 72%, 100% { opacity: 0; transform: none; clip-path: none }
  6% { opacity: .9; transform: translate(-7px, 0); clip-path: inset(8% 0 52% 0) }
  14% { opacity: .9; transform: translate(-4px, 1px); clip-path: inset(48% 0 10% 0) }
  20% { opacity: .8; transform: translate(-9px, 0); clip-path: inset(0 0 0 0) }
  50% { opacity: .9; transform: translate(-10px, -1px); clip-path: inset(30% 0 35% 0) }
  58% { opacity: .9; transform: translate(-5px, 0); clip-path: inset(0 0 0 0) }
  66% { opacity: .7; transform: translate(-8px, 1px); clip-path: inset(60% 0 4% 0) }
}
@keyframes tick-b {
  0%, 26%, 44%, 72%, 100% { opacity: 0; transform: none; clip-path: none }
  6% { opacity: .9; transform: translate(7px, 0); clip-path: inset(40% 0 20% 0) }
  14% { opacity: .9; transform: translate(5px, -1px); clip-path: inset(0 0 0 0) }
  20% { opacity: .8; transform: translate(9px, 1px); clip-path: inset(12% 0 60% 0) }
  50% { opacity: .9; transform: translate(10px, 0); clip-path: inset(0 0 0 0) }
  58% { opacity: .9; transform: translate(6px, 1px); clip-path: inset(55% 0 12% 0) }
  66% { opacity: .7; transform: translate(8px, 0); clip-path: inset(20% 0 50% 0) }
}
@keyframes tick-main {
  0%, 26%, 44%, 72%, 100% { transform: none }
  6%, 50% { transform: translate(2px, 0) }
  14%, 58% { transform: translate(-1px, 0) }
}

/* key art: live lens */
.fx .keyart { cursor: crosshair }
.fx .keyart > img.still { transform: scale(1.05); transition: transform .5s ease-out }
.fx .keyart .lens { transition: width .5s cubic-bezier(.2, .7, .2, 1), height .5s cubic-bezier(.2, .7, .2, 1) }
.fx .keyart .lens img { transition: transform .5s ease-out, opacity .5s ease }
.keyart .lens img.him { position: absolute; inset: 0; object-position: 50% 25%; transform: scale(1.4); opacity: 0 }
.fx .keyart .glow { animation: ka-breathe 4s ease-in-out infinite }
@keyframes ka-breathe { 50% { opacity: .55 } }
.keyart .ka-ring { position: absolute; z-index: 2; left: var(--lx); top: var(--ly); width: 24cqw; height: 24cqw; transform: translate(-50%, -50%) scale(.7); border: 1px solid var(--rust); border-radius: 50%; box-shadow: 0 0 24px rgba(209, 63, 160, .45); opacity: 0; transition: opacity .5s, transform .5s; pointer-events: none }
.keyart .ka-note { position: absolute; z-index: 3; left: var(--lx); top: calc(var(--ly) + 15cqw); transform: translateX(-50%); font: 400 1.7cqw/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); white-space: nowrap; text-align: center; background: rgba(7, 9, 13, .72); padding: 1cqw 2cqw; opacity: 0; transition: opacity .5s; pointer-events: none }
.keyart .ka-note span { color: var(--rust) }
.keyart.near .lens { width: 23cqw; height: 23cqw }
.keyart.near .lens img.him { opacity: .55 }
.keyart.near .ka-ring { opacity: 1; transform: translate(-50%, -50%) scale(1) }
.keyart.near .ka-note { opacity: 1 }

/* scroll reveals */
.fx .rv { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s ease; transition-delay: var(--d, 0s) }
.fx .rv.in { opacity: 1; transform: none; filter: none }

/* story still: scanned in from top to bottom */
.still-wrap { position: relative; margin-top: 48px; border-radius: 4px; overflow: hidden }
.still-wrap .story-still { margin-top: 0 }
@media (max-width: 720px) { .still-wrap { margin-top: 32px } }
.fx .still-wrap .story-still { clip-path: inset(0 0 100% 0); transition: clip-path 1.8s cubic-bezier(.5, 0, .2, 1) }
.fx .still-wrap.in .story-still { clip-path: inset(0 0 0 0) }
.still-wrap::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--amber); box-shadow: 0 0 18px 3px rgba(79, 216, 232, .7); opacity: 0; pointer-events: none }
.fx .still-wrap.in::after { animation: scanline 1.8s cubic-bezier(.5, 0, .2, 1) forwards }
@keyframes scanline { 0% { top: 0; opacity: 1 } 92% { opacity: 1 } 100% { top: 100%; opacity: 0 } }
.still-wrap .stamp { position: absolute; left: 16px; bottom: 14px; font: 400 11px/1.6 var(--mono); letter-spacing: .14em; color: rgba(160, 236, 244, .85); text-transform: uppercase; text-shadow: 0 0 8px rgba(0, 0, 0, .9); pointer-events: none }

/* cast: retina scan on reveal and on hover */
.cast .photo::before { content: ""; position: absolute; left: 0; right: 0; top: -10%; height: 10%; z-index: 2; background: linear-gradient(to bottom, transparent, rgba(79, 216, 232, .35), rgba(79, 216, 232, .9) 92%, transparent); opacity: 0; pointer-events: none; mix-blend-mode: screen }
.cast .photo.scan::before { animation: sweep 1.3s cubic-bezier(.45, 0, .25, 1) }
@keyframes sweep { 0% { top: -10%; opacity: 1 } 100% { top: 100%; opacity: 0 } }
.cast .photo img { transition: filter .5s, transform 1.2s cubic-bezier(.2, .7, .2, 1) }
.cast .photo:hover img { transform: scale(1.04); filter: contrast(1.08) saturate(1.1) }
.cast .photo.glitch img { animation: glitch .45s steps(3) }
@keyframes glitch { 0% { transform: translate(2px, 0) scale(1.04); filter: hue-rotate(40deg) } 33% { transform: translate(-3px, 1px) scale(1.04); filter: hue-rotate(-60deg) saturate(2) } 66% { transform: translate(1px, -1px) scale(1.04); filter: none } 100% { transform: scale(1.04) } }
.cast .photo .sub { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; font: 400 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(160, 236, 244, .9); text-shadow: 0 0 6px rgba(0, 0, 0, .9); pointer-events: none }
.cast .photo .sub b { color: var(--fg); font-weight: 400 }
.cast .photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, transparent 60%, rgba(7, 9, 13, .7)); pointer-events: none }

/* showtimes */
.fx .chip, .fx .date, .fx .time { transition: background .2s, border-color .2s, color .2s, box-shadow .25s }
.fx .chip:hover, .fx .date:hover, .fx .time:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(79, 216, 232, .35), 0 0 18px rgba(79, 216, 232, .18) }
.fx .time[aria-pressed="true"] { box-shadow: 0 0 22px rgba(79, 216, 232, .45) }
.fx .cinema { transition: border-color .3s, background .3s }
.fx .cinema:hover { border-color: var(--line-2) }
.fx .seat[aria-pressed="true"] { animation: pop .3s ease-out }
@keyframes pop { 50% { transform: scale(1.25) } }

/* buttons: a light sweep on hover */
.btn { position: relative; overflow: hidden }
.btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); pointer-events: none }
.btn-primary:hover::after { animation: shine .8s ease-out }
@keyframes shine { to { left: 130% } }

/* finale: slow push-in on the corridor */
.finale { position: relative; overflow: hidden; background: var(--bg) }
.finale::before { content: ""; position: absolute; inset: -4%; background: linear-gradient(to bottom, rgba(7, 9, 13, .55), rgba(7, 9, 13, .88)), url("images/cta-corridor.jpg") center / cover; animation: push 26s ease-in-out infinite alternate }
@keyframes push { from { transform: scale(1) } to { transform: scale(1.12) translateY(-1.5%) } }
.finale .wrap { position: relative; z-index: 1 }
.finale .flick { position: absolute; inset: 0; z-index: 0; background: rgba(79, 216, 232, .06); opacity: 0; pointer-events: none; animation: lights 7s steps(1) infinite }
@keyframes lights { 0%, 61%, 64%, 67%, 100% { opacity: 0 } 62%, 66% { opacity: 1 } }

/* booking sheet: steps arrive with a short scan */
.fx .sheet-body:not([hidden]), .fx #step3:not([hidden]) { animation: arrive .55s ease-out }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); filter: blur(4px) } }

@media (prefers-reduced-motion: reduce) {
  .finale::before, .finale .flick, .still-wrap::after, .cast .photo::before { animation: none !important }
  .fx .rv, .fx .asm .ch { opacity: 1; transform: none; filter: none; transition: none }
  .fx .still-wrap .story-still { clip-path: none; transition: none }
}