:root{
  --bg:#040101;
  --ink:#e6dada;
  --deep:#7a0014;
  --neon:#c80e1a;
  --hot:#c80e1a;
  --grid:rgba(160,10,20,.05);
  --stardust-image:none;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}

*{box-sizing:border-box}
/* body is a centred flex column. Locking it to height:100% means anything
   taller than the viewport gets its overflow split above and below the scroll
   origin, and the part above is unreachable -- scrollY cannot go negative.
   min-height keeps the centring on short pages and lets tall ones grow. */
html{height:100%;margin:0}
body{min-height:100%;margin:0}
bowie,blackstar,station-bloom,ground-control,speed-of-life,thin-white-duke,
starman-signal,rebel-rebel,sui-generis,major-tom,ziggy-stardust,
station-countdown,time-unit,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(180,10,20,.12),transparent 30rem),
    radial-gradient(circle at 50% 120%,rgba(120,0,20,.14),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:2.4rem;width:100%}
.stage{position:relative;z-index:1;will-change:transform,filter;width:100%;align-items:center}

body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.42) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.6}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:19;
  background:linear-gradient(180deg,transparent 0 18%,rgba(200,14,26,.06) 18.2%,transparent 19%,
             transparent 57%,rgba(120,0,20,.06) 57.2%,transparent 58%);
  mix-blend-mode:screen;animation:drift-scan 11s steps(12,end) infinite}

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

.stars{position:fixed;inset:-40px;z-index:0;pointer-events:none;
  background-image:
  radial-gradient(1.5px 1.5px at 38px 161px, rgba(255,255,255,.9), transparent),
  radial-gradient(1.5px 1.5px at 152px 133px, rgba(200,14,26,.75), transparent),
  radial-gradient(1.5px 1.5px at 255px 96px, rgba(255,255,255,.6), transparent),
  radial-gradient(1.5px 1.5px at 188px 87px, rgba(255,255,255,.9), transparent),
  radial-gradient(1px 1px at 329px 260px, rgba(255,255,255,.9), transparent),
  radial-gradient(1px 1px at 71px 191px, rgba(255,255,255,.7), transparent),
  radial-gradient(1px 1px at 241px 316px, rgba(255,255,255,.9), transparent),
  radial-gradient(1px 1px at 158px 105px, rgba(200,14,26,.75), transparent),
  radial-gradient(1.5px 1.5px at 166px 182px, rgba(200,14,26,.75), transparent),
  radial-gradient(1.5px 1.5px at 336px 205px, rgba(255,255,255,.9), transparent);
  background-size:340px 340px;
  animation:star-flicker 3.4s steps(2,end) infinite, star-tear 6.2s steps(1,end) infinite}
.pulse{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,rgba(180,8,18,.18),transparent 55%);
  animation:breathe 6.5s ease-in-out infinite}
.vignette{position:fixed;inset:0;z-index:22;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,transparent 30%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.9) 100%)}
.vscan{position:fixed;inset:0;z-index:19;pointer-events:none;mix-blend-mode:multiply;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.34) 0 1px,transparent 1px 4px);
  opacity:calc(.22 + var(--gi,.3)*.4);
  animation:vscan-crawl 2.4s steps(7,end) infinite}
.vsweep{position:fixed;top:0;bottom:0;left:0;width:12%;z-index:21;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(200,14,26,.14) 42%,rgba(255,225,225,.24) 50%,rgba(200,14,26,.14) 58%,transparent);
  opacity:calc(.3 + var(--gi,.3)*.55);
  animation:vsweep-move 5.5s steps(22,end) infinite}

.station-wrap{position:relative;z-index:1;align-self:center;line-height:0;width:min(560px,90vw);margin-inline:auto;
  animation:frame-jitter 7s steps(1,end) infinite, station-glow 6.5s ease-in-out infinite}
.station{display:block;width:100%;aspect-ratio:1040/730;margin-inline:auto;
  background:var(--stardust-image) center/contain no-repeat;
  filter:sepia(.6) saturate(2.4) hue-rotate(-26deg) contrast(1.05) brightness(.95)}

