:root{
  /* ominous red palette */
  --bg:#070405;
  --ink:#f2e3e3;
  --neon:#ff2a36;   /* alarm red (primary glitch) */
  --hot:#ff7b2e;    /* ember (secondary glitch) */
  --grid:rgba(255,42,54,.06);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
bowie,ground-control,starman-signal,rebel-rebel,sui-generis,thin-white-duke,
major-tom,ziggy-stardust,ziggy-link{display:block}

body{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem 1.2rem;
  background:
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(0deg,var(--grid) 1px,transparent 1px),
    radial-gradient(circle at 50% -10%,rgba(255,30,36,.20),transparent 30rem),
    radial-gradient(circle at 50% 120%,rgba(255,90,20,.16),transparent 32rem),
    var(--bg);
  background-size:34px 34px,34px 34px,auto,auto,auto;
  color:var(--ink);
  font-family:var(--mono);
  text-align:center;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
bowie{display:flex;flex-direction:column;align-items:center;gap:1.6rem;width:100%}

/* CRT scanline grille */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.38) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.5}
/* drifting colour scan */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:19;
  background:linear-gradient(180deg,transparent 0 18%,rgba(255,42,54,.08) 18.2%,transparent 19%,
             transparent 57%,rgba(255,90,20,.06) 57.2%,transparent 58%);
  mix-blend-mode:screen;animation:drift-scan 9s steps(12,end) infinite}

::selection{background:var(--neon);color:#000}

/* ---- the moon ---- */
.frame{position:relative;display:inline-block;isolation:isolate;text-decoration:none;color:inherit;
  filter:drop-shadow(0 0 38px rgba(255,30,36,.28));
  animation:frame-jitter 7s steps(1,end) infinite;cursor:pointer}
.frame:focus-visible{outline:2px solid var(--neon);outline-offset:6px}
.moon{display:block;width:min(90vw,480px);height:min(50.625vw,270px);aspect-ratio:16/9;border-radius:8px;
  background:url("maxresdefault.jpg") center/cover no-repeat;
  box-shadow:0 0 40px rgba(255,20,20,.12)}
@supports (aspect-ratio:16/9){
  .moon{height:auto}
}
.omen{position:absolute;left:50%;top:38%;z-index:5;pointer-events:none;
  color:var(--ink);font-weight:900;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(2.8rem,14vw,7rem);line-height:.86;
  text-shadow:5px 0 0 var(--neon),-5px 0 0 var(--hot),0 0 30px rgba(255,42,54,.9);
  opacity:0;transform:translate(-50%,-50%) skewX(-7deg) scale(.96);
  animation:sui-generis-flash 9.4s steps(1,end) infinite}
/* ominous red wash over the death star */
.redwash{position:absolute;inset:0;border-radius:8px;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,50,30,.18),transparent 62%),
    linear-gradient(180deg,rgba(150,0,12,.58),rgba(48,0,6,.42));
  mix-blend-mode:multiply}
/* Major Tom telemetry: two RGB-split ghosts knife across on a cycle */
.frame::before,.frame::after{content:"";position:absolute;inset:0;border-radius:8px;
  background:url("maxresdefault.jpg") center/cover no-repeat;
  mix-blend-mode:screen;pointer-events:none;opacity:0;z-index:3}
.frame::before{filter:sepia(1) saturate(9) hue-rotate(-24deg) brightness(1.05);
  animation:slice-cyan 5.6s steps(1,end) infinite}
.frame::after{filter:sepia(1) saturate(7) hue-rotate(6deg) brightness(1.15);
  animation:slice-pink 6.7s steps(1,end) infinite}

@keyframes slice-cyan{
  0%,13%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  13.4%{opacity:.75;clip-path:inset(16% 0 60% 0);transform:translateX(-8px)}
  13.9%{opacity:.55;clip-path:inset(64% 0 14% 0);transform:translateX(9px)}
  14.4%{opacity:.7;clip-path:inset(38% 0 42% 0);transform:translateX(-5px)}
  15%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  61%{opacity:.6;clip-path:inset(8% 0 78% 0);transform:translateX(6px)}
  61.6%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
}
@keyframes slice-pink{
  0%,22%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  22.4%{opacity:.7;clip-path:inset(52% 0 26% 0);transform:translateX(9px)}
  22.9%{opacity:.5;clip-path:inset(10% 0 74% 0);transform:translateX(-8px)}
  23.5%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  78%{opacity:.65;clip-path:inset(34% 0 46% 0);transform:translateX(-6px)}
  78.7%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
}
@keyframes sui-generis-flash{
  0%,44%,76.1%,100%{opacity:0}
  44.3%{opacity:.96;clip-path:inset(0 0 0 0);transform:translate(-52%,-50%) skewX(-10deg) scale(1)}
  51%{opacity:.82;clip-path:inset(0 0 36% 0);transform:translate(-48%,-49%) skewX(8deg) scale(1.04)}
  60%{opacity:.94;clip-path:inset(33% 0 0 0);transform:translate(-51%,-51%) skewX(-6deg) scale(1.02)}
  75.9%{opacity:.9;clip-path:inset(0 0 0 0);transform:translate(-49%,-50%) skewX(7deg) scale(.98)}
}

