#crt-screen {
  --crt-idle: rgb(226 235 248 / .0195);
  --crt-crest: rgb(226 235 248 / .033);
  --crt-cell:
    radial-gradient(ellipse 1.86px 1.52px at center, white, rgb(255 255 255 / .92) 52%, transparent) 0 0 / 4px 4px repeat,
    linear-gradient(transparent 8.75%, rgb(255 255 255 / .28) 50%, transparent 91.25%) 0 0 / 4px 4px repeat;
  position: absolute;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--crt-idle);
  transition: background-color 220ms ease;
  -webkit-mask: var(--crt-cell);
  mask: var(--crt-cell);
}

html[data-theme="light"] #crt-screen {
  --crt-idle: rgb(33 44 59 / .0145);
  --crt-crest: rgb(33 44 59 / .0285);
}

html:is([data-design="glass"], [data-design="liquid-glass"]) #crt-screen {
  --crt-idle: rgb(226 235 248 / .0165);
  --crt-crest: rgb(226 235 248 / .0285);
}

html[data-theme="light"]:is([data-design="glass"], [data-design="liquid-glass"]) #crt-screen {
  --crt-idle: rgb(33 44 59 / .012);
  --crt-crest: rgb(33 44 59 / .0255);
}

/* The repeated mask stays still. Only the soft profile moves underneath it. */
#crt-screen::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: clamp(128px, 27%, 230px);
  background-color: var(--crt-crest);
  transition: background-color 220ms ease;
  -webkit-mask: url('/assets/crt-wave.svg') center / 100% 100% no-repeat;
  mask: url('/assets/crt-wave.svg') center / 100% 100% no-repeat;
  transform: translateY(-100%);
  animation: crt-sweep 10s linear infinite;
}

@keyframes crt-sweep {
  0%, 20% { transform: translateY(-100%); }
  70%, 100% { transform: translateY(var(--vh)); }
}

#crt-screen[data-paused]::before {
  animation-play-state: paused;
}

#startup:not([hidden]) ~ #crt-screen,
#startup:not([hidden]) ~ #crt-screen::before {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  #crt-screen { transition: none; }
  #crt-screen::before { content: none; }
}