@font-face { font-family: "plex"; src: url("assets/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "plex mono"; src: url("assets/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ralston"; src: url("assets/ralston.woff2") format("woff2"); font-display: block; }

:root {
  --blue: #005dfd;
  --cream: #fefbf1;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 640ms;
  --big: clamp(56px, 13vw, 220px);
  --row: clamp(34px, 7.4vw, 104px);
  --logo: 0;
  --ground: 0;
}

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

html, body {
  height: 100%;
  background: var(--cream);
  color: var(--cream);
  overflow: hidden;
  font-family: "plex", system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

#gpu { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* shown only when webgpu is missing; the shader draws the mark otherwise */
.mark-fallback {
  position: fixed; left: 50%; top: 44%;
  width: min(46vmin, 420px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.no-gpu .mark-fallback { opacity: var(--logo); }
.no-gpu #gpu { display: none; }
.no-gpu body { background: color-mix(in srgb, var(--blue) calc(var(--ground) * 100%), var(--cream)); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stage { position: fixed; inset: 0; pointer-events: none; }

.beat { position: absolute; inset: 0; opacity: 0; }
.beat.on { opacity: 1; }

/* big stacked lines, one word at a time */
.beat-1, .beat-3 {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 6vw;
  font-size: var(--big);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--blue);
}
.w {
  display: block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.w.in { opacity: 1; transform: none; }
.beat.out .w { opacity: 0; transform: translateY(-0.35em); }
.hand {
  font-family: "ralston", cursive;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.25em;
  line-height: 1.1;
}

/* the field of words */
.beat-field {
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity var(--t) var(--ease);
  font-size: var(--row);
  line-height: 1.04;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.row { display: flex; width: max-content; color: rgb(254 251 241 / 0.16); will-change: transform; }
.row span { position: relative; padding-right: 0.32em; }
.row .hi { color: transparent; transition: color 240ms var(--ease); }
.row .hi::after {
  content: attr(data-hi);
  position: absolute; left: 0; right: 0.32em; top: 50%;
  transform: translateY(-52%);
  text-align: center;
  font-family: "ralston", cursive;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.18em;
  color: var(--cream);
  white-space: nowrap;
  animation: pop 640ms var(--ease) both;
}
@keyframes pop { from { opacity: 0; transform: translateY(-20%) scale(0.9); } }

/* end card: the mark sits at 44% (drawn by the shader), the line under it */
.beat-end { transition: opacity 800ms var(--ease); }
.end-title {
  position: absolute; left: 0; right: 0;
  top: calc(44% + min(23vmin, 210px) + 28px);
  text-align: center;
  font-family: "ralston", cursive;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 54px);
  padding: 0 24px;
}

.credit {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 5px 9px 4px;
  background: var(--blue);
  color: var(--cream);
  font-family: "plex mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .w, .beat, .beat-field, .beat-end { transition: none; }
}