/* Afterimage — 20-second teaser played by the "Watch trailer" button */
.tr { position: fixed; inset: 0; z-index: 70; background: #000; color: var(--fg); overflow: hidden; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
.tr .stage { position: absolute; inset: 9vh 0; overflow: hidden; background: var(--bg) }
.tr .sc { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none }
.tr .sc.on { opacity: 1 }
.tr .sc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.tr .sc::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .75)) }

/* 1 · studio card */
.tr .s1 { display: grid; place-items: center; background: #000 }
.tr .s1::after { display: none }
.tr .studio { font: 400 clamp(11px, 1.3vw, 14px) / 2 var(--mono); letter-spacing: .4em; text-transform: uppercase; color: var(--muted); text-align: center; white-space: pre }

/* 2 · the device, slow push-in */
.tr .s2 img { object-position: 55% 50%; transform: scale(1); filter: brightness(.85) }
.tr .s2.on img { animation: tr-push 5s ease-out forwards }
@keyframes tr-push { to { transform: scale(1.14) } }
.tr .s2 .pulse { position: absolute; z-index: 1; left: 50%; top: 50%; width: 60vmin; height: 60vmin; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(79, 216, 232, .28), transparent 60%); mix-blend-mode: screen; opacity: 0 }
.tr .s2.on .pulse { animation: tr-pulse 1.6s ease-in-out infinite alternate }
@keyframes tr-pulse { from { opacity: .2 } to { opacity: 1 } }

/* 3 · terminal */
.tr .s3 { display: grid; place-items: center; background: #030406 }
.tr .s3::after { display: none }
.tr .term { width: min(640px, 86vw); font: 400 clamp(12px, 1.5vw, 16px) / 2 var(--mono); color: rgba(160, 236, 244, .9); text-shadow: 0 0 12px rgba(79, 216, 232, .5); white-space: pre-wrap; min-height: 9em }
.tr .term .m { color: var(--rust); text-shadow: 0 0 14px rgba(209, 63, 160, .7) }

/* 4 · the heroine, glitching */
.tr .s4 img { object-position: 50% 35%; filter: brightness(.8) contrast(1.05) }
.tr .s4.on img { animation: tr-glitch 3.4s steps(1) forwards }
@keyframes tr-glitch {
  0%, 18%, 23%, 61%, 64%, 100% { transform: scale(1.04); filter: brightness(.8) }
  19% { transform: scale(1.04) translate(-12px, 0); filter: brightness(1.1) hue-rotate(60deg) saturate(2) }
  21% { transform: scale(1.06) translate(8px, 2px); filter: brightness(.6) hue-rotate(-50deg) }
  62% { transform: scale(1.05) translate(14px, -1px); filter: brightness(1.2) hue-rotate(90deg) saturate(2.4) }
}

/* 5 · subjects, quick cuts */
.tr .s5 img { opacity: 0; object-position: 50% 30% }
.tr .s5 img.cur { opacity: 1 }
.tr .s5 .scan { position: absolute; z-index: 2; left: 0; right: 0; height: 3px; top: -5%; background: var(--amber); box-shadow: 0 0 22px 4px rgba(79, 216, 232, .7) }
.tr .s5 .scan.go { animation: tr-scan .6s linear }
@keyframes tr-scan { from { top: -5% } to { top: 105% } }
.tr .s5 .who { position: absolute; z-index: 3; left: 6vw; bottom: 7vh; font: 400 clamp(11px, 1.3vw, 14px) / 1.7 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); text-shadow: 0 0 8px #000 }

/* 6 · title card */
.tr .s6 { display: grid; place-items: center; align-content: center; gap: 3vh; background: #000; text-align: center }
.tr .s6::after { display: none }
.tr .ttl { position: relative; font-family: var(--title); font-weight: 100; font-size: clamp(36px, 8vw, 120px); letter-spacing: .34em; padding-left: .34em; line-height: 1 }
.tr .ttl .g { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen }
.tr .ttl .g1 { color: var(--amber) } .tr .ttl .g2 { color: var(--rust) }
.tr .s6.on .ttl .g1 { animation: tr-tick-a .5s steps(1) 1s, tr-tick-a .5s steps(1) 3.1s }
.tr .s6.on .ttl .g2 { animation: tr-tick-b .5s steps(1) 1s, tr-tick-b .5s steps(1) 3.1s }
@keyframes tr-tick-a { 0%, 30%, 45%, 75%, 100% { opacity: 0; transform: none } 8% { opacity: .9; transform: translate(-8px, 0); clip-path: inset(10% 0 50% 0) } 52% { opacity: .9; transform: translate(-11px, 0); clip-path: inset(45% 0 8% 0) } }
@keyframes tr-tick-b { 0%, 30%, 45%, 75%, 100% { opacity: 0; transform: none } 8% { opacity: .9; transform: translate(8px, 0); clip-path: inset(50% 0 10% 0) } 52% { opacity: .9; transform: translate(11px, 0); clip-path: inset(5% 0 55% 0) } }
.tr .tr-date { font: 400 clamp(11px, 1.3vw, 14px) var(--mono); letter-spacing: .34em; text-transform: uppercase; color: var(--amber) }
.tr .end { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 3vh; opacity: 0; transition: opacity .8s; pointer-events: none }
.tr .end.show { opacity: 1; pointer-events: auto }

/* captions */
.tr .cap { position: absolute; z-index: 3; left: 6vw; right: 6vw; bottom: 9%; text-align: center; font-family: var(--title); font-weight: 300; font-size: clamp(20px, 3.2vw, 40px); letter-spacing: .04em; line-height: 1.3; text-shadow: 0 2px 20px rgba(0, 0, 0, .9); opacity: 0; transform: translateY(10px); filter: blur(4px); transition: opacity .8s ease, transform .8s ease, filter .8s ease }
.tr .cap.show { opacity: 1; transform: none; filter: none }
.tr .cap.top { bottom: auto; top: 9% }

/* chrome: rec, timecode, progress, close */
.tr .hud { position: absolute; z-index: 5; left: max(16px, 4vw); right: max(16px, 4vw); top: calc(env(safe-area-inset-top, 0px) + 2.6vh); display: flex; justify-content: space-between; align-items: center; font: 400 12px var(--mono); letter-spacing: .16em; color: var(--muted); text-transform: uppercase }
.tr .rec::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rust); margin-right: 8px; animation: tr-blink 1.2s steps(2) infinite }
@keyframes tr-blink { 50% { opacity: 0 } }
.tr .x { background: none; border: 1px solid var(--line-2); color: var(--fg); font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 8px 14px; cursor: pointer }
.tr .x:hover { border-color: var(--fg) }
.tr .bar { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 4.5vh); height: 2px; margin: 0 max(16px, 4vw); background: var(--line-2) }
.tr .bar i { display: block; height: 100%; width: 0; background: var(--amber); box-shadow: 0 0 10px var(--amber) }
.tr .tc { font-variant-numeric: tabular-nums; color: var(--fg) }

@media (prefers-reduced-motion: reduce) {
  .tr .sc.on img, .tr .pulse, .tr .scan, .tr .ttl .g, .tr .rec::before { animation: none !important }
}