/* THE STOOP: neo theme.
   Thick lines, hard shadows, one loud color, the manatee's lettering.
   Every page links this file, then its own (home.css, wired.css, ...).
   Bump the ?v= on the <link> whenever this changes: the edge caches css. */

@font-face {
  font-family: "DynaPuff";
  src: url("/assets/fonts/dynapuff-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gabarito";
  src: url("/assets/fonts/gabarito-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #47a6f7;  /* the water. page background */
  --ink: #000;        /* every line, every shadow */
  --paper: #fff;      /* the manatee */
  --eye: #d00000;     /* the manatee's eye. keep it rare */

  --line: 4px;        /* outline weight */
  --drop: 7px;        /* hard shadow offset */
  --round: 22px;      /* corner radius */
  --gutter: clamp(16px, 4vw, 40px);
  --wide: 1160px;

  --puff: "DynaPuff", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --text: "Gabarito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 500 1.125rem/1.5 var(--text);
}

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: var(--line) solid var(--ink);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

/* visible to screen readers only */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- type ---------- */

/* the lettering from the shirt, solid */
.puff {
  margin: 0;
  font-family: var(--puff);
  font-weight: 700;
  line-height: 1.05;
}

/* the lettering from the shirt, as drawn: white fill, black outline, hard shadow */
.bubble {
  margin: 0;
  font-family: var(--puff);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
  -webkit-text-stroke: 0.085em var(--ink);
  paint-order: stroke fill;
  filter: drop-shadow(0.04em 0.04em 0 var(--ink));
}

/* ---------- surfaces ---------- */

.slab {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--round);
  box-shadow: var(--drop) var(--drop) 0 var(--ink);
}

.slab-ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--paper);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.4em;
  font: 700 1.15rem/1 var(--puff);
  color: var(--paper);
  background: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s, transform 0.08s;
}
.btn:hover { background: var(--eye); }
.btn:active { transform: translate(2px, 2px); }

.btn.is-off,
.btn.is-off:hover {
  color: var(--ink);
  background: var(--paper);
  border-style: dashed;
  cursor: default;
  transform: none;
}

/* the quieter button: white until you lean on it */
.btn-paper {
  color: var(--ink);
  background: var(--paper);
}
.btn-paper:hover {
  color: var(--paper);
  background: var(--ink);
}

/* ---------- top bar + footer ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 18px var(--gutter);
}

.home {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 700 1.3rem/1 var(--puff);
  text-decoration: none;
}
.home:hover .home-name { text-decoration: underline; text-decoration-thickness: 0.12em; }

.chip {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--ink);
  border-radius: 14px;
}
.chip img { width: 38px; height: auto; }

/* the clock in the top bar (app.js ticks #txtime) */
.transmission {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 0.95em;
  font: 700 0.95rem/1 var(--puff);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
}
.tx-dot {
  width: 0.7em;
  height: 0.7em;
  background: var(--eye);
  border-radius: 50%;
  animation: blink 1.4s steps(2) infinite;
}
.tx-time {
  display: inline-block;
  min-width: 4.8em;   /* widest it gets, so the pill never twitches */
  font-variant-numeric: tabular-nums;
}
@keyframes blink { 50% { opacity: 0.2; } }
@media (max-width: 520px) {
  .tx-label { display: none; }
}

/* ---------- page title block (every page but the front one) ---------- */

.page-head {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(6px, 2vw, 22px) var(--gutter) clamp(28px, 4vw, 46px);
}
.page-head h1 { font-size: clamp(2rem, 10.4vw, 7rem); }
.page-sub {
  max-width: 44ch;
  margin: 1em 0 0;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 700;
  line-height: 1.35;
}

/* ---------- the sticker ---------- */

/* the shirt design, stuck on. app.js makes the eye follow the pointer */
.sticker {
  position: relative;
  rotate: -5deg;
  --lift: clamp(6px, 1.5vw, 10px);
  filter: drop-shadow(var(--lift) var(--lift) 0 var(--ink));
  animation: slap 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; /* slapped on once, at load */
}
.sticker img { width: 100%; height: auto; }
.sticker .eye {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pupil { transition: transform 0.15s ease-out; }
@keyframes slap {
  from { scale: 1.3; rotate: 4deg; opacity: 0; }
  to { scale: 1; rotate: -5deg; opacity: 1; }
}

/* ---------- the glitch ---------- */

/* typing "lain" and the nag window's close button both knock the page
   into its negative for a second (app.js, register.js add body.desync) */
body.desync main { animation: desync 1.1s step-end 1; }
@keyframes desync {
  0% { translate: 0 0; filter: none; }
  8% { translate: -6px 3px; filter: invert(1); }
  30% { translate: 7px -4px; filter: invert(1); }
  55% { translate: -4px 2px; filter: invert(1); }
  80% { translate: 3px 1px; filter: invert(1); }
  100% { translate: 0 0; filter: none; }
}

.foot {
  border-top: var(--line) solid var(--ink);
}
.foot-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 28px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 22px var(--gutter) 36px;
  font-size: 1rem;
}
.foot p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}