/* ==========================================================================
   URAAN-WEB-2026: Brand Birds Flight Animation System
   Features:
   - Genuine CSS Sprite-Sheet Animation (Extracted from official bird animation)
   - Left and right directional sprite sheets with zero matrix flipping glitches
   - Initial entrance flock take-off from behind the circular logo to all sides
   - Ambient random soaring birds (varying paths, altitudes, scales, speeds)
   - 100% Hardware-accelerated (translate3d, transform, opacity)
   - Zero interaction blocking (pointer-events: none on container & birds)
   - Fully responsive on mobile, tablet, and desktop
   ========================================================================== */

/* 1. Global Flight Stage Overlay */
#uraan-birds-stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
  contain: layout style paint;
}

/* 2. Base Bird Container (Handles spatial translate3d coordinates) */
.uraan-flight-bird {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
  user-select: none;
  -webkit-user-select: none;
}

/* 3. Orientation Wrapper (Handles pitch angle and scale) */
.uraan-bird-orient {
  display: block;
  transform-origin: center center;
  will-change: transform;
}

/* 4. CSS Sprite-Sheet Animation (12-frame authentic wing flap) */
.uraan-bird-sprite {
  display: block;
  width: 64px;
  height: 64px;
  background-size: 768px 64px; /* 12 frames * 64px */
  background-repeat: no-repeat;
  animation: uraan-sprite-flap-cycle 0.72s steps(12) infinite;
  filter: drop-shadow(0 4px 10px rgba(36, 54, 111, 0.24));
  pointer-events: none;
}

/* Directional Sprite Sheets (Pre-rendered for perfect left/right orientation) */
.dir-right .uraan-bird-sprite {
  background-image: url('/assets/uraan-bird-sprite-right.png?v=2.5');
}

.dir-left .uraan-bird-sprite {
  background-image: url('/assets/uraan-bird-sprite-left.png?v=2.5');
}

/* Explicit suppression of any legacy click-for-flight badge or tooltips */
.hero-image-container::after,
.hero-image-container::before,
.hero-image-container:hover::after,
.hero-image-container:hover::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@keyframes uraan-sprite-flap-cycle {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -768px 0;
  }
}

/* 5. Subtle Magical Sparkle Particles on Burst */
.uraan-magic-sparkle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  animation: uraan-sparkle-burst 1.3s cubic-bezier(0.12, 0.8, 0.32, 1) forwards;
}

@keyframes uraan-sparkle-burst {
  0% {
    transform: translate3d(0, 0, 0) scale(0);
    opacity: 0.95;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translate3d(var(--tx), var(--ty), 0) scale(var(--sc));
    opacity: 0;
  }
}

/* 6. Mobile & Responsive Adaptations */
@media (max-width: 768px) {
  .uraan-bird-sprite {
    width: 46px;
    height: 46px;
    background-size: 552px 46px; /* 12 frames * 46px */
    filter: none !important; /* Eliminate expensive continuous GPU raster drop-shadow filter on mobile */
  }

  @keyframes uraan-sprite-flap-cycle {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -552px 0;
    }
  }

  .uraan-magic-sparkle {
    display: none !important;
  }
}

/* 7. Accessibility: Respect User Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  #uraan-birds-stage {
    display: none !important;
  }
}