/* Motion layer: hero snowball throw, scroll reveals, hovers and idles.
   Loaded after the page styles. Everything here is switched off by the
   prefers-reduced-motion block at the end; js/motion.js also does nothing then.
   Animations use the individual translate / scale / rotate properties so they
   stack on top of the tilts already set with transform in style-a.css. */

/* ---------- Hero intro (pure CSS, runs on load) ---------- */
.hero-art { animation: hx-settle 1.8s cubic-bezier(.2, .7, .2, 1) both; will-change: translate; }
@keyframes hx-settle { from { scale: 1.07; } }
.hero .eyebrow span { animation: hx-drop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.hero .eyebrow span:last-child { animation-delay: .12s; }
.wm-word > span { animation: hx-letter .75s cubic-bezier(.3, 1.7, .5, 1) both; }
.wm-1 > span:nth-child(1) { animation-delay: .15s; }
.wm-1 > span:nth-child(2) { animation-delay: .21s; }
.wm-1 > span:nth-child(3) { animation-delay: .27s; }
.wm-1 > span:nth-child(4) { animation-delay: .33s; }
.wm-1 > span:nth-child(5) { animation-delay: .39s; }
.wm-2 > span:nth-child(1) { animation-delay: .5s; }
.wm-2 > span:nth-child(2) { animation-delay: .56s; }
.wm-2 > span:nth-child(3) { animation-delay: .62s; }
.wm-2 > span:nth-child(4) { animation-delay: .68s; }
@keyframes hx-letter { 0% { translate: 0 -140%; scale: 1.25 .7; opacity: 0; } 55% { translate: 0 6%; scale: .92 1.08; opacity: 1; } 75% { scale: 1.04 .96; } 100% { translate: 0 0; scale: 1; } }
@keyframes hx-drop { from { translate: 0 -30px; opacity: 0; } }
.hero-tag { animation: hx-stamp .5s cubic-bezier(.3, 1.8, .5, 1) 1s both; }
@keyframes hx-stamp { from { scale: 2.4; opacity: 0; } }
.wordmark.hx-hop .wm-word > span { animation: hx-hop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.wordmark.hx-hop .wm-word > span:nth-child(2n) { animation-delay: .05s; }
.wordmark.hx-hop .wm-word > span:nth-child(3n) { animation-delay: .1s; }
@keyframes hx-hop { 40% { translate: 0 -14%; rotate: -4deg; } }

/* Inner page headers */
.ph-card > * { animation: hx-rise .6s cubic-bezier(.2, 1.2, .4, 1) both; }
.ph-card > :nth-child(2) { animation-delay: .08s; }
.ph-card > :nth-child(3) { animation-delay: .16s; }
.ph-card > :nth-child(4) { animation-delay: .24s; }
@keyframes hx-rise { from { translate: 0 26px; opacity: 0; } }
.ph-fig { animation: hx-pop .7s cubic-bezier(.3, 1.7, .5, 1) .25s both, hx-bob 3.2s ease-in-out 1s infinite; transform-origin: 50% 100%; }
@keyframes hx-pop { from { scale: .2; opacity: 0; } }
@keyframes hx-bob { 50% { translate: 0 -6px; } }
.ph-fig.hx-wind { rotate: -9deg; transition: rotate .22s ease-in; }
.ph-fig.hx-fling { rotate: 7deg; transition: rotate .12s ease-out; }

/* ---------- The thrower who pops up in the home hero ---------- */
.hx-thrower {
  position: absolute; z-index: 3; right: clamp(0px, 1.5vw, 30px); bottom: 0;
  height: clamp(120px, 19vw, 280px); translate: 0 110%; cursor: pointer;
  transform-origin: 50% 100%; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .35));
}
.hx-thrower img { display: block; height: 100%; width: auto; transform-origin: 30% 100%; }
.hx-thrower .hx-i { position: absolute; left: 0; bottom: 0; }
.hx-thrower .hx-t { visibility: hidden; }
.hx-thrower.is-winding .hx-t { visibility: visible; }
.hx-thrower.is-winding .hx-i { visibility: hidden; }
.hx-thrower.is-idle { translate: 0 0; animation: hx-bob 2.6s ease-in-out infinite; }
@media (max-width: 640px) { .hx-thrower { height: 25vw; right: -1vw; } }

.hx-ball {
  position: fixed; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: 58; pointer-events: none;
  border-radius: 50%; border: 3px solid var(--ink);
  background: radial-gradient(circle at 34% 30%, #fff 0 38%, #e4eef3 62%, #b9cfd9 100%);
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .35); will-change: transform;
}
.hx-splat {
  position: fixed; left: 0; top: 0; z-index: 57; pointer-events: none; will-change: transform, opacity;
  transform-origin: 50% 40%;
}
.hx-splat img { display: block; width: 100%; height: auto; }
.hx-chunk {
  position: fixed; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; z-index: 58; pointer-events: none;
  border-radius: 50%; background: #fff; border: 2px solid var(--ink);
}
.hero.hx-shake, .page-hero.hx-shake { animation: hx-shake .32s linear; }
@keyframes hx-shake { 20% { translate: -7px 4px; } 40% { translate: 6px -5px; } 60% { translate: -4px 3px; } 80% { translate: 3px -2px; } }

