Pressure Button

'use client';

import './pressure-button.css';

import { useEffect, useRef, useState, type KeyboardEvent } from 'react';

import { useCanvasScene, useReducedMotion, type SceneDrawContext, type SceneSetupContext } from '@/hooks/use-canvas-scene';

/**
 * A primary call to action whose body is a pressurised softbody, so the pill resists a press
 * instead of merely animating one.
 *
 * Integrated per node: edge springs around a closed ring, weak anchor springs that remember the
 * pill, and a gas force on every edge — f = (P - P0) * L * n, with P = nRT / A and A the shoelace
 * area of the ring. The gas term is the component. Edge springs conserve perimeter, not area: the
 * folded, zero-area ring costs a loop of springs nothing, so a plate pressing the cap keeps
 * flattening it and the ring stays shut. P = nRT / A diverges as A goes to zero, so the more area
 * a press squeezes out the harder the inside shoves back, and it leaves by the only wall that is
 * free — which is why the waist bulges sideways while the cap is pinned. That bulge is off the
 * axis you pressed, and no easing curve on a scale transform will produce it.
 */

const STEP = 1 / 120;

/* Unit node mass throughout, so every constant here is already an acceleration. */
const NODES = 44;
const EDGE_K = 2600;
const EDGE_DAMP = 26;
/* Shape memory. Springs plus gas alone maximise area for a fixed perimeter, i.e. they round the
   pill into a circle within a second; these hold the stadium and nothing else. */
const ANCHOR_K = 700;
const DRAG = 12;
/* P0 = nRT / A0: the ambient the balloon sits in balance with, so the rest ring is exactly the
   pill and the net force is zero until something moves. Scaled by A0 in setup, which keeps the
   feel identical when the button is measured at a different size. */
const REST_PRESSURE = 1150;
const AREA_FLOOR = 0.22;
const PRESS_DEPTH = 9;
const PLATE_LIFTED = -1e6;
const PLATE_FRICTION = 0.98;
const POKE_RADIUS = 78;
const POKE_FORCE = 2700;
/* 0.2 s held then 0.1 s free, so the first painted frame is already at the top of a rebound. */
const WARM_HELD = 24;
const WARM_FREE = 12;
const RELAX_STEPS = 320;

interface State {
  clock: number;
  carry: number;
  px: Float64Array;
  py: Float64Array;
  vx: Float64Array;
  vy: Float64Array;
  ax: Float64Array;
  ay: Float64Array;
  rx: Float64Array;
  ry: Float64Array;
  len: Float64Array;
  /** nRT, plus the rest area and cap the whole press is measured against. */
  gas: number;
  area0: number;
  cap: number;
  /** Rest centroid and half-extents, so the label transform is exactly identity at rest. */
  cx: number;
  cy: number;
  halfW: number;
  halfH: number;
  over: number;
}

const clamp = (v: number, lo: number, hi: number): number => Math.min(hi, Math.max(lo, v));

/**
 * Evenly spaced by arc length around a stadium, so no edge starts shorter than its neighbours —
 * unequal rest lengths make one side of the ring stiffer and the balloon bulges lopsided.
 */
const ringPoint = (t: number, x: number, y: number, w: number, h: number, r: number, out: Float64Array): void => {
  const flat = Math.max(w - 2 * r, 0);
  const arc = Math.PI * r;
  if (t < flat) {
    out[0] = x + r + t;
    out[1] = y;
  } else if (t < flat + arc) {
    const a = (t - flat) / r - Math.PI / 2;
    out[0] = x + w - r + Math.cos(a) * r;
    out[1] = y + r + Math.sin(a) * r;
  } else if (t < 2 * flat + arc) {
    out[0] = x + w - r - (t - flat - arc);
    out[1] = y + h;
  } else {
    const a = (t - 2 * flat - arc) / r + Math.PI / 2;
    out[0] = x + r + Math.cos(a) * r;
    out[1] = y + r + Math.sin(a) * r;
  }
};

const resetRing = (s: State): void => {
  for (let i = 0; i < s.px.length; i += 1) {
    s.px[i] = s.rx[i];
    s.py[i] = s.ry[i];
    s.vx[i] = 0;
    s.vy[i] = 0;
  }
};

