/* ============================================================
   bwab - the machine he runs on
   Concept: a toy computer in bwab's orange room. The CRT inside
   is bwab's terminal, so everything he is lives on the screen.
   ============================================================ */

:root {
  /* the room: a seamless studio sweep, lit from above and in front */
  --room: #e05f16;
  --room-lit: #ff8a45;
  --room-deep: #b84a0c;
  --room-floor: #8f3505;
  --room-shadow: #4a1a02;

  /* toy plastic chassis, matte and slightly warm */
  --shell: #f4e9d6;
  --shell-hi: #fffaef;
  --shell-lo: #dccaa8;
  --shell-edge: #b7a380;
  --shell-crease: #9a8459;

  /* the CRT */
  --crt: #211a49;
  --crt-deep: #170f38;
  --ink: #aeb3f6;        /* periwinkle phosphor */
  --ink-dim: #7b7fc4;
  --amber: #ffa565;      /* the one accent */
  --paper: #ffe9d2;      /* cream headings */

  --led-off: #7a6a4d;
  --led-on: #8ce97c;

  /* chunky, soft radii so the machine reads as a moulded toy, not a rectangle */
  --bezel: clamp(10px, 2.2vw, 26px);
  --radius-shell: clamp(24px, 4.2vw, 52px);
  --radius-screen: clamp(14px, 2.2vw, 26px);
  --radius-panel: 8px;   /* one radius for everything on screen */
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--room);
  font-family: "VT323", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color: var(--ink);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* the studio sweep bwab is photographed against: warm key light high and
   centered, the backdrop curving down into a darker floor, corners falling off */
.room {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(75% 55% at 50% 12%, var(--room-lit) 0%, transparent 62%),
    radial-gradient(150% 45% at 50% 78%, rgb(122 58 12 / 0.34) 0%, transparent 70%),
    radial-gradient(120% 55% at 50% 108%, var(--room-floor) 0%, transparent 68%),
    radial-gradient(135% 115% at 50% 42%, transparent 42%, rgb(96 36 4 / 0.5) 100%),
    linear-gradient(180deg, var(--room) 0%, #d85715 46%, var(--room-deep) 100%);
  pointer-events: none;
}

/* fine matte grain over everything, the way the renders read as photographed
   rather than vector. fixed + pointer-events:none so it never repaints on scroll */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -300%);
  z-index: 50;
  background: var(--paper);
  color: #3a2410;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 18px;
  text-decoration: none;
  transition: transform 160ms ease;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ------------------------------------------------------------
   The computer
   ------------------------------------------------------------ */

/* the machine as a solid object: key light from the upper left, warm bounce
   off the orange floor underneath, and a soft contact shadow holding it down */
.computer {
  position: fixed;
  inset: clamp(8px, 4.4vmin, 60px);
  /* on wide screens let the sweep show around the machine instead of
     stretching it edge to edge */
  max-width: 1560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-shell);
  background:
    radial-gradient(115% 85% at 20% -12%, var(--shell-hi) 0%, transparent 58%),
    radial-gradient(90% 60% at 50% 116%, #eed6b0 0%, transparent 62%),
    linear-gradient(166deg, var(--shell) 0%, #ecdfc6 44%, var(--shell-lo) 100%);
  box-shadow:
    /* the lit top edge and the shaded underside give it thickness */
    inset 0 2px 0 rgb(255 255 255 / 0.9),
    inset 0 -7px 16px rgb(150 105 55 / 0.3),
    inset 9px 0 22px rgb(255 255 255 / 0.2),
    inset -11px 0 26px rgb(150 105 55 / 0.16),
    inset 0 -1px 0 rgb(120 84 40 / 0.35),
    /* contact shadow first, then the soft cast shadow onto the sweep */
    0 2px 3px rgb(74 26 2 / 0.34),
    0 16px 26px rgb(74 26 2 / 0.3),
    0 42px 76px rgb(58 18 0 / 0.4);
}

.bezel-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1.4vmin, 14px) var(--bezel);
}

/* screen printed onto the plastic: ink catches the light on its lower edge
   and sinks a hair into the shell above it */
.wordmark {
  margin: 0;
  font-family: "Baloo 2", "VT323", sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 4.2vmin, 44px);
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(178deg, #8f94f0 0%, #6f74d8 44%, #575cb0 58%, #7d82d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 1px 0 rgb(255 255 255 / 0.75))
    drop-shadow(0 -1px 0 rgb(140 100 55 / 0.18));
}

/* the screen sits in a moulded recess: the shell darkens as it turns inward,
   the bottom lip catches light on the way back out */
