/* Whimsy lane "home-programs" (prefix hp-). Every colour is a foundation token (var(--brand-*)).
   Motion = transform / opacity / stroke-dashoffset only. All hp- elements are created by hp.js,
   so no-JS shows the plain, complete page. Reduced motion: hp.js renders the final state and the
   block at the end of this file removes any animation. */

/* ------------------------------------------------------------ 1. ABC blocks beside the age badge */
.hp-blocks, .program-card > .hp-blocks { position: absolute; z-index: 2; width: 46px; height: 46px; pointer-events: none; }
.hp-blocks[data-mode="tower"], .program-card > .hp-blocks[data-mode="tower"] { width: 28px; }
.hp-blocks[hidden] { display: none; }
.hp-b { position: absolute; width: 26px; height: 26px; transform-origin: 50% 100%; transform: rotate(var(--hp-r)); }
.hp-b svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hp-b--bl { left: 0; top: 20px; --hp-r: -3deg; --hp-r0: -32deg; --hp-dx: -6px; }
.hp-b--br { left: 20px; top: 20px; --hp-r: 2deg; --hp-r0: 28deg; --hp-dx: 7px; }
.hp-b--tp { left: 10px; top: 0; --hp-r: -6deg; --hp-r0: 40deg; --hp-dx: 3px; }
.hp-blocks[data-mode="tower"] .hp-b--br { display: none; }
.hp-blocks[data-mode="tower"] .hp-b--bl { --hp-r: 2deg; }
.hp-blocks[data-mode="tower"] .hp-b--tp { left: 1px; --hp-r: -5deg; }
.hp-shadow { position: absolute; left: -5px; right: -3px; bottom: -4px; height: 8px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--brand-ink-rgb) / .2), rgb(var(--brand-ink-rgb) / 0)); }

