/* ============================================
   SCROLL REVEAL ANIMATIONS
   Progressive enhancement — elements visible
   by default, hidden only after JS activates.
   ============================================ */

/* Base transitions — defined outside .reveal-active so they're always ready */
[class*="reveal-"] {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-circle {
  transition: clip-path 1.3s cubic-bezier(0.65, 0, 0.35, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-wipe {
  transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.18, 1);
}
.reveal-diagonal {
  transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}
.reveal-stagger > * {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Hidden states — only when JS has activated the system --- */
.reveal-active .reveal-up:not(.in-view) {
  transform: translateY(50px);
  filter: blur(8px);
  opacity: 0;
}
.reveal-active .reveal-scale:not(.in-view) {
  transform: scale(0.88);
  opacity: 0;
}
.reveal-active .reveal-circle:not(.in-view) {
  clip-path: circle(0% at 50% 45%);
}
.reveal-active .reveal-wipe:not(.in-view) {
  clip-path: inset(0 100% 0 0);
}
.reveal-active .reveal-diagonal:not(.in-view) {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.reveal-active .reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
}

/* --- Visible states --- */
.reveal-active .reveal-circle.in-view {
  clip-path: circle(100% at 50% 45%);
}
.reveal-active .reveal-wipe.in-view {
  clip-path: inset(0 0% 0 0);
}
.reveal-active .reveal-diagonal.in-view {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.reveal-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}

/* --- Stagger delays --- */
.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.4s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.5s; }

/* --- Parallax background (subtle) --- */
.reveal-parallax {
  will-change: transform;
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  [class*="reveal-"],
  [class*="reveal-"] > * {
    transition: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}