/* Club Carry motion. Loaded on the carry calculator home page only, after range-board.css.
   Every rule animates transform or opacity, plays once and rests on the static layout.
   Keyframes give only the start state with fill-mode backwards, so the resting style is
   always the final, readable one: nothing here can leave text, the CTA or a number hidden. */
@keyframes mo-rise{from{opacity:0;transform:translateY(var(--mo-rise,24px))}}
@keyframes mo-fade{from{opacity:0}}
@keyframes mo-grow{from{transform:scaleX(0)}}
@keyframes mo-run{from{transform:translateX(-100%)}}
@keyframes mo-label{from{opacity:0;transform:translateX(-8px)}}

@media (prefers-reduced-motion:no-preference){
  /* 1. Hero layers, about 1.8 s in total: the copy settles line by line, then the photo,
     then the heavier example card lands over it. Layout boxes never move. */
  .cc-hero-kicker,.cc-hero-title,.cc-hero-subtitle,.cc-hero-actions,.cc-hero-image,.rb-hero-card{animation:mo-rise var(--mo-dur,700ms) cubic-bezier(.22,1,.36,1) var(--mo-delay,0ms) 1 backwards}
  .cc-hero-kicker{--mo-rise:12px;--mo-dur:600ms}
  .cc-hero-title{--mo-delay:80ms}
  .cc-hero-subtitle{--mo-rise:16px;--mo-delay:200ms}
  .cc-hero-actions{--mo-rise:16px;--mo-delay:320ms}
  .cc-hero-image{--mo-rise:40px;--mo-dur:800ms;--mo-delay:160ms}
  .rb-hero-card{--mo-rise:48px;--mo-dur:800ms;--mo-delay:480ms}
  .cc-hero-visual figcaption{animation:mo-fade 600ms cubic-bezier(.22,1,.36,1) 900ms 1 backwards}
  /* 2. The card then draws its real output: driver, then 7-iron, each value after its bar.
     The axis and ticks stay put so the scale is readable throughout. */
  .rb-hero-bar{animation:mo-grow 760ms cubic-bezier(.22,1,.36,1) var(--mo-bar,820ms) 1 backwards}
  .rb-hero-end{animation:mo-run 760ms cubic-bezier(.22,1,.36,1) var(--mo-bar,820ms) 1 backwards}
  .rb-hero-row b{animation:mo-label 400ms cubic-bezier(.22,1,.36,1) var(--mo-value,1260ms) 1 backwards}
  .rb-hero-seven{--mo-bar:1000ms;--mo-value:1440ms}
}
/* Set by motion.mjs once the first pass is over (or the tab is hidden), so a later
   preference change can never replay the entrance. */
.mo-settled .cc-hero-kicker,.mo-settled .cc-hero-title,.mo-settled .cc-hero-subtitle,.mo-settled .cc-hero-actions,.mo-settled .cc-hero-image,.mo-settled .rb-hero-card,.mo-settled .cc-hero-visual figcaption,.mo-settled .rb-hero-bar,.mo-settled .rb-hero-end,.mo-settled .rb-hero-row b{animation:none}

/* Replay: invisible (and out of the tab order) until motion.mjs confirms it can animate.
   Its 44px row is reserved in range-board.css, so revealing it never shifts the card. */
.rb-replay{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-size:14px;line-height:20px;font-weight:600;white-space:nowrap}
.rb-replay::before{content:'';flex:none;width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.rb-replay:not(.is-ready){visibility:hidden}
@media (hover:hover){.rb-replay:hover{background:var(--accent)}}
.rb-replay:active{background:var(--accent);transform:translateY(1px)}
.rb-replay:focus-visible{outline:2px solid var(--flag);outline-offset:2px}
@media (max-width:360px){
  .rb-replay{gap:4px;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  .rb-replay{visibility:hidden}
}