@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/michroma-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Sixtyfour';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/sixtyfour-latin.woff2') format('woff2');
}

:root {
  --ink: #16161a;            /* triangle / beam / dark text */
  --cga-orange: #ffb000;     /* amber phosphor */
  --beam-w: min(64vw, 640px);
  --beam-h: 1px;
  --fulcrum-w: clamp(12px, 1.6vw, 25px);   /* shrinks with the screen */
  --fulcrum-h: calc(var(--fulcrum-w) * .92); /* keeps the 25:23 proportion */

  /* ── Timeline, in playback order ──────────────────────────────────────────
     --t-*: CSS animation durations.
     --h-*: sequencer holds (read live by main.js — DevTools tweaks apply on
            the next run). Keep each hold >= its animation so visuals settle. */

  /* 1 · white screen */
  --h-blank: 500ms;          /* opening beat */

  /* 2 · fulcrum draws in */
  --t-fulcrum-in: 450ms;     /* triangle grows from its point */
  --h-fulcrum: 500ms;        /* hold after it lands */

  /* 3 · beam extends */
  --t-beam-out: 400ms;       /* beam extends from centre */
  --h-beam: 600ms;           /* hold until the caption reveals */

  /* 4 · WELCOME */
  --t-cap-in: 550ms;         /* caption reveal (WELCOME and TO) */
  --h-welcome: 1200ms;       /* reveal + read time */

  /* 5 · WELCOME fades + beam shrinks away (concurrent); triangle remains */
  --t-cap-out: 400ms;        /* caption dismiss (WELCOME and TO) */
  --t-beam-in: 450ms;        /* beam retracts */
  --h-welcome-out: 500ms;    /* wait for both */

  /* 6 · beam re-extends at TO width (reuses --t-beam-out / --h-beam),
     then TO reveals (reuses --t-cap-in) */
  --h-to: 1200ms;            /* reveal + read time */

  /* 7 · TO fades + beam retracts + triangle draws out (all concurrent) */
  --t-fulcrum-out: 450ms;    /* triangle scales out */
  --h-clear: 700ms;          /* hold on the empty stage */

  /* 8 · SKYCITY drops (and 10 · LABS drops) */
  --t-stomp: 450ms;          /* a title line's drop */
  --h-stomp: 430ms;          /* drop time until impact (used for both lines) */

  /* 9 · impact 1 (quake also plays at impact 2) */
  --t-quake: 350ms;          /* impact shake */
  --h-quake-gap: 380ms;      /* pause between impact 1 and line 2 */

  /* 11 · full title holds */
  --h-title: 2500ms;         /* held before the screen dies */

  /* 12 · CRT power-off */
  --t-crt-off: 700ms;        /* screen collapse */
  --h-crt: 750ms;            /* wait for the collapse */

  /* 13 · black gap */
  --h-black: 400ms;          /* darkness before the prompt */

  /* 14 · terminal */
  --t-term-in: 300ms;        /* terminal fade-in */
  --t-blink: 1s;             /* cursor blink cycle, forever */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #000; /* behind the "screen"; visible once the CRT shuts off */
  overflow: hidden;
}

/* ── The CRT screen (white phase) ─────────────────────────────────────────── */

#screen {
  position: fixed;
  inset: 0;
  background: #fff;
  transform-origin: 50% 50%;
}

#stage {
  position: absolute;
  inset: 0;
}

/* ── Fulcrum: inverted triangle balanced on its point ─────────────────────── */

#fulcrum {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--fulcrum-w);
  height: var(--fulcrum-h);
  margin-left: calc(var(--fulcrum-w) / -2);
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 100%;   /* grows up from its balancing point */
  transform: scale(0);
}

#fulcrum.draw {
  animation: fulcrum-in var(--t-fulcrum-in) cubic-bezier(.2, 1.4, .4, 1) forwards;
}

@keyframes fulcrum-in {
  to { transform: scale(1); }
}

/* Draws out with the final TO fade + beam retract. */
#fulcrum.clear {
  animation: fulcrum-out var(--t-fulcrum-out) cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes fulcrum-out {
  from { transform: scale(1); }
  to   { transform: scale(0); }
}

/* ── Seesaw beam: extends outward from the centre ─────────────────────────── */

#beam {
  position: absolute;
  left: 50%;
  top: calc(50% - 9px);         /* 8px gap above the triangle's top edge */
  width: var(--beam-w);
  height: var(--beam-h);
  margin-left: calc(var(--beam-w) / -2);
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 50% 50%;    /* scaleX from centre = grows left+right equally */
}

