/* ============================================================
   PIVITT MOTION LAYER v1 — sitewide micro-interaction standard
   Component-level choreography. Nothing moves in blocks.
   One easing: cubic-bezier(.22,1,.36,1). Stagger step: 70ms.
   Desktop gets depth (blur focus-pull); touch gets instant
   press feedback. Everything honours prefers-reduced-motion.
   ============================================================ */
:root{--pvm-e:cubic-bezier(.22,1,.36,1)}

/* ---------- component-level stagger: driven inline by JS (cascade-proof) ---------- */

/* ---------- desktop depth of field: hovering one component softens its siblings ---------- */
@media (pointer:fine){
  .gf>*{transition:filter .5s var(--pvm-e),opacity .5s var(--pvm-e),transform .5s var(--pvm-e)}
  .gf.has>*:not(.f){filter:blur(2.5px) saturate(.85);opacity:.55}
  .gf.has>.f{transform:translateY(-3px)}
}

/* ---------- touch press feedback: the site answers the thumb ---------- */
*{-webkit-tap-highlight-color:transparent}
.pv-press{transform:scale(.977) !important;transition:transform .1s ease !important}
a.pv-press,button.pv-press{transform:scale(.96) !important}
.btn-primary:active,.btn-ghost:active,.hcta:active{transform:scale(.96);transition:transform .12s ease}

/* ---------- primary button sheen ---------- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-70%;width:44%;
  transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .8s var(--pvm-e);z-index:1;pointer-events:none}
.btn-primary:hover::after,.btn-primary:focus-visible::after{left:135%}

/* ---------- inputs answer focus ---------- */
main input[type=email]:focus-visible,main input[type=text]:focus-visible,main textarea:focus-visible,main select:focus-visible{
  outline:none;border-color:transparent !important;
  background:linear-gradient(#0d0e16,#0d0e16) padding-box,linear-gradient(135deg,#3366FF,#06B6D4) border-box !important;
  box-shadow:0 0 0 4px rgba(51,102,255,.14);
  transition:box-shadow .35s var(--pvm-e)}

/* ---------- content images materialise ---------- */
img.pv-ld{opacity:0;transform:scale(1.02);filter:blur(8px)}
img.pv-ld.pv-in{opacity:1;transform:none;filter:none;transition:opacity .8s var(--pvm-e),transform .9s var(--pvm-e),filter .8s var(--pvm-e)}

/* ---------- statement accents shimmer once ---------- */
.statement .accent{background-size:220% 100%}
.statement.pv-shim .accent{animation:pvShim 1.5s var(--pvm-e) .45s 1 both}
@keyframes pvShim{from{background-position:120% 0}to{background-position:0% 0}}

/* ---------- nav dropdown choreography ---------- */
.dd-in a{opacity:0;transform:translateY(7px);transition:opacity .4s var(--pvm-e),transform .4s var(--pvm-e)}
.nav-item:hover .dd-in a,.nav-item:focus-within .dd-in a{opacity:1;transform:none}
.dd-in a:nth-child(1){transition-delay:.03s}.dd-in a:nth-child(2){transition-delay:.09s}
.dd-in a:nth-child(3){transition-delay:.15s}.dd-in a:nth-child(4){transition-delay:.21s}
.dd-in a:nth-child(5){transition-delay:.27s}

/* ---------- hero defocus on scroll (JS drives the values) ---------- */
.sv-hero video,.phero video{will-change:filter,transform}

/* ---------- cross-page transitions (progressive enhancement) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:pvOut .28s ease both}
::view-transition-new(root){animation:pvIn .34s ease both}
@keyframes pvOut{to{opacity:0}}
@keyframes pvIn{from{opacity:0}}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  .stag{opacity:1;transform:none;transition:none}
  .gf.has>*:not(.f){filter:none;opacity:1}
  .btn-primary::after{display:none}
  img.pv-ld{opacity:1;transform:none;filter:none}
  .statement.pv-shim .accent{animation:none}
  .dd-in a{opacity:1;transform:none;transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}


/* ---------- mobile menu: items cascade when it actually opens ---------- */
.mobile-menu .mm-inner>*{opacity:0;transform:translateY(12px);transition:opacity .45s var(--pvm-e),transform .45s var(--pvm-e)}
.mobile-menu.open .mm-inner>*{opacity:1;transform:none}
.mobile-menu.open .mm-inner>*:nth-child(1){transition-delay:.05s}
.mobile-menu.open .mm-inner>*:nth-child(2){transition-delay:.13s}
.mobile-menu.open .mm-inner>*:nth-child(3){transition-delay:.21s}
.mobile-menu.open .mm-inner>*:nth-child(4){transition-delay:.29s}
@media (prefers-reduced-motion:reduce){
  .mobile-menu .mm-inner>*{opacity:1;transform:none;transition:none}
  .pv-press{transform:none !important}
}