/* ============================================
   CONTENT REVEAL - Lightweight Scroll Animations
   IntersectionObserver-based fade-in for all content
   Responsive, smooth, GPU-accelerated
   
   Uses [data-reveal] attribute (set by JS) so these
   rules only apply to elements the JS has tagged.
   The .is-revealed class is added when element enters
   viewport, triggering the transition.
   ============================================ */

/* ---- Initial hidden state ---- */
/* High specificity to override performance-fix !important rules */
body [data-reveal]:not(.is-revealed) {
  opacity: 0 !important;
  will-change: opacity, transform;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Direction variants — initial positions */
body [data-reveal="up"]:not(.is-revealed) {
  transform: translateY(32px) !important;
}

body [data-reveal="down"]:not(.is-revealed) {
  transform: translateY(-32px) !important;
}

body [data-reveal="left"]:not(.is-revealed) {
  transform: translateX(-32px) !important;
}

body [data-reveal="right"]:not(.is-revealed) {
  transform: translateX(32px) !important;
}

body [data-reveal="fade"]:not(.is-revealed) {
  transform: none !important;
}

body [data-reveal="zoom"]:not(.is-revealed) {
  transform: scale(0.92) !important;
}

/* ---- Revealed state (JS adds .is-revealed) ---- */
body [data-reveal].is-revealed {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ---- Stagger delays for grid children ---- */
[data-reveal-stagger] > [data-reveal]:nth-child(1)  { transition-delay: 0s; }
[data-reveal-stagger] > [data-reveal]:nth-child(2)  { transition-delay: 0.07s; }
[data-reveal-stagger] > [data-reveal]:nth-child(3)  { transition-delay: 0.14s; }
[data-reveal-stagger] > [data-reveal]:nth-child(4)  { transition-delay: 0.21s; }
[data-reveal-stagger] > [data-reveal]:nth-child(5)  { transition-delay: 0.28s; }
[data-reveal-stagger] > [data-reveal]:nth-child(6)  { transition-delay: 0.35s; }
[data-reveal-stagger] > [data-reveal]:nth-child(7)  { transition-delay: 0.42s; }
[data-reveal-stagger] > [data-reveal]:nth-child(8)  { transition-delay: 0.49s; }
[data-reveal-stagger] > [data-reveal]:nth-child(9)  { transition-delay: 0.56s; }
[data-reveal-stagger] > [data-reveal]:nth-child(10) { transition-delay: 0.6s; }
[data-reveal-stagger] > [data-reveal]:nth-child(n+11) { transition-delay: 0.65s; }

/* ---- Mobile: smaller translate distance, faster timing ---- */
@media (max-width: 768px) {
  body [data-reveal="up"]:not(.is-revealed)    { transform: translateY(20px) !important; }
  body [data-reveal="down"]:not(.is-revealed)   { transform: translateY(-20px) !important; }
  body [data-reveal="left"]:not(.is-revealed)   { transform: translateX(-20px) !important; }
  body [data-reveal="right"]:not(.is-revealed)  { transform: translateX(20px) !important; }
  body [data-reveal="zoom"]:not(.is-revealed)   { transform: scale(0.95) !important; }

  body [data-reveal]:not(.is-revealed) {
    transition-duration: 0.45s !important;
  }

  /* Faster stagger on mobile */
  [data-reveal-stagger] > [data-reveal]:nth-child(2)  { transition-delay: 0.05s; }
  [data-reveal-stagger] > [data-reveal]:nth-child(3)  { transition-delay: 0.1s; }
  [data-reveal-stagger] > [data-reveal]:nth-child(4)  { transition-delay: 0.15s; }
  [data-reveal-stagger] > [data-reveal]:nth-child(5)  { transition-delay: 0.2s; }
  [data-reveal-stagger] > [data-reveal]:nth-child(6)  { transition-delay: 0.25s; }
  [data-reveal-stagger] > [data-reveal]:nth-child(n+7) { transition-delay: 0.3s; }
}

/* ---- Respect user preference ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}