#beam.extend { animation: beam-out var(--t-beam-out) cubic-bezier(.65, 0, .35, 1) forwards; }
#beam.retract { animation: beam-in var(--t-beam-in) cubic-bezier(.65, 0, .35, 1) forwards; }

@keyframes beam-out { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes beam-in  { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── Captions above the beam (WELCOME / TO) ───────────────────────────────── */

#caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% + 9px + 2px); /* sits just above the beam */
  text-align: center;
  font-family: 'Michroma', sans-serif;
  font-size: clamp(26px, 5.2vw, 52px);
  letter-spacing: .45em;
  text-indent: .45em;              /* re-centre: letter-spacing pads the right edge */
  color: var(--ink);
  opacity: 0;
}

#caption.reveal { animation: cap-in var(--t-cap-in) ease-out forwards; }
#caption.dismiss { animation: cap-out var(--t-cap-out) ease-in forwards; }

@keyframes cap-in {
  from { opacity: 0; letter-spacing: .7em; text-indent: .7em; filter: blur(6px); }
  to   { opacity: 1; letter-spacing: .45em; text-indent: .45em; filter: blur(0); }
}

@keyframes cap-out {
  from { opacity: 1; filter: blur(0); }
  to   { opacity: 0; filter: blur(6px); }
}

/* ── SKYCITY LABS stomp ───────────────────────────────────────────────────── */

#title {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-58%);
  text-align: center;
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 8.5vw, 110px);
  line-height: 1.15;
  letter-spacing: .06em;
  color: var(--ink);
}

/* Each line stomps in on its own. */
#title span {
  display: block;
  opacity: 0;
}

#title span.stomp {
  animation: stomp var(--t-stomp) cubic-bezier(.5, 0, .8, .4) forwards;
}

@keyframes stomp {
  0%   { opacity: 0; transform: scale(8); }
  55%  { opacity: 1; }
  80%  { transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}

#stage.quake { animation: quake var(--t-quake) linear; }

@keyframes quake {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-8px, 6px); }
  30%  { transform: translate(7px, -5px); }
  45%  { transform: translate(-5px, 4px); }
  60%  { transform: translate(4px, -3px); }
  75%  { transform: translate(-2px, 2px); }
  100% { transform: translate(0, 0); }
}

/* ── CRT power-off: squash to a scanline, then to a dot ───────────────────── */

#screen.crt-off {
  animation: crt-off var(--t-crt-off) forwards;
}

@keyframes crt-off {
  0%   { transform: scale(1, 1);       filter: brightness(1); }
  35%  { transform: scale(1, .006);    filter: brightness(2.5); }
  70%  { transform: scale(.85, .004);  filter: brightness(3); }
  100% { transform: scale(0, .002);    filter: brightness(4); }
}

/* ── Terminal end-state ───────────────────────────────────────────────────── */

#terminal {
  position: fixed;
  inset: 0;
  background: #000;
  font-family: 'Sixtyfour', monospace;
  font-size: 14pt;
  color: var(--cga-orange);
  text-shadow:
    0 0 2px rgba(255, 176, 0, .9),
    0 0 8px rgba(255, 176, 0, .5),
    0 0 22px rgba(255, 140, 0, .25);
  opacity: 0;
}

#terminal.on { animation: term-in var(--t-term-in) ease-out forwards; }

@keyframes term-in { to { opacity: 1; } }

/* The prompt line lives in a horizontally-centred column, a third of the way
   down the screen; the cursor flows inline after the text — nothing measured. */
#promptline {
  margin: calc(100vh / 3) auto 0;
  max-width: 820px;
  padding-left: 65px;
  white-space: nowrap;
}

#cursor {
  display: inline-block;
  width: .95ch;
  height: 1.15em;
  vertical-align: text-bottom;
  background: var(--cga-orange);
  box-shadow:
    0 0 6px rgba(255, 176, 0, .7),
    0 0 16px rgba(255, 140, 0, .35);
  animation: blink var(--t-blink) steps(2, jump-none) infinite;
}

@keyframes blink {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Dev stepper (localhost / ?dev only; classes set from main.js) ────────── */

/* Freeze every CSS animation mid-flight. */
body.paused *, body.paused *::before, body.paused *::after {
  animation-play-state: paused !important;
}

#hud {
  position: fixed;
  left: 10px;
  bottom: 8px;
  z-index: 10;
  font: 11px/1.6 ui-monospace, monospace;
  color: #999;
  background: rgba(128, 128, 128, .15);
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: pre;
}

/* Skip the show for users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  #fulcrum.draw, #beam.extend, #beam.retract,
  #caption.reveal, #caption.dismiss,
  #title.stomp, #stage.quake, #screen.crt-off, #terminal.on {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}