/* ============================================================
   MARSA ALEKHWA — Animations
   Keyframes, scroll-driven animations, reveal effects
   ============================================================ */

@layer animations {

  /* ──────────────────────────────────
     GPU COMPOSITING HINTS
     ────────────────────────────────── */
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal-stagger > * {
    will-change: opacity, transform;
  }

  .reveal.is-visible,
  .reveal--left.is-visible,
  .reveal--right.is-visible,
  .reveal--scale.is-visible,
  .reveal-stagger.is-visible > * {
    will-change: auto; /* Release GPU memory after animation */
  }

  .parallax-layer {
    will-change: transform;
  }

  .text-shimmer {
    will-change: background-position;
  }

  /* ──────────────────────────────────
     KEYFRAME DEFINITIONS
     ────────────────────────────────── */

  /* Fade in from below */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(2.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Fade in from left */
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-2.5rem);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Fade in from right */
  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(2.5rem);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

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

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

  /* Floating particles */
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-1.5rem) rotate(2deg); }
    50% { transform: translateY(-0.5rem) rotate(-1deg); }
    75% { transform: translateY(-2rem) rotate(1deg); }
  }

  @keyframes floatSlow {
    0%, 100% { transform: translateY(0) translateX(0); }
    33% { transform: translateY(-2rem) translateX(1rem); }
    66% { transform: translateY(-1rem) translateX(-0.5rem); }
  }

  /* Pulse glow */
  @keyframes pulseGlow {
    0%, 100% {
      box-shadow: 0 0 0.5rem rgba(212, 175, 55, 0.15);
    }
    50% {
      box-shadow: 0 0 2rem rgba(212, 175, 55, 0.3);
    }
  }

  /* Marquee scroll for partners (Dual Wrapper Technique) */
  @keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }



  /* Subtle background pan */
  @keyframes bgPan {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Line draw animation */
  @keyframes drawLine {
    from { inline-size: 0; }
    to   { inline-size: 4rem; }
  }

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

  /* Gradient text reveal */
  @keyframes gradientFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Staggered entrance for hero stat items */
  @keyframes slideInStagger {
    from {
      opacity: 0;
      transform: translateY(1.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ──────────────────────────────────
     REVEAL ON SCROLL CLASSES
     (Activated by IntersectionObserver in JS)
     ────────────────────────────────── */
  .reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
  }

  .reveal--left {
    opacity: 0;
    transform: translateX(-3rem);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
  }

  .reveal--right {
    opacity: 0;
    transform: translateX(3rem);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
  }

  .reveal--scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
  }

  .reveal.is-visible,
  .reveal--left.is-visible,
  .reveal--right.is-visible,
  .reveal--scale.is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
  }

  /* Staggered children */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
  }

  .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
  .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
  .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
  .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }
  .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; }

  .reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  /* ──────────────────────────────────
     PARALLAX HERO LAYERS
     (CSS Scroll-driven animation with fallback)
     ────────────────────────────────── */
  .parallax-wrapper {
    view-timeline: --hero-parallax;
    overflow: clip;
    position: relative;
  }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .parallax-layer {
      animation: parallaxMove linear both;
      animation-timeline: --hero-parallax;
    }

    @keyframes parallaxMove {
      from { transform: translateY(60px); }
      to   { transform: translateY(-60px); }
    }

    .parallax-layer--slow {
      animation: parallaxMoveSlow linear both;
      animation-timeline: --hero-parallax;
    }

    @keyframes parallaxMoveSlow {
      from { transform: translateY(30px); }
      to   { transform: translateY(-30px); }
    }
  }

  /* ──────────────────────────────────
     VIEW TRANSITIONS (Language Switch)
     ────────────────────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
      animation: fadeOut 250ms var(--ease-out);
    }
    ::view-transition-new(root) {
      animation: fadeIn 250ms var(--ease-out);
    }

    @keyframes fadeOut {
      from { opacity: 1; }
      to   { opacity: 0; }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }

  /* ──────────────────────────────────
     GOLD SHIMMER TEXT
     ────────────────────────────────── */
  .text-shimmer {
    background: var(--gradient-gold-text);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
    --animation-reduced: none;
  }

  /* ──────────────────────────────────
     FLOATING ELEMENTS (Decorative)
     ────────────────────────────────── */
  .float-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15), transparent 70%);
    pointer-events: none;
    animation: float 8s ease-in-out infinite;
    --animation-reduced: none;
  }

  .float-particle:nth-child(2) {
    animation-delay: -2s;
    animation-duration: 10s;
  }

  .float-particle:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 12s;
  }

  .float-particle--slow {
    animation-name: floatSlow;
    animation-duration: 15s;
    --animation-reduced: none;
  }
}