/* Animated travel icons (code versions of the eight GIFs on the National Service page).
   Flat shapes, brand-warm palette, each with its own gentle loop. Use: <svg class="ai ai-NAME">…</svg>. */
.ai { display: block; width: 120px; height: 120px; overflow: visible; }
/* only the animated parts measure their origin from their own box; static shapes keep their plain SVG transforms */
.ai .spark, .ai .body, .ai .iris, .ai .flash, .ai .sign, .ai .beat, .ai .ping, .ai .pin, .ai .stem, .ai .leaf, .ai .pack, .ai .shadow, .ai .needle, .ai .smoke, .ai .win { transform-box: fill-box; }
.ai .spark { transform-origin: center; animation: ai-spark 2.4s ease-in-out infinite; }
.ai .spark.b { animation-delay: 1.2s; }
@keyframes ai-spark { 0%, 100% { transform: scale(.4) rotate(0); opacity: 0; } 40%, 60% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* 1 binoculars: scan left and right, the lenses glint */
.ai-binocular .body { transform-origin: 50% 70%; animation: ai-scan 3.6s ease-in-out infinite; }
.ai-binocular .glint { animation: ai-glint 3.6s ease-in-out infinite; }
@keyframes ai-scan { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes ai-glint { 0%, 30%, 100% { opacity: 0; } 40%, 55% { opacity: 1; } }

/* 2 camera: the aperture closes and opens, a flash pops */
.ai-camera .iris { transform-origin: center; animation: ai-iris 2.8s ease-in-out infinite; }
.ai-camera .flash { transform-origin: center; animation: ai-flash 2.8s ease-out infinite; }
@keyframes ai-iris { 0%, 40%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(60deg) scale(.35); } 60% { transform: rotate(0) scale(1); } }
@keyframes ai-flash { 0%, 46%, 100% { opacity: 0; transform: scale(.3); } 52% { opacity: 1; transform: scale(1.4); } 62% { opacity: 0; transform: scale(1.8); } }

/* 3 open sign: swings on its nail */
.ai-open .sign { transform-origin: 50% 0%; animation: ai-swing 2.6s ease-in-out infinite; }
@keyframes ai-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

/* 4 heart: beats inside a soft ring that pings out */
.ai-heart .beat { transform-origin: center; animation: ai-beat 1.4s ease-in-out infinite; }
.ai-heart .ping { transform-origin: center; animation: ai-ping 1.4s ease-out infinite; }
@keyframes ai-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.98); } 45% { transform: scale(1.1); } }
@keyframes ai-ping { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.3); opacity: 0; } }

/* 5 map: the route draws itself, the pin drops and bounces */
.ai-map .route { stroke-dasharray: 4 5; animation: ai-route 3s linear infinite; }
.ai-map .pin { transform-origin: 50% 100%; animation: ai-pin 3s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes ai-route { from { stroke-dashoffset: 54; } to { stroke-dashoffset: 0; } }
@keyframes ai-pin { 0%, 55% { transform: translateY(-14px) scale(.9); opacity: 0; } 70% { transform: translateY(0) scale(1); opacity: 1; } 78% { transform: scale(1.08, .9); } 86%, 100% { transform: scale(1); opacity: 1; } }

/* 6 flower: the bloom sways on its stem, leaves breathe */
.ai-flower .stem { transform-origin: 50% 100%; animation: ai-sway 3s ease-in-out infinite; }
.ai-flower .leaf { transform-origin: 0% 100%; animation: ai-leaf 3s ease-in-out infinite; }
.ai-flower .leaf.r { transform-origin: 100% 100%; animation-delay: .4s; }
@keyframes ai-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes ai-leaf { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* 7 backpack: hops, lands with a squash */
.ai-bag .pack { transform-origin: 50% 100%; animation: ai-hop 2.2s cubic-bezier(.4, 0, .3, 1) infinite; }
.ai-bag .shadow { transform-origin: center; animation: ai-shadow 2.2s cubic-bezier(.4, 0, .3, 1) infinite; }
@keyframes ai-hop { 0%, 60%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-12px) scale(.98, 1.03); } 66% { transform: scale(1.05, .94); } }
@keyframes ai-shadow { 0%, 60%, 100% { transform: scale(1); opacity: .25; } 25% { transform: scale(.7); opacity: .12; } }

/* 8 compass: the needle searches and settles north */
.ai-compass .needle { transform-origin: center; animation: ai-needle 4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes ai-needle { 0% { transform: rotate(0); } 18% { transform: rotate(70deg); } 34% { transform: rotate(-40deg); } 48% { transform: rotate(18deg); } 60% { transform: rotate(-6deg); } 70%, 100% { transform: rotate(0); } }

/* 9 house: smoke curls up from the chimney, the windows glow warm in turn */
.ai-house .smoke { transform-origin: center; animation: ai-smoke 2.6s ease-out infinite; }
.ai-house .smoke.b { animation-delay: 1.3s; }
.ai-house .win { animation: ai-glow 2.6s ease-in-out infinite; }
.ai-house .win.b { animation-delay: 1.3s; }
@keyframes ai-smoke { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(6px, -20px) scale(1.7); opacity: 0; } }
@keyframes ai-glow { 0%, 100% { fill: #FFE29A; } 50% { fill: #FFF6D6; } }
@media (prefers-reduced-motion: reduce) { .ai * { animation: none !important; } .ai .spark, .ai-camera .flash, .ai-heart .ping, .ai-house .smoke { opacity: 0; } .ai-map .pin { opacity: 1; } }