/* Enhanced CRT Effects with Realistic Physics Simulation */

/* Base styles and CSS variables */
:root {
  --vh: 1vh;
  --font-ui: "JetBrains Mono", "Hack", "Hack Nerd Font Mono", monospace;
  --bg: #0a0a0a;
  --fg: #e8e3d8;
  --cyan: #00ffc8;
  --vhs-warm: #ffdc80;
  --fade-dur: 2s;
  --period: 7s;
  --ui-bottom-pad: 72px;
  --bg-current: none;
  --sweep-dur: 25s;
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

/* Dark loading screen instead of white */
body[data-loading] {
  background: #0a0a0a !important; /* Dark loading background */
  color: #00ffc8 !important; /* Cyan loading text */
}

body[data-loading]::before {
  content: "LOADING SYSTEM...";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-ui);
  color: #00ffc8;
  font-size: clamp(1rem, 4vw, 1.5rem);
  letter-spacing: 0.2em;
  text-shadow: 0 0 10px rgba(0, 255, 200, 0.5);
  animation: loadingPulse 2s ease-in-out infinite alternate;
  z-index: 9999;
}

@keyframes loadingPulse {
  from {
    opacity: 0.5;
    text-shadow: 0 0 10px rgba(0, 255, 200, 0.3);
  }
  to {
    opacity: 1;
    text-shadow: 0 0 20px rgba(0, 255, 200, 0.8);
  }
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* Overlay tint to improve legibility without altering body background */
#bg-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.35) 100%
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6));
  mix-blend-mode: multiply;
  opacity: 0.8;
  transition: opacity 0.4s ease;
}

[data-motion="paused"] #bg-container::after {
  opacity: 0.9;
}

/* Slightly stronger default effect layers */
.crt-scanlines,
.crt-scanlines::before,
.crt-scanlines::after,
.crt-vignette,
.scanline-sweep,
.crt-retrace-sweep,
.vhs-sweep {
  opacity: 0.35;
}
[data-motion="paused"] .crt-scanlines,
[data-motion="paused"] .crt-vignette,
[data-motion="paused"] .scanline-sweep,
[data-motion="paused"] .crt-retrace-sweep,
[data-motion="paused"] .vhs-sweep {
  opacity: 0.1;
}

/* Minor typography tweaks for readability */
header h1 {
  letter-spacing: 0.04em;
  line-height: 1.1;
}

nav a {
  letter-spacing: 0.04em;
}

.bg-container {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity var(--fade-dur) ease-in-out;
}

.bg-image.active {
  opacity: 1;
}

header {
  min-height: calc(var(--vh) * 100);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--ui-bottom-pad));
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.6);
  gap: clamp(0.5rem, 2vh, 1rem);
}

/* Fallback for mobile browsers that don't handle viewport units well */
@supports not (height: 100vh) {
  header {
    min-height: 100vh;
  }
}

#glitch-title {
  pointer-events: none;
}

#glitch-title .tg-letter {
  font-size: clamp(2.6rem, 6.8vw, 5.6rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.05;
  display: inline-block;
  position: relative;
}

nav {
  margin-top: 0;
  margin-bottom: clamp(12px, 5vh, 40px);
  position: relative;
  z-index: 21;
}

#nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: clamp(1.2rem, 4.8vw, 2.6rem);
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: auto;
}

#nav-list a {
  color: #e8e3d8;
  text-decoration: none;
  font-size: clamp(1.05rem, 2.6vw, 1.6rem);
  letter-spacing: 0.02em;
  padding: 0.15em 0.32em;
  position: relative;
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;

  text-shadow:
    0 0 1px currentColor,
    0 0 4px rgba(232, 227, 216, 0.4),
    0 0 8px rgba(232, 227, 216, 0.2);
  filter: brightness(1.05);
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  padding: 0.5em 0.7em;
  z-index: 22;
  pointer-events: none;
  display: block;
  text-align: left;
}

