/* Search page hero diagrams (26 Sep 2026). One animated card per search page,
   in the homepage "Every pound" card language: flat Charcoal, Fraunces headline
   and counter, Plex Mono labels, the diagram in between. Each plays once when
   it comes into view, then settles. No Replay button (message map, 26 Sep:
   Replay stays on the homepage hero only).
   The markup's default state IS the settled end state, so reduced-motion and
   no-JavaScript visitors see the result with no movement.
   Motion: assets/seo-hero-motion.js adds .is-anim and walks data-in / data-out /
   data-set / data-dim through the steps. Transform, opacity and SVG only. */

.shm { position: relative; box-sizing: border-box; margin: 0; width: 100%; max-width: 460px; justify-self: end; align-self: center; border-radius: 20px; background: #232A31; color: #FAFAF8; padding: 24px 24px 22px; overflow: clip; }
.shm__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 78px; }
.shm__title { margin: 0; max-width: 11em; font: 400 24px/1.15 'Fraunces', Georgia, serif; color: #FAFAF8; }
.shm__meter { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.shm__count { font: 400 56px/1 'Fraunces', Georgia, serif; font-variant-numeric: tabular-nums; color: #FAFAF8; white-space: nowrap; }
.shm__unit { font: 600 13px/1.35 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #AFC4DD; max-width: 13em; }
.shm__art { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.shm__cap { margin: 8px 0 0; min-height: 4.1em; font: 400 21px/1.28 'Fraunces', Georgia, serif; color: #FAFAF8; }
.shm__step { display: inline-block; transition: opacity 220ms cubic-bezier(.2,.8,.2,1), transform 220ms cubic-bezier(.2,.8,.2,1); }
.shm__step.is-out { opacity: 0; transform: translateY(6px); }
.shm__kick { display: block; margin-bottom: 8px; font: 600 13px/1.2 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #AFC4DD; }
.shm__kick:empty { display: none; }

/* SVG type and strokes (shared by all six diagrams) */
.shm__art text { font-family: 'Source Sans 3', system-ui, sans-serif; fill: #FAFAF8; }
.shm__art .m { font-family: 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .02em; text-transform: none; }
.shm__art .lb { fill: #AFC4DD; }
.shm__art .dim { fill: rgba(250, 250, 248, 0.55); }

/* Settled end state (no JS, reduced motion): phase-one-only pieces hidden, dims applied */
.shm:not(.is-anim) [data-out] { display: none; }
.shm:not(.is-anim) [data-dim] { opacity: .28; }
.shm:not(.is-anim) [data-loop], .shm:not(.is-anim) [data-scan] { display: none; }

/* Animated state machine */
.shm.is-anim [data-in], .shm.is-anim [data-out], .shm.is-anim [data-set], .shm.is-anim [data-dim] {
  transform-box: fill-box; transform-origin: center;
  transition: opacity 500ms cubic-bezier(.2,.8,.2,1) var(--d, 0ms), transform 800ms cubic-bezier(.2,.8,.2,1) var(--d, 0ms), stroke-dashoffset 1400ms cubic-bezier(.45,.05,.25,1) var(--d, 0ms);
}
.shm.is-anim [data-in]:not(.is-on), .shm.is-anim [data-out]:not(.is-on) { opacity: 0; }
.shm.is-anim [data-fx="draw"] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.shm.is-anim [data-fx="draw"]:not(.is-on) { stroke-dashoffset: 1; opacity: 1; }
.shm.is-anim [data-fx="grow-x"] { transform-origin: left center; }
.shm.is-anim [data-fx="grow-x"]:not(.is-on) { transform: scaleX(0); opacity: 1; }
.shm.is-anim [data-fx="grow-y"] { transform-origin: center bottom; }
.shm.is-anim [data-fx="grow-y"]:not(.is-on) { transform: scaleY(0); opacity: 1; }
.shm.is-anim [data-fx="pop"]:not(.is-on) { transform: scale(.4); }
.shm.is-anim [data-fx="drop"]:not(.is-on) { transform: translateY(-18px); }
.shm.is-anim [data-set]:not(.is-set) { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r, 0deg)); }
.shm.is-anim [data-dim].is-dim { opacity: .28; }

/* Pulses travel from (--dx, --dy) to where they sit, three times, then stop */
.shm.is-anim [data-loop].is-on { animation: shm-pulse 1300ms cubic-bezier(.45,.05,.55,.95) var(--d, 0ms) 3 both; }
@keyframes shm-pulse {
  0% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(0, 0); opacity: 0; }
}
/* One sweep down the diagram */
.shm.is-anim [data-scan].is-on { animation: shm-scan 1500ms cubic-bezier(.45,.05,.55,.95) both; }
@keyframes shm-scan {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(var(--travel, 240px)); opacity: 0; }
}

@media (max-width: 1100px) {
  .shm { justify-self: stretch; max-width: 520px; margin-inline: 0; }
}
@media (max-width: 560px) {
  .shm { padding: 20px 18px 16px; }
  .shm__count { font-size: 44px; }
  .shm__title { font-size: 19px; }
  .shm__cap { font-size: 18px; }
  .shm__top { min-height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .shm__step { transition: none; }
}