/* ============================================
   SCROLL ANIMATIONS
   Intersection Observer based reveal system
   ============================================ */

/* --- Base Hidden States --- */
[data-scroll] {
  opacity: 0;
  transition: 
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

/* Fade Up (default) */
[data-scroll="fade-up"] {
  transform: translateY(80px);
  filter: blur(4px);
}

/* Fade Left (slide from left) */
[data-scroll="fade-left"] {
  transform: translateX(-100px);
  filter: blur(4px);
}

/* Fade Right (slide from right) */
[data-scroll="fade-right"] {
  transform: translateX(100px);
  filter: blur(4px);
}

/* Fade Scale (zoom in) */
[data-scroll="fade-scale"] {
  transform: scale(0.8);
  filter: blur(6px);
}

/* Fade (only opacity) */
[data-scroll="fade"] {
  transform: none;
  filter: blur(3px);
}

/* --- Visible State --- */
[data-scroll].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  filter: blur(0px);
}

/* --- Stagger Children --- */
[data-scroll-stagger] > * {
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  filter: blur(3px);
  transition: 
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

[data-scroll-stagger] > *.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  [data-scroll],
  [data-scroll-stagger] > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* --- Mobile: Softer animations --- */
@media (max-width: 768px) {
  [data-scroll] {
    transition-duration: 0.6s;
  }

  [data-scroll="fade-up"] {
    transform: translateY(30px);
    filter: blur(2px);
  }

  [data-scroll="fade-left"] {
    transform: translateX(-40px);
    filter: blur(2px);
  }

  [data-scroll="fade-right"] {
    transform: translateX(40px);
    filter: blur(2px);
  }

  [data-scroll="fade-scale"] {
    transform: scale(0.9);
    filter: blur(3px);
  }

  [data-scroll="fade"] {
    filter: blur(1px);
  }

  [data-scroll-stagger] > * {
    transform: translateY(20px) scale(0.97);
    filter: blur(1px);
    transition-duration: 0.5s;
  }
}