/* Barrel distortion for authentic CRT geometry */
.crt-barrel-distortion {
  position: fixed;
  inset: 0;
  z-index: 37;
  pointer-events: none;
  backdrop-filter: contrast(1.05) brightness(1.02) hue-rotate(0.5deg);
  -webkit-backdrop-filter: contrast(1.05) brightness(1.02) hue-rotate(0.5deg);
  /* SVG filter for barrel distortion */
  filter: url(#crt-barrel-distortion);
}

/* Enhanced scanlines with intensity variation */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  mix-blend-mode: multiply;

  /* More realistic scanline pattern with varying intensity */
  background-image: repeating-linear-gradient(
    rgba(0, 0, 0, 0.42) 0px,
    rgba(0, 0, 0, 0.35) 0.8px,
    rgba(0, 0, 0, 0.15) 1.4px,
    rgba(0, 0, 0, 0.28) 2.2px,
    rgba(0, 0, 0, 0.12) 3px,
    rgba(0, 0, 0, 0.25) 3.8px,
    rgba(0, 0, 0, 0.08) 4.6px
  );

  animation:
    scanlineFlicker 3.2s steps(3) infinite,
    scanlineIntensityVar 8s ease-in-out infinite;

  /* Curved masking to simulate CRT curvature */
  mask-image:
    radial-gradient(
      ellipse 102% 98% at center,
      rgba(0, 0, 0, 1) 45%,
      rgba(0, 0, 0, 0.9) 70%,
      rgba(0, 0, 0, 0.7) 85%,
      rgba(0, 0, 0, 0.3) 95%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
  -webkit-mask-image:
    radial-gradient(
      ellipse 102% 98% at center,
      rgba(0, 0, 0, 1) 45%,
      rgba(0, 0, 0, 0.9) 70%,
      rgba(0, 0, 0, 0.7) 85%,
      rgba(0, 0, 0, 0.3) 95%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Realistic interlaced scanlines */
.scanlines-interlaced {
  position: fixed;
  inset: 0;
  z-index: 39;
  pointer-events: none;
  mix-blend-mode: multiply;

  /* Simulates interlaced CRT with alternating field pattern */
  background-image: repeating-linear-gradient(
    rgba(0, 0, 0, 0.08) 0px,
    rgba(0, 0, 0, 0.08) 1px,
    transparent 2px,
    transparent 3px,
    rgba(0, 0, 0, 0.12) 4px,
    rgba(0, 0, 0, 0.12) 5px,
    transparent 6px,
    transparent 7px
  );

  animation: interlaceShift 0.033s steps(2) infinite; /* 60Hz field rate */
}

/* Enhanced RGB separation with phosphor-accurate colors */
.scanlines-rgb {
  position: fixed;
  inset: 0;
  z-index: 41;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.18;

  /* Authentic P22 phosphor colors with realistic distribution */
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 69, 0, 0.15) 0 1.5px,
      /* Red phosphor */ transparent 2px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0, 255, 100, 0.14) 0.5px 2px,
      /* Green phosphor */ transparent 2.5px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(70, 130, 255, 0.13) 1px 2.5px,
      /* Blue phosphor */ transparent 3px
    );

  animation:
    rgbConvergenceError 7s ease-in-out infinite alternate,
    phosphorBrightness 12s ease-in-out infinite;

  /* Radial mask simulating phosphor dot arrangement */
  mask-image: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0.8) 75%,
    rgba(0, 0, 0, 0.4) 90%,
    rgba(0, 0, 0, 0.2) 100%
  );
  -webkit-mask-image: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0.8) 75%,
    rgba(0, 0, 0, 0.4) 90%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

/* Enhanced CRT vignette with corner darkening */
.crt-vignette {
  position: fixed;
  inset: 0;
  z-index: 38;
  pointer-events: none;
  background: 
    /* Corner darkening (CRT shadow mask effect) */
    radial-gradient(
      ellipse 130% 120% at 15% 15%,
      rgba(0, 0, 0, 0.3),
      transparent 45%
    ),
    radial-gradient(
      ellipse 130% 120% at 85% 15%,
      rgba(0, 0, 0, 0.3),
      transparent 45%
    ),
    radial-gradient(
      ellipse 130% 120% at 15% 85%,
      rgba(0, 0, 0, 0.3),
      transparent 45%
    ),
    radial-gradient(
      ellipse 130% 120% at 85% 85%,
      rgba(0, 0, 0, 0.3),
      transparent 45%
    ),
    /* Main vignette with realistic falloff */
      radial-gradient(
        ellipse 95% 90% at 50% 50%,
        rgba(0, 0, 0, 0) 20%,
        rgba(0, 0, 0, 0.15) 60%,
        rgba(0, 0, 0, 0.35) 85%,
        rgba(0, 0, 0, 0.6) 100%
      ),
    /* Edge brightening (CRT phosphor edge glow) */
      radial-gradient(
        ellipse 88% 82% at 50% 50%,
        rgba(255, 255, 255, 0) 70%,
        rgba(255, 255, 255, 0.02) 85%,
        rgba(255, 255, 255, 0.04) 95%
      );
  mix-blend-mode: multiply;
  opacity: 0.85;
}

