/* ==========================================================================
   Cathode Dreams — era chrome: phosphor, scanlines, tape tracking, eyecatch
   All effects honor .reduced-motion / .no-motion and the CRT toggle.
   ========================================================================== */

/* ---- boot / power-on (first visit only) ---- */
#boot {
  position: fixed; inset: 0; z-index: 400; background: #000;
  display: grid; place-items: center; transition: opacity .45s var(--ease), visibility .45s;
}
#boot.off { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-screen { width: min(480px, 84vw); font-family: var(--font-terminal); }
.boot-lines { display: flex; flex-direction: column; gap: 6px; color: var(--accent); font-size: 1.15rem; letter-spacing: .1em; min-height: 5.4em; }
.boot-lines span { opacity: 0; animation: bootLine .3s steps(2) forwards; }
.boot-lines span:nth-child(1) { animation-delay: .15s; }
.boot-lines span:nth-child(2) { animation-delay: .5s; }
.boot-lines span:nth-child(3) { animation-delay: .85s; }
@keyframes bootLine { to { opacity: 1; } }
.boot-bar { height: 10px; border: 1px solid var(--accent); margin-top: 14px; }
.boot-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 12px); animation: bootFill .9s .3s var(--ease) forwards; }
@keyframes bootFill { to { width: 100%; } }
.reduced-motion #boot, .no-motion #boot { display: none; }

/* ---- scanlines & vignette ---- */
.scanlines {
  position: fixed; inset: 0; z-index: 130; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; transition: opacity .3s;
}
body.crt-on .scanlines { opacity: 1; }
.vignette {
  position: fixed; inset: 0; z-index: 131; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.32) 100%);
}
.crt-frame { position: fixed; inset: 0; z-index: 129; pointer-events: none; box-shadow: inset 0 0 130px rgba(30, 230, 190, .035); }
body.crt-on .crt-frame { box-shadow: inset 0 0 150px rgba(30, 230, 190, .07), inset 0 0 40px rgba(0,0,0,.5); }

/* phosphor flicker for strong CRT mode */
body.crt-plus .scanlines { opacity: 1; animation: flicker 4.5s infinite; }
@keyframes flicker {
  0%, 100% { opacity: 1; } 96% { opacity: 1; } 97% { opacity: .72; } 98% { opacity: 1; } 99% { opacity: .85; }
}
body.crt-plus::after {
  content: ""; position: fixed; inset: 0; z-index: 132; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(120, 255, 230, .05) 50%, transparent 100%);
  height: 22%; top: -22%; animation: rollBar 9s linear infinite;
}
@keyframes rollBar { to { transform: translateY(660%); } }
.reduced-motion body.crt-plus::after, .no-motion.crt-plus::after { animation: none; }

/* ---- eyecatch (scene-change flash between views) ---- */
#eyecatch {
  position: fixed; inset: 0; z-index: 250; pointer-events: none; display: none;
  align-items: center; justify-content: center;
}
#eyecatch.play { display: grid; }
#eyecatch::before { content: ""; position: absolute; inset: 0; background: #000; opacity: .55; }
.eyecatch-band {
  position: absolute; left: -10%; right: -10%; height: 26%; top: 12%;
  background: var(--eyecatch-a, var(--accent));
  transform: translateX(-115%) skewY(-2deg);
  animation: bandSweep .5s var(--ease) forwards;
}
.eyecatch-band.lower { top: 62%; background: var(--eyecatch-b, var(--accent-2)); animation-delay: .06s; }
@keyframes bandSweep { to { transform: translateX(115%) skewY(-2deg); } }
.reduced-motion #eyecatch.play, .no-motion #eyecatch.play { display: none; }

/* ---- VHS tracking glitch (occasional, and on tape interactions) ---- */
#glitch { position: fixed; inset: 0; z-index: 249; pointer-events: none; display: none; }
#glitch.play { display: block; animation: glitchFade .38s steps(3) forwards; }
#glitch::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.09) 0 2px, transparent 2px 7px),
    linear-gradient(to bottom, transparent 46%, rgba(255,42,109,.16) 49%, transparent 52%);
}
#glitch::after {
  content: "TRACKING ▸▸"; position: absolute; left: 5%; bottom: 8%;
  font-family: var(--font-terminal); color: #fff; font-size: clamp(1rem, 3vw, 1.5rem);
  text-shadow: 2px 0 var(--accent-2), -2px 0 var(--cyan); letter-spacing: .2em;
}
@keyframes glitchFade { 0% { opacity: 1; } 60% { opacity: .8; } 100% { opacity: 0; } }

/* tracking error wobble on an element */
.tracking .site-head, .tracking #main { animation: trackWobble .34s steps(2) both; }
@keyframes trackWobble {
  0% { transform: translateX(0) skewX(0); filter: none; }
  25% { transform: translateX(-7px) skewX(1.2deg); filter: hue-rotate(18deg); }
  50% { transform: translateX(5px) skewX(-.8deg); }
  75% { transform: translateX(-3px); filter: contrast(1.3); }
  100% { transform: none; filter: none; }
}
.reduced-motion .tracking .site-head, .reduced-motion .tracking #main,
.no-motion.tracking .site-head, .no-motion.tracking #main { animation: none; }

/* ---- toasts ---- */
#toast-root { position: fixed; bottom: 18px; right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, 86vw); }
.toast {
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: 10px;
  padding: 12px 16px; box-shadow: var(--shadow);
  font-family: var(--font-terminal); font-size: 1rem; letter-spacing: .03em; color: var(--ink);
  animation: toastIn .35s var(--ease) both;
}
.toast .t-head { color: var(--accent); display: block; letter-spacing: .18em; font-size: .85rem; }
.toast.out { animation: toastOut .3s var(--ease) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* ---- Wired mode (easter egg: everything becomes Lain) ---- */
body.wired {
  --bg: #050607; --bg-raise: #0a0d0a; --panel: #0a0e0b; --panel-2: #0d130e;
  --ink: #c8ffe0; --ink-dim: #7da88f; --ink-faint: #49664f;
  --line: #1d3324; --line-soft: #142418;
  --accent: #7dff9e; --accent-2: #d7ff5c; --gold: #a5ff9e;
  background: #050607;
}
body.wired .site-head { border-bottom-color: #1d3324; }
body.wired::before {
  content: ""; position: fixed; inset: 0; z-index: 128; pointer-events: none;
  background-image:
    linear-gradient(rgba(125,255,158,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,255,158,.05) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reduced-motion .reveal, .no-motion .reveal { opacity: 1; transform: none; transition: none; }

/* pixel bumper — the chunky Saturday-morning label */
.bumper {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-pixel); font-size: .95rem; letter-spacing: .12em;
  background: var(--accent-2); color: #fff; padding: 6px 14px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.6); transform: rotate(-1.2deg);
}