/* =========================================
 *           THEME TOKENS / ROOT
 * ========================================= */
:root{
  --bg:#0B0B0D;
  --tv-edge:#0f1113;
  --neon:#00E5FF;
  --accent:#8CFF2E;
  --mag:#FF2E9E;
}

/* =========================================
 *                BASE
 * ========================================= */
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  font-family:Orbitron, sans-serif;
  color:#dfeffb;
}

.stage{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-direction:column;
  gap:24px;
  padding:24px;
}

/* =========================================
 *               TV SHELL
 * ========================================= */
.tv{
  width:560px; max-width:90vw;
  background:linear-gradient(180deg,var(--tv-edge),#060607);
  border-radius:18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.8), 0 0 40px rgba(0,229,255,0.04) inset;
  padding:28px;
  position:relative;
  overflow:visible;
}

/* =========================================
 *                SCREEN
 * ========================================= */
.screen{
  height:320px;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(ellipse at center, rgba(0,229,255,0.02) 0%, rgba(0,0,0,0.7) 60%),
    #071014;
  box-shadow: inset 0 0 60px rgba(0,229,255,0.03);
  display:flex; align-items:center; justify-content:center;
}

/* Scanlines inside screen */
.screen::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.08) 3px
  );
  mix-blend-mode: multiply;
  pointer-events:none;
}

/* Noise overlay (base layer) */
.noise{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="100%" height="100%" fill="black" opacity="0.02"/></svg>');
  opacity:.06; mix-blend-mode:screen;
  animation: drift .6s steps(2) infinite;
}
@keyframes drift{
  0%{transform:translateY(0)}
  50%{transform:translateY(1px)}
  100%{transform:translateY(0)}
}

/* =========================================
 *            REAPER SILHOUETTE
 * ========================================= */
.reaper{
  position:relative;
  z-index:1;
  pointer-events:none;
  width:46%; height:80%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="white" d="M50 4c-9 0-16 7-16 16 0 0-10 6-12 26-1 10 0 22 0 22s-1 13 16 14c14 1 18-9 18-9s7 10 21 8c16-2 13-19 13-19s2-14-1-23C88 26 74 16 74 16 70 9 60 4 50 4z"/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="white" d="M50 4c-9 0-16 7-16 16 0 0-10 6-12 26-1 10 0 22 0 22s-1 13 16 14c14 1 18-9 18-9s7 10 21 8c16-2 13-19 13-19s2-14-1-23C88 26 74 16 74 16 70 9 60 4 50 4z"/></svg>') center/contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(0,229,255,0.16));
  mix-blend-mode: screen;
  will-change: opacity, transform;
}

/* Subtle flicker on reaper */
.screen .reaper{
  animation: flicker 3s infinite;
  background-image: linear-gradient(0deg, rgba(0,229,255,0.06), rgba(255,46,158,0.03));
}
@keyframes flicker{
  0%{opacity:.98; transform:translateY(0)}
  7%{opacity:.86}
  10%{opacity:1; transform:translateY(-1px)}
  30%{opacity:.95}
  100%{opacity:.98}
}

/* =========================================
 *           TYPE / BOOT LAYERS
 * ========================================= */
/* Typed message area (top of visual stack) */
.type-area{
  position:absolute;
  inset:16px 18px 34px 18px;
  z-index:4;
  font-family:'Roboto Mono', monospace;
  font-size:14px;
  line-height:1.5;
  color:var(--neon);
  text-shadow:0 0 8px rgba(0,229,255,0.12);
  white-space:pre-wrap;

  overflow-y:auto;          /* allow vertical scrolling */
  scrollbar-width:none;     /* hide scrollbar in Firefox */
  -ms-overflow-style:none;  /* hide scrollbar in IE/Edge */
}
.type-area::-webkit-scrollbar{ display:none; } /* hide scrollbar in Chrome/Safari */

/* Boot/status bar (top-most) */
.boot{
  position:absolute; left:0; right:0; bottom:8px;
  z-index:5;
  padding:10px 14px;
  font-family:'Roboto Mono', monospace;
  font-size:12px; color:var(--neon); letter-spacing:.4px; opacity:.95;
  text-shadow:0 0 8px rgba(0,229,255,0.12);
}

/* Glitch effect for boot label */
.glitch{ position:relative; display:inline-block; }
.glitch::after, .glitch::before{
  content:attr(data-text);
  position:absolute; left:0; top:0; width:100%;
  clip-path: polygon(0 0,100% 0,100% 45%,0 45%); opacity:.8;
}
.glitch::before{
  color:var(--mag);
  transform:translate(1px,-1px);
  mix-blend-mode: screen;
  animation: g1 2.3s infinite;
}
.glitch::after{
  color:var(--accent);
  transform:translate(-1px,1px);
  mix-blend-mode: screen;
  animation: g2 3.1s infinite;
}
@keyframes g1{
  0%{clip-path:polygon(0 0,100% 0,100% 0%,0 0)}
  50%{clip-path:polygon(0 0,100% 0,100% 45%,0 45%)}
  100%{clip-path:polygon(0 0,100% 0,100% 0%,0 0)}
}
@keyframes g2{
  0%{clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%)}
  50%{clip-path:polygon(0 0,100% 0,100% 55%,0 55%)}
  100%{clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%)}
}

