/* Hallmark · shape: single-screen stage · genre: playful · theme: custom · job: join · idea: "Pump the cat seven times and it goes berserk" · vibe: "black terminal, neon candle, unhinged cat"
 * paper: oklch(0% 0 0) · accent: oklch(84.9% 0.270 139.5) · display: VT323 · body: VT323 · hero: the cover wordmark over one terminal line, the cat and pump stage beneath · nav: none · footer: none · imagery: the product (pfp cat, generated pump) · signature: a real pump on a hose that charges the candle until the cat goes berserk
 * axes: black/mono/neon-green · posture: centred stage · surface: absolute · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · weakest: E, the hose is drawn not photographed; shaded it in three strokes and tucked its far end behind the fur */
/* waive 7b, 22: the cat, logo and clip are cut on pure black, so any tinted paper would frame them in visible boxes */
/* answered 23, F2: green terminal text and the three-dot "coming soon..." are the brief */
@import url("./tokens.css");
@import url("./base.css");

body { background: var(--color-paper); }

/* One screen, always: the stage takes whatever height the masthead and status leave. */
.page {
  height: 100svh;
  min-height: 520px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: clamp(var(--space-sm), 2.5svh, var(--space-xl));
  padding: clamp(var(--space-md), 4svh, var(--space-2xl)) var(--space-md) clamp(var(--space-md), 3.5svh, var(--space-xl));
  overflow: clip; /* the berserk cat flies over the whole screen without making it scroll */
}

.masthead { display: grid; justify-items: center; gap: clamp(var(--space-2xs), 1.2svh, var(--space-sm)); text-align: center; }
.logo { width: min(clamp(180px, 22vw, 330px), 40svh); height: auto; }

.term {
  font-family: var(--font-body);
  color: var(--color-accent);
  font-size: clamp(1.35rem, min(1.6vw, 3svh) + 0.55rem, 2.1rem);
  line-height: 1;
  text-shadow: 0 0 12px color-mix(in oklab, var(--color-accent) 55%, transparent);
  white-space: nowrap;
}
.term.status { font-size: clamp(1.15rem, min(1vw, 2.2svh) + 0.6rem, 1.6rem); color: var(--color-ink-2); text-shadow: none; font-variant-numeric: tabular-nums; }
.cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.9em;
  margin-left: 0.12em;
  vertical-align: -0.08em;
  background: var(--color-accent);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--space-2xs) var(--space-lg); }
.term.social {
  font-size: clamp(1.15rem, min(1vw, 2.2svh) + 0.6rem, 1.6rem);
  color: var(--color-accent);
  text-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.term.social:hover { color: var(--color-ink); }
.term.social:active { color: var(--color-ink-2); }

/* The stage keeps the SVG's aspect inside whatever box it gets, so the pump button can sit on the pump in percentages. */
.stage-area { width: 100%; height: 100%; min-height: 0; container-type: size; display: grid; place-items: center; }
.stage {
  position: relative;
  width: min(100cqw, 100cqh * 1900 / 1254, 1000px);
  aspect-ratio: 1900 / 1254;
  user-select: none;
  -webkit-user-select: none;
}
.stage svg { width: 100%; height: 100%; overflow: visible; }
.cat-img { mix-blend-mode: lighten; }

.hose-base { stroke: var(--color-hose); }
.hose-hi { stroke: var(--color-hose-hi); }
.pulse { stroke: var(--color-accent); }
.flame-a { stop-color: var(--color-flame-core); }
.flame-b { stop-color: var(--color-flame); }
.aura-a { stop-color: var(--color-accent); }
.fade-a { stop-color: var(--color-ink); }

.pump-hit {
  position: absolute;
  left: 0;
  top: 28%;
  width: 30%;
  height: 72%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pump-hit:focus-visible { outline: 1px dashed var(--color-focus); outline-offset: 2px; }
.pump-hit:active { cursor: grabbing; }
.pump-hit[aria-disabled="true"] { cursor: progress; }

@media (max-width: 40rem) {
  .page { gap: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}