.screen-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 var(--bezel);
  padding: clamp(8px, 1.4vmin, 16px);
  border-radius: calc(var(--radius-screen) + 10px);
  background: linear-gradient(180deg, var(--shell-edge) 0%, #a68f68 55%, var(--shell-crease) 100%);
  box-shadow:
    inset 0 4px 10px rgb(58 38 12 / 0.6),
    inset 0 -2px 0 rgb(255 255 255 / 0.42),
    inset 2px 0 6px rgb(58 38 12 / 0.3),
    inset -2px 0 6px rgb(58 38 12 / 0.3),
    0 1px 0 rgb(255 255 255 / 0.5);
}

/* glass: one soft diagonal reflection across the tube, kept faint enough
   that it never competes with the text underneath */
.screen-frame::after {
  content: "";
  position: absolute;
  inset: clamp(8px, 1.4vmin, 16px);
  border-radius: var(--radius-screen);
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    148deg,
    rgb(255 255 255 / 0.09) 0%,
    rgb(255 255 255 / 0.04) 16%,
    transparent 34%,
    transparent 100%
  );
}

.screen {
  position: relative;
  height: 100%;
  border-radius: var(--radius-screen);
  background:
    radial-gradient(130% 100% at 50% 0%, rgb(174 179 246 / 0.06), transparent 50%),
    linear-gradient(180deg, var(--crt), var(--crt-deep));
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  box-shadow:
    inset 0 0 0 1px rgb(20 12 44 / 0.9),
    inset 0 2px 12px rgb(0 0 0 / 0.7),
    inset 0 0 70px rgb(0 0 0 / 0.6);
  scrollbar-color: rgb(123 127 196 / 0.5) transparent;
  scrollbar-width: thin;
}
.screen::-webkit-scrollbar { width: 8px; }
.screen::-webkit-scrollbar-track { background: transparent; }
.screen::-webkit-scrollbar-thumb {
  background: rgb(123 127 196 / 0.45);
  border-radius: 4px;
}

/* phosphor overlays */
.scanlines,
.vignette {
  position: sticky;
  bottom: 0;
  left: 0;
  height: 0;
  z-index: 5;
  pointer-events: none;
}
.scanlines::before,
.vignette::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  pointer-events: none;
}
.scanlines::before {
  background: repeating-linear-gradient(
    180deg,
    rgb(0 0 0 / 0.16) 0px,
    rgb(0 0 0 / 0.16) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}
.vignette::before {
  background: radial-gradient(120% 100% at 50% 50%, transparent 62%, rgb(0 0 0 / 0.4));
}

/* ------------------------------------------------------------
   Bottom bezel
   ------------------------------------------------------------ */

.bezel-bottom {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vmin, 22px);
  padding: clamp(8px, 1.6vmin, 16px) calc(var(--bezel) + 6px);
}

/* slots cut into the plastic: dark inside, lit on the lower lip */
.vents { display: flex; gap: 5px; }
.vents i {
  width: clamp(14px, 2.4vmin, 26px);
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgb(92 68 34 / 0.5), rgb(120 94 56 / 0.28));
  box-shadow:
    inset 0 1px 2px rgb(52 34 10 / 0.65),
    0 1px 0 rgb(255 255 255 / 0.65);
}

.power {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* the lamp sits down in a drilled housing, so it is ringed by shadow
   and only spills light onto the shell once it comes on */
.led {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--led-off);
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.55),
    0 0 0 1px rgb(120 92 50 / 0.45),
    0 1px 0 rgb(255 255 255 / 0.6);
  transition: background 500ms ease, box-shadow 500ms ease;
}
.led.on {
  background: radial-gradient(circle at 38% 32%, #d6ffcb 0%, var(--led-on) 55%, #4bbf3a 100%);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 0.6),
    0 0 0 1px rgb(120 92 50 / 0.45),
    0 0 10px rgb(140 233 124 / 0.85),
    0 0 22px rgb(140 233 124 / 0.4);
}
.power-label {
  font-size: clamp(14px, 1.8vmin, 18px);
  color: #8a7550;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.6);
}

/* a glossy vinyl sticker somebody stuck on slightly crooked */
.sticker {
  position: relative;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: clamp(9px, 1.4vmin, 13px);
  line-height: 1.05;
  text-align: center;
  color: #fff3e6;
  background: radial-gradient(125% 125% at 30% 22%, #ffa963 0%, #e8631a 58%, #c24608 100%);
  border-radius: 50%;
  width: clamp(40px, 6.5vmin, 64px);
  height: clamp(40px, 6.5vmin, 64px);
  display: grid;
  place-content: center;
  transform: rotate(-8deg);
  text-shadow: 0 1px 1px rgb(120 44 0 / 0.45);
  box-shadow:
    0 1px 2px rgb(84 32 0 / 0.45),
    0 4px 10px rgb(84 32 0 / 0.35),
    inset 0 0 0 2px rgb(255 240 225 / 0.55),
    inset 0 2px 3px rgb(255 255 255 / 0.35);
}
/* the highlight where the light hits the curved vinyl */
.sticker::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(150deg, rgb(255 255 255 / 0.4) 0%, transparent 42%);
}

/* ------------------------------------------------------------
   Boot sequence
   ------------------------------------------------------------ */

.boot {
  position: relative;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(16px, 3vmin, 40px);
  padding: clamp(20px, 4vmin, 56px);
}

.boot-log {
  font-size: clamp(17px, 2.2vmin, 24px);
  line-height: 1.5;
  white-space: pre-wrap;
  text-shadow: 0 0 6px rgb(174 179 246 / 0.35);
}
.boot-log .amber { color: var(--amber); text-shadow: 0 0 6px rgb(255 165 101 / 0.35); }
.boot-log .warn { color: #ff7d7d; }
.boot-log .caret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--ink);
  animation: blink-caret 1s steps(1) infinite;
}

