/* motion.css — the site's whole motion inventory, in ONE file (RAND 16, 2026-09-29).
   Every rule sits under prefers-reduced-motion: no-preference; the reduce block at the end is belt and braces.
   Law: transform + opacity (+ stroke-dashoffset on the trust icons) only · nothing over 600ms · nothing shifts layout ·
   strong ease-out (--ease-out) for entrances, plain ease for colour · reveals fire once and enhance visible content.
   Inventory: 1 hero rise · 2 scroll reveal · 3 card lift + image swap · 4 button/link states + press · 5 accordion rise ·
   6 announce crossfade · 7 trust-icon draw-on + idle loops · (pdp.css: accord bars, + rotate · bundles.css: rail ticks ·
   shopby.css: dropdown fade, chips, lens underline). */
@media (prefers-reduced-motion: no-preference){
  /* 1 · hero reveal on load: fade + 12px rise, 600ms, children staggered 80ms */
  .fold-hero > *,.page-hero > *,.pdp-hero > *,.sp-hero > *,.fq-hero > *,.ed-hero > *,.ladder-head{animation:vs-rise var(--dur-hero) var(--ease-out) both}
  .fold-hero > :nth-child(2),.ed-hero > :nth-child(2),.page-hero > :nth-child(2),.pdp-hero > :nth-child(2),.sp-hero > :nth-child(2),.fq-hero > :nth-child(2){animation-delay:80ms}
  .page-hero > :nth-child(3),.sp-hero > :nth-child(3),.fq-hero > :nth-child(3){animation-delay:160ms}
  .page-hero > :nth-child(4),.fq-hero > :nth-child(4){animation-delay:240ms}
  @keyframes vs-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  /* 2 · scroll reveal: shell.js adds .rv only to blocks BELOW the first screen, after load (content is visible by
       default and in no-JS); IntersectionObserver adds .rv-in once. Siblings stagger 60ms. */
  .rv{opacity:0;transform:translateY(12px)}
  .rv.rv-in{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
  .rv.rv-in:nth-child(2){transition-delay:60ms}
  .rv.rv-in:nth-child(3){transition-delay:120ms}
  .rv.rv-in:nth-child(4){transition-delay:180ms}
  .rv.rv-in:nth-child(5){transition-delay:240ms}
  .rv.rv-in:nth-child(6){transition-delay:300ms}

  /* 3 · product card: lift + soft shadow, front → back crossfade (300ms) */
  .card{transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) ease}
  .card:hover,.card:focus-within{transform:translateY(-4px)}
  .card-ph img{transition:opacity var(--dur-2) ease}

  /* 4 · buttons, chips, links: colour on hover (200–300ms), press = scale .97 in 160ms */
  .cta,.card-add,.step,.nav-links a,.nav-dd-btn,.nav-ico,.foot-col a,.card-tier,.hero-soft,.link-soft,.origins-link,.pdp-rating,.faq-item summary,.fq-all,.page-sort select{
    transition:background-color var(--dur-2) ease,border-color var(--dur-2) ease,color var(--dur-2) ease,opacity var(--dur-2) ease,transform var(--dur-1) var(--ease-out)}
  .cta:hover{transform:translateY(-1px)}
  .cta:active,.card-add:active,.step:active,.chip:active{transform:scale(.97)}

  /* 5 · accordions (native details): the answer rises in, 300ms */
  details[open] > .faq-a,details[open] > .fq-a,details[open] > .fq-inner,details[open] > .pv-acc-inner{animation:vs-rise var(--dur-2) var(--ease-out)}

  /* 6 · announce bar: two messages crossfade (500ms) every 6s; shell.js rotates, pauses on hover/focus */
  .announce-msg{transition:opacity var(--dur-3) ease,visibility 0s linear var(--dur-3)}
  .announce-msg.is-on{transition-delay:0s}

  /* 7 · red trust bar: icons draw on (600ms, 80ms stagger) once the bar is on screen, then a gentle 3.5s idle loop */
  .trustbar svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
  .trustbar:not(.rv) svg [pathLength],.trustbar.rv-in svg [pathLength]{animation:tb-draw var(--dur-hero) var(--ease-out) forwards}
  .trustbar li:nth-child(2) svg [pathLength]{animation-delay:80ms}
  .trustbar li:nth-child(3) svg [pathLength]{animation-delay:160ms}
  .trustbar li:nth-child(4) svg [pathLength]{animation-delay:240ms}
  .trustbar li:nth-child(5) svg [pathLength]{animation-delay:320ms}
  .trustbar li:nth-child(6) svg [pathLength]{animation-delay:400ms}
  @keyframes tb-draw{to{stroke-dashoffset:0}}
  .trustbar:not(.rv) .tb-i,.trustbar.rv-in .tb-i{animation-duration:3.5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-delay:1.2s}
  .trustbar li:nth-child(2) .tb-i{animation-delay:1.28s}
  .trustbar li:nth-child(3) .tb-i{animation-delay:1.36s}
  .trustbar li:nth-child(4) .tb-i{animation-delay:1.44s}
  .trustbar li:nth-child(5) .tb-i{animation-delay:1.52s}
  .trustbar li:nth-child(6) .tb-i{animation-delay:1.6s}
  .tb-drop{animation-name:tb-wobble;transform-origin:50% 20%}
  .tb-check .tb-tick{animation:tb-retick 4s ease-out 1.6s infinite}
  .tb-pin{animation-name:tb-bounce}
  .tb-lid{animation-name:tb-lid;transform-origin:50% 100%}
  .tb-shield{animation-name:tb-pulse}
  .tb-leaf{animation-name:tb-sway;transform-origin:15% 100%}
  @keyframes tb-wobble{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}60%{transform:rotate(4deg)}}
  @keyframes tb-retick{0%,78%,100%{stroke-dashoffset:0}84%{stroke-dashoffset:1}}
  @keyframes tb-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-2px)}55%{transform:translateY(0)}65%{transform:translateY(-1px)}}
  @keyframes tb-lid{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-1.5px) rotate(-3deg)}}
  @keyframes tb-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
  @keyframes tb-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}
  /* 8 · editorial (proof/origins): perfume figure lift + photo scale, silhouette lift — transform only, 300–500ms */
  .ed-pcard{transition:box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) ease}
  .ed-pcard img,.ed-five-row img{transition:transform var(--dur-3) var(--ease-out)}
  .ed-pcard:hover img,.ed-pcard:focus-within img{transform:scale(1.04)}
  .ed-five-row a:hover img{transform:translateY(-4px)}
  .ed-pcard b,.ed-five-row b{transition:color var(--dur-2) ease}
}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none}
  .announce-msg,.trustbar svg [pathLength]{animation:none;transition:none}
  .trustbar svg [pathLength]{stroke-dasharray:none}
}