/* ============ CRT OVERLAY — 1990 tube glass over everything ============ */

#crt {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9990;
}
body.crt-off #crt, body.crt-off #degauss { display: none; }

/* scanlines + slot-mask RGB stripes */
.crt-scanlines {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px,
      transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg,
      rgba(255,0,60,.024) 0 1px,
      rgba(0,255,80,.019) 1px 2px,
      rgba(0,80,255,.024) 2px 3px);
  mix-blend-mode: multiply;
}

/* tube vignette + curved-glass corners + edge chromatic fringe */
.crt-vignette {
  position: absolute; inset: 0;
  background:
    /* heavy corner pools — the old-tube look */
    radial-gradient(circle 34vmax at -6% -8%,   rgba(0,0,0,.42), transparent 42%),
    radial-gradient(circle 34vmax at 106% -8%,  rgba(0,0,0,.42), transparent 42%),
    radial-gradient(circle 34vmax at -6% 110%,  rgba(0,0,0,.36), transparent 42%),
    radial-gradient(circle 34vmax at 106% 110%, rgba(0,0,0,.36), transparent 42%),
    radial-gradient(ellipse 118% 112% at 50% 48%,
      transparent 52%,
      rgba(0,0,0,.18) 78%,
      rgba(0,0,0,.6) 96%,
      rgba(0,0,0,.85) 100%);
  box-shadow:
    inset 0 0 110px rgba(0,0,0,.5),
    inset 0 0 34px rgba(0,0,0,.35),
    inset 4px 0 9px -4px rgba(255,40,40,.3),
    inset -4px 0 9px -4px rgba(60,80,255,.3);
  border-radius: 3.4vmin;
}
/* diagonal glass reflection streak */
.crt-scanlines::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 0 34%,
    rgba(255,255,255,.028) 40%, rgba(255,255,255,.045) 46%,
    rgba(255,255,255,.02) 50%, transparent 56%);
  mix-blend-mode: screen;
}
/* faint glass glare, top-left */
.crt-vignette::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 42% 26% at 22% 9%, rgba(255,255,255,.055), transparent 70%);
}

/* brightness flicker + interference moiré */
.crt-flicker {
  position: absolute; inset: 0;
  background: rgba(190, 255, 220, .032);
  animation: crtflick 4.9s steps(2) infinite;
}
.crt-flicker::before {
  content: "";
  position: absolute; inset: -30%;
  background: repeating-radial-gradient(circle at 50% 120%,
    rgba(160,255,200,.02) 0 2px, transparent 2px 7px);
  mix-blend-mode: screen;
  animation: moire 7s linear infinite;
}
@keyframes moire {
  0%   { transform: translateY(0) scale(1); opacity: .5; }
  50%  { transform: translateY(-18px) scale(1.012); opacity: .9; }
  100% { transform: translateY(-36px) scale(1); opacity: .5; }
}
@keyframes crtflick {
  0%, 100% { opacity: .5; }
  8%  { opacity: .95; }
  9%  { opacity: .35; }
  40% { opacity: .7; }
  62% { opacity: .4; }
  63% { opacity: .9; }
}
.crt-flicker::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 84px; top: -90px;
  background: linear-gradient(180deg, transparent, rgba(210,255,235,.045), transparent);
  animation: crtsweep 16s linear infinite;
}
@keyframes crtsweep {
  0%   { transform: translateY(0); }
  100% { transform: translateY(120vh); }
}

/* animated grain */
.crt-grain {
  position: absolute; inset: -60px;
  opacity: .075;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.6 0.6 0.6 0 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation: grain .9s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); }
  25% { transform: translate(-24px, 14px); }
  50% { transform: translate(18px, -20px); }
  75% { transform: translate(-10px, -12px); }
  100% { transform: translate(0,0); }
}

/* slow tube "breathing" — the picture is never quite still */
body.crt-on { animation: crtbreathe 16s ease-in-out infinite alternate; }
@keyframes crtbreathe {
  0%   { transform: scale(1.0006); }
  50%  { transform: scale(1.002) translateY(.3px); }
  100% { transform: scale(1.0012) translateX(-.3px); }
}