/** One fixed substep of the ring: springs, gas, the plate contact, then semi-implicit Euler. */
const advance = (s: State, plate: number, poking: boolean, pokeX: number, pokeY: number): void => {
  const { px, py, vx, vy, ax, ay, rx, ry, len } = s;
  const count = px.length;

  let signed = 0;
  for (let i = 0; i < count; i += 1) {
    const j = i + 1 === count ? 0 : i + 1;
    signed += px[i] * py[j] - px[j] * py[i];
  }
  signed *= 0.5;
  /* The area is the one scalar every node reads, so it is guarded before the per-node repair below
     rather than after: a single non-finite coordinate poisons the sum, and `over` is written from it
     and handed to addColorStop as an alpha, which throws on NaN and takes the whole frame with it. */
  if (!Number.isFinite(signed)) {
    signed = s.area0;
  }
  /* Sign of the shoelace sum, not an assumed winding: it is what keeps the normals pointing out
     even if a hard press turns the ring inside out for a frame. */
  const orient = signed >= 0 ? 1 : -1;
  const area = Math.max(Math.abs(signed), s.area0 * AREA_FLOOR);
  const dp = s.gas / area - s.gas / s.area0;
  s.over = (dp * s.area0) / s.gas;

  ax.fill(0);
  ay.fill(0);

  for (let i = 0; i < count; i += 1) {
    const j = i + 1 === count ? 0 : i + 1;
    const dx = px[j] - px[i];
    const dy = py[j] - py[i];
    const d = Math.sqrt(dx * dx + dy * dy) || 1e-6;
    const nx = dx / d;
    const ny = dy / d;
    const along = (vx[j] - vx[i]) * nx + (vy[j] - vy[i]) * ny;
    const f = EDGE_K * (d - len[i]) + EDGE_DAMP * along;
    ax[i] += f * nx;
    ay[i] += f * ny;
    ax[j] -= f * nx;
    ay[j] -= f * ny;
    /* (P - P0) * L * n, split between the two ends. The L cancels the 1/L inside the unit normal,
       so the gas term never divides by an edge length and a collapsed edge cannot produce a NaN. */
    const gx = dp * orient * dy * 0.5;
    const gy = dp * orient * -dx * 0.5;
    ax[i] += gx;
    ay[i] += gy;
    ax[j] += gx;
    ay[j] += gy;
  }

  for (let i = 0; i < count; i += 1) {
    ax[i] += (rx[i] - px[i]) * ANCHOR_K - vx[i] * DRAG;
    ay[i] += (ry[i] - py[i]) * ANCHOR_K - vy[i] * DRAG;
    if (poking) {
      const dx = px[i] - pokeX;
      const dy = py[i] - pokeY;
      const d2 = dx * dx + dy * dy;
      if (d2 < POKE_RADIUS * POKE_RADIUS && d2 > 1e-4) {
        const d = Math.sqrt(d2);
        const push = (POKE_FORCE * (1 - d / POKE_RADIUS)) / d;
        ax[i] += dx * push;
        ay[i] += dy * push;
      }
    }

    vx[i] += ax[i] * STEP;
    vy[i] += ay[i] * STEP;
    px[i] += vx[i] * STEP;
    py[i] += vy[i] * STEP;

    /* The finger is a rigid plate, so contact is a projection: the node stops at the plate and
       loses the velocity it was carrying into it. Nothing is added, so no press can inject energy.
       While lifted the plate sits far above the stage, which is what lets the cap overshoot. */
    if (py[i] < plate) {
      py[i] = plate;
      if (vy[i] < 0) {
        vy[i] = 0;
      }
      vx[i] *= PLATE_FRICTION;
    }

    /* One bad frame — a resize mid-substep, a tab restored after an hour — would otherwise leave a
       NaN in the ring that every later step multiplies forward. Snap that node home instead. */
    if (!Number.isFinite(px[i]) || !Number.isFinite(py[i])) {
      px[i] = rx[i];
      py[i] = ry[i];
      vx[i] = 0;
      vy[i] = 0;
    }
  }
};

/** `compact` is the 298x240 catalogue card: the section copy goes and the pill is
 *  centred as the whole subject. Presentation only — see `pressure-button.css`. */
export type PressureButtonProps = { compact?: boolean };

