.shell-opening .tpr-tv-intro[hidden] {
  display: block !important;
}

.tpr-tv-intro {
  position: fixed;
  inset: 0;
  z-index: 81;
  overflow: hidden;
  background: transparent;
  cursor: progress;
  pointer-events: auto;
  touch-action: manipulation;
}

.tpr-tv-intro__screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  transform-origin: center;
  animation: tpr-intro-screen 12.5s linear both;
}

.tpr-tv-intro__static {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  filter: grayscale(1) contrast(2.2) brightness(1.28);
  image-rendering: pixelated;
  opacity: 0;
  transform: scale(1.04);
  animation: tpr-static-reception 12.5s steps(16, end) both;
}

.tpr-tv-intro__scanlines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.025) 0 1px,
      rgba(0, 0, 0, 0.34) 1px 4px
    ),
    radial-gradient(
      ellipse at center,
      transparent 42%,
      rgba(0, 0, 0, 0.68) 100%
    );
  opacity: 0;
  mix-blend-mode: multiply;
  animation: tpr-static-scanlines 12.5s steps(12, end) both;
}

.tpr-tv-intro__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72vmin, 680px);
  height: auto;
  filter:
    grayscale(1)
    saturate(0)
    contrast(1.4)
    brightness(1.2)
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.28));
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.84);
  animation: tpr-logo-from-static 12.5s linear both;
}

.tpr-tv-intro__flare {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  background: #fff;
  box-shadow:
    0 0 14px #fff,
    0 0 52px rgba(255, 255, 255, 0.96),
    0 0 120px rgba(255, 255, 255, 0.62);
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
  animation: tpr-intro-bloop 12.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes tpr-intro-screen {
  0%,
  46.4% {
    background: #000;
    clip-path: inset(0);
    filter: brightness(1);
    opacity: 1;
    transform: scale(1);
  }

  47.2% {
    background: #000;
    clip-path: inset(42% 0);
    filter: brightness(2.4) contrast(1.8);
    opacity: 1;
    transform: scaleX(1.015);
  }

  48.8% {
    background: #000;
    clip-path: inset(49.35% 0);
    filter: brightness(4);
    opacity: 1;
    transform: scaleX(0.92);
  }

  49.6% {
    background: #000;
    clip-path: inset(49.9% 0);
    filter: brightness(6);
    opacity: 0;
    transform: scaleX(0.06);
  }

  100% {
    clip-path: inset(50% 0);
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes tpr-static-reception {
  0%,
  13.2% {
    filter: grayscale(1) contrast(2.6) brightness(0.24);
    opacity: 0;
    transform: scale(1.12) translateX(-2%);
  }

  13.8% {
    filter: grayscale(1) contrast(2.8) brightness(1.8);
    opacity: 1;
    transform: scale(1.04) translateX(1%);
  }

  21.6% {
    filter: grayscale(1) contrast(2.1) brightness(1.12);
    opacity: 0.92;
    transform: scale(1.08) translateX(-1%);
  }

  24%,
  100% {
    filter: grayscale(1) contrast(1.4) brightness(0.7);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes tpr-static-scanlines {
  0%,
  13.2% {
    opacity: 0;
    transform: translateY(0);
  }

  13.8% {
    opacity: 0.86;
    transform: translateY(-3px);
  }

  24%,
  46.4% {
    opacity: 0.18;
    transform: translateY(3px);
  }

  49.6%,
  100% {
    opacity: 0;
  }
}

@keyframes tpr-logo-from-static {
  0%,
  18.4% {
    filter:
      grayscale(1)
      saturate(0)
      contrast(2.2)
      brightness(2.5)
      blur(9px);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }

  20% {
    opacity: 0.24;
    transform: translate(calc(-50% - 6px), -50%) scale(0.9);
  }

  22.4%,
  26.4% {
    filter:
      grayscale(1)
      saturate(0)
      contrast(1.5)
      brightness(1.24)
      blur(0);
    opacity: 0.96;
    transform: translate(-50%, -50%) scale(1);
  }

  30.4%,
  46.4% {
    filter:
      grayscale(0)
      saturate(1)
      contrast(1.12)
      brightness(1.06)
      blur(0);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  49.6%,
  100% {
    filter:
      grayscale(0)
      saturate(1)
      contrast(1.12)
      brightness(1.06)
      blur(0);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes tpr-intro-bloop {
  0%,
  7.9% {
    height: 2px;
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
  }

  8.3% {
    opacity: 1;
    transform: translateY(-50%) scaleX(0.08);
  }

  10.1% {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
  }

  13.9% {
    height: 100vh;
    opacity: 0.22;
    transform: translateY(-50%) scaleX(1);
  }

  15.2%,
  100% {
    height: 100vh;
    opacity: 0;
    transform: translateY(-50%) scaleX(1);
  }
}


html:has(.shell-opening-pending), body.shell-opening-pending { background: #000; }
.shell-opening { position: fixed; inset: 0; z-index: 1000; background: #000; }
.shell-opening .tpr-tv-intro__screen,
.shell-opening .tpr-tv-intro__screen > * { animation-play-state: paused; }
.shell-opening.is-playing .tpr-tv-intro__screen,
.shell-opening.is-playing .tpr-tv-intro__screen > * { animation-play-state: running; }
.universal-shell { opacity: 1; filter: blur(0); transition: opacity 1200ms ease, filter 1600ms ease; }
.shell-opening-pending .universal-shell { opacity: 0; filter: blur(18px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .shell-opening .tpr-tv-intro__screen, .shell-opening .tpr-tv-intro__screen > * { animation: none; }
  .universal-shell { transition: opacity 180ms ease; filter: none; }
}