/* takeover cinematic — a full-viewport sequence that takes over from the device.
   Layer order (DOM = stacking, all absolute): reveal (bottom) -> black -> flash -> grain (top). */

#takeoverScene {
  position: fixed;
  inset: 0;
  z-index: 500;            /* above the device/stage, below the page film grain (#filmGrain z9999) */
  display: none;
  pointer-events: none;
}
#takeoverScene.active {
  display: block;
  pointer-events: auto;    /* swallow clicks so the device underneath can't be toggled mid-sequence */
}

/* The revealed "space": full-bleed asset on black (it hides the device once lit). The asset is
   letterboxed into black so any aspect mismatch is invisible, and the video + still share the
   exact framing so the cut between them is seamless. */
.takeover-reveal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.takeover-asset {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* whole frame visible, centered; black letterbox blends with the bg */
}

/* Black layer (the slam target). Held opaque through the grainy hold; the reveal removes the
   'slam' class, which drops the animation back to the base opacity:0 instantly — so the video
   flashes up underneath with no cross-fade. */
.takeover-black {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}

/* Full-viewport blow-out flash: the screen whites out at the end of the glitch, then the black
   slams up under it — a hard "the signal dies" hit instead of a soft fade. */
.takeover-flash {
  position: absolute;
  inset: 0;
  background: #eafff3;
  opacity: 0;
  mix-blend-mode: screen;
}

#takeoverScene.slam .takeover-flash { animation: takeover-slam-flash 360ms ease-out forwards; }
#takeoverScene.slam .takeover-black { animation: takeover-slam-black 360ms ease-out forwards; }
@keyframes takeover-slam-flash {
  0%   { opacity: 0; }
  7%   { opacity: 1; }      /* hard white punch */
  20%  { opacity: 0.85; }
  42%  { opacity: 0.18; }
  100% { opacity: 0; }
}
@keyframes takeover-slam-black {
  0%   { opacity: 0; }
  10%  { opacity: 0.1; }
  38%  { opacity: 1; }      /* black slams up under the fading flash */
  100% { opacity: 1; }
}

/* Scene grain — screen blend so dust shows on pure black (the page grain uses overlay, which
   vanishes on black). Heavy and coarse, and only during the black hold (the 'slam' class);
   hidden at the reveal so it never washes the lit scene. */
.takeover-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
#takeoverScene.slam .takeover-grain { opacity: 0.2; }

/* CRT glitch-out (phase 1): violent tear / shake / RGB-split, building to a blown-out white that
   the slam flash continues. Targets .crt (NOT .crt-fit, which carries the fit-scale transform). */
.stage.takeover-glitch .crt { animation: takeover-crt-glitch 760ms steps(1, end) both; will-change: transform, filter; }
@keyframes takeover-crt-glitch {
  0%   { transform: translate(0, 0) scale(1) skewX(0deg);         filter: brightness(1.3) contrast(1.1); }
  6%   { transform: translate(-20px, 3px) scaleX(1.14) skewX(-16deg); filter: brightness(2.2) contrast(2.4) hue-rotate(25deg) drop-shadow(7px 0 #ff0033) drop-shadow(-7px 0 #00fff0); }
  12%  { transform: translate(24px, -5px) scaleX(0.86) skewX(11deg);  filter: invert(1) brightness(2.6) saturate(3); }
  19%  { transform: translate(-28px, 2px) scaleX(1.2) skewX(0deg);    filter: brightness(0.22) contrast(3.6) drop-shadow(-9px 0 #ff00d0); }
  26%  { transform: translate(15px, 7px) scaleY(1.1) skewX(20deg);    filter: brightness(3.1) hue-rotate(-60deg) saturate(4); }
  33%  { transform: translate(-12px, -9px) scaleX(1.28) skewX(0deg);  filter: invert(1) brightness(1.9) drop-shadow(9px 0 #00fff0) drop-shadow(-9px 0 #ff0033); }
  40%  { transform: translate(30px, 1px) skewX(-18deg);              filter: brightness(0.12); }
  47%  { transform: translate(-22px, 5px) scaleX(0.88) skewX(0deg);   filter: brightness(3.3) contrast(2.8) saturate(0.2); }
  54%  { transform: translate(11px, -4px) scaleX(1.32) skewX(0deg);   filter: invert(1) brightness(2.3) hue-rotate(90deg); }
  61%  { transform: translate(-26px, 2px) skewX(14deg);              filter: brightness(0.18) contrast(4); }
  68%  { transform: translate(19px, 8px) scaleY(0.88) skewX(0deg);    filter: brightness(3.5) drop-shadow(11px 0 #ff0033) drop-shadow(-11px 0 #00fff0); }
  75%  { transform: translate(-7px, -3px) scaleX(1.12) skewX(0deg);   filter: invert(1) brightness(2.7); }
  82%  { transform: translate(5px, 2px) scaleX(1) skewX(0deg);        filter: brightness(0.1) contrast(5); }
  89%  { transform: translate(-2px, -1px) scale(1.05);               filter: brightness(4.5) contrast(1.4) saturate(0); }
  100% { transform: translate(0, 0) scale(1.02);                     filter: brightness(6) saturate(0); }
}

/* Accessibility: reduced motion -> no strobe, no white punch. Calm fade-to-dark + lighter grain.
   The video's own content can't be altered here. */
@media (prefers-reduced-motion: reduce) {
  .stage.takeover-glitch .crt { animation: takeover-crt-glitch-soft 380ms ease-in both; }
  @keyframes takeover-crt-glitch-soft {
    0%   { filter: brightness(1); transform: none; }
    100% { filter: brightness(0); transform: none; }
  }
  #takeoverScene.slam .takeover-flash { animation: none; opacity: 0; }
  #takeoverScene.slam .takeover-black { animation: takeover-slam-black-soft 380ms ease-out forwards; }
  @keyframes takeover-slam-black-soft { from { opacity: 0; } to { opacity: 1; } }
  #takeoverScene.slam .takeover-grain { opacity: 0.1; }
}