/* Portability animation. Tokens only (see vendor/tokens.css); no raw colours. */
.p-root {
  --ax: 30px; --ay: 20px; --bx0: 670px; --by0: 20px;
  --mx: 640px; --my: 0px; --hx: 0px; --hy: -45px;
  box-sizing: border-box;
  max-width: 60rem;
  margin-inline: auto;
  padding: var(--sp-5);
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-3);
  font-family: var(--font-sans);
}
.p-root *, .p-root *::before, .p-root *::after { box-sizing: border-box; }
.p-root[data-layout="tall"] {
  --ax: 50px; --ay: 10px; --bx0: 50px; --by0: 470px;
  --mx: 0px; --my: 460px; --hx: 45px; --hy: 0px;
}
.p-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.p-title { margin: 0 0 var(--sp-2); font-size: var(--fs-3); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
.p-lead { margin: 0 0 var(--sp-5); font-size: var(--fs-1); line-height: var(--lh-snug); color: var(--c-text-muted); max-width: var(--measure); }
.p-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.p-stage { position: relative; }
.p-svg { display: block; width: 100%; height: auto; max-height: 75vh; margin-inline: auto; }
.p-root[data-layout="tall"] .p-svg { max-width: 22rem; max-height: none; }
.p-clock { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; animation: p-clock 12.36s linear both; /* 12 s + the 0.36 s item stagger: 'done' means nothing is still moving */ }

/* positions (CSS transforms on outer groups; animated groups are always inner) */
.p-ha { transform: translate(var(--ax), var(--ay)); }
.p-hb { transform: translate(var(--bx0), var(--by0)); }
.p-bx { transform: translate(calc(var(--ax) + 150px), calc(var(--ay) + 215px)); }
.p-s1 { transform: translate(85px, 170px); }
.p-s2 { transform: translate(215px, 170px); }
.p-s3 { transform: translate(85px, 262px); }
.p-s4 { transform: translate(215px, 262px); }
.p-tickpos { transform: translate(280px, 344px); } /* beside the house label, clear of every tile */

/* artwork */
.p-roof { fill: var(--c-accent-soft); stroke: var(--c-border-strong); stroke-width: 3; stroke-linejoin: round; }
.p-body { fill: var(--c-surface-2); stroke: var(--c-border-strong); stroke-width: 3; }
.p-card { fill: var(--c-bg); stroke: var(--c-border-strong); stroke-width: 2; }
.p-g { fill: currentColor; }
.p-gs { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c-q { color: var(--layer-content); }
.c-s { color: var(--layer-shell); }
.c-r { color: var(--layer-progress); }
.c-t { color: var(--layer-assessment); }
.p-label { display: var(--p-labels, inline); fill: var(--c-text); font: var(--fw-semibold) 19px var(--font-sans); }
.p-home { fill: var(--c-text-muted); font: var(--fw-semibold) 22px var(--font-sans); }
.p-boxback { fill: var(--c-surface-2); stroke: var(--c-border-strong); stroke-width: 3; }
.p-boxfront { fill: var(--c-accent-soft); stroke: var(--c-border-strong); stroke-width: 3; }
.p-lid { fill: var(--c-accent); stroke: var(--c-accent-hover); stroke-width: 3; }
.p-name { display: var(--p-labels, inline); fill: var(--c-text); font: var(--fw-bold) 18px var(--font-sans); }
.p-tickbg { fill: var(--c-success); r: 22px; }
.p-tickmark { fill: none; stroke: var(--c-bg); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.p-arrow { fill: none; stroke: var(--c-text-muted); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.p-ghostf { opacity: 0.6; }

/* animation: one 12 s timeline, four 3 s beats. Beat 1 0-25 %, 2 25-50 %, 3 50-75 %, 4 75-100 %. */
.p-anim { animation-duration: 12s; animation-fill-mode: both; animation-timing-function: linear; transform-box: fill-box; transform-origin: center; }
.p-ai { animation-name: p-ai; }
.p-bi { animation-name: p-bi; }
.p-pop { animation-name: p-pop; }
.p-travel { animation-name: p-travel; }
.p-hop { animation-name: p-hop; animation-timing-function: ease-in-out; }
.p-lidg { animation-name: p-lid; }
.p-ghost { animation-name: p-ghost; }
.p-tick { animation-name: p-tick; }
.p-i1 { --sx: 65px; --sy: 45px; animation-delay: 0s; }
.p-i2 { --sx: -65px; --sy: 45px; animation-delay: 0.12s; }
.p-i3 { --sx: 65px; --sy: -47px; animation-delay: 0.24s; }
.p-i4 { --sx: -65px; --sy: -47px; animation-delay: 0.36s; }

.p-root[data-state="idle"] .p-anim, .p-root[data-state="idle"] .p-clock,
.p-root[data-state="paused"] .p-anim, .p-root[data-state="paused"] .p-clock { animation-play-state: paused; }
.p-root.p-reset .p-anim, .p-root.p-reset .p-clock { animation: none !important; }

@keyframes p-clock { from { opacity: 0; } to { opacity: 0.01; } }
@keyframes p-ai {
  0%, 25% { opacity: 1; transform: none; animation-timing-function: ease-in; } /* visible from frame 0 */
  32% { opacity: 1; transform: translate(var(--sx), var(--sy)) scale(0.5); }
  34%, 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.5); } /* gone before the box appears */
}
@keyframes p-bi {
  0%, 77% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.5); animation-timing-function: ease-out; }
  90%, 100% { opacity: 1; transform: none; }
}
@keyframes p-pop {
  0%, 37% { opacity: 0; transform: translate(0, -30px) scale(0.7); animation-timing-function: ease-out; }
  43%, 92% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes p-travel {
  0%, 50% { transform: none; animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  75%, 100% { transform: translate(var(--mx), var(--my)); }
}
@keyframes p-hop {
  0%, 50% { transform: none; }
  62.5% { transform: translate(var(--hx), var(--hy)); }
  75%, 100% { transform: none; }
}
@keyframes p-lid {
  0%, 43% { transform: translateY(-34px); animation-timing-function: ease-in; }
  50%, 75% { transform: none; animation-timing-function: ease-out; }
  80%, 100% { transform: translateY(-34px); }
}
@keyframes p-ghost { 0%, 40% { opacity: 0.4; } 52%, 100% { opacity: 1; } }
@keyframes p-tick {
  0%, 89% { opacity: 0; transform: scale(0.4); }
  95%, 100% { opacity: 1; transform: none; }
}

/* caption, steps, controls */
.p-meta { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.p-stepno { margin: 0; font-size: var(--fs-n1); font-weight: var(--fw-semibold); color: var(--c-text-muted); }
.p-caption { margin: 0; font-size: var(--fs-1); line-height: var(--lh-snug); font-weight: var(--fw-semibold); min-height: calc(2 * var(--lh-snug) * 1em); }
.p-root[data-layout="tall"] .p-caption { min-height: calc(3 * var(--lh-snug) * 1em); }
.p-dots { display: flex; gap: var(--sp-2); }
.p-dots i { width: 0.75rem; height: 0.75rem; border-radius: var(--r-pill); border: 2px solid var(--c-border-strong); background: transparent; }
.p-dots i.on { background: var(--c-accent); border-color: var(--c-accent); }
.p-controls { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.p-btn {
  min-height: 2.75rem; min-width: 2.75rem; padding: 0 var(--sp-5);
  border-radius: var(--r-2); border: 2px solid var(--c-border-strong);
  background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-sans); font-size: var(--fs-0); font-weight: var(--fw-semibold); line-height: 1; cursor: pointer;
}
.p-btn:hover { background: var(--c-surface-2); }
.p-btn[hidden] { display: none; }
.p-btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* static four-step strip: hidden unless motion is reduced */
.p-strip { display: none; list-style: none; margin: var(--sp-5) 0 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-5); }
.p-step { position: relative; display: grid; gap: var(--sp-2); align-content: start; }
.p-num {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-pill);
  background: var(--c-accent); color: var(--c-on-accent); font-weight: var(--fw-bold); font-size: var(--fs-0);
}
.p-mini--bare { --p-labels: none; } /* tiles are drawn small here; the caption carries the meaning */
.p-mini { display: block; width: 100%; height: auto; max-height: 15rem; }
.p-cap { margin: 0; font-size: var(--fs-0); line-height: var(--lh-snug); font-weight: var(--fw-semibold); }

@media (prefers-reduced-motion: reduce) {
  .p-root *, .p-root *::before, .p-root *::after { animation: none !important; transition: none !important; }
  .p-stage, .p-meta, .p-controls { display: none; }
  .p-strip { display: grid; }
}