/* ============================================================
   AR-RAHMANI — Animations
   Keyframes & Animation Utility Classes
   ============================================================ */

/* ============================================================
   KEYFRAMES
   ============================================================ */

/* --- Fade Animations --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Scale Animations --- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- Blur Reveal (GPU optimized — no filter:blur) --- */
@keyframes blurReveal {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Gold Shimmer --- */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes shimmerBorder {
  0% { border-color: rgba(212, 175, 55, 0.1); }
  50% { border-color: rgba(212, 175, 55, 0.4); }
  100% { border-color: rgba(212, 175, 55, 0.1); }
}

/* --- Float / Levitate --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(0.5deg); }
  66% { transform: translateY(-4px) rotate(-0.3deg); }
}

@keyframes floatRotate {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

/* --- Glow --- */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.1); }
  50% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.25); }
}

@keyframes glowText {
  0%, 100% { text-shadow: 0 0 20px rgba(212, 175, 55, 0.1); }
  50% { text-shadow: 0 0 40px rgba(212, 175, 55, 0.3); }
}

/* --- Pulse --- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes pulseScale {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

/* --- Rotate --- */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

/* --- Line Expand --- */
@keyframes lineExpand {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes lineExpandCenter {
  from { width: 0; left: 50%; }
  to { width: 100%; left: 0; }
}

/* --- Scroll Indicator --- */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.5; }
}

@keyframes scrollLine {
  0% { top: 0; height: 0; opacity: 1; }
  50% { top: 0; height: 100%; opacity: 1; }
  100% { top: 100%; height: 0; opacity: 0; }
}

/* --- Loading --- */
@keyframes loadProgress {
  0% { width: 0%; }
  20% { width: 20%; }
  40% { width: 45%; }
  60% { width: 65%; }
  80% { width: 85%; }
  100% { width: 100%; }
}

@keyframes logoReveal {
  0% { opacity: 0; letter-spacing: 0.8em; filter: blur(8px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; letter-spacing: 0.35em; filter: blur(0); }
}

/* --- Particle Float --- */
@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  25% { opacity: 1; }
  75% { opacity: 0.6; }
  100% {
    transform: translateY(-100vh) translateX(50px);
    opacity: 0;
  }
}

/* --- Marquee --- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Card Entrance --- */
@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Underline Slide --- */
@keyframes underlineSlide {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

/* ============================================================
   ANIMATION UTILITY CLASSES
   (Applied via JS Intersection Observer)
   ============================================================ */

/* Base state for elements that will be revealed */
.reveal {
  opacity: 0;
  transition: opacity var(--duration-slower) var(--ease-luxury),
              transform var(--duration-slower) var(--ease-luxury),
              filter var(--duration-slower) var(--ease-luxury);
}

.reveal.revealed {
  opacity: 1;
}

/* Fade Up — cinematic blur-to-clear */
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
  filter: blur(8px);
  transition: opacity 0.9s var(--ease-luxury),
              transform 0.9s var(--ease-luxury),
              filter 1.1s var(--ease-luxury);
}
.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Fade Down */
.reveal-down {
  opacity: 0;
  transform: translateY(-40px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease-luxury),
              transform 0.9s var(--ease-luxury),
              filter 1s var(--ease-luxury);
}
.reveal-down.revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Fade Left (from right) — cinematic blur-to-clear */
.reveal-left {
  opacity: 0;
  transform: translateX(80px);
  filter: blur(10px);
  transition: opacity 1s var(--ease-luxury),
              transform 1s var(--ease-luxury),
              filter 1.2s var(--ease-luxury);
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* Fade Right (from left) — cinematic blur-to-clear */
.reveal-right {
  opacity: 0;
  transform: translateX(-80px);
  filter: blur(10px);
  transition: opacity 1s var(--ease-luxury),
              transform 1s var(--ease-luxury),
              filter 1.2s var(--ease-luxury);
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* Scale In */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  filter: blur(4px);
  transition: opacity 0.8s var(--ease-luxury),
              transform 0.8s var(--ease-luxury),
              filter 0.9s var(--ease-luxury);
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Blur Reveal */
.reveal-blur {
  opacity: 0;
  transform: scale(1.06);
  filter: blur(12px);
  transition: opacity 1s var(--ease-luxury),
              transform 1s var(--ease-luxury),
              filter 1.2s var(--ease-luxury);
}
.reveal-blur.revealed {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Staggered delays for children */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
.stagger-7 { transition-delay: 0.7s; }
.stagger-8 { transition-delay: 0.8s; }

/* ============================================================
   CONTINUOUS ANIMATION UTILITIES
   ============================================================ */
.anim-float {
  animation: float 6s var(--ease-smooth) infinite;
}

.anim-float-slow {
  animation: floatSlow 8s var(--ease-smooth) infinite;
}

.anim-glow {
  animation: glow 4s var(--ease-smooth) infinite;
}

.anim-shimmer {
  background: linear-gradient(90deg,
    var(--color-gold) 0%,
    var(--color-gold-soft) 40%,
    var(--color-gold) 80%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

.anim-pulse {
  animation: pulse 3s var(--ease-smooth) infinite;
}

.anim-rotate {
  animation: rotateSlow 60s linear infinite;
}

.anim-scroll-indicator {
  animation: scrollBounce 2s var(--ease-smooth) infinite;
}

/* ============================================================
   PARALLAX DATA ATTRIBUTE CLASSES
   (Speed set via data-parallax-speed in HTML)
   ============================================================ */
.parallax {
  will-change: transform;
  contain: layout style;
}

/* ============================================================
   HOVER TRANSITION UTILITIES
   ============================================================ */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-luxury),
              box-shadow var(--duration-normal) var(--ease-luxury);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold-md);
}

.hover-glow {
  transition: box-shadow var(--duration-normal) var(--ease-luxury);
}
.hover-glow:hover {
  box-shadow: var(--shadow-gold-glow);
}

.hover-scale {
  transition: transform var(--duration-normal) var(--ease-luxury);
}
.hover-scale:hover {
  transform: scale(1.03);
}

/* Image zoom on hover (parent must have overflow:hidden) */
.hover-zoom {
  transition: transform var(--duration-slowest) var(--ease-luxury);
}
.hover-zoom:hover {
  transform: scale(1.08);
}

/* ============================================================
   LAZY IMAGE FADE-IN
   Smooth reveal for images that load progressively
   ============================================================ */
img[data-src] {
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.5s var(--ease-luxury), filter 0.5s var(--ease-luxury);
}

img[data-src].loaded,
img.loaded {
  opacity: 1;
  filter: blur(0);
}