/* Scroll Reveal — Enhanced variants
   Usage: <div data-reveal="fade-up">...</div>
   Variants: fade-up, fade-left, fade-right, zoom, blur, letter
   Stagger: data-stagger="100" on parent, children auto-staggered
*/

/* Base hidden state */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fade Up (default) */
[data-reveal="fade-up"] {
  transform: translateY(28px);
}

/* Fade Left */
[data-reveal="fade-left"] {
  transform: translateX(40px);
}

/* Fade Right */
[data-reveal="fade-right"] {
  transform: translateX(-40px);
}

/* Zoom */
[data-reveal="zoom"] {
  transform: scale(0.88);
}

/* Blur */
[data-reveal="blur"] {
  filter: blur(8px);
  transform: translateY(10px);
}

/* Letter-by-letter (container) */
[data-reveal="letter"] {
  /* Letters are handled individually */
  opacity: 1; /* container is visible, letters are not */
}

[data-reveal="letter"] .sr-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="letter"] .sr-letter.sr-space {
  width: 0.3em;
}

/* Visible states */
[data-reveal].sr-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

[data-reveal="letter"].sr-visible .sr-letter {
  opacity: 1;
  transform: none;
}

/* Stagger children */
[data-stagger] > [data-reveal] {
  /* delay set via JS */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  [data-reveal="letter"] .sr-letter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}