/* ═══════════════════════════════════════════
   SCROLL REVEAL — Core Animation System
   Based on Intersection Observer + CSS transitions
   Zero dependencies, GPU-accelerated, WCAG AA
   ═══════════════════════════════════════════ */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Base */
.reveal {
  opacity: 0;
  transform: none;      /* override style.css base transform to prevent leaking */
  transition: opacity 500ms var(--ease-out-expo);
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* Fade Up */
.reveal--fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}
.reveal--fade-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Fade Up Slow */
.reveal--fade-up-slow {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo);
}
.reveal--fade-up-slow.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Fade In */
.reveal--fade-in {
  opacity: 0;
  transition: opacity 600ms var(--ease-out-expo);
}
.reveal--fade-in.revealed {
  opacity: 1;
}

/* Slide Left */
.reveal--slide-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}
.reveal--slide-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Slide Right */
.reveal--slide-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}
.reveal--slide-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Scale In */
.reveal--scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-spring);
}
.reveal--scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Clip Reveal */
.reveal--clip {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 800ms var(--ease-out-expo), opacity 400ms var(--ease-out-expo);
}
.reveal--clip.revealed {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* Blur Reveal */
.reveal--blur {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-out-expo), filter 800ms var(--ease-out-expo), transform 800ms var(--ease-out-expo);
}
.reveal--blur.revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Fade Down */
.reveal--fade-down {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}
.reveal--fade-down.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Rotate Reveal */
.reveal--rotate {
  opacity: 0;
  transform: rotate(-5deg) translateY(30px);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}
.reveal--rotate.revealed {
  opacity: 1;
  transform: rotate(0deg) translateY(0);
}

/* Depth Rise */
.reveal--depth-rise {
  opacity: 0;
  transform: translateY(80px) scale(0.95);
  transition: opacity 800ms var(--ease-out-expo), transform 800ms var(--ease-out-expo);
}
.reveal--depth-rise.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Glow Pulse */
.reveal--glow {
  opacity: 0;
  filter: brightness(0.4) blur(8px);
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-out-expo), filter 800ms var(--ease-out-expo), transform 800ms var(--ease-out-expo);
}
.reveal--glow.revealed {
  opacity: 1;
  filter: brightness(1) blur(0);
  transform: translateY(0);
}

/* Stretch Reveal */
.reveal--stretch {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 700ms var(--ease-out-expo), opacity 400ms var(--ease-out-expo);
}
.reveal--stretch.revealed {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* Drop Spring */
.reveal--drop-spring {
  opacity: 0;
  transform: translateY(-60px);
  transition: opacity 500ms var(--ease-out-expo), transform 600ms var(--ease-spring);
}
.reveal--drop-spring.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.delay-1 { transition-delay: 0ms; }
.delay-2 { transition-delay: 100ms; }
.delay-3 { transition-delay: 200ms; }
.delay-4 { transition-delay: 300ms; }
.delay-5 { transition-delay: 400ms; }
.delay-6 { transition-delay: 500ms; }

/* Alias: reveal-delay-* (used in various pages) */
.reveal-delay-1 { transition-delay: 0ms; }
.reveal-delay-2 { transition-delay: 100ms; }
.reveal-delay-3 { transition-delay: 200ms; }
.reveal-delay-4 { transition-delay: 300ms; }
.reveal-delay-5 { transition-delay: 400ms; }
.reveal-delay-6 { transition-delay: 500ms; }

/* Performance hint */
.reveal.animating {
  will-change: transform, opacity;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.revealed {
    transition: opacity 200ms ease-out !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}