/* --- CRT Skew Animation --- */
@keyframes crtSkew {
  0%, 100% {
    transform: skewX(0);
  }
  85% {
    transform: skewX(0);
  }
  86% {
    transform: skewX(0.5deg);
  }
  87% {
    transform: skewX(-0.3deg);
  }
  88% {
    transform: skewX(0.2deg);
  }
  89% {
    transform: skewX(0);
  }
}

/* CRT Flicker Animation - subtle and occasional */
@keyframes crtFlicker {
  0%, 100% {
    opacity: 1;
  }
  3% {
    opacity: 1;
  }
  3.5% {
    opacity: 0.92;
  }
  4% {
    opacity: 1;
  }
  47% {
    opacity: 1;
  }
  47.5% {
    opacity: 0.95;
  }
  48% {
    opacity: 0.88;
  }
  48.3% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  72.2% {
    opacity: 0.93;
  }
  72.5% {
    opacity: 1;
  }
}

/* CRT edge shadow */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-shadow: inset 0 0 150px 20px var(--bg-color);
  pointer-events: none;
  z-index: 996;
}

/* CRT Scanlines Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 1px,
    rgba(0, 0, 0, 0.3) 1px,
    rgba(0, 0, 0, 0.3) 2px
  );
  pointer-events: none;
  opacity: .5;
}

/* --- VHS Tracking Lines --- */
.vhs-tracking {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 998;
  overflow: hidden;
}

.vhs-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--term-rgb), 0.2) 15%,
    rgba(var(--term-rgb), 0.4) 50%,
    rgba(var(--term-rgb), 0.2) 85%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(var(--term-rgb), 0.2);
  opacity: 0;
}

.vhs-line:nth-child(1) {
  animation: vhsTrack1 5s steps(25) infinite;
}
.vhs-line:nth-child(2) {
  animation: vhsTrack2 7s steps(25) infinite;
  animation-delay: 2s;
}
.vhs-line:nth-child(3) {
  animation: vhsTrack3 4s steps(12) infinite;
  animation-delay: 4s;
}

@keyframes vhsTrack1 {
  0% {
    top: -10px;
    opacity: 0;
    transform: translateX(0);
  }
  5% {
    opacity: 0.9;
  }
  15% {
    transform: translateX(-20px);
  }
  25% {
    transform: translateX(10px);
    top: 20%;
  }
  35% {
    transform: translateX(-5px);
    opacity: 0.3;
  }
  45% {
    transform: translateX(15px);
    opacity: 1;
  }
  60% {
    transform: translateX(-10px);
    top: 60%;
  }
  75% {
    opacity: 0.5;
    transform: translateX(5px);
  }
  90% {
    opacity: 0.8;
  }
  100% {
    top: 100vh;
    opacity: 0;
    transform: translateX(0);
  }
}

@keyframes vhsTrack2 {
  0% {
    top: -10px;
    opacity: 0;
    transform: translateX(0);
  }
  8% {
    opacity: 1;
    transform: translateX(30px);
  }
  20% {
    transform: translateX(-15px);
    top: 15%;
  }
  30% {
    opacity: 0.4;
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
    top: 45%;
    opacity: 0.9;
  }
  65% {
    transform: translateX(-25px);
  }
  80% {
    opacity: 0.6;
    transform: translateX(10px);
    top: 80%;
  }
  100% {
    top: 100vh;
    opacity: 0;
    transform: translateX(0);
  }
}

@keyframes vhsTrack3 {
  0% {
    top: -10px;
    opacity: 0;
    transform: translateX(0);
  }
  10% {
    opacity: 0.7;
    transform: translateX(-10px);
  }
  25% {
    transform: translateX(25px);
    top: 25%;
    opacity: 1;
  }
  40% {
    transform: translateX(-20px);
    opacity: 0.5;
  }
  55% {
    transform: translateX(5px);
    top: 55%;
  }
  70% {
    opacity: 0.9;
    transform: translateX(-15px);
  }
  85% {
    transform: translateX(10px);
    top: 85%;
  }
  100% {
    top: 100vh;
    opacity: 0;
    transform: translateX(0);
  }
}

/* --- Power Off Effect --- */
.power-off {
  animation: powerOff 0.8s forwards;
  transform-origin: center center;
}

@keyframes powerOff {
  0% {
    transform: scale(1, 1);
    filter: brightness(1);
  }
  40% {
    transform: scale(1.02, 0.01);
    filter: brightness(4);
  }
  100% {
    transform: scale(0, 0);
    filter: brightness(0);
  }
}