/* ==========================================================================
   Maddrell Design: motion  (site/motion.css + site/motion.js)
   Paper objects settle, text rises inside its own line, nothing moves with the scroll or the pointer.
   Entrances 400-600ms, the volt wipe up to 1.1s, all on --ease. Each moment plays once per page view.
   Hidden "before" states only exist once motion.js has put .m-js on <html> (no JS = everything painted),
   and never under reduced motion (motion.js adds nothing then). Animated: transform, translate, rotate,
   opacity, clip-path and the registered --pos.
   ========================================================================== */
@property --pos{syntax:"<percentage>";inherits:true;initial-value:50%}

/* ---- page to page: the nav stays put, the page content crossfades with an 8px shift (200ms) ---- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .navx-c{view-transition-name:site-nav}
  ::view-transition-group(site-nav){animation:none}
  ::view-transition-old(root){animation:m-vt-out .2s var(--ease,cubic-bezier(.2,.8,.2,1)) both}
  ::view-transition-new(root){animation:m-vt-in .2s var(--ease,cubic-bezier(.2,.8,.2,1)) both}
  @keyframes m-vt-out{to{opacity:0}}
  @keyframes m-vt-in{from{opacity:0;transform:translateY(8px)}}
}

/* ---- headline lines: each word sits in a clipped line box while it rises (motion.js restores the original markup afterwards) ---- */
.m-w{display:inline-block;clip-path:inset(-.2em -.1em 0 -.1em)}
.m-wi{display:inline-block}

/* ---- "before" states: only with JS and no reduced motion; each section's .m-on removes them ---- */
.m-js .herox:not(.m-on) :is(.hv-h,.b-slip,.b-sticker),
.m-js .wph1:not(.m-on) .wph1-h{opacity:0}
/* batch B: story objects */
.m-js .pricex-b .px-slot:not(.m-on) ~ .px-rail .px-slip{clip-path:inset(0 -20px 100% -20px)}
.m-js .repx-slipbox:not(.m-on) .repx-rows > div{clip-path:inset(0 0 100% 0)}
.m-js .howx-a-stop:not(.m-on) .howx-a-frame img{clip-path:inset(100% 0 0 0)}
.m-js .howx-a-stop:not(.m-on) :is(.howx-a-sticker,.howx-a-slip){opacity:0}
.m-js .howx-a-stop:not(.m-on) .howx-a-flap{scale:1 0}
.m-js .howx-a-stop:not(.m-on)::before,.m-js .howx-a-stop:not(.m-on)::after{opacity:0}
.howx-a-flap{transform-origin:50% 0}
.m-js .wph1:not(.m-on) .wph1-dev{opacity:0}
/* Services: phones have no hover, so the proof bundle closes first and fans out once when the ticket arrives (550ms) */
@media (hover:none) and (prefers-reduced-motion:no-preference){
  .js-svc .svc-item:not(.in) .svc-i{--x:var(--x0,0);--y:var(--y0,0);--r:var(--r0,0deg);--w:var(--w0,40)}
  .svc .svc-i{transition-duration:.55s;transition-delay:calc(var(--d,0s) + var(--k,0)*35ms)}
  .svc .svc-pill{transition-duration:.55s;transition-delay:calc(var(--d,0s) + var(--k,0)*35ms)}
}
/* batch C: polish */
/* Buttons and CTAs: only the arrow nudges 3px on hover, never the label */
@media (prefers-reduced-motion:no-preference){
  :is(.btn,.xa-btn,.px-cta,.pkgx-b-more,.px-offer,.nx-cta,.nx-sheet-cta) svg{transition:translate var(--t-base,.18s) var(--ease,cubic-bezier(.2,.8,.2,1))}
  :is(.btn,.xa-btn,.px-cta,.pkgx-b-more,.px-offer,.nx-cta,.nx-sheet-cta):hover svg{translate:3px 0}
}
/* Envelope form: after the seal and the stamp, the claim ticket rises 12px */
@media (prefers-reduced-motion:no-preference){
  .formx-a .fx-done:not([hidden]) .fx-ticket{animation:m-rise .4s var(--ease,cubic-bezier(.2,.8,.2,1)) 1s backwards}
  @keyframes m-rise{from{opacity:0;translate:0 12px}}
  /* Portal: the highlighted word lands like a sticker (300ms) */
  .m-sticker{animation:m-land .3s var(--ease,cubic-bezier(.2,.8,.2,1)) .1s backwards}
  @keyframes m-land{0%{opacity:0;translate:0 -14px;rotate:-5deg}65%{opacity:1;translate:0 2px;rotate:2.5deg}100%{translate:0 0;rotate:0deg}}
}