.boot-sprite { display: grid; place-items: center; }

.boot-skip {
  position: absolute;
  right: clamp(14px, 2.4vmin, 28px);
  bottom: clamp(12px, 2vmin, 24px);
  z-index: 6;
  font: inherit;
  font-size: clamp(16px, 2vmin, 20px);
  color: var(--ink-dim);
  background: none;
  border: 1px solid rgb(123 127 196 / 0.5);
  border-radius: var(--radius-panel);
  padding: 6px 18px;
  min-height: 44px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 400ms ease, color 160ms ease, border-color 160ms ease;
}
.boot-skip.show { opacity: 1; }
.boot-skip:hover,
.boot-skip:focus-visible { color: var(--paper); border-color: var(--paper); }
.boot-skip:active { transform: translateY(1px); }

@keyframes blink-caret { 50% { opacity: 0; } }

/* the sprite (pixel bwab), painted to canvas by JS */
.sprite {
  display: block;
  width: min(100%, 340px);
  height: auto;
  image-rendering: pixelated;
}

/* ------------------------------------------------------------
   Main content
   ------------------------------------------------------------ */

.main {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(18px, 3vmin, 40px) clamp(18px, 4vmin, 56px) clamp(28px, 5vmin, 64px);
  font-size: clamp(19px, 2.3vmin, 25px);
  line-height: 1.5;
}
.main.appear { animation: crt-on 600ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes crt-on {
  0% { opacity: 0; transform: scaleY(0.02); }
  55% { opacity: 1; transform: scaleY(1.02); }
  100% { transform: scaleY(1); }
}

.crt-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2vmin, 24px);
  padding-bottom: clamp(14px, 2.4vmin, 24px);
  border-bottom: 1px dashed rgb(123 127 196 / 0.45);
}
.crt-nav a {
  color: var(--amber);
  text-decoration: none;
  padding: 8px 10px;
  margin: -8px -10px;
  text-shadow: 0 0 6px rgb(255 165 101 / 0.3);
}
.crt-nav a::before { content: "["; color: var(--ink-dim); }
.crt-nav a::after { content: "]"; color: var(--ink-dim); }
.crt-nav a:hover { color: var(--paper); }
.crt-nav a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

/* hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(18px, 3.5vmin, 48px);
  padding: clamp(20px, 4vmin, 56px) 0;
}
.hero-sprite .sprite { width: min(100%, 260px); margin: 0 auto; }

.sys {
  margin: 0 0 4px;
  color: var(--ink-dim);
  font-size: 0.85em;
}
.hero-title {
  margin: 0 0 18px;
  font-weight: 400;
  font-size: clamp(34px, 5.4vmin, 58px);
  line-height: 1.05;
  color: var(--paper);
  text-shadow: 0 0 14px rgb(255 233 210 / 0.3);
}

.readout { margin: 0 0 22px; display: grid; gap: 2px; }
.kv { display: flex; gap: 4px; margin: 0; }
.kv .k { min-width: 12ch; color: var(--ink-dim); }
.kv .v { color: var(--ink); margin: 0; }

/* one CTA style, one CTA label, used in hero and at the end */
.cta-wrap {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.cta {
  display: inline-block;
  color: var(--crt-deep);
  background: var(--amber);
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 24px;
  min-height: 44px;
  line-height: 24px;
  border-radius: var(--radius-panel);
  border: 1px solid #ffbe8a;
  transition: background 160ms ease, transform 120ms ease;
}
.cta:hover { background: #ffbe8a; }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.cta.big { font-size: 1.15em; padding: 12px 32px; }
.cta.pending {
  background: transparent;
  color: var(--ink-dim);
  border: 1px dashed rgb(123 127 196 / 0.5);
  cursor: not-allowed;
}
.cta.pending:hover { background: transparent; }

.rule {
  border: none;
  border-top: 1px dashed rgb(123 127 196 / 0.45);
  margin: 0;
}

.section {
  padding: clamp(28px, 5vmin, 64px) 0;
  scroll-margin-top: 12px;
}
.section-title {
  margin: 0 0 20px;
  font-weight: 400;
  font-size: clamp(24px, 3.4vmin, 34px);
  color: var(--amber);
  text-shadow: 0 0 8px rgb(255 165 101 / 0.3);
}
.prose { margin: 0 0 12px; max-width: 58ch; }
.prose.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
}

/* manifesto: the one big statement, centered on purpose */
.manifesto { text-align: center; }
.manifesto-line {
  margin: 0;
  font-weight: 400;
  font-size: clamp(30px, 5vmin, 52px);
  line-height: 1.15;
  color: var(--paper);
  text-shadow: 0 0 14px rgb(255 233 210 / 0.25);
}
.manifesto-line.alt {
  color: var(--amber);
  margin-bottom: 24px;
  text-shadow: 0 0 14px rgb(255 165 101 / 0.3);
}

/* capability panels: terminal windows, not cards */
.panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.2vmin, 20px);
}
.panel {
  border: 1px solid rgb(123 127 196 / 0.4);
  border-radius: var(--radius-panel);
  background: rgb(123 127 196 / 0.07);
  padding: 16px 18px;
}
.panel:nth-child(odd) { background: rgb(255 165 101 / 0.05); }
.panel-title {
  margin: 0 0 6px;
  font-weight: 400;
  font-size: 1em;
  color: var(--amber);
}
.panel-title::before { content: "> "; color: var(--ink-dim); }
.panel p { margin: 0; color: var(--ink); }

/* statement: its own moment, no box */
.statement { text-align: center; }
.statement-big {
  margin: 0 0 16px;
  font-size: clamp(38px, 7vmin, 74px);
  line-height: 1.05;
  color: var(--paper);
  text-shadow: 0 0 18px rgb(255 233 210 / 0.28);
}
.statement-sub {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--ink);
  text-wrap: balance;
}

/* gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.4vmin, 24px);
}
.shot { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-panel);
  border: 1px solid rgb(123 127 196 / 0.4);
  background: rgb(123 127 196 / 0.08);
}
/* empty slot state: JS swaps missing images for this */
.shot .empty {
  display: grid;
  place-content: center;
  text-align: center;
  gap: 4px;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-panel);
  border: 1px dashed rgb(123 127 196 / 0.5);
  color: var(--ink-dim);
  font-size: 0.85em;
  padding: 12px;
}
.shot .empty .path { color: var(--amber); word-break: break-all; }

.crt-footer {
  padding-top: clamp(24px, 4vmin, 48px);
  color: var(--ink-dim);
  font-size: 0.85em;
}
.crt-footer p { margin: 0 0 8px; max-width: 62ch; }
.crt-footer a { color: var(--amber); }
.crt-footer a:hover { color: var(--paper); }

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 720px) {
  .computer { inset: 6px; }
  .boot {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    gap: 20px;
    padding: 24px 18px 64px;
  }
  .boot-sprite { order: -1; }
  .boot-sprite .sprite { width: min(52vw, 220px); }
  /* wrapped nav rows should sit close, not gap like columns */
  .crt-nav { column-gap: 14px; row-gap: 6px; font-size: 0.92em; }

  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 14px;
    padding: 16px 0 28px;
  }
  .hero-sprite .sprite { width: min(42vw, 170px); }
  .hero-title { margin-bottom: 14px; }
  .readout { margin-bottom: 18px; font-size: 0.92em; }
  .hero .kv { justify-content: center; }
  .hero .kv .k { min-width: 0; }
  .hero .cta-wrap { justify-content: center; }
  .panels { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .sticker { display: none; }
}

/* ------------------------------------------------------------
   Reduced motion (JS also checks this and skips the boot)
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .screen { scroll-behavior: auto; }
  .main.appear { animation: none; }
  .boot-log .caret { animation: none; }
  .cta { transition: none; }
}