/* ==========================================================================
   Scroll Reveal Animations
   CSS-only animations triggered by IntersectionObserver via ScrollReveal component.
   Uses transform + opacity for GPU-accelerated performance.
   ========================================================================== */

/* --- Custom Properties --- */
:root {
  --sr-duration: 600ms;
  --sr-delay: 0ms;
}

/* --- Hidden State --- */
.sr--hidden {
  opacity: 0;
  will-change: transform, opacity;
}

/* --- Visible State --- */
.sr--visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--sr-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--sr-delay),
    transform var(--sr-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--sr-delay);
}

/* --- Variant: fadeUp --- */
.sr--hidden[data-sr-variant="fadeUp"] {
  transform: translateY(30px);
}

/* --- Variant: fadeIn (opacity only) --- */
.sr--hidden[data-sr-variant="fadeIn"] {
  transform: none;
}

/* --- Variant: fadeLeft --- */
.sr--hidden[data-sr-variant="fadeLeft"] {
  transform: translateX(-30px);
}

/* --- Variant: fadeRight --- */
.sr--hidden[data-sr-variant="fadeRight"] {
  transform: translateX(30px);
}

/* --- Variant: scaleUp --- */
.sr--hidden[data-sr-variant="scaleUp"] {
  transform: scale(0.95);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .sr--hidden {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .sr--visible {
    transition: none;
  }
}

/* --- Mobile: convert horizontal slides to vertical --- */
@media (max-width: 767px) {
  .sr--hidden[data-sr-variant="fadeLeft"],
  .sr--hidden[data-sr-variant="fadeRight"] {
    transform: translateY(20px);
  }
}