/* Caret */
.caret{
  display:inline-block; width:.6ch; height:1em; transform: translateY(2px);
  background: currentColor; opacity:.85; animation: blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* Scan color shift while scanning */
.screen.scanning{ filter: hue-rotate(12deg) contrast(1.25) saturate(1.3); }

/* Label under TV */
.label{ text-align:center; font-size:13px; color:#95f0ff; opacity:.9; letter-spacing:1px; }

/* =========================================
 *              RESPONSIVE
 * ========================================= */
@media (max-width:540px){
  .tv{padding:16px}
  .screen{height:220px}
}

/* =========================================
 *          CRT FULL-PAGE EFFECT
 * ========================================= */
.crt-wrap { position: relative; min-height: 100dvh; overflow: hidden; background: var(--bg); }
.crt-overlay, .crt-overlay::before, .crt-overlay::after { pointer-events: none; }
.crt-overlay { position: absolute; inset: 0; z-index: 999; }

/* Global scanlines/vignette overlay */
.crt-wrap.idle .crt-overlay::before,
.crt-wrap.power-on .crt-overlay::before{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.10) 3px
  );
  mix-blend-mode:multiply; opacity:.6;
}
.crt-wrap.idle .crt-overlay::after,
.crt-wrap.power-on .crt-overlay::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect width="32" height="32" fill="black" opacity="0.02"/></svg>');
  background-size: cover, 32px 32px;
  mix-blend-mode:multiply; opacity:.9;
  animation: crtNoise .7s steps(2) infinite;
}
@keyframes crtNoise{ 50% { transform: translateY(1px); } }

/* Page sits under overlay */
.page{ position: relative; z-index: 1; }

/* Boot: flash */
.crt-wrap.flash { animation: crtFlash .22s ease-out both; }
@keyframes crtFlash{
  0%{ filter: brightness(2.2) contrast(1.3); }
  100%{ filter: none; }
}

/* Boot: degauss wobble */
.crt-wrap.degauss .page{
  animation: crtDegauss .9s ease-out both;
  transform-origin: center;
}
@keyframes crtDegauss{
  0%   { transform: scale(1.12) skewX(0.3deg);  filter: blur(1px) contrast(1.2); }
  40%  { transform: scale(0.98) skewX(-0.4deg); filter: blur(0.7px); }
  70%  { transform: scale(1.04) skewX(0.2deg);  filter: blur(0.4px); }
  100% { transform: scale(1)    skewX(0);       filter: none; }
}

/* Optional RGB split (requires #rgb-split filter in HTML) */
.crt-wrap.split .page{ filter: url(#rgb-split); }

/* Boot: vertical roll bar */
.crt-wrap.roll .crt-overlay::before{
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 12%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.10) 3px);
  background-size: 100% 18%, auto;
  background-repeat: no-repeat, repeat;
  background-position: 0 -20%;
  animation: crtRoll .9s ease-out forwards;
}
@keyframes crtRoll{ to { background-position: 0 120%, 0 0; } }

/* Settled */
.crt-wrap.idle .page{ filter: contrast(1.02) saturate(1.02); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .crt-wrap.flash,
  .crt-wrap.degauss .page,
  .crt-wrap.roll .crt-overlay::before{ animation: none !important; }
  .crt-wrap .page,
  .crt-wrap .crt-overlay::before,
  .crt-wrap .crt-overlay::after{
    transform: none !important;
    filter: none !important;
  }
}

/* =========================================
 *     CHANNEL-CHANGE FX: BURST + WIPE
 * ========================================= */
.fx-burst,
.fx-wipe{
  position:absolute; inset:0; pointer-events:none;
  z-index:3; /* under text(4)/boot(5); above reaper/noise(1) */
  opacity:0;
}

/* Burst: fast white flash with noise texture */
.fx-burst.active{
  opacity:1;
  animation: fxBurstFlash 160ms ease-out forwards;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9), rgba(255,255,255,0.0) 70%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" fill="white" opacity="0.08"/></svg>');
  mix-blend-mode: screen;
}
@keyframes fxBurstFlash{
  0%   { opacity: 1; filter: brightness(2) contrast(1.2); }
  100% { opacity: 0; filter: none; }
}

/* Wipe: bright scan bar traveling down, with trailing glow + scanlines */
.fx-wipe.active{
  opacity:1;
  animation: fxWipeDown 620ms cubic-bezier(.2,.7,.1,1) forwards;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0.00) 0%,
      rgba(180,245,255,0.55) 2%,
      rgba( 90,220,255,0.35) 4%,
      rgba(  0,200,255,0.00) 10%) no-repeat,
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0) 0 2px,
      rgba(0,0,0,0.12) 3px 3px) no-repeat;
  background-size: 100% 16%, 100% 100%;
  background-position: 0 -20%, 0 0;
}
@keyframes fxWipeDown{
  0%   { background-position: 0 -20%, 0 0; }
  100% { background-position: 0 120%, 0 0; }
}

/* Stacking reminders */
.reaper{ z-index:1; }
.noise { z-index:1; }
.type-area{ z-index:4; }
.boot{ z-index:5; }