export function PressureButton({ compact = false }: PressureButtonProps) {
  const reduced = useReducedMotion();
  const [held, setHeld] = useState(false);
  const [queued, setQueued] = useState(false);
  const ctaRef = useRef<HTMLButtonElement | null>(null);
  const labelRef = useRef<HTMLSpanElement | null>(null);

  const setup = (c: SceneSetupContext): State => {
    /* Measured every time, never cached: setup re-runs on resize, and the whole point is that the
       ring wraps the real button box wherever the hero copy above it happens to push it. The stage
       carries no border, so its client rect and the canvas origin are the same point. */
    const el = ctaRef.current;
    const host = el ? el.closest('.pressure-button-stage') : null;
    let bw = Math.max(96, Math.min(216, c.width - 56));
    let bh = 52;
    let bx = (c.width - bw) / 2;
    let by = c.height * 0.6;
    if (el && host) {
      const box = el.getBoundingClientRect();
      const frame = host.getBoundingClientRect();
      if (box.width > 8 && box.height > 8) {
        bw = box.width;
        bh = box.height;
        bx = box.left - frame.left;
        by = box.top - frame.top;
      }
    }

    const r = Math.max(1, Math.min(bw, bh) / 2);
    const per = 2 * Math.max(bw - 2 * r, 0) + 2 * Math.PI * r;
    const px = new Float64Array(NODES);
    const py = new Float64Array(NODES);
    const vx = new Float64Array(NODES);
    const vy = new Float64Array(NODES);
    const ax = new Float64Array(NODES);
    const ay = new Float64Array(NODES);
    const rx = new Float64Array(NODES);
    const ry = new Float64Array(NODES);
    const len = new Float64Array(NODES);
    const out = new Float64Array(2);
    for (let i = 0; i < NODES; i += 1) {
      ringPoint((per * i) / NODES, bx, by, bw, bh, r, out);
      rx[i] = out[0];
      ry[i] = out[1];
      px[i] = out[0];
      py[i] = out[1];
    }

    /* A0 comes from the sampled polygon, not from the ideal stadium: the solver only ever sees the
       shoelace area of these 44 points, and a mismatch of even a percent would leave the ring
       breathing outward on the first frame with nothing touching it. */
    let signed = 0;
    let cx = 0;
    let cy = 0;
    for (let i = 0; i < NODES; i += 1) {
      const j = i + 1 === NODES ? 0 : i + 1;
      signed += rx[i] * ry[j] - rx[j] * ry[i];
      len[i] = Math.hypot(rx[j] - rx[i], ry[j] - ry[i]);
      cx += rx[i];
      cy += ry[i];
    }
    const area0 = Math.max(Math.abs(signed * 0.5), 1);

    const state: State = {
      clock: 0,
      carry: 0,
      px, py, vx, vy, ax, ay, rx, ry, len,
      gas: REST_PRESSURE * area0,
      area0,
      cap: by,
      cx: cx / NODES,
      cy: cy / NODES,
      halfW: Math.max(bw, 1) / 2,
      halfH: Math.max(bh, 1) / 2,
      over: 0,
    };

    for (let i = 0; i < WARM_HELD; i += 1) {
      advance(state, by + PRESS_DEPTH, false, 0, 0);
    }
    for (let i = 0; i < WARM_FREE; i += 1) {
      advance(state, PLATE_LIFTED, false, 0, 0);
    }
    return state;
  };

  const draw = ({ context, width, height, state, pointer }: SceneDrawContext<State>) => {
    if (!context) {
      return;
    }
    const now = performance.now() / 1000;
    const dt = state.clock === 0 ? 0 : Math.min(0.05, now - state.clock);
    state.clock = now;
    const plate = held ? state.cap + PRESS_DEPTH : PLATE_LIFTED;

    if (reduced) {
      /* No loop runs, so this frame has to be the whole truth: relax the real ring from rest until
         the gas and the springs stop arguing, and paint that equilibrium. */
      resetRing(state);
      for (let i = 0; i < RELAX_STEPS; i += 1) {
        advance(state, plate, false, 0, 0);
      }
    } else {
      state.carry += dt;
      let n = 0;
      while (state.carry >= STEP && n < 8) {
        advance(state, plate, pointer.down && pointer.inside, pointer.x, pointer.y);
        state.carry -= STEP;
        n += 1;
      }
      if (n === 8) {
        state.carry = 0;
      }
    }

    const { px, py } = state;
    let cx = 0;
    let cy = 0;
    let minX = px[0];
    let maxX = px[0];
    let minY = py[0];
    let maxY = py[0];
    for (let i = 0; i < NODES; i += 1) {
      cx += px[i];
      cy += py[i];
      minX = Math.min(minX, px[i]);
      maxX = Math.max(maxX, px[i]);
      minY = Math.min(minY, py[i]);
      maxY = Math.max(maxY, py[i]);
    }
    cx /= NODES;
    cy /= NODES;
    /* A0 / A - 1, straight off the solver: the only thing driving the colour is the compression. */
    const glow = clamp(state.over * 2.6, 0, 1);
    const span = Math.max(maxY - minY, 1);

    context.clearRect(0, 0, width, height);

    /* Contact shadow. It tightens as the ring compresses because the cap is closer to the page —
       same number driving it as the fill, so the two can never disagree. */
    const shadowY = maxY + 9;
    const shadowR = Math.max((maxX - minX) * 0.56, 1);
    const shade = context.createRadialGradient(cx, shadowY, 0, cx, shadowY, shadowR);
    shade.addColorStop(0, `rgba(1, 9, 7, ${0.5 + glow * 0.22})`);
    shade.addColorStop(1, 'rgba(1, 9, 7, 0)');
    context.save();
    context.translate(cx, shadowY);
    context.scale(1, Math.max(0.14, 0.3 - glow * 0.12));
    context.translate(-cx, -shadowY);
    context.beginPath();
    context.arc(cx, shadowY, shadowR, 0, Math.PI * 2);
    context.fillStyle = shade;
    context.fill();
    context.restore();

    /* Quadratics through the edge midpoints: 44 nodes drawn as straight chords read as a faceted
       gem when the waist bulges, and the facets flicker as nodes cross. */
    context.beginPath();
    context.moveTo((px[NODES - 1] + px[0]) * 0.5, (py[NODES - 1] + py[0]) * 0.5);
    for (let i = 0; i < NODES; i += 1) {
      const j = i + 1 === NODES ? 0 : i + 1;
      context.quadraticCurveTo(px[i], py[i], (px[i] + px[j]) * 0.5, (py[i] + py[j]) * 0.5);
    }
    context.closePath();

    const body = context.createLinearGradient(0, minY, 0, minY + span);
    body.addColorStop(0, `rgba(172, 255, 228, ${0.3 + glow * 0.34})`);
    body.addColorStop(1, `rgba(88, 220, 186, ${0.12 + glow * 0.26})`);
    context.fillStyle = body;
    context.fill();
    context.lineWidth = 1.4;
    context.strokeStyle = `rgba(198, 255, 236, ${0.5 + glow * 0.42})`;
    context.stroke();

    context.save();
    context.clip();
    const sheen = context.createLinearGradient(0, minY, 0, minY + span * 0.62);
    sheen.addColorStop(0, 'rgba(255, 255, 255, 0.2)');
    sheen.addColorStop(1, 'rgba(255, 255, 255, 0)');
    context.fillStyle = sheen;
    context.fillRect(minX - 2, minY - 2, maxX - minX + 4, span + 4);
    context.restore();

    /* The label rides the shape rather than the state: it takes the ring's own centroid and its own
       extents, so it sinks and squashes with the cap and springs back on the overshoot. */
    const label = labelRef.current;
    if (label) {
      const sx = clamp((maxX - minX) / (state.halfW * 2), 0.72, 1.24);
      const sy = clamp(span / (state.halfH * 2), 0.72, 1.24);
      const dx = (cx - state.cx).toFixed(2);
      const dy = (cy - state.cy).toFixed(2);
      label.style.transform = `translate(${dx}px, ${dy}px) scale(${sx.toFixed(3)}, ${sy.toFixed(3)})`;
    }
  };

  const { stageRef, canvasRef, requestRender } = useCanvasScene<State>({ setup, draw });
  useEffect(() => requestRender(), [held, reduced, requestRender]);

  const release = () => setHeld(false);
  /* Space and Enter are the press, not just the activation: a native button fires click for both,
     but neither gives you a held state, and without one a keyboard user sees no squash at all. */
  const press = (event: KeyboardEvent<HTMLButtonElement>) => {
    if (event.key === ' ' || event.key === 'Enter') {
      setHeld(true);
    }
  };

  return (
    <div className="pressure-button-stage" data-compact={compact ? 'true' : undefined}>
      <div ref={stageRef} className="pressure-button-surface">
        <canvas ref={canvasRef} aria-hidden="true" />
      </div>
      <div className="pressure-button-content">
        <p className="pressure-button-eyebrow">Release 4.2</p>
        <h3 className="pressure-button-title">Push the build to the edge.</h3>
        <p className="pressure-button-copy">
          Three regions, one press. Hold it and the gas inside the button pushes back — the cap
          flattens, the waist bulges out, and the label goes down with it.
        </p>
        <button
          ref={ctaRef}
          type="button"
          className="pressure-button-cta"
          // The only focusable node in here, and in a card it leaves the tab order:
          // the frame is aria-hidden, and a focusable node inside one is a trap with
          // no name. Press, hold, drag and click all still land — only Tab is gone.
          tabIndex={compact ? -1 : undefined}
          onPointerDown={() => setHeld(true)}
          onPointerUp={release}
          onPointerLeave={release}
          onPointerCancel={release}
          onKeyDown={press}
          onKeyUp={release}
          onBlur={release}
          onClick={() => setQueued((on) => !on)}
        >
          <span ref={labelRef} className="pressure-button-label">
            {queued ? 'Cancel deploy' : 'Deploy to edge'}
          </span>
        </button>
        <p className="pressure-button-note" role="status" data-queued={queued ? 'true' : 'false'}>
          {queued ? 'Queued · 3 regions · 12s' : 'No deploy queued.'}
        </p>
      </div>
      <p className="pressure-button-hint">press and hold · drag to dent</p>
    </div>
  );
}

