/* ==========================================================================
   Organización Agroproductiva (OA) - Animaciones y Efectos Parallax
   Keyframes, Scroll Reveals & Motion Reducido
   ========================================================================== */

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

@keyframes galleryScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(141, 198, 63, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(141, 198, 63, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(141, 198, 63, 0);
  }
}

@keyframes pulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes shine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* --------------------------------------------------------------------------
   2. SCROLL REVEALS
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out-cubic), transform 0.65s var(--ease-out-cubic);
  will-change: opacity, transform;
}

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

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

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

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger Delays */
.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; }

/* --------------------------------------------------------------------------
   3. EFECTOS PARALLAX EN PROFUNDIDAD
   -------------------------------------------------------------------------- */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* --------------------------------------------------------------------------
   4. REDUCED MOTION (ACCESIBILIDAD)
   -------------------------------------------------------------------------- */
@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;
  }

  .marquee-track,
  .gallery-track {
    animation: none;
    overflow-x: auto;
    width: auto;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .parallax-layer {
    transform: none !important;
  }
}