/* ============================================================
   Zephyr — the whole browser window IS the CRT screen.
   A monitor bezel frames the viewport edges; scanlines, glow,
   flicker and vignette overlay the page; the page scrolls
   normally underneath. Shared by every page.
   ============================================================ */
:root {
  --font: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
  --bg:#0C0A06;               /* the glass, warm near-black */
  --amber:#E7B45C;            /* phosphor ink */
  --bright:#FFD588;           /* highlights */
  --body:#C89A54;             /* dimmer body text */
  --dim:#8A6A38;              /* secondary */
  --rule:#241B10; --rule2:#3C2D18;
  --glow:0 0 6px rgba(231,180,92,0.45);
  --glow-lg:0 0 16px rgba(231,180,92,0.5);
  --lime:var(--amber); --ink:var(--amber); --mute:var(--dim); --lime-dim:rgba(231,180,92,0.10);
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s ease both; }
::view-transition-new(root) { animation: vt-in .46s ease both; }
@keyframes vt-out { to { opacity:0; filter:brightness(2.4) blur(2px); } }
@keyframes vt-in  { from { opacity:0; filter:brightness(2); } to { opacity:1; filter:none; } }

html, body { margin:0; background:var(--bg); }
body { color:var(--amber); font-family:var(--font); -webkit-font-smoothing:none; min-height:100vh;
  text-shadow:0 0 1px rgba(231,180,92,0.55), 0 0 6px rgba(231,180,92,0.14); }

/* ---------- CRT overlays over the whole viewport ---------- */
.crt-scan { position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0.5;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.32) 2px 3px);
  animation:crt-flicker 5s steps(40) infinite; }
.crt-roll { position:fixed; left:0; right:0; top:-30vh; height:30vh; z-index:60; pointer-events:none;
  background:linear-gradient(rgba(255,214,140,0.05), rgba(255,214,140,0.012) 60%, transparent);
  animation:crt-roll 8s linear infinite; }
.crt-vig { position:fixed; inset:0; z-index:61; pointer-events:none;
  background:radial-gradient(125% 120% at 50% 50%, transparent 58%, rgba(0,0,0,0.62) 100%); }
/* the monitor bezel — a frame around the window edges */
.crt-bezel { position:fixed; inset:0; z-index:80; pointer-events:none; border-radius:22px;
  border:clamp(10px,1.8vw,22px) solid #130e08;
  box-shadow: inset 0 0 150px rgba(0,0,0,0.85), inset 0 0 42px rgba(231,180,92,0.05),
              inset 0 0 0 1px rgba(255,232,188,0.05), inset 0 2px 0 rgba(255,232,188,0.05); }
@keyframes crt-flicker { 0%,100%{opacity:.5} 8%{opacity:.44} 12%{opacity:.56} 40%{opacity:.48} 72%{opacity:.54} }
@keyframes crt-roll { to { transform:translateY(160vh); } }

/* ---------- bottom status line (doubles as the frame's chin) ---------- */
#statusbar { position:fixed; left:0; right:0; bottom:0; z-index:82; height:28px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 clamp(20px,3vw,40px); background:rgba(18,13,7,0.94); border-top:1px solid var(--rule2);
  font-family:var(--font); font-size:17px; color:var(--dim); letter-spacing:0.02em; }
#statusbar .a { color:var(--amber); text-shadow:var(--glow); }
#statusbar .blk { display:inline-block; width:9px; height:14px; background:var(--amber); box-shadow:var(--glow);
  vertical-align:-2px; margin-left:2px; animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* ---------- power-on / boot ---------- */
#boot { position:fixed; inset:0; z-index:10000; background:#050403; display:grid; place-content:center; justify-items:start;
  gap:14px; padding:0 clamp(24px,8vw,90px); font-family:var(--font); }
#boot .bz { font-size:clamp(60px,15vw,150px); line-height:.9; letter-spacing:2px; color:var(--amber); text-shadow:var(--glow-lg); }
#boot .bstage { font-size:20px; color:var(--amber); text-shadow:var(--glow); min-height:1.3em; }
#boot .bbar { width:min(72vw,460px); height:12px; border:1px solid var(--rule2); position:relative; }
#boot .bbar i { position:absolute; inset:0 auto 0 0; width:0%; background:var(--amber); box-shadow:var(--glow); transition:width .18s linear; }
#boot.done { opacity:0; transform:scaleY(.004); filter:brightness(3); transition:transform .32s ease-in, opacity .3s, filter .3s; }
#boot-flash { position:fixed; inset:0; z-index:9999; background:#FFE9C0; pointer-events:none; animation:flash .45s ease-out forwards; }
@keyframes flash { 0%{opacity:0} 14%{opacity:.5} 100%{opacity:0} }

@media (max-width:640px){ #statusbar .hide-sm{ display:none; } }

@media (prefers-reduced-motion: reduce) {
  .crt-scan, .crt-roll { animation:none; } .crt-roll { display:none; }
  #boot { display:none; }
  #statusbar .blk { animation:none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}