/* Premium motion layer, pairs with motion.js. Hide states exist only under html.js-motion.motion-ready (set in <head> when
   reduced motion is off), so no-JS and reduced-motion visitors see everything. Animations use transform, opacity
   and clip-path only; float and drift use the individual translate/rotate/scale properties so they never fight
   a transform that positions an element. Reveal entrances use animation with backwards fill, so hover
   transforms on the same element keep working afterwards. */

/* ---- reveal ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion.motion-ready [data-reveal]:not(.is-in),
  html.js-motion.motion-ready [data-stagger] > :not(.is-in) { opacity: 0; }

  html.js-motion.motion-ready [data-reveal].is-in,
  html.js-motion.motion-ready [data-stagger] > .is-in { animation: mv-up .85s var(--ease) var(--d, 0ms) backwards; }
  html.js-motion.motion-ready [data-reveal="fade"].is-in { animation-name: mv-fade; }
  html.js-motion.motion-ready [data-reveal="scale"].is-in { animation-name: mv-scale; }
  html.js-motion.motion-ready [data-reveal="mask"].is-in { animation-name: mv-mask; animation-duration: 1.1s; }
  html.js-motion.motion-ready [data-reveal="left"].is-in { animation-name: mv-left; }
  html.js-motion.motion-ready [data-reveal="right"].is-in { animation-name: mv-right; }

  /* ---- floating chips ---- */
  [data-float] { animation: mv-float var(--fd, 7s) ease-in-out infinite; }
  [data-float="1"] { --fd: 6s; animation-delay: 0s; }
  [data-float="2"] { --fd: 7.5s; animation-delay: -2s; animation-name: mv-float-b; }
  [data-float="3"] { --fd: 8s; animation-delay: -4s; }
  [data-float="4"] { --fd: 9s; animation-delay: -6s; animation-name: mv-float-b; }

  /* ---- blob drift (motion.js adds a light scroll parallax on the layer itself) ---- */
  [data-blobs] > span { animation: mv-drift 22s ease-in-out infinite alternate; }
  [data-blobs] > span:nth-child(2) { animation-duration: 18s; animation-delay: -6s; }
  [data-blobs] > span:nth-child(3) { animation-duration: 24s; animation-delay: -12s; }

  /* ---- tilt: smooth while the pointer is away, quick while it moves ---- */
  [data-tilt] { transition: transform .5s var(--ease); }
  [data-tilt].is-tilt { transition-duration: .15s; }
}

/* ---- marquee: runs only once motion.js has duplicated the track ---- */
[data-marquee].is-live .pr-marquee-track {
  width: max-content;
  animation: mv-marquee var(--dur, 40s) linear infinite;
}
[data-marquee].is-live:hover .pr-marquee-track,
[data-marquee].is-live:focus-within .pr-marquee-track,
[data-marquee].is-paused .pr-marquee-track { animation-play-state: paused; }

/* ---- counters: digits must not jump width while counting ---- */
[data-counter] { font-variant-numeric: tabular-nums; }

/* ---- story steps stay readable when motion is reduced (no .is-active swapping) ---- */
@media (prefers-reduced-motion: reduce) {
  [data-story] .pr-story-step { opacity: 1; }
}

@keyframes mv-up { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes mv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mv-scale { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mv-mask {
  from { opacity: 0; clip-path: inset(10% 10% round 24px); transform: scale(1.04); }
  to { opacity: 1; clip-path: inset(0 round 24px); transform: none; }
}
@keyframes mv-left { from { opacity: 0; transform: translate3d(-24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes mv-right { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes mv-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: 1deg; } }
@keyframes mv-float-b { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: -1deg; } }
@keyframes mv-drift { from { translate: -2% -3%; scale: 1; } to { translate: 3% 4%; scale: 1.06; } }
@keyframes mv-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media print {
  [data-reveal], [data-stagger] > * { opacity: 1 !important; animation: none !important; }
  [data-float], [data-blobs] > span, [data-marquee] .pr-marquee-track { animation: none !important; }
}

/* ---- site-motion extras, ported to the data-reveal API (all under the reduced-motion guard) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* check-list ticks pop one after another once the list enters view (--i set by motion.js) */
  html.js-motion.motion-ready .check-list li svg { transform: scale(0); transition: transform .45s var(--spring) calc(var(--i, 0) * .09s + .15s); }
  html.js-motion.motion-ready .check-list.is-in li svg { transform: scale(1); }

  /* numbered steps: top rule draws in, number pops */
  .numbered-step { position: relative; }
  .numbered-step::after {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background: var(--violet, #4c58b8); transform-origin: left; transform: scaleX(1);
    transition: transform 1s var(--ease) calc(var(--d, 0ms) + .2s);
  }
  html.js-motion.motion-ready .numbered-step[data-reveal]:not(.is-in)::after { transform: scaleX(0); }
  .navy .numbered-step::after { background: #bcfe90; }
  .numbered-step > span { display: inline-block; transition: transform .5s var(--spring) calc(var(--d, 0ms) + .25s); }
  html.js-motion.motion-ready .numbered-step[data-reveal]:not(.is-in) > span { transform: scale(.6); }

  /* closing bands: one sheen sweep when the band is revealed */
  .batch-cta, .pr-cta { position: relative; overflow: hidden; isolation: isolate; }
  .batch-cta > *, .pr-cta > * { position: relative; z-index: 1; }
  .batch-cta::after, .pr-cta::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, #ffffff80 50%, transparent 65%);
    transform: translateX(-120%);
  }
  .batch-cta.is-in::after, .pr-cta.is-in::after { animation: mv-sheen 1.4s var(--ease) .3s 1 both; }

  /* FAQ: answer eases in each time an item opens */
  details[open] > :not(summary) { animation: mv-up .45s var(--ease) backwards; }
}

@keyframes mv-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }