/* Vetanico motion layer. Everything here only runs when the visitor has not asked the system to reduce motion. */
@media (prefers-reduced-motion:no-preference){

/* hero triangles: draw-in, then float; parallax offset comes from --mx/--my set by motion.js */
.mo .peaks polygon{stroke-dasharray:1;stroke-dashoffset:1;stroke-linejoin:round;animation:mo-draw 1.6s cubic-bezier(.65,0,.35,1) .25s forwards}
.mo .peaks polygon.mo-b{animation-delay:.7s}
@keyframes mo-draw{to{stroke-dashoffset:0}}
.mo .peaks .mo-par{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.mo .peaks .mo-par-o{transform:translate(calc(var(--mx,0)*-14px),calc(var(--my,0)*-10px))}
.mo .peaks .mo-par-b{transform:translate(calc(var(--mx,0)*20px),calc(var(--my,0)*16px))}
.mo .peaks .mo-fl-o{animation:mo-float-o 7s ease-in-out 2.2s infinite}
.mo .peaks .mo-fl-b{animation:mo-float-b 7s ease-in-out 2.2s infinite}
@keyframes mo-float-o{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,9px)}}
@keyframes mo-float-b{0%,100%{transform:translate(0,0)}50%{transform:translate(-4px,-9px)}}

/* faint drifting triangles behind the hero */
.mo-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mo-bg svg{position:absolute;opacity:0;animation:mo-fade 1.2s ease 1.2s forwards,mo-drift var(--dur,26s) ease-in-out var(--del,0s) infinite alternate}
.mo-bg polygon{fill:none;stroke-width:6;stroke-linejoin:round}
@keyframes mo-fade{to{opacity:var(--op,.18)}}
@keyframes mo-drift{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(var(--dx,30px),var(--dy,-40px)) rotate(var(--rot,25deg))}}
@media (max-width:820px){.mo-bg svg:nth-child(n+4){display:none}}

/* hero text: eyebrow, headline words, lead and buttons rise in turn */
.mo .hero .eyebrow,.mo .hero .lead,.mo .hero .actions,.mo .hero-aud .aud>div,.mo .hero-aud .audnote,.mo .hero-aud h2{opacity:0;animation:mo-up .8s cubic-bezier(.2,.7,.3,1) forwards}
.mo .hero .eyebrow{animation-delay:.05s}
.mo .hero .lead{animation-delay:.75s}
.mo .hero .actions{animation-delay:.95s}
.mo .hero-aud h2{animation-delay:1.1s}
.mo .hero-aud .aud>div{animation-delay:calc(1.15s + var(--i,0)*.08s)}
.mo .hero-aud .audnote{animation-delay:1.6s}
.mo .hero h1 .mo-w{display:inline-block;opacity:0;transform:translateY(.45em);animation:mo-word .7s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(.15s + var(--i,0)*.07s)}
.mo .hero h1.mo-whole{opacity:0;animation:mo-up .8s cubic-bezier(.2,.7,.3,1) .15s forwards}
@keyframes mo-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mo-word{to{opacity:1;transform:none}}

/* reveal on scroll */
.mo-rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i,0)*.08s)}
.mo-rv.mo-in{opacity:1;transform:none}
.rule i{transform-origin:left center}
html[dir="rtl"] .rule i{transform-origin:right center}
.mo-rv .rule i,.mo-rv.rule i{transform:scaleX(0);transition:transform .7s cubic-bezier(.65,0,.35,1) .35s}
.mo-rv.mo-in .rule i,.mo-rv.mo-in.rule i{transform:scaleX(1)}
.mo-rv.mo-in .rule i+i{transition-delay:.55s}

/* cards: lift on hover, small orange triangle slides into the corner */
.ov a,.art,.aud div:not(.soon),.svc,.pts>div{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .2s}
.ov a{position:relative;overflow:hidden}
.ov a::after{content:"";position:absolute;inset-block-start:0;inset-inline-end:0;width:46px;height:46px;background:var(--orange);clip-path:polygon(100% 0,0 0,100% 100%);transform:translate(100%,-100%);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
html[dir="rtl"] .ov a::after{clip-path:polygon(0 0,100% 0,0 100%);transform:translate(-100%,-100%)}
@media (hover:hover){
 .ov a:hover,.art:hover,.aud div:not(.soon):hover{transform:translateY(-6px);box-shadow:0 14px 30px -18px rgba(43,43,43,.35)}
 .ov a:hover::after{transform:none}
 .ov a:hover span{letter-spacing:.02em}
 .svc:hover{transform:translateY(-4px);border-top-color:var(--orange)}
 .pts>div:hover svg{transform:scale(1.15) rotate(-6deg)}
 .pts svg{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
 .brand img{transition:transform .5s cubic-bezier(.2,.9,.3,1.3)}
 .brand:hover img{transform:translateY(-2px) rotate(-4deg) scale(1.06)}
 .btn-primary{transition:background .15s,transform .25s,box-shadow .25s}
 .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(232,104,44,.8)}
}

/* moving strip of lab tests inside the homepage lab card */
.mo-mq{overflow:hidden;margin-block:4px 2px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);direction:ltr}
.mo-mq>div{display:flex;width:max-content;gap:8px;animation:mo-mq 26s linear infinite}
.ov a:hover .mo-mq>div{animation-play-state:paused}
@keyframes mo-mq{to{transform:translateX(-50%)}}
}
/* chip look, with or without motion; without motion the strip is a simple wrapped list */
.ov .mo-mq span{flex:none;background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.82rem;font-weight:500;color:var(--ink);margin:0;letter-spacing:0!important;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.mo-mq>div{display:flex;flex-wrap:wrap;gap:6px}.mo-mq span[aria-hidden]{display:none}.ov .mo-mq span{white-space:normal}}