/* VYROX homepage motion, second set (includes/js/vx-motion.js). */

/* Stats strip under the Products / Services doors */
.vxstat{width:100%;background:#fff;text-align:left;padding:12px 4% 0}
.vxstat-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:760px){.vxstat-in{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vxstat-in::before,.vxstat-in::after{content:none!important;display:none!important}
.vxstat b{display:block;font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--vx-ink,#0f2740);font-variant-numeric:tabular-nums}
.vxstat b em{font-style:normal;color:var(--vx-accent,#0071e3)}
.vxstat span{display:block;margin-top:6px;font-size:.86rem;color:var(--vx-ink-muted,#587290);line-height:1.4}
.vxstat > .vxstat-in > div{padding:16px 18px;border-radius:14px;border:1px solid var(--vx-line,rgba(15,39,64,.10));background:#fff}

/* Magnet: the button leans toward the pointer (transform set by JS) and
   springs back when the pointer leaves. Critically damped, no overshoot. */
.vx-mag{transition:transform .45s cubic-bezier(.16,1,.3,1),background .25s,box-shadow .35s cubic-bezier(.16,1,.3,1)!important;will-change:transform}
.vx-mag.is-mag{transition:transform .12s ease-out,background .25s,box-shadow .35s cubic-bezier(.16,1,.3,1)!important}

/* Stagger: children of a grid fade up one after another the first time the
   grid enters the viewport. --i is set per child by JS. */
body#colibri .vx-stagger:not(.is-in) > *{opacity:0}
.vx-stagger.is-in > *{animation:vx-stagger-in .6s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes vx-stagger-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Glare: a soft diagonal sheen sweeps across product photography on hover. */
.vx-glare{position:relative;overflow:hidden}
.vx-glare::after{content:""!important;display:block!important;width:auto!important;height:auto!important;order:0;position:absolute;inset:-40%;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);
  transform:translateX(-60%) rotate(0.001deg);transition:transform .9s cubic-bezier(.16,1,.3,1);opacity:0}
.vx-glare:hover::after{transform:translateX(60%);opacity:1}

/* Gradual blur at the edges of the scrolling modal body: a quiet cue that
   there is more above or below, without a hard rule. */
.vx-modal-body{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%)}

@media(prefers-reduced-motion:reduce){
  body#colibri .vx-stagger:not(.is-in) > *{opacity:1}.vx-stagger.is-in > *{animation:none}
  .vx-mag{transition:none!important;transform:none!important}
  .vx-glare::after{display:none!important}
}