/* ==========================================================================
   عين الرافدين | Ain Al-Rafidain - Motion Design & Scroll Animations
   ========================================================================== */

/* Base Reveal Element */
.reveal {
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-up {
  transform: translateY(35px);
}

.reveal-down {
  transform: translateY(-35px);
}

.reveal-left {
  transform: translateX(-35px);
}

.reveal-right {
  transform: translateX(35px);
}

.reveal-scale {
  transform: scale(0.94);
}

/* Active State Triggered by IntersectionObserver */
.reveal.is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Stagger Delays for Grouped Elements */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* Subtle Ambient Glow Pulsing */
@keyframes ambient-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.08);
  }
}

.ambient-animated {
  animation: ambient-pulse 8s infinite ease-in-out;
}

/* Subtle Architectural Grid Scan */
@keyframes grid-glow {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* Progress bar fill for active slide */
@keyframes progress-fill {
  from { width: 0%; }
  to { width: 100%; }
}

/* Accessibility: Disable animations if user 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 {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .hero-slide {
    transition: opacity 0.2s ease !important;
  }
  
  .hero-slide-bg {
    transform: none !important;
  }
}