/* =============================================================================
   PlanWatch "Three steps. Two minutes." (direction B, "Site Plan")

   Three cards joined by one hand-drawn pen line. The line underlines the postcode in 01 and circles it, rises and
   loops over the gap to 02 and circles the radius, loops again and drops into 03, where it cradles the email.
   Each card's icon plays its own short story as the line reaches it.

   Markup: the homepage (public/index.html, #steps). Motion: three-steps.js.

   Rules this file keeps:
   - The markup is the END state. With no JavaScript, or with reduced motion, every icon is still and complete.
     three-steps.js adds .is-armed (pre-state) and then .is-on per card (plays the story); .is-instant shows a
     card's end state at once (a fast flick, or the card leaving the screen mid-story).
   - Motion is transform, opacity and stroke only. Nothing here changes layout.
   - Icons follow the header switch's icons: flat fills, one dark outline, the same palette.
   - Uses B's tokens (tokens.css) when the page has them; works without them.
   ========================================================================== */

.pw-steps {
  --pw-pen: var(--amber, #F59E0B);       /* the marker */
  --pw-gap: 56px;                        /* between cards: room for the line to loop */
  --pw-band: 56px;                       /* above the cards: room for the loops */
  --pw-rail: 0px;                        /* stacked layout: the column the line runs down */
  --pw-spring: cubic-bezier(.34, 1.4, .64, 1);
  --pw-out: cubic-bezier(.16, 1, .3, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  .pw-steps { --pw-spring: linear(0, 0.0732, 0.2486, 0.4678, 0.6859, 0.8734, 1.015, 1.1068, 1.1529, 1.1626, 1.1467, 1.1161, 1.0799, 1.045, 1.0157, 0.9941, 0.9807, 0.9744, 0.9737, 0.9769, 0.9822, 0.9881, 0.9937, 0.9982, 1); }
}

/* ------------------------------------------------------------------ layout ---- */
.pw-steps-board { position: relative; padding-top: var(--pw-band); }
.pw-steps-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pw-gap);
  margin: 0; padding: 0; list-style: none;
}
.pw-step {
  --tone: var(--amber, #F59E0B); --tone-ink: var(--amber-ink, #8A4B04); --tone-soft: var(--amber-soft, #FFF0CF); --tone-wash: var(--amber-wash, #FFF8EA);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 12px; border-radius: var(--r-lg, 20px);
}
.pw-step[data-tone="blue"] { --tone: var(--blue, #2E62F0); --tone-ink: var(--blue-ink, #1F47B8); --tone-soft: var(--blue-wash, #EAF0FF); --tone-wash: var(--blue-wash, #EAF0FF); }
.pw-step[data-tone="green"] { --tone: var(--green, #16A34A); --tone-ink: var(--green-ink, #15803D); --tone-soft: var(--green-wash, #E7F7EC); --tone-wash: var(--green-wash, #E7F7EC); }

/* The card's surface lives on ::before, its lifted shadow and tone ring on ::after, so a card can lift while
   its content (and the pen line drawn over it) stays exactly where it is. */
.pw-step::before, .pw-step::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  transition: transform 460ms var(--pw-spring), opacity 260ms var(--pw-out);
}
.pw-step::before { background: var(--sheet, #FFFFFF); box-shadow: var(--sh-1, 0 0 0 1px #E7E4DD); }
.pw-step::after {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tone) 42%, transparent), 0 24px 44px -24px rgba(17, 18, 20, .34);
  opacity: 0;
}
.pw-step.is-current::before, .pw-step.is-current::after { transform: translateY(-5px); }
.pw-step.is-current::after { opacity: 1; }

/* The stage: drawing paper tinted with the card's tone; the icon fills it. */
.pw-step-art {
  position: relative; aspect-ratio: 300 / 128; border-radius: 14px; overflow: hidden;
  background-color: var(--tone-wash);
  background-image: linear-gradient(var(--scrim, rgba(17, 18, 20, .045)) 1px, transparent 1px), linear-gradient(90deg, var(--scrim, rgba(17, 18, 20, .045)) 1px, transparent 1px);
  background-size: 16px 16px; background-position: -1px -1px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 14%, transparent);
}
.pw-step-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.pw-step-body { display: grid; gap: 8px; padding: 18px 12px 10px; }
.pw-step-t {
  display: flex; align-items: center; gap: 11px; margin: 0;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink, #111214);
}
.pw-step-n {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px;
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0;
  background: var(--tone-soft); color: var(--tone-ink);
  transition: transform 420ms var(--pw-spring);
}
.pw-step.is-current .pw-step-n { transform: scale(1.12); }
.pw-step-body p { margin: 0; color: var(--ink-2, #3F434A); font-size: 15px; line-height: 1.55; text-wrap: pretty; }

/* The pen: an SVG laid over the board by three-steps.js. Many short strokes, each with its own width, make one
   line with pen pressure; each is revealed with stroke-dashoffset. Multiply lets the outlines under the marker
   show through, as ink does on paper. */
.pw-steps-pen { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; overflow: visible; mix-blend-mode: multiply; }
.pw-steps-pen path { fill: none; stroke: var(--pw-pen); stroke-linecap: round; stroke-linejoin: round; }

/* Stacked (tablets and phones): one column with a rail on the left; the line runs down the rail and dips into
   each card. */
@media (max-width: 899px) {
  .pw-steps { --pw-gap: 60px; --pw-band: 6px; --pw-rail: 34px; }
  .pw-steps-board { padding-left: var(--pw-rail); }
  .pw-steps-list { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 420px) {
  .pw-steps { --pw-rail: 30px; --pw-gap: 58px; }
  .pw-step { padding: 10px; }
  .pw-step-body { padding: 16px 10px 8px; }
  .pw-step-t { font-size: 18px; }
}

/* =============================================================== icons ===== */
.pw-step-ico {
  --i-line: #1C1E22;
  --hz-wall: #F4E9DA; --hz-roof: #5B6170; --hz-chim: #B9826A; --hz-glass: #DCE4EE; --hz-lit: #FFD04F;
  --dc-b: #2E62F0; --dc-r: #C8553D; --dc-g: #3E9B5C; --dc-a: #F59E0B;
  --tz-top: #A5D9AA; --tz-trunk: #8A6A4F;
  --red-line: #E5412D;
  --sr-field: #FFFFFF; --sr-glass: #DCE4EE; --sr-handle: #F59E0B; --sr-btn: #FFBE3B; --sr-ring: rgba(245, 158, 11, .32); --sr-ph: #8C9098;
  --tr-park: #DCEFD5; --tr-road: #FFFFFF; --tr-case: #E4DED2; --tr-water: #D2E0FF; --tr-blue: #2E62F0; --tr-blue-ink: #1F47B8; --tr-fill: rgba(46, 98, 240, .09);
  --em-back: #E9DAC1; --em-pocket: #FBF1E0; --em-flap: #FFF7E9; --em-flap-in: #F0E1C8; --em-card: #FFFFFF; --em-line: #D5D1C7; --em-new: #FFD98A; --em-badge: #F59E0B;
  overflow: hidden;
}
.pw-step-ico * { transform-box: view-box; transform-origin: 0 0; }
.pw-pen-target { fill: none; stroke: none; }

/* ---- shared: houses, trees, ground ---- */
.i-ground { fill: none; stroke: var(--i-line); stroke-width: 1.8; stroke-linecap: round; }
.hz-wall { fill: var(--hz-wall); stroke: var(--i-line); stroke-width: 1.5; }
.hz-roof { fill: var(--hz-roof); stroke: var(--i-line); stroke-width: 1.5; stroke-linejoin: round; }
.hz-chim { fill: var(--hz-chim); stroke: var(--i-line); stroke-width: 1.4; }
.hz-glass { fill: var(--hz-glass); }
.hz-lit { fill: var(--hz-lit); }
.hz-bars { fill: none; stroke: var(--i-line); stroke-width: .8; }
.hz-frame { fill: none; stroke: var(--i-line); stroke-width: 1.2; }
.hz-door { stroke: var(--i-line); stroke-width: 1.2; }
.dc-b { fill: var(--dc-b); } .dc-r { fill: var(--dc-r); } .dc-g { fill: var(--dc-g); } .dc-a { fill: var(--dc-a); }
.tz-trunk { fill: none; stroke: var(--i-line); stroke-width: 1.5; stroke-linecap: round; }
.tz-top { fill: var(--tz-top); stroke: var(--i-line); stroke-width: 1.5; }

/* ---- 01 · search (end state) ---- */
.sr-field { fill: var(--sr-field); stroke: var(--i-line); stroke-width: 2.1; }
.sr-drop { fill: var(--i-line); opacity: .1; }
.sr-ring { fill: none; stroke: var(--sr-ring); stroke-width: 4; opacity: 0; }
.sr-glass { fill: var(--sr-glass); stroke: var(--i-line); stroke-width: 2.1; }
.sr-glint { fill: none; stroke: #FFFFFF; stroke-width: 1.5; stroke-linecap: round; }
.sr-handle { fill: var(--sr-handle); stroke: var(--i-line); stroke-width: 1.7; }
.sr-ph { font: 500 14px/1 var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); fill: var(--sr-ph); opacity: 0; letter-spacing: -0.01em; }
.sr-ch { font: 600 18px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); fill: var(--i-line); letter-spacing: 0; }
.sr-caret { fill: var(--i-line); opacity: 0; }
.sr-btn { fill: var(--sr-btn); stroke: var(--i-line); stroke-width: 2; }
.sr-arrow { fill: none; stroke: var(--i-line); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sr-site { fill: none; stroke: var(--red-line); stroke-width: 1.9; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* ---- 02 · track (end state) ---- */
.tr-park { fill: var(--tr-park); }
.tr-water { fill: none; stroke: var(--tr-water); stroke-width: 9; stroke-linecap: round; }
.tr-case { fill: none; stroke: var(--tr-case); stroke-width: 12.5; stroke-linecap: round; }
.tr-road { fill: none; stroke: var(--tr-road); stroke-width: 9; stroke-linecap: round; }
.tr-fill { fill: var(--tr-fill); }
.tr-edge { fill: none; stroke: var(--tr-blue); stroke-width: 2; stroke-dasharray: 6 4.4; }
.tr-pulse circle { fill: none; stroke: var(--tr-blue); stroke-width: 2; }
.tr-pulse { opacity: 0; }
.tr-dim { fill: none; stroke: var(--tr-blue); stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.tr-tick { fill: none; stroke: var(--tr-blue); stroke-width: 1.5; stroke-linecap: round; }
.tr-label-t { font: 600 10.5px/1 var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); fill: var(--tr-blue-ink); letter-spacing: 0; }
.tr-shadow { fill: var(--i-line); opacity: .16; }
.tr-pin-body { fill: var(--tr-blue); stroke: var(--i-line); stroke-width: 2; stroke-linejoin: round; }
.tr-pin-dot { fill: #FFFFFF; stroke: var(--i-line); stroke-width: 1.5; }

/* ---- 03 · email (end state: open, the alert card out) ---- */
.em-spot { fill: none; stroke: var(--green, #16A34A); stroke-width: 1.6; stroke-dasharray: 4 4; opacity: 0; }
.em-shadow { fill: var(--i-line); opacity: .1; }
.em-streaks path { fill: none; stroke: var(--i-line); stroke-width: 2; stroke-linecap: round; opacity: .35; }
.em-streaks { opacity: 0; }
.em-back { fill: var(--em-back); stroke: var(--i-line); stroke-width: 2.1; }
.em-flap-in { fill: var(--em-flap-in); stroke: var(--i-line); stroke-width: 2.1; stroke-linejoin: round; }
.em-card-b { fill: var(--em-card); stroke: var(--i-line); stroke-width: 1.9; }
.em-plot { fill: rgba(229, 65, 45, .08); }
.em-red { fill: none; stroke: var(--red-line); stroke-width: 1.8; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.em-line { fill: var(--em-line); }
.em-new { fill: var(--em-new); }
.em-pocket { fill: var(--em-pocket); stroke: var(--i-line); stroke-width: 2.1; stroke-linejoin: round; }
.em-flap { opacity: 0; }
.em-flap-out { fill: var(--em-flap); stroke: var(--i-line); stroke-width: 2.1; stroke-linejoin: round; }
.em-seal { fill: var(--em-badge); stroke: var(--i-line); stroke-width: 1.5; }
.em-ping-ring { fill: none; stroke: var(--em-badge); stroke-width: 2; opacity: 0; }
.em-badge { fill: var(--em-badge); stroke: var(--i-line); stroke-width: 1.6; }

/* ============================================================ pre-state ===== */
/* Armed by three-steps.js, before the pen reaches a card. */
.pw-steps.is-armed .pw-step:not(.is-on) .sr-ph { opacity: 1; }
.pw-steps.is-armed .pw-step:not(.is-on) .sr-ch { opacity: 0; }
.pw-steps.is-armed .pw-step:not(.is-on) .sr-caret { animation: pw-blink 1.1s steps(1, end) infinite; }
.pw-steps.is-armed .pw-step:not(.is-on) .sr-site { stroke-dashoffset: 1; }
.pw-steps.is-armed .pw-step:not(.is-on) .sr-h1 .hz-lit, .pw-steps.is-armed .pw-step:not(.is-on) .sr-h2 .hz-lit { opacity: 0; }

.pw-steps.is-armed .pw-step:not(.is-on) .tr-pin, .pw-steps.is-armed .pw-step:not(.is-on) .tr-shadow,
.pw-steps.is-armed .pw-step:not(.is-on) .tr-tick, .pw-steps.is-armed .pw-step:not(.is-on) .tr-label,
.pw-steps.is-armed .pw-step:not(.is-on) .tr-in .hz-lit { opacity: 0; }
.pw-steps.is-armed .pw-step:not(.is-on) .tr-zone { transform: scale(0); }
.pw-steps.is-armed .pw-step:not(.is-on) .tr-dim { stroke-dashoffset: 1; }

.pw-steps.is-armed .pw-step:not(.is-on) .em-fly, .pw-steps.is-armed .pw-step:not(.is-on) .em-shadow { opacity: 0; }
.pw-steps.is-armed .pw-step:not(.is-on) .em-spot { opacity: .55; }
@keyframes pw-blink { 0% { opacity: 1; } 50% { opacity: 0; } }

/* ============================================================== stories ===== */
/* .is-on plays a card's story once. Every animation ends on the end state above. */

/* 01 · search, 1.1 s: focus, type, magnifier, press, red lines, lights */
.pw-step.is-on .sr-ring { animation: sr-ring 1100ms ease-out both; }
.pw-step.is-on .sr-ph { animation: sr-ph 140ms ease-out both; }
.pw-step.is-on .sr-ch { animation: sr-ch 110ms cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(70ms + var(--i) * 40ms); }
.pw-step.is-on .sr-caret-at { animation: sr-caret-at 280ms 70ms steps(7, start) both; }
.pw-step.is-on .sr-caret { animation: sr-caret 1100ms linear both; }
.pw-step.is-on .sr-go { animation: sr-go 1100ms both; }
.pw-step.is-on .sr-mag { animation: sr-mag 1100ms both; }
.pw-step.is-on .sr-site { animation: pw-draw 420ms 540ms cubic-bezier(.65, 0, .35, 1) both; }
.pw-step.is-on .sr-site2 { animation-delay: 660ms; }
.pw-step.is-on .sr-h1 .hz-lit { animation: pw-on 180ms 760ms ease-out both; }
.pw-step.is-on .sr-h2 .hz-lit { animation: pw-on 180ms 880ms ease-out both; }

@keyframes sr-ring { 0% { opacity: 0; } 9% { opacity: 1; } 62% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes sr-ph { from { opacity: 1; } to { opacity: 0; } }
@keyframes sr-ch { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes sr-caret-at { from { transform: translateX(0); } to { transform: translateX(79.6px); } }
@keyframes sr-caret { 0%, 40% { opacity: 1; } 46% { opacity: 0; } 54% { opacity: 1; } 62% { opacity: 0; } 70% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes sr-go {
  0%, 33% { transform: none; animation-timing-function: ease-out; }
  38% { transform: scale(.84); animation-timing-function: ease-in-out; }
  47% { transform: scale(1.09); animation-timing-function: ease-in-out; }
  55% { transform: scale(.97); animation-timing-function: ease-in-out; }
  62%, 100% { transform: none; }
}
@keyframes sr-mag {
  0%, 33% { transform: none; animation-timing-function: ease-out; }
  42% { transform: rotate(-16deg) scale(1.06); animation-timing-function: ease-in-out; }
  52% { transform: rotate(10deg); animation-timing-function: ease-in-out; }
  61% { transform: rotate(-4deg); animation-timing-function: ease-in-out; }
  70%, 100% { transform: none; }
}
@keyframes pw-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pw-on { from { opacity: 0; } to { opacity: 1; } }

/* 02 · track, 1.9 s: the pin drops, the radius springs out and pulses, the houses inside light up */
.pw-step.is-on .tr-pin { animation: tr-pin 640ms both; }
.pw-step.is-on .tr-shadow { animation: tr-shadow 640ms both; }
.pw-step.is-on .tr-zone { animation: tr-zone 620ms 300ms cubic-bezier(.2, .8, .2, 1) both; }
.pw-step.is-on .tr-pulse-a { animation: tr-pulse 900ms 460ms ease-out forwards; }
.pw-step.is-on .tr-pulse-b { animation: tr-pulse 900ms 1000ms ease-out forwards; }
.pw-step.is-on .tr-dim { animation: pw-draw 280ms 660ms cubic-bezier(.65, 0, .35, 1) both; }
.pw-step.is-on .tr-tick { animation: pw-on 120ms 900ms ease-out both; }
.pw-step.is-on .tr-label { animation: tr-pop 340ms 780ms both; }
.pw-step.is-on .tr-in { animation: tr-hop 300ms both; animation-delay: calc(560ms + var(--k) * 120ms); }
.pw-step.is-on .tr-in .hz-lit { animation: pw-on 200ms ease-out both; animation-delay: calc(580ms + var(--k) * 120ms); }

@keyframes tr-pin {
  0% { opacity: 0; transform: translateY(-38px) scale(.92, 1.1); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  12% { opacity: 1; }
  50% { transform: translateY(0) scale(1.16, .82); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  68% { transform: translateY(-6px) scale(.95, 1.06); animation-timing-function: cubic-bezier(.55, 0, .7, .4); }
  82% { transform: translateY(0) scale(1.04, .96); animation-timing-function: ease-out; }
  100% { opacity: 1; transform: none; }
}
@keyframes tr-shadow { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: .2; transform: scale(1.25); } 100% { opacity: .16; transform: none; } }
@keyframes tr-zone { 0% { transform: scale(0); opacity: 0; } 18% { opacity: 1; } 68% { transform: scale(1.07); } 100% { transform: none; opacity: 1; } }
@keyframes tr-pulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes tr-pop { 0% { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.2, .9, .3, 1); } 60% { opacity: 1; transform: scale(1.14); animation-timing-function: ease-in-out; } 100% { opacity: 1; transform: none; } }
@keyframes tr-hop { 0% { transform: none; } 40% { transform: translateY(-3.5px); } 70% { transform: translateY(.6px); } 100% { transform: none; } }

/* 03 · email, 2.1 s: flies in, lands, opens, the alert card rises, a red line is drawn round the house, ping */
.pw-step.is-on .em-spot { animation: em-spot 2100ms ease-out both; }
.pw-step.is-on .em-fly { animation: em-fly 640ms both; }
.pw-step.is-on .em-streaks { animation: em-streaks 640ms linear both; }
.pw-step.is-on .em-shadow { animation: em-shadow 640ms both; }
.pw-step.is-on .em-flap { animation: em-flap 2100ms both; }
.pw-step.is-on .em-flap-open { animation: em-flap-open 2100ms both; }
.pw-step.is-on .em-card { animation: em-card 2100ms both; }
.pw-step.is-on .em-red { animation: pw-draw 360ms 1240ms cubic-bezier(.65, 0, .35, 1) both; }
.pw-step.is-on .em-lit { animation: pw-on 200ms 1420ms ease-out both; }
.pw-step.is-on .em-ping { animation: em-ping 2100ms both; }
.pw-step.is-on .em-ping-ring { animation: em-ring 700ms 1480ms ease-out forwards; }

@keyframes em-spot { 0% { opacity: .55; } 20%, 100% { opacity: 0; } }
@keyframes em-fly {
  0% { opacity: 0; transform: translate(-150px, -82px) rotate(-26deg) scale(.42); animation-timing-function: cubic-bezier(.3, .6, .4, 1); }
  14% { opacity: 1; }
  62% { transform: translate(5px, 3px) rotate(5deg) scale(1.03); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
  74% { transform: translate(0, 0) rotate(0deg) scale(1.08, .88); animation-timing-function: ease-in-out; }
  87% { transform: scale(.97, 1.04); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: none; }
}
@keyframes em-streaks { 0% { opacity: 0; } 12% { opacity: 1; } 48% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes em-shadow { 0% { opacity: 0; transform: scale(.3); } 62% { opacity: .08; transform: scale(.85); } 74% { opacity: .14; transform: scale(1.14); } 100% { opacity: .1; transform: none; } }
@keyframes em-flap {
  0%, 33% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  41% { opacity: 1; transform: scaleY(0); }
  41.1%, 100% { opacity: 0; transform: scaleY(0); }
}
@keyframes em-flap-open {
  0%, 41% { opacity: 0; transform: scaleY(0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  41.1% { opacity: 1; }
  50% { transform: scaleY(1.1); animation-timing-function: ease-in-out; }
  56%, 100% { opacity: 1; transform: none; }
}
@keyframes em-card {
  0%, 43% { opacity: 0; transform: translateY(42px); animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  44% { opacity: 1; }
  58% { transform: translateY(-4px); animation-timing-function: ease-in-out; }
  65%, 100% { opacity: 1; transform: none; }
}
@keyframes em-ping {
  0%, 68% { transform: scale(0); animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  76% { transform: scale(1.32); animation-timing-function: ease-in-out; }
  82% { transform: scale(.9); animation-timing-function: ease-in-out; }
  88%, 100% { transform: none; }
}
@keyframes em-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

/* Hover (a mouse or trackpad), once a card's story has played: a short reminder of it. 0.9 s. Each runs on its
   own wrapper element, so the story itself is never restarted. three-steps.js adds .is-hint. */
.tr-hint circle { fill: none; stroke: var(--tr-blue); stroke-width: 2; }
.em-hint circle { fill: none; stroke: var(--em-badge); stroke-width: 2; }
.tr-hint, .em-hint { opacity: 0; }
.pw-step.is-hint .sr-mag-h { animation: pw-wiggle 820ms both; }
.pw-step.is-hint .sr-go-h { animation: pw-press 620ms 160ms both; }
.pw-step.is-hint .tr-pin-h { animation: tr-bob 700ms both; }
.pw-step.is-hint .tr-hint { animation: tr-pulse 900ms 200ms ease-out forwards; }
.pw-step.is-hint .em-card-h { animation: em-bob 760ms both; }
.pw-step.is-hint .em-hint { animation: em-ring 800ms 140ms ease-out forwards; }
@keyframes pw-wiggle { 0% { transform: none; } 25% { transform: rotate(-15deg) scale(1.06); } 50% { transform: rotate(10deg); } 74% { transform: rotate(-3deg); } 100% { transform: none; } }
@keyframes pw-press { 0% { transform: none; } 35% { transform: scale(.86); } 62% { transform: scale(1.07); } 82% { transform: scale(.98); } 100% { transform: none; } }
@keyframes tr-bob { 0% { transform: none; animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 38% { transform: translateY(-8px) scale(.96, 1.05); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 64% { transform: translateY(0) scale(1.1, .88); animation-timing-function: ease-out; } 82% { transform: scale(.98, 1.02); } 100% { transform: none; } }
@keyframes em-bob { 0% { transform: none; animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 40% { transform: translateY(-7px); animation-timing-function: ease-in-out; } 72% { transform: translateY(1.5px); } 100% { transform: none; } }

/* .is-instant: the end state at once, no story */
.pw-step.is-instant .pw-step-ico * { animation: none !important; }

/* ================================================================= dark ===== */
:root[data-theme="dark"] .pw-steps, .theme-dark .pw-steps { --pw-pen: #FFB52E; }
:root[data-theme="dark"] .pw-steps-pen, .theme-dark .pw-steps-pen { mix-blend-mode: normal; }
:root[data-theme="dark"] .pw-step-ico .i-ground, .theme-dark .pw-step-ico .i-ground { stroke: #8C9098; }
:root[data-theme="dark"] .pw-step-ico, .theme-dark .pw-step-ico {
  --hz-roof: #7A8295; --hz-glass: #313846; --tr-case: #2E3138; --tr-road: #3A3E46; --tr-park: #1F3326; --tr-water: #22314F;
  --tr-fill: rgba(124, 160, 255, .12); --tr-blue: #7CA0FF; --tr-blue-ink: #9DB8FF; --sr-ph: #8C9098;
}

/* ======================================================= reduced motion ===== */
/* A still, fully drawn line and still icons: three-steps.js draws the line once and puts every card in its end
   state; this makes sure nothing in the section moves. */
@media (prefers-reduced-motion: reduce) {
  .pw-steps .pw-step-ico *, .pw-steps .pw-step::before, .pw-steps .pw-step::after, .pw-steps .pw-step-n { animation: none !important; transition: none !important; }
  .pw-steps .pw-step.is-current::before, .pw-steps .pw-step.is-current::after, .pw-steps .pw-step.is-current .pw-step-n { transform: none; }
  .pw-steps .pw-step.is-current::after { opacity: 0; }
}

/* Static mode (motion-gate.ejs): as reduced motion */
.pw-static .pw-steps .pw-step-ico *, .pw-static .pw-steps .pw-step::before, .pw-static .pw-steps .pw-step::after, .pw-static .pw-steps .pw-step-n { animation: none !important; transition: none !important; }