/* Enhanced scanline sweep with realistic retrace simulation */
.scanline-sweep {
  position: fixed;
  left: 0;
  right: 0;
  top: -30vh;
  height: 32vh;
  z-index: 45;
  pointer-events: none;

  /* Realistic CRT retrace effect */
  backdrop-filter: contrast(2.8) brightness(1.4) saturate(1.8) hue-rotate(8deg)
    blur(1.5px);
  -webkit-backdrop-filter: contrast(2.8) brightness(1.4) saturate(1.8)
    hue-rotate(8deg) blur(1.5px);

  /* Enhanced noise filter for retrace distortion */
  filter: url(#crt-retrace-noise);

  /* Realistic masking for electron beam shape */
  -webkit-mask-image: 
    /* Horizontal beam intensity profile */
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 12%,
      rgba(0, 0, 0, 1) 25%,
      rgba(0, 0, 0, 1) 75%,
      rgba(0, 0, 0, 0.3) 88%,
      transparent 100%
    ),
    /* Radial falloff for beam focus */
      radial-gradient(
        ellipse 85% 90% at center,
        rgba(0, 0, 0, 1) 50%,
        rgba(0, 0, 0, 0.8) 70%,
        rgba(0, 0, 0, 0.4) 85%,
        rgba(0, 0, 0, 0.2) 95%,
        transparent 100%
      );
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 12%,
      rgba(0, 0, 0, 1) 25%,
      rgba(0, 0, 0, 1) 75%,
      rgba(0, 0, 0, 0.3) 88%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 85% 90% at center,
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 0.8) 70%,
      rgba(0, 0, 0, 0.4) 85%,
      rgba(0, 0, 0, 0.2) 95%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  mix-blend-mode: screen;
  opacity: 0.22;
  will-change: transform, filter;
  transform: skewY(0.8deg) translateX(-2px);
}

