/* =====================================================================
   SAELIX — ANIMATIONS
   Scroll-reveal, keyframes, hover micro-interactions.
   Respects prefers-reduced-motion.
   ===================================================================== */

/* Scroll reveal — elements start hidden, .reveal-in added by JS (IntersectionObserver) */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; }
[data-reveal].reveal-in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].reveal-in { transform: none; }

/* Stagger delays */
[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }

/* Keyframes */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes flyPlane { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes drawPath { to { stroke-dashoffset: 0; } }

/* Floating hero cards */
.float-card.tl { animation: float-soft 5s ease-in-out infinite; }
.float-card.br { animation: float-soft 6s ease-in-out infinite 0.6s; }

/* Animated flight plane along path */
.flight-plane {
  offset-path: path('M40,260 C220,40 520,40 760,160');
  animation: flyPlane 6s var(--ease) infinite;
}
.flight-path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawPath 3s var(--ease) forwards; }

/* Shimmer placeholder (for image loading blocks) */
.shimmer { background: linear-gradient(90deg, var(--grey-100) 25%, var(--silver-200) 50%, var(--grey-100) 75%); background-size: 200% 100%; animation: shimmer 1.6s infinite; }

/* Counter pop */
.stat .num { transition: transform 0.3s var(--ease); }

/* Gradient text shine on hover for links */
.shine-hover { background-size: 200% 100%; transition: background-position 0.5s; }

/* Pulse ring (trust badges) */
@keyframes ring-pulse { 0% { box-shadow: 0 0 0 0 rgba(56,198,230,0.4); } 100% { box-shadow: 0 0 0 14px rgba(56,198,230,0); } }

/* Marquee for countries / logos */
.marquee { overflow: hidden; }
.marquee-track { display: flex; gap: var(--sp-7); width: max-content; animation: marquee 28s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Reduced motion: disable all */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}