export default PressureButton;

.pressure-button-stage {
  position: relative;
  display: grid;
  place-content: center;
  width: 100%;
  min-height: 20rem;
  padding: 2.75rem 1.75rem;
  overflow: hidden;
  border-radius: 0.75rem;
  /* An inset ring rather than a border. The canvas host below is `inset: 0`, which
     resolves against this element's padding box, so a border here would slide the
     solver's origin a pixel off the button its ring is wrapped around. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  background: radial-gradient(120% 105% at 20% 0%, #0d1b18 0%, #070e0d 58%, #040807 100%);
  color: #eafff8;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.pressure-button-surface {
  position: absolute;
  inset: 0;
  touch-action: none;
}

.pressure-button-surface canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Transparent to the pointer as a whole, so a drag anywhere across the hero still
   dents the balloon. Only the call to action takes events back. */
.pressure-button-content {
  position: relative;
  width: min(25rem, 100%);
  pointer-events: none;
}

.pressure-button-eyebrow {
  margin: 0 0 0.6875rem;
  font: 500 0.6875rem/1 ui-monospace, 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(151, 240, 214, 0.74);
}

.pressure-button-title {
  margin: 0 0 0.625rem;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.pressure-button-copy {
  margin: 0 0 1.5rem;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(234, 255, 248, 0.6);
}

/* No background, no border, no shadow. The pill you see is the softbody the canvas
   paints; any CSS box here would sit on top of it as a ghost that refuses to
   deform. The hit area stays the undeformed rectangle, which is the one part of a
   button that should never move under the cursor. */
.pressure-button-cta {
  display: grid;
  place-items: center;
  width: min(13.5rem, 100%);
  height: 3.25rem;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #f2fff9;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}

.pressure-button-label {
  display: block;
  transform-origin: 50% 50%;
  text-shadow: 0 1px 12px rgba(4, 18, 14, 0.72);
  will-change: transform;
}

.pressure-button-cta:focus-visible {
  outline: 2px solid rgba(151, 240, 214, 0.82);
  outline-offset: 5px;
}

.pressure-button-note {
  margin: 0.9375rem 0 0;
  min-height: 1.125rem;
  font: 500 0.75rem/1.5 ui-monospace, 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.02em;
  color: rgba(234, 255, 248, 0.44);
  transition: color 200ms ease;
}

.pressure-button-note[data-queued='true'] {
  color: rgba(151, 240, 214, 0.9);
}

.pressure-button-hint {
  position: absolute;
  right: 0.875rem;
  bottom: 0.75rem;
  margin: 0;
  font: 500 0.6875rem/1 ui-monospace, 'SFMono-Regular', Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(234, 255, 248, 0.26);
  pointer-events: none;
}

/*
 * With the loop stopped the same solver is still the source of the picture: it is
 * relaxed to the equilibrium of whichever state the button is in — free, or held
 * down against the plate — and that one settled frame is painted. The label still
 * rides the squashed cap, because the shape is real. What is switched off is the
 * rebound in between, the pointer dent, and the colour fade on the status line.
 */
@media (prefers-reduced-motion: reduce) {
  .pressure-button-note {
    transition: none;
  }

  .pressure-button-label {
    will-change: auto;
  }
}

/*
 * The card variant: the same button authored for the 298x240 catalogue frame rather
 * than scaled into it. The section copy goes, the pill is centred as the whole
 * subject with the solver's ring wrapped around it, and one line of type sits along
 * the bottom edge. Fixed rem sizes only below — this frame is 298px wide and the
 * viewport is not.
 */
.pressure-button-stage[data-compact='true'] {
  min-height: 0;
  height: 100%;
  /* Every layer below is absolute, so this only states the intent: the whole box
     belongs to the mechanism. The card frame rounds and clips already. */
  padding: 0;
  border-radius: 0;
}

/*
 * `pan-y`, not `none`. This surface is the full 298x240, and one that swallows every
 * vertical touch traps the page inside a scrolling grid of cards — the worse failure
 * by far. A horizontal drag still reaches the balloon and dents it, and a stationary
 * press-and-hold is never a pan, so both gestures the button is about survive on a
 * phone; only a vertical drag is handed back to the document.
 */
.pressure-button-stage[data-compact='true'] .pressure-button-surface {
  touch-action: pan-y;
}

/*
 * The copy layer stops being a column of text with a button at the end of it and
 * becomes the pill's centring layer. The bottom inset is the contact shadow: it
 * hangs below the cap, so the box the pill is centred in stops short of the type
 * strip and the pill *plus* its shadow reads as centred rather than the pill alone.
 * `pointer-events: none` is inherited from the base rule and left alone, so a drag
 * anywhere across the card reaches the canvas; the button takes its own back.
 */
.pressure-button-stage[data-compact='true'] .pressure-button-content {
  position: absolute;
  inset: 0 0 1.25rem;
  width: auto;
  display: grid;
  place-content: center;
}

/* Eyebrow, headline and paragraph are the section's, and the card's own title link
   below the frame already names the item. The status line goes with them: the label
   on the pill turns over on the same click, so it would be the same news twice. */
.pressure-button-stage[data-compact='true'] .pressure-button-eyebrow,
.pressure-button-stage[data-compact='true'] .pressure-button-title,
.pressure-button-stage[data-compact='true'] .pressure-button-copy,
.pressure-button-stage[data-compact='true'] .pressure-button-note {
  display: none;
}

/*
 * 216 x 52 of the 298 x 240, and a flat length rather than the section's `min()` so
 * the ring `setup()` measures is the same box on every card. That leaves 41px at
 * each side for the waist to bulge into and room under the cap for the contact
 * shadow, and the plate still presses its authored 9px — a shorter button would only
 * make the squash deeper, not the pill bigger.
 */
.pressure-button-stage[data-compact='true'] .pressure-button-cta {
  width: 13.5rem;
  /* The same trade as the surface: 216x52 is a good part of the card, and a thumb
     that lands on the button should still be able to scroll past it. */
  touch-action: pan-y;
}

/*
 * The one line of type that stays, off the balloon's back and onto the bottom edge.
 * It is the hint and not the headline because nothing about a pill tells you it can
 * be held down or dented from the side, and the fixed 0.6875rem it was already set
 * in is the right size for this box. Lifted out of the hero's whisper — as the only
 * text in the card it has to be readable — and still deaf to the pointer, so a drag
 * across it takes hold of the balloon.
 */
.pressure-button-stage[data-compact='true'] .pressure-button-hint {
  inset: auto 0 0 0;
  padding: 0.75rem;
  text-align: center;
  white-space: nowrap;
  color: rgba(234, 255, 248, 0.48);
}

"use client"

import { useCallback, useEffect, useRef, useState } from "react"

/**
 * The canvas preamble every 2D scene needs, in one place: a DPR-scaled backing
 * store, a rebuild on resize, a loop that stops when the stage scrolls out of
 * view, pointer tracking with per-frame deltas, and teardown.
 *
 * A scene supplies two functions. `setup` builds whatever mutable state the
 * animation owns and is re-run whenever the stage changes size, so the state can
 * be sized to the stage without ever being resized in place. `draw` paints one
 * frame from that state — it is called with the transform already scaled to
 * device pixels, so every coordinate in it is a CSS pixel.
 */

export type ScenePointer = {
  x: number
  y: number
  /** Position at the previous painted frame, so `x - lastX` is a frame delta. */
  lastX: number
  lastY: number
  down: boolean
  inside: boolean
}

export type SceneSetupContext = {
  context: CanvasRenderingContext2D
  width: number
  height: number
  dpr: number
}

export type SceneDrawContext<State> = SceneSetupContext & {
  state: State
  pointer: ScenePointer
  /** Painted frames since the last rebuild. Useful for every-Nth-frame work. */
  frame: number
}

export type CanvasSceneOptions<State> = {
  setup: (context: SceneSetupContext) => State
  draw: (context: SceneDrawContext<State>) => void
}

export type CanvasScene = {
  /** The sizing element. Owns the pointer listeners and is what is observed. */
  stageRef: (node: HTMLDivElement | null) => void
  canvasRef: (node: HTMLCanvasElement | null) => void
  /** Paint one frame now. The escape hatch for a paused or reduced-motion loop. */
  requestRender: () => void
}

/** Live `prefers-reduced-motion`. False during SSR and the first paint. */
export function useReducedMotion() {
  const [reduced, setReduced] = useState(false)

  useEffect(() => {
    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
    setReduced(query.matches)
    const onChange = () => setReduced(query.matches)
    query.addEventListener("change", onChange)
    return () => query.removeEventListener("change", onChange)
  }, [])

  return reduced
}

export function useCanvasScene<State>(options: CanvasSceneOptions<State>): CanvasScene {
  const reduced = useReducedMotion()

  /*
   * `draw` is usually an inline closure, so it is a new function on every
   * render. Reading it through a ref keeps the loop from being torn down and
   * the scene from being rebuilt each time the component re-renders.
   */
  const optionsRef = useRef(options)
  optionsRef.current = options

  const stage = useRef<HTMLDivElement | null>(null)
  const canvas = useRef<HTMLCanvasElement | null>(null)

  /*
   * Plain ref assignment, with no state behind it. React attaches refs during
   * the commit phase, before passive effects run, so the effect below already
   * sees both nodes on the first mount — which is why these used to bump a
   * `mounted` counter for nothing: the two `setMounted` calls batched into one
   * re-render, the counter went 0 → 2, and the effect's dependency on it tore
   * the live scene down and rebuilt it. Every scene was constructed, measured
   * and warmed twice on every mount, four times under StrictMode in dev.
   *
   * The requirement this trades for that: a consumer must render the stage and
   * the canvas unconditionally, in the same commit as the component itself. All
   * thirteen do. Gating the canvas behind a flag would leave the effect bailing
   * on the null guard with nothing to re-run it.
   */
  const stageRef = useCallback((node: HTMLDivElement | null) => {
    stage.current = node
  }, [])
  const canvasRef = useCallback((node: HTMLCanvasElement | null) => {
    canvas.current = node
  }, [])

  /** Set once the scene is live, so `requestRender` before that is a no-op. */
  const render = useRef<(() => void) | null>(null)
  const requestRender = useCallback(() => render.current?.(), [])

  useEffect(() => {
    const stageNode = stage.current
    const canvasNode = canvas.current
    if (!stageNode || !canvasNode) return

    const context = canvasNode.getContext("2d")
    if (!context) return

    const pointer: ScenePointer = {
      x: 0,
      y: 0,
      lastX: 0,
      lastY: 0,
      down: false,
      inside: false,
    }

    let state: State | null = null
    let width = 0
    let height = 0
    let dpr = 1
    let frame = 0
    let loop = 0
    let pending = 0
    let visible = true

    /** Rebuild the backing store and the scene state for the current size. */
    const measure = () => {
      // `offsetWidth`/`offsetHeight`, not `getBoundingClientRect()`: the rect is
      // post-transform, so a scene sitting inside a scaled ancestor measured its
      // own frame at the scaled size, sized the backing store to that, and then
      // had CSS scale the result a second time — the scene ran at a fraction of
      // the box it was drawn into. The catalogue's scaled-poster branch is the
      // one place that happens, and it is reachable again the moment an
      // animation is registered without a card composition. These two properties
      // are the untransformed layout box; both are integers, which is what the
      // rounding below already reduced the rect to.
      const nextWidth = Math.max(1, stageNode.offsetWidth)
      const nextHeight = Math.max(1, stageNode.offsetHeight)
      const nextDpr = Math.min(2, window.devicePixelRatio || 1)
      if (nextWidth === width && nextHeight === height && nextDpr === dpr && state) return

      width = nextWidth
      height = nextHeight
      dpr = nextDpr
      canvasNode.width = Math.round(width * dpr)
      canvasNode.height = Math.round(height * dpr)
      canvasNode.style.width = `${width}px`
      canvasNode.style.height = `${height}px`
      frame = 0
      state = optionsRef.current.setup({ context, width, height, dpr })
    }

    const paint = () => {
      if (!state) return
      // Re-applied every frame: a scene is free to install its own transform
      // for a cell or a sprite, and most do.
      context.setTransform(dpr, 0, 0, dpr, 0, 0)
      optionsRef.current.draw({ context, width, height, dpr, state, pointer, frame })
      pointer.lastX = pointer.x
      pointer.lastY = pointer.y
      frame += 1
    }

    /** One frame on the next tick, coalescing however many were asked for. */
    const paintOnce = () => {
      if (pending) return
      pending = requestAnimationFrame(() => {
        pending = 0
        measure()
        paint()
      })
    }
    render.current = paintOnce

    const tick = () => {
      loop = requestAnimationFrame(tick)
      if (visible) paint()
    }

    const start = () => {
      if (loop || reduced) return
      loop = requestAnimationFrame(tick)
    }
    const stop = () => {
      if (!loop) return
      cancelAnimationFrame(loop)
      loop = 0
    }

    const at = (event: PointerEvent) => {
      const rect = stageNode.getBoundingClientRect()
      // The rect is the right thing to subtract here — `clientX` is viewport
      // space and so is the rect — but the difference comes back in *rendered*
      // pixels, and a scene reads `pointer` in the scene pixels `measure()` set
      // up from the untransformed box. Under a CSS scale those two disagree, so
      // divide the transform back out. `rect.width / offsetWidth` is the scale
      // actually in force, whatever produced it, and it is exactly 1 when there
      // is none.
      const scale = stageNode.offsetWidth > 0 ? rect.width / stageNode.offsetWidth : 1
      pointer.x = (event.clientX - rect.left) / (scale || 1)
      pointer.y = (event.clientY - rect.top) / (scale || 1)
      // A frozen loop still owes the user feedback for a drag.
      if (reduced) paintOnce()
    }

    const onEnter = (event: PointerEvent) => {
      pointer.inside = true
      at(event)
      pointer.lastX = pointer.x
      pointer.lastY = pointer.y
    }
    const onMove = (event: PointerEvent) => {
      pointer.inside = true
      at(event)
    }
    const onDown = (event: PointerEvent) => {
      pointer.down = true
      at(event)
      // Capture keeps a drag alive past the edge of the stage, which is where
      // a hard throw naturally ends up.
      stageNode.setPointerCapture(event.pointerId)
    }
    const onUp = (event: PointerEvent) => {
      pointer.down = false
      at(event)
      if (stageNode.hasPointerCapture(event.pointerId)) {
        stageNode.releasePointerCapture(event.pointerId)
      }
    }
    const onLeave = () => {
      pointer.inside = false
      pointer.down = false
      if (reduced) paintOnce()
    }

    stageNode.addEventListener("pointerenter", onEnter)
    stageNode.addEventListener("pointermove", onMove)
    stageNode.addEventListener("pointerdown", onDown)
    stageNode.addEventListener("pointerup", onUp)
    stageNode.addEventListener("pointercancel", onUp)
    stageNode.addEventListener("pointerleave", onLeave)

    const resizes = new ResizeObserver(() => paintOnce())
    resizes.observe(stageNode)

    /*
     * An animation nobody can see is heat. The observer both pauses the loop
     * and, on the way back in, repaints immediately rather than waiting a frame.
     */
    const views = new IntersectionObserver(
      (entries) => {
        visible = entries.some((entry) => entry.isIntersecting)
        if (visible) {
          start()
          paintOnce()
        } else {
          stop()
        }
      },
      { rootMargin: "120px" },
    )
    views.observe(stageNode)

    measure()
    paint()
    start()

    return () => {
      render.current = null
      stop()
      if (pending) cancelAnimationFrame(pending)
      resizes.disconnect()
      views.disconnect()
      stageNode.removeEventListener("pointerenter", onEnter)
      stageNode.removeEventListener("pointermove", onMove)
      stageNode.removeEventListener("pointerdown", onDown)
      stageNode.removeEventListener("pointerup", onUp)
      stageNode.removeEventListener("pointercancel", onUp)
      stageNode.removeEventListener("pointerleave", onLeave)
    }
  }, [reduced])

  return { stageRef, canvasRef, requestRender }
}