/* ==========================================================================
   ANIMATED LINE ICONS  (.ai-*)
   Hand-drawn 48x48 icons that animate themselves: pathLength="1" plus a
   stroke-dashoffset draws any stroke, groups rise, drop, grow or bounce.
   Every icon RESTS in its finished state, so no-JS, reduced motion and a
   half-played animation all show a complete icon. Driven by anim-icons.js.
   Loaded by the pages that use them (/career/, /why-us/*), not site-wide.
   ========================================================================== */
.ai-ico { display: block; width: 100%; height: 100%; overflow: visible; }
.ai-draw, .ai-check { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ai-lens { transform-origin: 20px 20px; }
.ai-hand { transform-origin: 24px 24px; }
.ai-ripple { opacity: 0.45; transform-origin: 24px 43px; }
.ai-line { transform-origin: 13.5px 0; }
.ai-badge { transform-origin: 39.5px 37px; }
.ai-bar { transform-origin: 0 40px; }

/* ---- the strokes drawing themselves --------------------------------------- */
.ai-ico.is-playing .ai-draw { animation: ai-draw 0.75s cubic-bezier(0.65, 0, 0.35, 1) both; }
.ai-ico.is-playing .ai-draw--2 { animation: ai-draw 0.3s ease 0.5s both; }
.ai-ico.is-playing .ai-check { animation: ai-draw 0.35s ease 0.62s both; }
@keyframes ai-draw { from { stroke-dashoffset: 1; } }

/* ---- per icon -------------------------------------------------------------- */
.ai-ico.is-playing .ai-fig { animation: ai-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ai-ico.is-playing .ai-fig--1 { animation-delay: 0.12s; }
.ai-ico.is-playing .ai-fig--3 { animation-delay: 0.22s; }
@keyframes ai-rise { from { opacity: 0; transform: translateY(10px); } }

.ai-ico.is-playing .ai-lens { animation: ai-sweep 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes ai-sweep { from { transform: translate(-6px, 4px) scale(0.88); } 55% { transform: translate(2px, -1px) scale(1.04); } }

.ai-ico.is-playing .ai-hand--m { animation: ai-turn-m 1.05s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both; }
.ai-ico.is-playing .ai-hand--h { animation: ai-turn-h 1.05s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both; }
@keyframes ai-turn-m { from { transform: rotate(-330deg); } }
@keyframes ai-turn-h { from { transform: rotate(-84deg); } }

.ai-ico.is-playing .ai-pin { animation: ai-drop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes ai-drop { from { opacity: 0; transform: translateY(-20px); } }
.ai-ico.is-playing .ai-ripple { animation: ai-ripple 0.7s ease 0.35s both; }
@keyframes ai-ripple { from { opacity: 0; transform: scale(0.2); } 55% { opacity: 0.85; transform: scale(1.18); } }

.ai-ico.is-playing .ai-line { animation: ai-line 0.32s ease both; }
.ai-ico.is-playing .ai-line--1 { animation-delay: 0.55s; }
.ai-ico.is-playing .ai-line--2 { animation-delay: 0.65s; }
.ai-ico.is-playing .ai-line--3 { animation-delay: 0.75s; }
@keyframes ai-line { from { opacity: 0; transform: scaleX(0); } }
.ai-ico.is-playing .ai-badge { animation: ai-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s both; }
@keyframes ai-pop { from { opacity: 0; transform: scale(0.4); } }

.ai-ico.is-playing .ai-bar { animation: ai-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ai-ico.is-playing .ai-bar--1 { animation-delay: 0.3s; }
.ai-ico.is-playing .ai-bar--2 { animation-delay: 0.42s; }
.ai-ico.is-playing .ai-bar--3 { animation-delay: 0.54s; }
@keyframes ai-grow { from { opacity: 0.35; transform: scaleY(0); } }

.ai-ico.is-playing .ai-dot { animation: ai-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.ai-ico.is-playing .ai-dot--1 { animation-delay: 0.5s; }
.ai-ico.is-playing .ai-dot--2 { animation-delay: 0.6s; }
.ai-ico.is-playing .ai-dot--3 { animation-delay: 0.7s; }
@keyframes ai-bounce { from { opacity: 0; transform: translateY(6px); } 60% { transform: translateY(-3px); } }

/* ---- C: the always-moving set (CSS only, no trigger) ----------------------- */
.ai-loop .ai-hand--m { animation: ai-turn 8s linear infinite; }
.ai-loop .ai-hand--h { animation: ai-turn 48s linear infinite; }
@keyframes ai-turn { to { transform: rotate(360deg); } }
.ai-loop .ai-dot { animation: ai-type 1.4s ease-in-out infinite; }
.ai-loop .ai-dot--2 { animation-delay: 0.16s; }
.ai-loop .ai-dot--3 { animation-delay: 0.32s; }
@keyframes ai-type { 0%, 55%, 100% { transform: none; } 27% { transform: translateY(-4px); } }
.ai-loop .ai-bar { animation: ai-breathe 3s ease-in-out infinite; }
.ai-loop .ai-bar--2 { animation-delay: 0.25s; }
.ai-loop .ai-bar--3 { animation-delay: 0.5s; }
@keyframes ai-breathe { 0%, 100% { transform: none; } 50% { transform: scaleY(0.6); } }
@media (prefers-reduced-motion: reduce) {
  .ai-ico.is-playing [class*="ai-"] { animation: none; }
}