.headline{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.line{position:relative;margin:0;font-size:clamp(1.5rem,6vw,2.6rem);
  letter-spacing:.05em;text-transform:lowercase;font-weight:700;color:var(--ink);
  text-shadow:.6px 0 0 rgba(200,14,26,.55),-.6px 0 0 rgba(120,0,20,.55)}
.power-reveal{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.8rem;width:min(880px,94vw);margin:.35rem auto -1rem}
.ennui-video-frame{position:relative;width:100%;margin-inline:auto;isolation:isolate;line-height:0;
  filter:drop-shadow(0 0 38px rgba(255,30,36,.28));
  animation:frame-jitter 7s steps(1,end) infinite}
.ennui-video-frame::before,.ennui-video-frame::after{content:"";position:absolute;inset:0;z-index:2;
  pointer-events:none;border-radius:8px;mix-blend-mode:screen;opacity:.72}
.ennui-video-frame::before{
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.36) 0 1px,transparent 1px 3px)}
.ennui-video-frame::after{
  background:linear-gradient(180deg,rgba(150,0,12,.22),rgba(48,0,6,.28)),
             linear-gradient(90deg,rgba(255,90,20,.12),transparent 40%,transparent 60%,rgba(200,14,26,.14));
  mix-blend-mode:multiply}
.power-video{display:block;width:100%;aspect-ratio:16/9;border:1px solid rgba(200,14,26,.55);
  border-radius:8px;background:#000;object-fit:cover;box-shadow:0 0 28px rgba(200,14,26,.24)}
.life-glitch{position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  pointer-events:none;line-height:1}
.life-line{position:absolute;max-width:min(92%,42rem);color:var(--ink);font-weight:900;
  text-transform:uppercase;letter-spacing:.12em;font-size:clamp(2.6rem,11vw,7rem);
  line-height:.88;text-shadow:5px 0 0 #ff2a36,-5px 0 0 #ff7b2e,0 0 30px rgba(255,42,54,.9);
  opacity:0;transform:skewX(-7deg) scale(.96)}
.life-line::before,.life-line::after{content:attr(data-text);position:absolute;left:0;top:0;
  width:100%;overflow:hidden;pointer-events:none}
.life-line::before{color:#ff7b2e;clip-path:inset(0 0 55% 0);animation:glitch-top 1.5s steps(2,end) infinite}
.life-line::after{color:#ff2a36;clip-path:inset(55% 0 0 0);animation:glitch-bot 1.8s steps(2,end) infinite}
.life-on{animation:life-on-flash 5.8s steps(1,end) infinite}
.life-ennui{animation:life-ennui-flash 5.8s steps(1,end) infinite}
.line::before,.line::after,.operational::before,.operational::after{
  content:attr(data-text);position:absolute;left:0;top:0;
  width:100%;overflow:hidden;pointer-events:none}
.line::before,.operational::before{color:var(--hot);clip-path:inset(0 0 55% 0);
  animation:glitch-top 3.7s steps(2,end) infinite}
.line::after,.operational::after{color:var(--deep);clip-path:inset(55% 0 0 0);
  animation:glitch-bot 4.3s steps(2,end) infinite}

.link{width:100%;margin:0;text-align:center;font-size:clamp(.82rem,2.4vw,1.05rem);letter-spacing:.2em}
.operational{position:relative;display:inline-block;z-index:1;color:var(--ink);
  text-decoration:none;cursor:pointer;text-transform:lowercase;padding-bottom:3px;
  border-bottom:1px solid rgba(200,14,26,.5);
  text-shadow:.6px 0 0 rgba(200,14,26,.55),-.6px 0 0 rgba(120,0,20,.55)}
.operational:hover,.operational:focus-visible{color:#fff;border-bottom-color:var(--hot)}
.operational:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

.glitchfx{position:fixed;inset:0;z-index:21;pointer-events:none;opacity:0;
      background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(200,14,26,.09) 2px 3px),
             linear-gradient(90deg,rgba(120,0,20,.18),transparent 40%,transparent 60%,rgba(200,14,26,.16));
  mix-blend-mode:screen;animation:glitch-burst 9.4s steps(1,end) infinite}

@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes star-flicker{0%,100%{opacity:.85}45%{opacity:.55}70%{opacity:1}}
@keyframes star-tear{0%,88%,100%{transform:translate(0,0)}89%{transform:translate(-6px,1px)}90%{transform:translate(5px,-1px)}91.5%{transform:translate(-3px,0)}93%{transform:translate(0,0)}}
@keyframes vscan-crawl{from{background-position-x:0}to{background-position-x:-8px}}
@keyframes vsweep-move{0%{transform:translateX(-160%)}92%,100%{transform:translateX(760%)}}
@keyframes station-glow{0%,100%{filter:drop-shadow(0 0 20px rgba(180,8,18,.28))}50%{filter:drop-shadow(0 0 46px rgba(200,14,26,.5))}}
@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}
}
@keyframes link-flicker{
  0%,96%,100%{opacity:.65}
  97%{opacity:.2}
  97.6%{opacity:.65}
  98.4%{opacity:.35}
  99%{opacity:.65}
}
@keyframes life-on-flash{
  0%,8%,33.1%,100%{opacity:0;clip-path:inset(0 0 100% 0)}
  8.4%{opacity:.96;clip-path:inset(0 0 0 0);transform:translateX(-2%) skewX(-10deg) scale(1)}
  18%{opacity:.86;clip-path:inset(0 0 34% 0);transform:translateX(2%) skewX(8deg) scale(1.04)}
  26%{opacity:.94;clip-path:inset(31% 0 0 0);transform:translateX(-1%) skewX(-6deg) scale(1.02)}
  33%{opacity:.88;clip-path:inset(0 0 0 0);transform:translateX(1%) skewX(7deg) scale(.98)}
}
@keyframes life-ennui-flash{
  0%,45%,78.1%,100%{opacity:0;clip-path:inset(0 0 100% 0)}
  45.4%{opacity:.97;clip-path:inset(0 0 0 0);transform:translateX(2%) skewX(9deg) scale(1)}
  56%{opacity:.84;clip-path:inset(36% 0 0 0);transform:translateX(-2%) skewX(-8deg) scale(1.05)}
  66%{opacity:.95;clip-path:inset(0 0 31% 0);transform:translateX(1%) skewX(6deg) scale(1.02)}
  78%{opacity:.9;clip-path:inset(0 0 0 0);transform:translateX(-1%) skewX(-7deg) scale(.98)}
}
@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,.pulse,.vscan,.vsweep,
  .line::before,.line::after,.operational::before,.operational::after,
  .life-glitch,.ennui-video-frame::before,.ennui-video-frame::after{display:none}
}

