/* Intro boot scene. A low poly room lit by the tube it renders. */

#terminal-sequence-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: 0;
  overflow: hidden;
  background: #040604;
  transition: opacity 0.45s ease-out;
}

#crt-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The terminal stays in the DOM and is painted onto the tube */
#crt-readout {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
  white-space: pre;
}

/* Grade over the whole shot, not just the screen */
.crt-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.crt-grade-vignette {
  background: radial-gradient(120% 95% at 50% 48%, transparent 40%, rgba(0, 0, 0, 0.68) 100%);
}

.crt-grade-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: overlay;
  animation: crt-grain 0.5s steps(3) infinite;
}

@keyframes crt-grain {
  0% { background-position: 0 0; }
  33% { background-position: -60px 40px; }
  66% { background-position: 40px -30px; }
  100% { background-position: 0 0; }
}

#terminal-sequence-overlay.crt-out {
  opacity: 0;
}