/* Realistic sweep animation with irregular timing */
@keyframes realisticSweepDown {
  0% {
    transform: translateY(-120vh) skewY(0.8deg) translateX(-2px);
    filter: url(#crt-retrace-noise) brightness(1.2);
  }
  15% {
    transform: translateY(-80vh) skewY(-0.3deg) translateX(1px);
    filter: url(#crt-retrace-noise) brightness(1.4);
  }
  35% {
    transform: translateY(-20vh) skewY(1.2deg) translateX(-1px);
    filter: url(#crt-retrace-noise) brightness(1.6);
  }
  50% {
    transform: translateY(30vh) skewY(-0.6deg) translateX(2px);
    filter: url(#crt-retrace-noise) brightness(1.5);
  }
  65% {
    transform: translateY(80vh) skewY(1deg) translateX(-1px);
    filter: url(#crt-retrace-noise) brightness(1.3);
  }
  85% {
    transform: translateY(140vh) skewY(-0.8deg) translateX(3px);
    filter: url(#crt-retrace-noise) brightness(1.1);
  }
  100% {
    transform: translateY(220vh) skewY(0.5deg) translateX(-2px);
    filter: url(#crt-retrace-noise) brightness(1);
  }
}

.scanline-sweep.run {
  animation: realisticSweepDown var(--sweep-dur)
    cubic-bezier(0.15, 0.61, 0.25, 0.98) forwards;
}

/* Phosphor persistence effect for text elements */
.tg-letter {
  position: relative;
  display: inline-block;
  will-change: transform, filter, text-shadow;
}

.tg-letter::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  text-shadow: inherit;
  filter: blur(1px) brightness(0.8);
}

.tg-letter.phosphor-glow::after {
  opacity: 0.6;
  text-shadow:
    0 0 8px rgba(0, 255, 100, 0.4),
    0 0 16px rgba(0, 255, 100, 0.2);
}

/* Animation keyframes for enhanced realism */
@keyframes scanlineFlicker {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0.95;
  }
  66% {
    opacity: 1.02;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scanlineIntensityVar {
  0% {
    filter: brightness(1) contrast(1);
  }
  25% {
    filter: brightness(1.05) contrast(1.1);
  }
  50% {
    filter: brightness(0.98) contrast(0.95);
  }
  75% {
    filter: brightness(1.02) contrast(1.05);
  }
  100% {
    filter: brightness(1) contrast(1);
  }
}

@keyframes interlaceShift {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes rgbConvergenceError {
  0% {
    transform: translateX(0px);
    filter: hue-rotate(0deg);
  }
  25% {
    transform: translateX(0.5px);
    filter: hue-rotate(1deg);
  }
  50% {
    transform: translateX(-0.3px);
    filter: hue-rotate(-0.5deg);
  }
  75% {
    transform: translateX(0.8px);
    filter: hue-rotate(0.8deg);
  }
  100% {
    transform: translateX(0px);
    filter: hue-rotate(0deg);
  }
}

@keyframes phosphorBrightness {
  0% {
    opacity: 0.18;
  }
  30% {
    opacity: 0.22;
  }
  60% {
    opacity: 0.16;
  }
  100% {
    opacity: 0.18;
  }
}

/* Horizontal hold error simulation */
@keyframes horizontalHoldError {
  0% {
    transform: translateX(0px) skewX(0deg);
  }
  10% {
    transform: translateX(-3px) skewX(-0.2deg);
  }
  20% {
    transform: translateX(5px) skewX(0.3deg);
  }
  30% {
    transform: translateX(-2px) skewX(-0.1deg);
  }
  40% {
    transform: translateX(1px) skewX(0.1deg);
  }
  50% {
    transform: translateX(-1px) skewX(-0.05deg);
  }
  100% {
    transform: translateX(0px) skewX(0deg);
  }
}

.horizontal-hold-error {
  animation: horizontalHoldError 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}

/* Motion reduction overrides */
/* Mobile responsive adjustments */
@media (max-width: 768px) {
  :root {
    --ui-bottom-pad: 0px; /* Remove default bottom padding on mobile */
    --mobile-bottom-safe: 70px; /* Space for browser UI bars */
  }

  /* Center content vertically with safe bottom margin */
  header {
    min-height: 70vh !important; /* Shorter viewport usage */
    justify-content: center !important; /* Center instead of flex-end */
    padding-bottom: var(
      --mobile-bottom-safe
    ) !important; /* Safe space for browser UI */
    gap: clamp(0.8rem, 2vh, 1.2rem);
  }

  /* Ensure navigation is positioned properly and visible */
  nav {
    position: relative !important; /* Ensure proper positioning */
    margin-bottom: clamp(8px, 2vh, 16px) !important; /* Controlled spacing */
    z-index: 999 !important; /* Force above other elements */
  }

  #nav-list {
    gap: clamp(1rem, 6vw, 2rem);
  }

  #nav-list a {
    padding: 0.4em 0.6em; /* Larger touch targets */
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    /* Stronger shadow for better contrast on mobile */
    text-shadow:
      0 0 2px rgba(0, 0, 0, 1),
      0 0 8px rgba(0, 0, 0, 0.8),
      0 0 16px rgba(0, 0, 0, 0.4);
  }
}

@media (max-width: 480px) {
  :root {
    --ui-bottom-pad: 0px; /* No bottom padding on phones */
    --mobile-bottom-safe: 80px; /* More space on small screens */
  }

  /* Even more conservative positioning for small screens */
  header {
    min-height: 65vh !important; /* Even shorter for phones */
    justify-content: center !important; /* Maintain centered positioning */
    padding-bottom: var(
      --mobile-bottom-safe
    ) !important; /* Larger safe margin */
    gap: clamp(0.6rem, 1.5vh, 1rem);
  }

  nav {
    margin-bottom: clamp(4px, 1vh, 8px) !important; /* Minimal spacing */
  }

  #nav-list {
    gap: clamp(0.8rem, 5vw, 1.5rem);
  }
}

/* Landscape phones need different handling */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --mobile-bottom-safe: 40px; /* Less space needed in landscape */
  }

  header {
    min-height: 85vh !important; /* Use more viewport in landscape */
    justify-content: center !important;
    padding-bottom: var(--mobile-bottom-safe) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scanlines,
  .scanlines-rgb,
  .scanlines-interlaced,
  .scanline-sweep,
  .crt-vignette,
  .crt-barrel-distortion {
    display: none !important;
  }

  .tg-letter::after {
    display: none !important;
  }
}

[data-motion="paused"] .scanlines,
[data-motion="paused"] .scanlines-rgb,
[data-motion="paused"] .scanlines-interlaced,
[data-motion="paused"] .scanline-sweep,
[data-motion="paused"] .crt-barrel-distortion {
  animation-play-state: paused !important;
  display: none;
}

[data-motion="paused"] .scanline-sweep.run {
  animation: none !important;
}

[data-motion="paused"] .tg-letter::after {
  opacity: 0 !important;
}

/* Missing CRT Effect Elements - IDs that JavaScript expects */

/* CRT Retrace Effect */
#crtRetrace {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-100vh);
  transition: opacity 0.1s ease-out;

  /* Enhanced retrace beam effect */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 255, 200, 0.1) 20%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(0, 255, 200, 0.1) 80%,
    transparent 100%
  );

  height: 8px;
  backdrop-filter: brightness(2) saturate(2) contrast(1.5);
  -webkit-backdrop-filter: brightness(2) saturate(2) contrast(1.5);
}

#crtRetrace.active {
  opacity: 1;
  animation: crtRetraceBeam 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes crtRetraceBeam {
  0% {
    transform: translateY(-100vh);
    opacity: 0;
  }
  5% {
    opacity: 0.8;
  }
  95% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(110vh);
    opacity: 0;
  }
}