/* tracking distortion band — rare, fast, analog */
.crt-grain::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -40px;
  height: 26px;
  background: linear-gradient(180deg, transparent, rgba(220,255,240,.06) 40%, rgba(255,255,255,.09) 55%, transparent);
  transform: skewX(-14deg);
  animation: tracking 27s linear infinite;
  opacity: 0;
}
@keyframes tracking {
  0%, 78% { opacity: 0; top: -40px; }
  79%  { opacity: 1; top: 4%; }
  84%  { opacity: .75; top: 36%; }
  90%  { opacity: .9; top: 70%; }
  94%  { opacity: 0; top: 104%; }
  100% { opacity: 0; top: 104%; }
}

/* occasional 1px horizontal jitter of the whole picture */
body.crt-on #boot-layer, body.crt-on #desktop-layer, body.crt-on #shutdown-layer {
  animation: crtjitter 24s steps(1) infinite;
}
@keyframes crtjitter {
  0%, 100% { transform: translateX(0); }
  41.90% { transform: translateX(0); }
  41.96% { transform: translateX(1.5px) skewX(.3deg); }  /* one brief hsync tear */
  42.02% { transform: translateX(-1px); }
  42.08% { transform: translateX(0) skewX(0); }
  83.90% { transform: translateY(0); }
  83.96% { transform: translateY(1.5px); }               /* one tiny vsync slip */
  84.02% { transform: translateY(0); }
}

/* ============ DEGAUSS (boot -> desktop) ============ */
#degauss {
  position: fixed; inset: 0;
  z-index: 9995;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(120,255,190,.16), transparent 60%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,80,200,.10) 0 6px, rgba(80,160,255,.10) 6px 12px, transparent 12px 22px);
}
#degauss.zap {
  animation: degauss .75s ease-out 1;
}
@keyframes degauss {
  0%   { opacity: 1; transform: scale(1.06) skewX(3deg); filter: hue-rotate(0deg); }
  30%  { opacity: .85; transform: scale(.985) skewX(-2deg); filter: hue-rotate(120deg); }
  60%  { opacity: .5; transform: scale(1.008) skewX(.6deg); filter: hue-rotate(260deg); }
  100% { opacity: 0; transform: scale(1) skewX(0); filter: hue-rotate(360deg); }
}
body.degaussing #desktop-layer { animation: degauss-wobble .75s ease-out 1; }
@keyframes degauss-wobble {
  0%   { transform: scale(1.05) skewX(2.5deg); filter: saturate(2.6) contrast(1.35); }
  35%  { transform: scale(.985) skewX(-1.6deg); filter: saturate(1.7) contrast(1.15); }
  70%  { transform: scale(1.006) skewX(.5deg); filter: saturate(1.15); }
  100% { transform: none; filter: none; }
}

/* ============ CRT power-off collapse (shutdown) ============ */
#collapse {
  position: fixed; inset: 0;
  background: #000;
  z-index: 9994;
  pointer-events: none;
}
#collapse .beam {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 100vh; transform: translateY(-50%);
  background: #eaffff;
  animation: collapseV .34s cubic-bezier(.6,0,.9,1) forwards,
             collapseH .3s .3s cubic-bezier(.7,0,1,1) forwards,
             beamfade .5s .55s forwards;
  box-shadow: 0 0 40px #bffcff, 0 0 90px #7ff;
}
@keyframes collapseV { from { height: 100vh; } to { height: 3px; } }
@keyframes collapseH { from { transform: translateY(-50%) scaleX(1);} to { transform: translateY(-50%) scaleX(.002);} }
@keyframes beamfade { to { opacity: 0; } }


/* ---------- phone: effects dialed down another notch ---------- */
@media (max-width: 700px) {
  .crt-scanlines {
    background: repeating-linear-gradient(0deg,
      rgba(0,0,0,.10) 0px, rgba(0,0,0,.10) 1px,
      transparent 1px, transparent 3px);
    mix-blend-mode: multiply;
  }
  .crt-flicker { animation: none; opacity: .4; }
  .crt-vignette {
    background: radial-gradient(ellipse 120% 115% at 50% 48%,
      transparent 62%,
      rgba(0,0,0,.12) 82%,
      rgba(0,0,0,.42) 98%,
      rgba(0,0,0,.6) 100%);
    box-shadow: inset 0 0 60px rgba(0,0,0,.3);
    border-radius: 0;
  }
  .crt-vignette::after { display: none; }
  #degauss { display: none; }
}