/* ==========================================================================
   WEBER CODE — Modern Bidirectional Scroll-Triggered Animations & Transitions
   Subtle, professional, hardware-accelerated animations that trigger
   when scrolling DOWN and UP, resetting when out of viewport.
   ========================================================================== */

/* Keyframe Animations */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(72, 196, 200, 0.7); }
  50% { transform: scale(1.15); opacity: 0.85; box-shadow: 0 0 0 6px rgba(72, 196, 200, 0); }
}

@keyframes float-subtle {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.05); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Animation Utility Classes */
.animate-float {
  animation: float-subtle 4s ease-in-out infinite;
}

.animate-glow {
  animation: glow-pulse 6s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ==========================================================================
   Scroll Reveal States (Initial / Resetting State)
   Uses smooth, fast-resetting transition when out of view so it is
   instantly primed to animate smoothly when re-entering from either direction.
   ========================================================================== */

/* Bottom -> Center (Default Reveal) */
.reveal,
.reveal-up,
.reveal-bottom {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Top -> Center */
.reveal-top,
.reveal-down {
  opacity: 0;
  transform: translateY(-28px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Left -> Center */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Right -> Center */
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Subtle Scale & Elevation -> Center */
.reveal-scale {
  opacity: 0;
  transform: scale(0.96) translateY(14px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Soft Pure Fade */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.35s ease-out;
  will-change: opacity;
}

/* ==========================================================================
   Active Entrance States (Triggered by IntersectionObserver in Viewport)
   Smooth, luxurious cubic-bezier motion (0.72s - 0.82s).
   ========================================================================== */

.reveal.active,
.reveal-up.active,
.reveal-bottom.active,
.reveal-top.active,
.reveal-down.active,
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active,
.reveal-fade.active {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Stagger Delays & Children Containers
   ========================================================================== */

.delay-1, .stagger-delay-1 { transition-delay: 0.08s !important; }
.delay-2, .stagger-delay-2 { transition-delay: 0.16s !important; }
.delay-3, .stagger-delay-3 { transition-delay: 0.24s !important; }
.delay-4, .stagger-delay-4 { transition-delay: 0.32s !important; }
.delay-5, .stagger-delay-5 { transition-delay: 0.40s !important; }
.delay-6, .stagger-delay-6 { transition-delay: 0.48s !important; }

/* Multi-Child Card Grid Staggering */
.stagger-parent > *,
.stagger-cards > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.stagger-parent.active > *,
.stagger-cards.active > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-parent.active > *:nth-child(1), .stagger-cards.active > *:nth-child(1) { transition-delay: 0.04s; }
.stagger-parent.active > *:nth-child(2), .stagger-cards.active > *:nth-child(2) { transition-delay: 0.12s; }
.stagger-parent.active > *:nth-child(3), .stagger-cards.active > *:nth-child(3) { transition-delay: 0.20s; }
.stagger-parent.active > *:nth-child(4), .stagger-cards.active > *:nth-child(4) { transition-delay: 0.28s; }
.stagger-parent.active > *:nth-child(5), .stagger-cards.active > *:nth-child(5) { transition-delay: 0.36s; }
.stagger-parent.active > *:nth-child(6), .stagger-cards.active > *:nth-child(6) { transition-delay: 0.44s; }
.stagger-parent.active > *:nth-child(7), .stagger-cards.active > *:nth-child(7) { transition-delay: 0.52s; }
.stagger-parent.active > *:nth-child(8), .stagger-cards.active > *:nth-child(8) { transition-delay: 0.60s; }

/* ==========================================================================
   Mobile Responsive Adjustments
   Reduces translation distances to prevent horizontal overflow or jank.
   ========================================================================== */

@media (max-width: 768px) {
  .reveal-left {
    transform: translateX(-18px);
  }
  .reveal-right {
    transform: translateX(18px);
  }
  .reveal,
  .reveal-up,
  .reveal-bottom {
    transform: translateY(18px);
  }
  .reveal-top,
  .reveal-down {
    transform: translateY(-18px);
  }
  .reveal-scale {
    transform: scale(0.97) translateY(10px);
  }
  .stagger-parent > *,
  .stagger-cards > * {
    transform: translateY(18px);
  }
}

@media (max-width: 480px) {
  .reveal-left {
    transform: translateX(-8px);
  }
  .reveal-right {
    transform: translateX(8px);
  }
  .reveal,
  .reveal-up,
  .reveal-bottom {
    transform: translateY(12px);
  }
  .reveal-top,
  .reveal-down {
    transform: translateY(-12px);
  }
  .reveal-scale {
    transform: scale(0.98) translateY(8px);
  }
  .stagger-parent > *,
  .stagger-cards > * {
    transform: translateY(12px);
  }
}

/* ==========================================================================
   Accessibility: Prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .reveal,
  .reveal-up,
  .reveal-bottom,
  .reveal-top,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-fade,
  .stagger-parent > *,
  .stagger-cards > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}