/* VHS Tracking Error */
#vhsTracking {
  position: fixed;
  inset: 0;
  z-index: 42;
  pointer-events: none;
  opacity: 0;

  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    rgba(255, 255, 255, 0.1) 1px,
    transparent 2px,
    rgba(0, 0, 0, 0.2) 3px,
    transparent 4px
  );

  backdrop-filter: contrast(1.2) brightness(0.9) hue-rotate(-5deg);
  -webkit-backdrop-filter: contrast(1.2) brightness(0.9) hue-rotate(-5deg);
}

#vhsTracking.active {
  opacity: 1;
  animation: vhsTrackingGlitch 0.6s steps(4) forwards;
}

@keyframes vhsTrackingGlitch {
  0% {
    transform: translateX(0);
    filter: hue-rotate(0deg);
  }
  25% {
    transform: translateX(-3px);
    filter: hue-rotate(10deg);
  }
  50% {
    transform: translateX(5px);
    filter: hue-rotate(-8deg);
  }
  75% {
    transform: translateX(-2px);
    filter: hue-rotate(5deg);
  }
  100% {
    transform: translateX(0);
    filter: hue-rotate(0deg);
    opacity: 0;
  }
}

/* VHS Dropout Effect */
#vhsDropout {
  position: fixed;
  inset: 0;
  z-index: 43;
  pointer-events: none;
  opacity: 0;

  background:
    radial-gradient(
      ellipse 30% 8% at 20% 30%,
      rgba(0, 0, 0, 0.8) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 25% 6% at 70% 60%,
      rgba(0, 0, 0, 0.9) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 40% 10% at 45% 80%,
      rgba(0, 0, 0, 0.7) 0%,
      transparent 80%
    );

  backdrop-filter: blur(2px) contrast(0.5);
  -webkit-backdrop-filter: blur(2px) contrast(0.5);
}

#vhsDropout.active {
  opacity: 1;
  animation: vhsDropoutFlicker 0.4s steps(3) forwards;
}

@keyframes vhsDropoutFlicker {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  40% {
    opacity: 0.3;
  }
  60% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

/* VHS Head Switch Effect */
#vhsHeadSwitch {
  position: fixed;
  inset: 0;
  z-index: 44;
  pointer-events: none;
  opacity: 0;

  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 100, 255, 0.1) 25%,
    rgba(100, 255, 255, 0.1) 50%,
    rgba(255, 255, 100, 0.1) 75%,
    transparent 100%
  );

  backdrop-filter: hue-rotate(180deg) saturate(2);
  -webkit-backdrop-filter: hue-rotate(180deg) saturate(2);
}

#vhsHeadSwitch.active {
  opacity: 1;
  animation: vhsHeadSwitchGlitch 0.3s ease-out forwards;
}

@keyframes vhsHeadSwitchGlitch {
  0% {
    opacity: 0;
    transform: translateX(0) scaleX(1);
    filter: hue-rotate(0deg);
  }
  20% {
    opacity: 0.7;
    transform: translateX(-5px) scaleX(1.02);
    filter: hue-rotate(90deg);
  }
  40% {
    opacity: 0.9;
    transform: translateX(3px) scaleX(0.98);
    filter: hue-rotate(-45deg);
  }
  60% {
    opacity: 0.5;
    transform: translateX(-2px) scaleX(1.01);
    filter: hue-rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: translateX(0) scaleX(1);
    filter: hue-rotate(0deg);
  }
}