/* ---- glitch text ---- */
.line{position:relative;margin:0;font-size:clamp(1.25rem,4vw,1.7rem);
  letter-spacing:.06em;text-transform:lowercase;font-weight:700;
  color:var(--ink);
  text-shadow:.6px 0 0 rgba(255,42,54,.6),-.6px 0 0 rgba(255,120,40,.45)}
.line::before,.line::after{content:attr(data-text);position:absolute;left:0;top:0;
  width:100%;overflow:hidden;pointer-events:none}
.line::before{color:var(--hot);clip-path:inset(0 0 55% 0);
  animation:glitch-top 3.7s steps(2,end) infinite}
.line::after{color:var(--neon);clip-path:inset(55% 0 0 0);
  animation:glitch-bot 4.3s steps(2,end) infinite}
@keyframes glitch-top{
  0%,84%,100%{transform:translate(0,0);opacity:.85}
  85%{transform:translate(-3px,-1px);opacity:1}
  88%{transform:translate(3px,0);opacity:.7}
  91%{transform:translate(-2px,1px);opacity:1}
  94%{transform:translate(0,0);opacity:.85}
}
@keyframes glitch-bot{
  0%,80%,100%{transform:translate(0,0);opacity:.85}
  81%{transform:translate(3px,1px);opacity:1}
  85%{transform:translate(-3px,0);opacity:.7}
  89%{transform:translate(2px,-1px);opacity:1}
  93%{transform:translate(0,0);opacity:.85}
}

/* ---- link ---- */
.link{margin:0;font-size:1.05rem;letter-spacing:.04em}
.link ziggy-link,.link a{color:var(--hot);text-decoration:none;cursor:pointer;
  border-bottom:1px solid currentColor;padding-bottom:1px;
  text-shadow:1px 0 0 rgba(255,42,54,.5),0 0 10px rgba(255,90,20,.35);
  animation:link-flicker 6.1s steps(1,end) infinite}
.link ziggy-link:hover,.link ziggy-link:focus-visible,.link a:hover,.link a:focus-visible{color:var(--neon);border-bottom-width:2px;
  text-shadow:1px 0 0 rgba(255,120,40,.5),0 0 14px rgba(255,42,54,.45)}
.link ziggy-link:focus-visible,.link a:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
@keyframes link-flicker{
  0%,96%,100%{opacity:1}
  97%{opacity:.35}
  97.6%{opacity:1}
  98.4%{opacity:.55}
  99%{opacity:1}
}

/* ---- full-screen RGB tear burst: Ziggy circuit doing its little voltage strut ---- */
.glitchfx{position:fixed;inset:0;z-index:21;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,42,54,.10) 2px 3px),
             linear-gradient(90deg,rgba(255,90,20,.16),transparent 40%,transparent 60%,rgba(255,42,54,.16));
  mix-blend-mode:screen;animation:glitch-burst 9.4s steps(1,end) infinite}
@keyframes glitch-burst{
  0%,93%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  93.4%{opacity:.9;clip-path:inset(18% 0 46% 0);transform:translateX(8px)}
  93.9%{opacity:.65;clip-path:inset(60% 0 16% 0);transform:translateX(-10px)}
  94.4%{opacity:.85;clip-path:inset(6% 0 82% 0);transform:translateX(6px)}
  94.9%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
}

@keyframes drift-scan{from{transform:translateY(-18%)}to{transform:translateY(18%)}}
@keyframes frame-jitter{
  0%,90%,100%{transform:translate(0,0)}
  91%{transform:translate(1px,-1px)}
  92%{transform:translate(-1px,1px)}
  93%{transform:translate(0,0)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  body::after,.glitchfx,.frame::before,.frame::after,.omen{display:none}
}