/* service-motion.css — subtle, service-specific motion for service cards.
   transform/opacity/stroke-dashoffset only; paused unless the card is
   on screen (.motif-live) ; static under prefers-reduced-motion. */
.svc-motif{position:absolute;top:18px;right:18px;width:72px;height:72px;color:var(--yellow);opacity:.22;pointer-events:none;
  transition:opacity .35s var(--ease),transform .5s var(--ease);}
.svc-motif svg{width:100%;height:100%;overflow:visible;}
.icon-box:hover .svc-motif,.icon-box:focus-within .svc-motif{opacity:.55;transform:scale(1.06);}
.icon-box>*:not(.svc-motif){position:relative;z-index:1;}
.anchor-target{position:absolute;top:-96px;visibility:hidden;}
.icon-box{scroll-margin-top:96px;}
.services .col-md-6{scroll-margin-top:96px;}

/* every animated part is paused until the card is visible */
.svc-motif svg *{animation-play-state:paused;transform-box:fill-box;transform-origin:center;}
.motif-live .svc-motif svg *{animation-play-state:running;}

@keyframes m-ring{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.25);opacity:0}}
@keyframes m-wave{0%{transform:scale(.4);opacity:.8}100%{transform:scale(2.4);opacity:0}}
@keyframes m-sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes m-scan{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(40px);opacity:1}}
@keyframes m-scan-v{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(20px);opacity:1}}
@keyframes m-lens{0%,100%{transform:scale(1)}50%{transform:scale(.8)}}
@keyframes m-flow{to{stroke-dashoffset:-48}}
@keyframes m-sig{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes m-shackle{0%,40%{transform:translateY(0)}60%,90%{transform:translateY(-7px)}100%{transform:translateY(0)}}
@keyframes m-bolt{0%,60%,100%{opacity:.35}70%{opacity:1}80%{opacity:.5}90%{opacity:1}}
@keyframes m-arc{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes m-spin{to{transform:rotate(360deg)}}
@keyframes m-spin-r{to{transform:rotate(-360deg)}}
@keyframes m-air{to{stroke-dashoffset:-40}}
@keyframes m-layer{0%{transform:translate(-8px,8px);opacity:0}30%,80%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:1}}
@keyframes m-draw{0%{stroke-dashoffset:100}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes m-check{0%,30%{stroke-dashoffset:100}60%,100%{stroke-dashoffset:0}}

.m-ring{animation:m-ring 3.6s var(--ease) infinite}
.m-wave{animation:m-wave 3.2s ease-out infinite}
.m-sweep{animation:m-sweep 4.5s linear infinite;transform-origin:50% 100%;transform-box:view-box}
.m-scan{animation:m-scan 3.6s ease-in-out infinite}
.m-scan-v{animation-name:m-scan-v}
.m-lens{animation:m-lens 3.6s ease-in-out infinite}
.m-flow{stroke-dasharray:6 10;animation:m-flow 3.2s linear infinite}
.m-sig{animation:m-sig 2.4s ease-in-out infinite}
.m-shackle{animation:m-shackle 4.8s var(--ease) infinite}
.m-bolt{animation:m-bolt 3.4s ease-in-out infinite}
.m-arc{animation:m-arc 3.4s ease-in-out infinite}
.m-gear{animation:m-spin 24s linear infinite}
.m-gear.m-rev{animation-name:m-spin-r;animation-duration:18s}
.m-air{stroke-dasharray:6 8;animation:m-air 4.5s linear infinite}
.m-layer{animation:m-layer 4.2s var(--ease) infinite}
.m-draw{stroke-dasharray:100;animation:m-draw 6s ease-in-out infinite}
.m-check{stroke-dasharray:100;animation:m-check 3.6s ease-in-out infinite}
.m-grid,.m-ticks{opacity:.4}
.m-d1{animation-delay:.6s}.m-d2{animation-delay:1.2s}

@media (max-width:767px){.svc-motif{width:54px;height:54px;top:14px;right:14px;opacity:.18}}
@media (prefers-reduced-motion:reduce){
  .svc-motif svg *{animation:none!important}
  .m-draw,.m-check{stroke-dasharray:none}
  .m-layer,.m-ring,.m-wave{opacity:.6}
}

.icon-box[data-motif] h4{padding-right:72px;}
@media (max-width:767px){.icon-box[data-motif] h4{padding-right:56px;}}