/* TOMRULEZ.WIN — CRT monitor emulation */

#crt {
  position: fixed;
  inset: 0;
  background: #050505;
  overflow: hidden;
}

#screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--term-bg);
  transform-origin: center center;
}

/* Scanlines + phosphor mask + vignette. Pointer-events off so it never eats clicks. */
.crt-overlay {
  position: absolute;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}

.crt-on .crt-overlay {
  opacity: 1;
}

.crt-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.32) 0px,
    rgba(0, 0, 0, 0.32) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px
  );
  mix-blend-mode: multiply;
}

.crt-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0) 55%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
}

/* Aperture grille — very fine vertical RGB stripe, only visible up close */
.crt-grille {
  position: absolute;
  inset: 0;
  z-index: 9001;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 0, 0, 0.055) 0px,
    rgba(0, 255, 0, 0.055) 1px,
    rgba(0, 0, 255, 0.055) 2px,
    rgba(0, 0, 0, 0) 3px
  );
  transition: opacity 220ms ease;
}

.crt-on .crt-grille {
  opacity: 1;
}

/* Barrel-ish curvature: the screen is inset and rounded, with a glass highlight */
.crt-on #screen {
  border-radius: 18px / 26px;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.75),
    inset 0 0 160px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(80, 255, 140, 0.05);
}

.crt-on #crt {
  padding: 0;
}

/* Rolling brightness bar, the slow one every CRT had */
.crt-on .crt-overlay {
  animation: crt-roll 9s linear infinite;
}

@keyframes crt-roll {
  0% {
    background-position: 0 -100vh;
  }
  100% {
    background-position: 0 100vh;
  }
}

/* Degauss: the wobble + colour bloom when the monitor powers on */
.degauss #screen {
  animation: degauss-warp 1100ms ease-out;
}

@keyframes degauss-warp {
  0% {
    transform: scale(1.06) skewX(0.8deg);
    filter: brightness(2.2) saturate(2.4) hue-rotate(12deg) blur(2px);
  }
  18% {
    transform: scale(0.985) skewX(-0.6deg);
    filter: brightness(1.5) saturate(1.8) hue-rotate(-8deg) blur(1px);
  }
  38% {
    transform: scale(1.012) skewX(0.35deg);
    filter: brightness(1.25) saturate(1.4);
  }
  62% {
    transform: scale(0.996) skewX(-0.15deg);
    filter: brightness(1.1) saturate(1.15);
  }
  100% {
    transform: none;
    filter: none;
  }
}

/* Power-on: the old horizontal-line-then-open trick */
.power-on #screen {
  animation: power-on 620ms ease-out;
}

@keyframes power-on {
  0% {
    transform: scaleY(0.004) scaleX(1.2);
    filter: brightness(6);
  }
  45% {
    transform: scaleY(0.02) scaleX(1);
    filter: brightness(3.5);
  }
  100% {
    transform: none;
    filter: none;
  }
}

/* Screen flash, used by the BSOD and by LAN party mode */
.crt-flash {
  animation: crt-flash 160ms steps(2) 2;
}

@keyframes crt-flash {
  50% {
    filter: invert(1) brightness(1.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crt-on .crt-overlay {
    animation: none;
  }

  .degauss #screen,
  .power-on #screen,
  .crt-flash {
    animation: none !important;
  }
}