/* block paint: one hue per block */
.hp-c--sun { --hp-c: var(--brand-sun); --hp-on: var(--brand-sun-on); --hp-soft: var(--brand-sun-soft); }
.hp-c--primary { --hp-c: var(--brand-primary); --hp-on: var(--brand-primary-on); --hp-soft: var(--brand-primary-soft); }
.hp-c--leaf { --hp-c: var(--brand-leaf); --hp-on: var(--brand-leaf-on); --hp-soft: var(--brand-leaf-soft); }
.hp-c--berry { --hp-c: var(--brand-berry); --hp-on: var(--brand-berry-on); --hp-soft: var(--brand-berry-soft); }
.hp-c--secondary { --hp-c: var(--brand-secondary); --hp-on: var(--brand-secondary-on); --hp-soft: var(--brand-secondary-soft); }
.hp-c--sky { --hp-c: var(--brand-sky); --hp-on: var(--brand-sky-on); --hp-soft: var(--brand-sky-soft); }
.hp-c--accent { --hp-c: var(--brand-accent); --hp-on: var(--brand-accent-on); --hp-soft: var(--brand-accent-soft); }
.hp-bt { fill: var(--hp-soft); fill: color-mix(in srgb, var(--hp-c) 52%, #fff); }
.hp-bs { fill: var(--hp-c); fill: color-mix(in srgb, var(--hp-c) 70%, var(--brand-ink)); }
.hp-bt, .hp-bs { stroke: none; }
.hp-bf { fill: var(--hp-c); }
.hp-bi { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 1.3; }
.hp-bl { fill: var(--hp-on); font-family: var(--font-heading); font-weight: 700; font-size: 15px; }
.hp-bg { fill: var(--hp-on); }

/* entrance: hidden until the card scrolls in, then each block tumbles down and settles */
.hp-blocks:not(.hp-go):not(.hp-done) > * { opacity: 0; }
.hp-go .hp-b { animation: hp-drop .9s cubic-bezier(.5, 0, .75, .4) both; }
.hp-go .hp-b--br { animation-delay: .18s; }
.hp-go .hp-b--tp { animation-delay: .42s; }
.hp-blocks[data-mode="tower"].hp-go .hp-b--tp { animation-delay: .26s; }
.hp-go .hp-shadow { animation: hp-shade .9s .25s ease-out both; }
@keyframes hp-drop {
  0% { opacity: 0; transform: translate(var(--hp-dx), -62px) rotate(var(--hp-r0)); }
  16% { opacity: 1; }
  55% { transform: translate(0, 0) rotate(var(--hp-r)); animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  70% { transform: translate(0, -7px) rotate(calc(var(--hp-r) * -1.4)); animation-timing-function: cubic-bezier(.6, 0, .8, .5); }
  83% { transform: translate(0, 0) rotate(var(--hp-r)); }
  91% { transform: translate(0, -1.5px) rotate(var(--hp-r)); }
  100% { opacity: 1; transform: translate(0, 0) rotate(var(--hp-r)); }
}
@keyframes hp-shade { from { opacity: 0; transform: scaleX(.3); } to { opacity: 1; transform: none; } }

/* the age badge takes the last block's landing */
.age-badge.hp-bump, .icon-bubble.hp-bump { animation: hp-bump .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hp-bump { 30% { transform: translateY(1.5px) scale(1.03, .94); } 60% { transform: translateY(-1px) scale(.99, 1.03); } }

/* hover / keyboard focus on a card (hp.js adds .hp-nudge): the top block gets a little nudge */
.hp-done.hp-nudge .hp-b--tp { animation: hp-nudge .8s ease-in-out; }
@keyframes hp-nudge {
  25% { transform: translateY(-5px) rotate(calc(var(--hp-r) + 10deg)); }
  52% { transform: translateY(0) rotate(calc(var(--hp-r) - 3deg)); }
  72% { transform: translateY(-1.5px) rotate(calc(var(--hp-r) + 2deg)); }
}

/* ------------------------------------------------------------ 2. program icon moments */
.hp-ic { --hp-moment: 2.2s; overflow: visible; transform-origin: 50% 50%; }
.hp-ic.hp-play { animation: var(--hp-moment) ease-in-out 2; }
.hp-ic.hp-play.hp-once, .hp-ic.hp-play.hp-once * { animation-iteration-count: 1 !important; }

/* rattle: shaken from the handle, beads rattle inside */
.hp-ic--rattle { transform-origin: 84% 84%; }
.hp-ic--rattle.hp-play { animation-name: hp-rattle; }
.hp-ic--rattle .hp-p-bead { transform-box: fill-box; transform-origin: center; }
.hp-ic--rattle.hp-play .hp-p-bead { animation: hp-bead var(--hp-moment) linear 2; }
.hp-ic--rattle.hp-play .hp-p-bead + .hp-p-bead { animation-direction: reverse; }
@keyframes hp-rattle { 0%, 40%, 100% { transform: none; } 6% { transform: rotate(-16deg); } 13% { transform: rotate(13deg); }
  20% { transform: rotate(-10deg); } 27% { transform: rotate(7deg); } 34% { transform: rotate(-3deg); } }
@keyframes hp-bead { 0%, 40%, 100% { transform: none; } 7% { transform: translate(.9px, -.6px); } 14% { transform: translate(-.8px, .7px); }
  21% { transform: translate(.7px, .5px); } 28% { transform: translate(-.5px, -.5px); } }

/* blocks: the top block hops and lands */
.hp-ic--blocks .hp-p-top { transform-box: fill-box; transform-origin: 50% 100%; }
.hp-ic--blocks.hp-play { animation-name: hp-squish; transform-origin: 50% 90%; }
.hp-ic--blocks.hp-play .hp-p-top { animation: hp-hop var(--hp-moment) ease-in-out 2; }
@keyframes hp-hop { 0%, 46%, 100% { transform: none; } 12% { transform: translateY(-4px) rotate(-14deg); }
  22% { transform: translateY(-4.5px) rotate(9deg); } 31% { transform: translateY(0) rotate(0); } 37% { transform: translateY(-1px) rotate(-3deg); } }
@keyframes hp-squish { 0%, 30%, 44%, 100% { transform: none; } 34% { transform: scale(1.05, .95); } }

/* backpack: swings from its handle */
.hp-ic--backpack { transform-origin: 50% 10%; }
.hp-ic--backpack.hp-play { animation-name: hp-sway; }
@keyframes hp-sway { 0%, 46%, 100% { transform: none; } 9% { transform: rotate(10deg); } 19% { transform: rotate(-8deg); }
  28% { transform: rotate(5deg); } 37% { transform: rotate(-2deg); } }

/* sun: the rays turn one step while the core glows */
.hp-ic--sun .hp-p-rays { transform-box: view-box; transform-origin: 50% 50%; }
.hp-ic--sun .hp-p-core { transform-box: fill-box; transform-origin: center; }
.hp-ic--sun.hp-play { animation-name: hp-none; }
.hp-ic--sun.hp-play .hp-p-rays { animation: hp-rays var(--hp-moment) cubic-bezier(.45, 0, .25, 1) 2; }
.hp-ic--sun.hp-play .hp-p-core { animation: hp-core var(--hp-moment) ease-in-out 2; }
@keyframes hp-rays { 0% { transform: none; } 55%, 100% { transform: rotate(45deg); } }
@keyframes hp-core { 0%, 60%, 100% { transform: none; } 28% { transform: scale(1.2); } }
@keyframes hp-none { to { opacity: 1; } }

/* fallback for any other program icon */
.hp-ic--sparkle.hp-play { animation-name: hp-twinkle; }
@keyframes hp-twinkle { 0%, 46%, 100% { transform: none; } 14% { transform: scale(.8) rotate(-12deg); } 30% { transform: scale(1.14) rotate(8deg); } }

/* ------------------------------------------------------------ 3. hero rainbow arc */
.hp-arc-host { position: relative; }
.hp-arc { position: absolute; z-index: -1; overflow: visible; pointer-events: none; }
.hp-arc path { fill: none; stroke-width: 3.8; stroke-linecap: round; stroke-opacity: .6;
  stroke-dasharray: 1 1.2; stroke-dashoffset: 1.1; }
.hp-arc .hp-arc-berry { stroke: var(--brand-berry); }
.hp-arc .hp-arc-secondary { stroke: var(--brand-secondary); }
.hp-arc .hp-arc-sun { stroke: var(--brand-sun); stroke-opacity: .85; }
.hp-arc .hp-arc-leaf { stroke: var(--brand-leaf); }
.hp-arc .hp-arc-primary { stroke: var(--brand-primary); }
.hp-arc .hp-arc-spark { fill: var(--brand-sun); stroke: none; stroke-dasharray: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hp-arc.hp-go path { animation: hp-draw 1.25s calc(var(--i) * .11s + .25s) cubic-bezier(.33, .7, .3, 1) forwards; }
.hp-arc.hp-go .hp-arc-spark { animation: hp-spark .8s calc(1.35s + var(--i) * .2s) cubic-bezier(.34, 1.56, .64, 1) forwards; }
.hp-arc.hp-drawn path { stroke-dashoffset: 0; }
.hp-arc.hp-drawn .hp-arc-spark { opacity: 1; }
@keyframes hp-draw { from { stroke-dashoffset: 1.1; } to { stroke-dashoffset: 0; } }
@keyframes hp-spark { from { opacity: 0; transform: scale(.2) rotate(-60deg); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ 4. stats count-up */
.stat-value.hp-counting { position: relative; color: transparent; }
.hp-count { position: absolute; inset: 0; text-align: inherit; white-space: nowrap; }
.stat-value.hp-landed { animation: hp-land .6s cubic-bezier(.34, 1.56, .64, 1); }
.icon-bubble.hp-landed { animation: hp-hopbubble .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hp-land { 0% { transform: scale(1.1); } 100% { transform: none; } }
@keyframes hp-hopbubble { 35% { transform: translateY(-5px) rotate(-6deg); } 70% { transform: translateY(0) rotate(3deg); } }

/* ------------------------------------------------------------ reduced motion / print: final state, no motion */
@media (prefers-reduced-motion: reduce) {
  .hp-b, .hp-shadow, .hp-ic, .hp-ic *, .hp-arc path, .hp-bump, .stat-value.hp-landed, .icon-bubble.hp-landed { animation: none !important; }
  .hp-blocks > * { opacity: 1 !important; }
  .hp-arc path { stroke-dashoffset: 0; }
  .hp-arc .hp-arc-spark { opacity: 1; }
}
@media print { .hp-blocks > *, .hp-arc .hp-arc-spark { opacity: 1 !important; } .hp-arc path { stroke-dashoffset: 0; } }