/* ---- ignition: the page starts paused, this starts it at full volume ---- */
.ignition{position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.ignition::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:8px;
  background:radial-gradient(circle at 50% 50%,rgba(8,0,2,.34),rgba(4,0,1,.72));
  transition:opacity .18s ease}
.ignition-glyph{position:relative;display:grid;place-items:center;
  width:clamp(5rem,17vw,8.5rem);aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(255,60,60,.85);background:rgba(10,0,2,.55);
  box-shadow:0 0 32px rgba(255,42,54,.5),inset 0 0 26px rgba(255,42,54,.28);
  animation:ignition-throb 2.6s ease-in-out infinite}
/* play triangle */
.ignition-glyph::after{content:"";width:0;height:0;margin-left:14%;
  border-left:clamp(1.5rem,5vw,2.5rem) solid rgba(255,225,225,.96);
  border-top:clamp(1rem,3.2vw,1.6rem) solid transparent;
  border-bottom:clamp(1rem,3.2vw,1.6rem) solid transparent;
  filter:drop-shadow(2px 0 0 rgba(255,42,54,.85)) drop-shadow(-2px 0 0 rgba(255,123,46,.7))}
@keyframes ignition-throb{
  0%,100%{transform:scale(1);box-shadow:0 0 32px rgba(255,42,54,.5),inset 0 0 26px rgba(255,42,54,.28)}
  50%{transform:scale(1.05);box-shadow:0 0 54px rgba(255,42,54,.75),inset 0 0 34px rgba(255,42,54,.4)}
}
.ignition:hover .ignition-glyph{border-color:#fff;transform:scale(1.07)}
.ignition:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:8px}

/* once running, the button and its scrim get out of the way */
.ennui-video-frame.is-playing .ignition{opacity:0;pointer-events:none}
.ennui-video-frame.is-playing .life-glitch{opacity:.85}

@media (prefers-reduced-motion:reduce){
  .ignition-glyph{animation:none}
}