:root {
  --bg: #050505;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: #fff;
  overflow: hidden;
}

.stage,
.crt {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
}

.crt {
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  filter: contrast(1.08) saturate(1.12) brightness(0.96);
  animation: flicker 4.8s steps(2, end) infinite;
}

.logo-rig {
  position: relative;
  width: min(21vw, 213px);
  z-index: 1;
  transform: translateZ(0);
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.logo--main {
  position: relative;
  z-index: 2;
  mix-blend-mode: lighten;
}

.logo--shift {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 0.55;
  z-index: 1;
  mix-blend-mode: screen;
}

.logo--red {
  transform: translate(-1.5px, 0);
  filter: url(#none) saturate(0) brightness(1.2) sepia(1) hue-rotate(-50deg) saturate(6) brightness(0.9);
  /* fallback chromatic: keep only red-ish */
  opacity: 0.45;
}

.logo--cyan {
  transform: translate(1.6px, 0.4px);
  opacity: 0.4;
  filter: saturate(0) brightness(1.2) sepia(1) hue-rotate(130deg) saturate(6) brightness(0.95);
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.grain {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 4;
  background: url("/assets/noise.png") repeat;
  background-size: 180px 180px;
  opacity: 0.16;
  mix-blend-mode: screen;
  animation: grain-shift 0.28s steps(4) infinite;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.22));
  box-shadow: inset 0 0 140px 40px rgba(0, 0, 0, 0.55);
}

.flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background: #fff;
  opacity: 0;
  mix-blend-mode: overlay;
}

.logo-rig.is-glitch {
  transform: translateX(8px) skewX(-2deg);
  filter: contrast(1.4) saturate(1.6);
}

.logo-rig.is-tear .logo--main {
  clip-path: inset(38% 0 46% 0);
  transform: translateX(18px);
}

@keyframes flicker {
  0%, 18%, 22%, 64%, 68%, 100% { opacity: 1; }
  20% { opacity: 0.92; }
  66% { opacity: 0.86; }
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-4%, 3%); }
  50% { transform: translate(3%, -5%); }
  75% { transform: translate(-2%, 6%); }
  100% { transform: translate(4%, -3%); }
}

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