/* ==========================================================================
   HADINOVA — animations.css
   CSS keyframe animations for ambient/looping motion (logo orbits, aurora
   drift, scroll cue). Entrance + scroll-reveal choreography lives in GSAP
   (js/main.js). All looping motion respects prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scroll-reveal initial state
   GSAP toggles these to visible. If JS fails to load, a fallback below
   restores visibility so content is never trapped hidden.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}
[data-anim="hero"] {
  opacity: 0;
  transform: translateY(20px);
}

/* No-JS / GSAP-failed safety net: reveal everything after load. */
.no-gsap [data-reveal],
.no-gsap [data-anim="hero"] {
  opacity: 1 !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   2. Logo showcase — orbital rings, satellites + glow (looping motion)
   The rings/satellites are decorative elements around the logo tile; the logo
   image itself is never animated in a way that distorts or rotates it. Glow
   "breathing" animates opacity only so it never fights GSAP's mouse-follow
   translate on the same element.
   -------------------------------------------------------------------------- */
.hero-logo__ring--outer { animation: spin 42s linear infinite; }
.hero-logo__ring--mid   { animation: spin-reverse 30s linear infinite; }
.hero-logo__sat--a { animation: spin 16s linear infinite; }
.hero-logo__sat--b { animation: spin-reverse 22s linear infinite; }
.hero-logo__glow   { animation: glow-breathe 6s ease-in-out infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes spin-reverse {
  to { transform: rotate(-360deg); }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   3. Aurora drift (ambient background)
   -------------------------------------------------------------------------- */
.aurora--1 { animation: drift-a 18s ease-in-out infinite alternate; }
.aurora--2 { animation: drift-b 22s ease-in-out infinite alternate; }
.aurora--3 { animation: drift-a 16s ease-in-out infinite alternate; }

@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.08); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-50px, -25px) scale(1.1); }
}

/* --------------------------------------------------------------------------
   4. Scroll cue
   -------------------------------------------------------------------------- */
.scroll-cue { animation: cue-fade 3s ease-in-out infinite; }
.scroll-cue__dot { animation: cue-dot 1.8s ease-in-out infinite; }

@keyframes cue-fade {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes cue-dot {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   5. Badge dot pulse
   -------------------------------------------------------------------------- */
.badge-dot { animation: dot-pulse 2.4s ease-in-out infinite; }
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* --------------------------------------------------------------------------
   6. Reduced motion — disable all looping/ambient motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-anim="hero"] {
    opacity: 1 !important;
    transform: none !important;
  }
}