/* ONEPRO Safety & Compliance — animated SVG icon system.
   Every icon is inline SVG (viewBox 64) drawn for this site; motion is pure CSS. */

.ic{width:100%;height:100%;display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ic *{transform-box:fill-box;transform-origin:center}
.ic .f{fill:currentColor;stroke:none}
.ic .ac{stroke:var(--acc,#FFB627)}
.ic .acf{fill:var(--acc,#FFB627);stroke:none}
.ic .rd{stroke:#FF4560}
.ic .rdf{fill:#FF4560;stroke:none}
.ic .gr{stroke:#26E0A0}
.ic .grf{fill:#26E0A0;stroke:none}
.ic .dim{opacity:.35}
.ic .thin{stroke-width:1.5}
.ic .c{transform-box:view-box;transform-origin:32px 32px}
.ic text{font:800 16px 'Barlow Condensed',sans-serif;fill:currentColor;stroke:none;letter-spacing:.4px;text-anchor:middle}

/* ---- keyframes ---- */
@keyframes k-draw{0%{stroke-dashoffset:1;opacity:1}30%,72%{stroke-dashoffset:0;opacity:1}88%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes k-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@keyframes k-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.14)}24%{transform:scale(1)}36%{transform:scale(1.1)}48%{transform:scale(1)}}
@keyframes k-blink{0%,100%{opacity:1}50%{opacity:.12}}
@keyframes k-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-rock{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes k-shake{0%,70%,100%{transform:translateX(0) rotate(0)}74%{transform:translateX(-2px) rotate(-4deg)}78%{transform:translateX(2px) rotate(4deg)}82%{transform:translateX(-2px) rotate(-3deg)}86%{transform:translateX(1px) rotate(2deg)}90%{transform:translateX(0) rotate(0)}}
@keyframes k-bell{0%,60%,100%{transform:rotate(0)}66%{transform:rotate(16deg)}72%{transform:rotate(-14deg)}78%{transform:rotate(11deg)}84%{transform:rotate(-8deg)}90%{transform:rotate(4deg)}}
@keyframes k-slide{0%{transform:translateX(8px);opacity:0}30%{opacity:1}100%{transform:translateX(-10px);opacity:0}}
@keyframes k-dash{to{stroke-dashoffset:-16}}
@keyframes k-ring{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes k-bar{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes k-peek{0%,100%{transform:translateY(2px)}50%{transform:translateY(-8px)}}
@keyframes k-stamp{0%,55%,100%{transform:translateY(-7px)}66%{transform:translateY(3px)}74%{transform:translateY(0)}}
@keyframes k-needle{0%,100%{transform:rotate(-72deg)}50%{transform:rotate(66deg)}}
@keyframes k-flash{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.9)}}
@keyframes k-dot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
@keyframes k-flip{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.08)}}
@keyframes k-launch{0%,100%{transform:translateY(3px)}50%{transform:translateY(-5px)}}
@keyframes k-flame{0%,100%{transform:scaleY(.8)}50%{transform:scaleY(1.6)}}
@keyframes k-scan{0%{transform:translateY(-15px);opacity:0}15%,85%{opacity:1}100%{transform:translateY(15px);opacity:0}}
@keyframes k-look{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
@keyframes k-rise{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-16px);opacity:0}}
@keyframes k-tilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes k-scanmag{0%,100%{transform:translate(-14px,-10px)}50%{transform:translate(2px,4px)}}
@keyframes k-shine{0%{transform:translateX(-26px);opacity:0}30%,60%{opacity:.7}100%{transform:translateX(26px);opacity:0}}
@keyframes k-wrench{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes k-link{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
@keyframes k-link2{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes k-wave{0%{transform:translateX(0)}100%{transform:translateX(-10px)}}
@keyframes k-flicker{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.1,.94) rotate(-3deg)}50%{transform:scale(.94,1.12) rotate(2deg)}75%{transform:scale(1.06,.98) rotate(-2deg)}}
@keyframes k-wheel{to{transform:rotate(360deg)}}
@keyframes k-drop{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(10px);opacity:0}}
@keyframes k-grow{0%,100%{transform:scale(.85)}50%{transform:scale(1.05)}}
@keyframes k-up{0%{transform:translateY(6px);opacity:0}30%,70%{transform:translateY(0);opacity:1}100%{transform:translateY(-6px);opacity:0}}

/* ---- utility classes (delay/duration via --d / --t) ---- */
.a-draw{stroke-dasharray:1 2;stroke-dashoffset:1;animation:k-draw var(--t,3.2s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-pulse{animation:k-pulse var(--t,2s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-beat{animation:k-beat var(--t,1.6s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-blink{animation:k-blink var(--t,1.2s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-float{animation:k-float var(--t,3s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-spin{animation:k-spin var(--t,8s) linear infinite;animation-delay:var(--d,0s)}
.a-spin-r{animation:k-spin var(--t,8s) linear infinite reverse}
.a-rock{animation:k-rock var(--t,3s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-shake{animation:k-shake var(--t,3s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-bell{animation:k-bell var(--t,3s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-slide{animation:k-slide var(--t,1.4s) linear infinite;animation-delay:var(--d,0s)}
.a-dash{stroke-dasharray:4 4;animation:k-dash var(--t,1s) linear infinite}
.a-ring{animation:k-ring var(--t,2.2s) ease-out infinite;animation-delay:var(--d,0s)}
.a-bar{transform-origin:50% 100%;animation:k-bar var(--t,1.8s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-peek{animation:k-peek var(--t,3s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-stamp{animation:k-stamp var(--t,2.6s) ease-in infinite;animation-delay:var(--d,0s)}
.a-needle{transform-box:view-box;animation:k-needle var(--t,3.6s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-flash{animation:k-flash var(--t,1.5s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-dot{animation:k-dot var(--t,1.2s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-flip{animation:k-flip var(--t,2.4s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-launch{animation:k-launch var(--t,2s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-flame{transform-origin:50% 0;animation:k-flame var(--t,.5s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-scan{animation:k-scan var(--t,2.4s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-look{animation:k-look var(--t,3s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-rise{animation:k-rise var(--t,2s) ease-in infinite;animation-delay:var(--d,0s)}
.a-tilt{animation:k-tilt var(--t,3s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-scanmag{animation:k-scanmag var(--t,3.4s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-shine{animation:k-shine var(--t,2.8s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-wrench{animation:k-wrench var(--t,1.6s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-link{animation:k-link var(--t,2.6s) ease-in-out infinite}
.a-link2{animation:k-link2 var(--t,2.6s) ease-in-out infinite}
.a-flicker{animation:k-flicker var(--t,.9s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-wheel{animation:k-wheel var(--t,.7s) linear infinite}
.a-drop{animation:k-drop var(--t,1.6s) ease-in infinite;animation-delay:var(--d,0s)}
.a-grow{animation:k-grow var(--t,2.4s) ease-in-out infinite;animation-delay:var(--d,0s)}
.a-up{animation:k-up var(--t,2.4s) ease-in-out infinite;animation-delay:var(--d,0s)}

/* Only animate what is on screen (main.js toggles .on) */
[data-watch]:not(.on) *{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .ic *,.scene *{animation:none!important}
  .ic .a-draw{stroke-dashoffset:0}
}