/* ESCHATONE — Ziggy's 1990s teletext terminal. CEEFAX/Oracle look. */
:root{
  --k:#000; --w:#fff; --y:#ff0; --c:#0ff; --g:#0f0; --m:#f0f; --r:#f00; --b:#33f;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{background:#000; min-height:100%; overflow-x:hidden; max-width:100%}
img,video{max-width:100%}
body{
  font-family:"Courier New","Consolas","DejaVu Sans Mono",monospace;
  color:var(--w); background:#000; font-size:19px; line-height:1.28; font-weight:bold;
  letter-spacing:.5px; text-shadow:0 0 2px currentColor; padding:0;
  animation:flick 6s infinite steps(1);
}
@keyframes flick{ 0%,100%{opacity:1} 49.5%{opacity:1} 49.7%{opacity:.9} 49.9%{opacity:1} }
.wrap{ max-width:760px; margin:0 auto; padding:14px 16px 70px; }

/* colours */
.w{color:var(--w)} .y{color:var(--y)} .c{color:var(--c)} .g{color:var(--g)}
.m{color:var(--m)} .r{color:var(--r)} .b{color:var(--b)}
/* background blocks (teletext "new background") */
.bg-b{background:var(--b); color:var(--w)} .bg-r{background:var(--r); color:var(--k)}
.bg-c{background:var(--c); color:var(--k)} .bg-y{background:var(--y); color:var(--k)}
.bg-g{background:var(--g); color:var(--k)} .bg-m{background:var(--m); color:var(--k)}
.bg-w{background:var(--w); color:var(--k)}

/* header row */
.hdr{ display:flex; justify-content:space-between; align-items:center; padding:2px 6px;
  background:var(--b); color:var(--w); letter-spacing:2px; margin-bottom:2px; }
.hdr b{color:var(--y)}
.hdr .home{color:var(--y); text-decoration:none}
.hdr .home:hover{color:var(--w)}

/* double-height title */
.dh{ font-size:clamp(34px,9vw,64px); line-height:1.05; letter-spacing:6px; font-weight:bold;
  text-shadow:0 0 6px currentColor; margin:8px 0; }

/* teletext colour-block divider */
.rule{ font-size:19px; letter-spacing:0; margin:6px 0; white-space:nowrap; overflow:hidden }
.rule .r{color:var(--r)}.rule .g{color:var(--g)}.rule .y{color:var(--y)}
.rule .b{color:var(--b)}.rule .m{color:var(--m)}.rule .c{color:var(--c)}

/* index list */
.idx a{ display:block; text-decoration:none; padding:1px 0; letter-spacing:1px; }
.idx a:hover{ background:#111; }
.idx .num{ color:var(--c) }
.idx .dots{ color:#0a3; }

p{ margin:0 0 14px; letter-spacing:.5px; }
.lead{ color:var(--c) }
h2{ font-size:19px; letter-spacing:2px; }
a{ color:var(--c) }
.flash{ animation:fl 1.1s steps(1) infinite }
@keyframes fl{ 50%{opacity:0} }
pre.art{ color:var(--y); font-size:15px; line-height:1; letter-spacing:0; text-shadow:0 0 4px var(--y); margin:6px 0 10px }

/* ticker */
.ticker{ overflow:hidden; white-space:nowrap; background:#001; border-top:2px solid var(--g); border-bottom:2px solid var(--g); padding:3px 0; margin:12px 0 }
.ticker span{ display:inline-block; padding-left:100%; animation:scroll 26s linear infinite; color:var(--g) }
@keyframes scroll{ to{ transform:translateX(-100%) } }

/* 90s clutter */
.counter{ display:inline-flex; gap:2px; vertical-align:middle }
.counter b{ background:#000; color:var(--g); border:1px solid var(--g); padding:0 3px }
.uc{ color:var(--y) }

/* fastext bar */
.fastext{ position:fixed; left:0; right:0; bottom:0; display:flex; background:#000;
  border-top:2px solid #222; font-size:15px; letter-spacing:1px }
.fastext a{ flex:1; text-align:center; padding:8px 4px; text-decoration:none; color:var(--k); font-weight:bold }
.fastext .ft-r{background:var(--r)} .fastext .ft-g{background:var(--g)}
.fastext .ft-y{background:var(--y)} .fastext .ft-c{background:var(--c)}

/* CRT overlay */
body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:99;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 3px 4px),
    radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.5) 100%);
}

/* ---- glitch / lo-fi video: degraded most of the time, snaps to HD clarity in moments ---- */
.glitchvid{ position:relative; max-width:640px; margin:4px auto 2px; border:2px solid var(--y); background:#000; overflow:hidden }
.glitchvid video{ display:block; width:100%; filter:saturate(1.25) contrast(1.18) brightness(.9); transition:filter .15s steps(2) }
.glitchvid .ov{ position:absolute; inset:0; pointer-events:none; transition:opacity .15s }
.gl-scan{ background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.5) 3px 4px); mix-blend-mode:multiply; animation:gl-roll 6s linear infinite }
@keyframes gl-roll{ from{background-position:0 0} to{background-position:0 8px} }
.gl-dot{ background-image:radial-gradient(rgba(0,0,0,.5) 42%, transparent 43%); background-size:3px 3px; mix-blend-mode:multiply; opacity:.5 }
.gl-noise{ 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.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); opacity:.15; mix-blend-mode:overlay; animation:gl-noise .45s steps(3) infinite }
@keyframes gl-noise{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(3%,-2%)} 100%{transform:translate(0,0)} }
.gl-tint{ background:linear-gradient(96deg, rgba(255,0,70,.06), rgba(0,255,255,.06)); mix-blend-mode:screen; opacity:.6 }
.gl-bar{ height:16%; top:-20%; bottom:auto; background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.09), rgba(255,255,255,0)); animation:gl-bar 6.5s linear infinite }
@keyframes gl-bar{ 0%{top:-20%} 100%{top:120%} }
.glitchvid.glitching video{ filter:saturate(1.7) contrast(1.5) hue-rotate(10deg); transform:translateX(2px) }
.glitchvid.glitching .gl-tint{ opacity:1 }
.glitchvid.glitching .gl-scan{ background-size:auto 6px }
.glitchvid.clarity video{ filter:none }
.glitchvid.clarity .ov{ opacity:0 }