/* ---------- Scroll reveals (classes added by js/motion.js) ---------- */
.rv {
  opacity: 0; translate: 0 38px; scale: .96;
  transition: opacity .55s ease, translate .75s cubic-bezier(.2, 1.25, .35, 1), scale .75s cubic-bezier(.2, 1.25, .35, 1), transform .15s;
  transition-delay: var(--rv-d, 0ms);
}
.rv.in { opacity: 1; translate: 0 0; scale: 1; }
.row-head.rv { translate: -40px 0; scale: 1; }
.row-head.rv.in { translate: 0 0; }
/* Marker-pen sweep behind the yellow highlights; stays inline so long titles still wrap */
.row-head.in .row-title .hl-y {
  background: linear-gradient(var(--mustard), var(--mustard)) 0 0 / 100% 100% no-repeat;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  animation: hx-marker .6s cubic-bezier(.6, 0, .2, 1) .35s both;
}
@keyframes hx-marker { from { background-size: 0% 100%; } }
.row-head.in .row-title .hl-r { animation: hx-fade .5s ease .35s both; }
@keyframes hx-fade { from { opacity: 0; } }

/* Set pieces that play once their block scrolls in */
.tkn-grid .donut { rotate: -200deg; scale: .5; transition: opacity .5s, rotate 1.2s cubic-bezier(.2, 1, .3, 1), scale 1.2s cubic-bezier(.3, 1.5, .5, 1); }
.tkn-grid.in .donut, .tkn-grid > .in.donut { rotate: 0deg; scale: 1; }
.g-track i { transform-origin: 0 50%; }
.gantt .g-row.rv i { scale: 0 1; transition: scale .9s cubic-bezier(.2, 1, .3, 1) calc(var(--rv-d, 0ms) + .2s); }
.gantt .g-row.rv.in i { scale: 1 1; }
.fact.in b { animation: hx-count .7s cubic-bezier(.3, 1.8, .5, 1) calc(var(--rv-d, 0ms) + .25s) both; }
@keyframes hx-count { from { scale: .2; rotate: -25deg; } }

/* ---------- Idles ---------- */
.cast img { animation: hx-bob 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.cast li:nth-child(2) img { animation-delay: -.7s; }
.cast li:nth-child(3) img { animation-delay: -1.4s; }
.cast li:nth-child(4) img { animation-delay: -2.1s; }
.cast li.in img { animation: hx-pop .6s cubic-bezier(.3, 1.7, .5, 1) var(--rv-d, 0ms) both, hx-bob 2.8s ease-in-out 1s infinite; }
.quote-grid > img { animation: hx-sway 4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hx-sway { 50% { rotate: 3deg; } }
.pb-cta { animation: hx-nudge 5s ease-in-out 2s infinite; }
@keyframes hx-nudge { 0%, 86%, 100% { rotate: 0deg; scale: 1; } 89% { rotate: -6deg; scale: 1.1; } 92% { rotate: 5deg; scale: 1.1; } 95% { rotate: -2deg; scale: 1.04; } }
.countdown .num.hx-tick { animation: hx-tick .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hx-tick { from { translate: 0 -10px; opacity: .3; } }

/* ---------- Hovers ---------- */
.btn { transition: transform .08s, box-shadow .08s, rotate .25s cubic-bezier(.3, 1.8, .5, 1), scale .25s cubic-bezier(.3, 1.8, .5, 1); }
.btn:hover { rotate: -1.5deg; scale: 1.03; }
.btn:active { scale: .97; }
.btn[disabled]:hover { rotate: none; scale: none; }
.btn.red, .btn.yellow {
  background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat;
}
.btn.red:hover, .btn.yellow:hover { animation: hx-shine .7s ease-out; }
@keyframes hx-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.thumb img { transition: scale .5s cubic-bezier(.2, .8, .2, 1); }
.thumb:hover img { scale: 1.06; }
.cast li:hover img { animation: hx-jump .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hx-jump { 40% { translate: 0 -16px; scale: 1.05 .95; } 70% { translate: 0 0; scale: .96 1.04; } }
.cast-wall li { transition: translate .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s; }
.cast-wall li:hover { translate: 0 -6px; box-shadow: 7px 9px 0 var(--ink); }
.cast-wall li:hover img { animation: hx-jump .55s cubic-bezier(.3, 1.6, .5, 1); }
.pu, .fact, .road li, .locks li { transition: translate .25s cubic-bezier(.3, 1.6, .5, 1), rotate .25s cubic-bezier(.3, 1.6, .5, 1); }
.pu:hover, .fact:hover { translate: 0 -5px; rotate: -1deg; }
.road li:hover, .locks li:hover { translate: 0 -4px; }
.nav-links a { transition: color .15s, border-color .15s, background-color .15s; }
.mini-logo img:first-child { transition: rotate .6s cubic-bezier(.3, 1.6, .5, 1); }
.mini-logo:hover img:first-child { rotate: 360deg; }
.faq-list details[open] > :not(summary), details.transcript[open] > :not(summary) { animation: hx-rise .35s ease-out both; }

/* Scroll progress line under the nav */
.hx-progress { position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--red); transform-origin: 0 50%; scale: 0 1; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; translate: none; scale: none; }
  .tkn-grid .donut, .gantt .g-row.rv i { rotate: none; scale: none; }
  .hx-thrower, .hx-ball, .hx-splat, .hx-chunk, .hx-progress { display: none; }
  .btn:hover, .pu:hover, .fact:hover, .cast-wall li:hover, .road li:hover, .locks li:hover, .thumb:hover img, .mini-logo:hover img:first-child { rotate: none; scale: none; translate: none; }
}