/* Base layout */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.splash-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

video {
  width: 100%;
  height: 100%;
  object-fit: contain;          
  background: #0a0a0a;         
}

/* --- Static overlay stack --- */
.static-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: #000;
  transition: opacity 60ms linear;
}

/* Layer 1: animated noise using layered gradients */
.static-noise,
.scanlines,
.glitch-bar {
  position: absolute;
  inset: 0;
}

/* Procedural noise: two moving grain layers + soft vignette */
.static-noise {
  mix-blend-mode: screen;
  background:
    /* grain A */
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.08) 0 2deg, rgba(0,0,0,0.08) 2deg 4deg),
    /* grain B (offset) */
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 2px, rgba(0,0,0,0.04) 2px 4px),
    /* vignette */
    radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.7) 80%);
  filter: contrast(160%) brightness(110%) grayscale(100%);
  animation: noiseShift 180ms steps(2) infinite; /* choppy, TV-ish */
  opacity: 0.95;
}

/* Layer 2: scanlines (subtle) */
.scanlines {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.25) 0px,
      rgba(0,0,0,0.25) 1px,
      rgba(255,255,255,0.07) 2px,
      rgba(0,0,0,0.25) 3px
    );
  mix-blend-mode: multiply;
  opacity: 0.35;
  animation: scanShift 220ms steps(3) infinite;
}

/* Layer 3: two glitch bars that sweep once, then stop */
.glitch-bar {
  height: 18vh;
  background: linear-gradient(to right, rgba(255,255,255,0.0), rgba(255,255,255,0.6), rgba(255,255,255,0.0));
  opacity: 0;
}
.glitch-bar.g1 { top: 15%; }
.glitch-bar.g2 { top: 65%; }

/* Flicker choreography:
   1) Overlay appears instantly.
   2) Noise + scanlines run for ~650ms.
   3) Glitch bars sweep quickly.
   4) Everything freezes on a still static frame. */
.static-overlay.flicker { opacity: 1; }

/* Make the bars do one quick pass then stay hidden */
.static-overlay.flicker .g1 {
  animation: barSweep 240ms ease-out 40ms 1 forwards;
}
.static-overlay.flicker .g2 {
  animation: barSweep 260ms ease-out 100ms 1 forwards;
}

/* After ~650ms, freeze the noise by stopping its animation.
   We emulate "freeze" by swapping to a non-animating state via animation-play-state. */
.static-overlay.flicker .static-noise {
  animation: noiseShift 180ms steps(2) infinite, stopNoise 650ms linear 1 forwards;
}
.static-overlay.flicker .scanlines {
  animation: scanShift 220ms steps(3) infinite, stopScan 650ms linear 1 forwards;
}

/* Keyframes */
@keyframes noiseShift {
  0%   { background-position: 0 0, 0 0, 50% 50%; }
  100% { background-position: 12px -9px, -10px 8px, 50% 50%; }
}
@keyframes scanShift {
  0%   { background-position-y: 0; }
  100% { background-position-y: 6px; }
}
@keyframes barSweep {
  0%   { transform: translateX(-120%); opacity: 0.0; }
  10%  { opacity: 0.6; }
  100% { transform: translateX(120%); opacity: 0.0; }
}

/* Stop-animations helpers: set play-state to paused by transitioning to a class that uses none */
@keyframes stopNoise { to { animation-play-state: paused; } }
@keyframes stopScan  { to { animation-play-state: paused; } }

/* Final still look: a little yellow energy tint to match your brand */
.static-overlay.flicker::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,224,0,0.06) 0%, rgba(0,0,0,0.65) 80%);
  pointer-events: none;
}

/* After flicker: freeze on an image */
.static-overlay.freeze {
  /* Use the dynamic image captured from the video; center + contain to avoid zooming */
  background-image: var(--freeze-image);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Keep the subtle yellow vignette over the frozen frame */
.static-overlay.freeze::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,224,0,0.06) 0%, rgba(0,0,0,0.65) 80%);
  pointer-events: none;
}