/* ==========================================================================
   LA ANIMATED ICONS
   Default state = final frame. Animations run only while a trigger matches:
   - .la-icon.is-in      (added once by la-motion.js when scrolled into view)
   - .la-icon:hover / .group:hover .la-icon   (replays on every hover)
   Brand easing: cubic-bezier(.2,.8,.2,1)  |  base duration: 600ms
   ========================================================================== */
:root { --la-ease: cubic-bezier(.2,.8,.2,1); --la-dur: .6s; }
.la-icon { display: inline-block; vertical-align: middle; overflow: visible; }
.la-icon * { transform-box: fill-box; transform-origin: center; }

/* ---- Shared keyframes ---- */
@keyframes laDraw   { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes laPop    { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes laRise   { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes laBob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes laSlideIn{ from { transform: translateX(-4px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes laPulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes laBlink  { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes laFlap   { 0% { transform: rotate(0); } 40% { transform: rotate(-22deg); } 100% { transform: rotate(0); } }
@keyframes laTick   { from { transform: translateX(-3px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes laLeft   { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-2px); } }
@keyframes laRight  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes laSwing  { 0% { transform: rotate(0); } 30% { transform: rotate(14deg); } 70% { transform: rotate(-10deg); } 100% { transform: rotate(0); } }
@keyframes laFlash  { 0% { fill: transparent; } 40% { fill: currentColor; opacity: 1; } 55% { opacity: .5; } 70% { fill: currentColor; opacity: 1; } 100% { fill: transparent; } }
@keyframes laNeedle { 0% { transform: rotate(-80deg); } 60% { transform: rotate(12deg); } 100% { transform: rotate(0); } }
@keyframes laSpin   { from { transform: rotate(-200deg); } to { transform: rotate(0); } }
@keyframes laType   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes laRing   { 0% { transform: scale(.85); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes laLift   { 0% { transform: translate(0,0); } 50% { transform: translate(2px,-3px); } 100% { transform: translate(0,0); } }
@keyframes laFlame  { 0%,100% { opacity: 1; stroke-width: 2; } 50% { opacity: .3; stroke-width: 3; } }
@keyframes laMerid  { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes laDropIn { 0% { transform: translateY(-8px); opacity: 0; } 60% { transform: translateY(1.5px); opacity: 1; } 100% { transform: translateY(0); } }
@keyframes laTwinkle{ 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(.7) rotate(20deg); } }

/* ---- Trigger scoping. T = any active trigger. ---- */
.la-icon.is-in .la-i-draw,  .la-icon:hover .la-i-draw,  .group:hover .la-icon .la-i-draw  { stroke-dasharray: 60; animation: laDraw var(--la-dur) var(--la-ease) both; }
.la-icon.is-in .la-i-draw2, .la-icon:hover .la-i-draw2, .group:hover .la-icon .la-i-draw2 { stroke-dasharray: 60; animation: laDraw .4s var(--la-ease) .35s both; }
.la-icon.is-in .la-i-pop,   .la-icon:hover .la-i-pop,   .group:hover .la-icon .la-i-pop   { animation: laPop .45s var(--la-ease) .3s both; }
.la-icon.is-in .la-i-p1,    .la-icon:hover .la-i-p1,    .group:hover .la-icon .la-i-p1    { animation: laBob var(--la-dur) var(--la-ease); }
.la-icon.is-in .la-i-p2,    .la-icon:hover .la-i-p2,    .group:hover .la-icon .la-i-p2    { animation: laSlideIn .45s var(--la-ease) .15s both; }
.la-icon.is-in .la-i-pulse, .la-icon:hover .la-i-pulse, .group:hover .la-icon .la-i-pulse { animation: laPulse var(--la-dur) var(--la-ease); }
.la-icon.is-in .la-i-blink, .la-icon:hover .la-i-blink, .group:hover .la-icon .la-i-blink { animation: laBlink .3s linear 2; }
.la-icon.is-in .la-i-flap,  .la-icon:hover .la-i-flap,  .group:hover .la-icon .la-i-flap  { transform-origin: left bottom; animation: laFlap var(--la-dur) var(--la-ease); }
.la-icon.is-in .la-i-tick,  .la-icon:hover .la-i-tick,  .group:hover .la-icon .la-i-tick  { animation: laTick .4s var(--la-ease) .25s both; }
.la-icon.is-in .la-i-dot,   .la-icon:hover .la-i-dot,   .group:hover .la-icon .la-i-dot   { animation: laPop .35s var(--la-ease) both; }
.la-icon .la-i-dot:nth-of-type(2) { animation-delay: .1s !important; } .la-icon .la-i-dot:nth-of-type(3) { animation-delay: .2s !important; } .la-icon .la-i-dot:nth-of-type(4) { animation-delay: .3s !important; }
.la-icon.is-in .la-i-left,  .la-icon:hover .la-i-left,  .group:hover .la-icon .la-i-left  { animation: laLeft var(--la-dur) var(--la-ease); }
.la-icon.is-in .la-i-right, .la-icon:hover .la-i-right, .group:hover .la-icon .la-i-right { animation: laRight var(--la-dur) var(--la-ease); }
.la-icon.is-in .la-i-swing, .la-icon:hover .la-i-swing, .group:hover .la-icon .la-i-swing { transform-origin: top center; animation: laSwing var(--la-dur) var(--la-ease); }
.la-icon.is-in .la-i-l1,    .la-icon:hover .la-i-l1,    .group:hover .la-icon .la-i-l1    { animation: laRise .35s var(--la-ease) .3s both; }
.la-icon.is-in .la-i-l2,    .la-icon:hover .la-i-l2,    .group:hover .la-icon .la-i-l2    { animation: laRise .35s var(--la-ease) .15s both; }
.la-icon.is-in .la-i-l3,    .la-icon:hover .la-i-l3,    .group:hover .la-icon .la-i-l3    { animation: laRise .35s var(--la-ease) 0s both; }
.la-icon.is-in .la-i-flash, .la-icon:hover .la-i-flash, .group:hover .la-icon .la-i-flash { animation: laFlash var(--la-dur) linear; }
.la-icon.is-in .la-i-needle,.la-icon:hover .la-i-needle,.group:hover .la-icon .la-i-needle{ transform-origin: 12px 15px; transform-box: view-box; animation: laNeedle .8s var(--la-ease) both; }
.la-icon.is-in .la-i-spin,  .la-icon:hover .la-i-spin,  .group:hover .la-icon .la-i-spin  { transform-origin: 12px 12px; transform-box: view-box; animation: laSpin .8s var(--la-ease) both; }
.la-icon.is-in .la-i-type path, .la-icon:hover .la-i-type path, .group:hover .la-icon .la-i-type path { transform-origin: left center; animation: laType .35s var(--la-ease) both; }
.la-icon .la-i-type path:nth-child(2) { animation-delay: .2s !important; }
.la-icon.is-in .la-i-ring,  .la-icon:hover .la-i-ring,  .group:hover .la-icon .la-i-ring  { animation: laRing .5s var(--la-ease) both; }
.la-icon.is-in .la-i-lift,  .la-icon:hover .la-i-lift,  .group:hover .la-icon .la-i-lift  { animation: laLift var(--la-dur) var(--la-ease); }
.la-icon.is-in .la-i-flame, .la-icon:hover .la-i-flame, .group:hover .la-icon .la-i-flame { animation: laFlame .2s linear 3; }
.la-icon.is-in .la-i-merid, .la-icon:hover .la-i-merid, .group:hover .la-icon .la-i-merid { animation: laMerid .9s var(--la-ease); }
.la-icon.is-in .la-i-drop,  .la-icon:hover .la-i-drop,  .group:hover .la-icon .la-i-drop  { animation: laDropIn .55s var(--la-ease) both; }
.la-icon.is-in .la-i-twinkle,  .la-icon:hover .la-i-twinkle,  .group:hover .la-icon .la-i-twinkle  { animation: laTwinkle var(--la-dur) var(--la-ease); }
.la-icon.is-in .la-i-twinkle2, .la-icon:hover .la-i-twinkle2, .group:hover .la-icon .la-i-twinkle2 { animation: laTwinkle var(--la-dur) var(--la-ease) .15s; }

/* ---- 3D crystal icons (image set): hover lift 4px + 600ms glow pulse, transform/filter only ---- */
.la-icon-3d { display: inline-flex; align-items: center; justify-content: center; line-height: 0; transition: transform .3s var(--la-ease), filter .3s var(--la-ease); filter: drop-shadow(0 4px 10px rgba(37,99,235,.18)); }
.la-icon-3d img { width: 100%; height: 100%; object-fit: contain; display: block; }
.la-icon-3d:hover, .group:hover .la-icon-3d, .la-icon-3d.is-in { transform: translateY(-4px); animation: laGlow .6s var(--la-ease); filter: drop-shadow(0 8px 18px rgba(6,182,212,.35)); }
@keyframes laGlow { 0% { filter: drop-shadow(0 4px 10px rgba(37,99,235,.18)); } 50% { filter: drop-shadow(0 10px 22px rgba(6,182,212,.55)) brightness(1.08); } 100% { filter: drop-shadow(0 8px 18px rgba(6,182,212,.35)); } }

/* 3D icons carry their own puck: when one is the sole child of an icon box,
   it fills the box and the box loses its own background, border and shadow. */
div:has(> .la-icon-3d:only-child), span:has(> .la-icon-3d:only-child) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
div:has(> .la-icon-3d:only-child) > .la-icon-3d, span:has(> .la-icon-3d:only-child) > .la-icon-3d { width: 100% !important; height: 100% !important; }
.workflow-step-icon .la-icon-3d { width: 44px !important; height: 44px !important; }
/* Navbar mega menu: categories 32px, service rows 30px (boxes already sized) */
.cat-btn-icon .la-icon-3d, .service-row-icon .la-icon-3d { width: 100% !important; height: 100% !important; }
.mega-panel-title .la-icon-3d { width: 28px !important; height: 28px !important; }
/* Contact rows (footer, location): 28px */
footer .la-icon-3d, .contact-row .la-icon-3d { width: 28px; height: 28px; }

/* ---- Hero 3D mount (poster = existing CSS glows; canvas layers on top when loaded) ---- */
#hero { isolation: isolate; }
#laHero3D { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
#hero > .site-container { position: relative; z-index: 2; }
#laHero3D.is-ready { opacity: 1; }
#laHero3D canvas { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .la-icon *, .la-icon.is-in *, .la-icon:hover *, .group:hover .la-icon * { animation: none !important; }
  .la-icon-3d, .la-icon-3d:hover, .group:hover .la-icon-3d { animation: none !important; transform: none !important; transition: none !important; }
  #laHero3D { display: none; }
}