/* ==========================================================================
   SISTEMA DE ANIMACIONES DE SCROLL Y MICROINTERACCIONES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIANTES DE ANIMACIÓN DE ENTRADA AL HACER SCROLL (SCROLL REVEAL)
   -------------------------------------------------------------------------- */

/* Transición Base */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-zoom,
.reveal-item {
  will-change: opacity, transform;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-duration: 0.85s;
}

/* Estado Inicial: Fade Up */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-item {
  opacity: 0;
  transform: translateY(35px);
}

/* Estado Inicial: Zoom In Escala */
.reveal-zoom {
  opacity: 0;
  transform: scale(0.92);
  transition-duration: 0.95s;
}

/* --------------------------------------------------------------------------
   2. ESTADO REVELADO (ACTIVADO POR INTERSECTION OBSERVER EN JS)
   -------------------------------------------------------------------------- */
.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-item.revealed {
  opacity: 1;
  transform: translate(0, 0);
}

.reveal-zoom.revealed {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   3. DELAYS ESCALONADOS (STAGGER EFFECT)
   -------------------------------------------------------------------------- */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.22s; }
.stagger-3 { transition-delay: 0.34s; }
.stagger-4 { transition-delay: 0.46s; }

/* --------------------------------------------------------------------------
   4. ANIMACIONES ESPECIALES PARA IMÁGENES Y BLOQUES
   -------------------------------------------------------------------------- */
.image-reveal-wrapper {
  position: relative;
  overflow: hidden;
}

.image-reveal-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  transform: translateX(-100%);
  transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 3;
}

.image-reveal-wrapper.revealed::after {
  transform: translateX(101%);
}

/* --------------------------------------------------------------------------
   5. EFECTOS HOVER & MICROINTERACCIONES
   -------------------------------------------------------------------------- */
.concept-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.concept-card:hover {
  transform: translateX(8px);
  border-bottom-color: var(--color-accent);
}

.info-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.info-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

.service-item, .agrarias-list li {
  transition: padding-left 0.3s ease, border-color 0.3s ease;
}

.service-item:hover, .agrarias-list li:hover {
  padding-left: 8px;
  border-color: var(--color-accent);
}