/* ========================================================= */
/* ============ GLOBAL SCROLL REVEAL ANIMATIONS ============ */
/* ========================================================= */

/* Base hidden state */
.reveal-up {
  opacity: 0;
  transform: translateY(50px); /* Slide from slightly further down */
  /* THIS is the magic smooth curve */
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), 
              transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

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

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), 
              transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), 
              transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Subtle Zoom in */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), 
              transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* For users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}