/* =========================================================
   ACTIVE GLOBAL IMPEX — ANIMATIONS
   Vanilla-JS equivalent of the original Framer Motion variants
   (fadeUp / fadeIn / fadeLeft / fadeRight / staggerItem), driven by
   IntersectionObserver in js/main.js which toggles the .in-view class.
   Keyframes (ticker-left, shimmer, ping-slow) ported 1:1 from
   tailwind.config.ts.
   ========================================================= */

@media (prefers-reduced-motion: no-preference){

  [data-animate]{
    opacity: 0;
    transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
  }
  [data-animate="fade-up"]{ transform: translateY(24px); }
  [data-animate="fade-in"]{ transform:none; transition-duration:.4s; }
  [data-animate="fade-left"]{ transform: translateX(-32px); transition-duration:.6s; }
  [data-animate="fade-right"]{ transform: translateX(32px); transition-duration:.6s; }
  [data-animate="stagger-item"]{ transform: translateY(20px); transition-duration:.45s; }

  [data-animate].in-view{ opacity:1; transform:none; }

  [data-animate-group] [data-animate]{ transition-delay: calc(var(--stagger,0) * 80ms); }
}

@media (prefers-reduced-motion: reduce){
  [data-animate]{ opacity:1 !important; transform:none !important; }
}

/* Header mobile drawer nav item cascade */
.mobile-nav-list a{ opacity:0; transform: translateX(20px); transition: opacity .3s ease, transform .3s ease; }
.mobile-drawer.open .mobile-nav-list a{ opacity:1; transform:none; }
.mobile-drawer.open .mobile-nav-list a:nth-child(1){ transition-delay:.02s; }
.mobile-drawer.open .mobile-nav-list a:nth-child(2){ transition-delay:.07s; }
.mobile-drawer.open .mobile-nav-list a:nth-child(3){ transition-delay:.12s; }
.mobile-drawer.open .mobile-nav-list a:nth-child(4){ transition-delay:.17s; }

/* Tab panel swap fade */
.tab-panel{ animation: fade-up .3s cubic-bezier(.16,1,.3,1) both; }
@keyframes fade-up{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }

/* Shimmer skeleton (unused by default, kept for parity) */
.shimmer{
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 75%);
  background-size:200% 100%;
  animation: shimmer 2s linear infinite;
}
@keyframes shimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }

@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
  .wa-fab-ping{ animation:none; display:none; }
}