/* example:
   .reveal.fade-up.duration-700.delay-300
*/

.reveal {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: var(--reveal-duration, 700ms);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

/* Effects */
.reveal.fade-in {
  transform: none;
}

.reveal.fade-up {
  transform: translateY(64px);
}

.reveal.fade-down {
  transform: translateY(-64px);
}

.reveal.fade-left {
  transform: translateX(64px);
}

.reveal.fade-right {
  transform: translateX(-64px);
}

.reveal.zoom-in {
  transform: scale(0.96);
}

.reveal.blur-in {
  filter: blur(8px);
}

/* Active state — keep this AFTER effects */
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Durations */
.duration-100 { --reveal-duration: 100ms; }
.duration-200 { --reveal-duration: 200ms; }
.duration-300 { --reveal-duration: 300ms; }
.duration-400 { --reveal-duration: 400ms; }
.duration-500 { --reveal-duration: 500ms; }
.duration-600 { --reveal-duration: 600ms; }
.duration-700 { --reveal-duration: 700ms; }
.duration-800 { --reveal-duration: 800ms; }
.duration-900 { --reveal-duration: 900ms; }
.duration-1000 { --reveal-duration: 1000ms; }
.duration-1100 { --reveal-duration: 1100ms; }
.duration-1200 { --reveal-duration: 1200ms; }
.duration-1300 { --reveal-duration: 1300ms; }
.duration-1400 { --reveal-duration: 1400ms; }
.duration-1500 { --reveal-duration: 1500ms; }
.duration-1600 { --reveal-duration: 1600ms; }
.duration-1700 { --reveal-duration: 1700ms; }
.duration-1800 { --reveal-duration: 1800ms; }
.duration-1900 { --reveal-duration: 1900ms; }
.duration-2000 { --reveal-duration: 2000ms; }

/* Delays */
.delay-0 { --reveal-delay: 0ms; }
.delay-100 { --reveal-delay: 100ms; }
.delay-200 { --reveal-delay: 200ms; }
.delay-300 { --reveal-delay: 300ms; }
.delay-400 { --reveal-delay: 400ms; }
.delay-500 { --reveal-delay: 500ms; }
.delay-600 { --reveal-delay: 600ms; }
.delay-700 { --reveal-delay: 700ms; }
.delay-800 { --reveal-delay: 800ms; }
.delay-900 { --reveal-delay: 900ms; }
.delay-1000 { --reveal-delay: 1000ms; }
.delay-1100 { --reveal-delay: 1100ms; }
.delay-1200 { --reveal-delay: 1200ms; }
.delay-1300 { --reveal-delay: 1300ms; }
.delay-1400 { --reveal-delay: 1400ms; }
.delay-1500 { --reveal-delay: 1500ms; }
.delay-1600 { --reveal-delay: 1600ms; }
.delay-1700 { --reveal-delay: 1700ms; }
.delay-1800 { --reveal-delay: 1800ms; }
.delay-1900 { --reveal-delay: 1900ms; }
.delay-2000 { --reveal-delay: 2000ms; }


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ================================
   Stagger utilities
   Usage:
   <div class="stagger">
     <div class="reveal fade-up duration-700">...</div>
     <div class="reveal fade-up duration-700">...</div>
   </div>
================================ */
.stagger .reveal:nth-child(1) {
  --reveal-delay: 0ms;
}

.stagger .reveal:nth-child(2) {
  --reveal-delay: 100ms;
}

.stagger .reveal:nth-child(3) {
  --reveal-delay: 200ms;
}

.stagger .reveal:nth-child(4) {
  --reveal-delay: 300ms;
}

.stagger .reveal:nth-child(5) {
  --reveal-delay: 400ms;
}

.stagger .reveal:nth-child(6) {
  --reveal-delay: 500ms;
}

.stagger .reveal:nth-child(7) {
  --reveal-delay: 600ms;
}

.stagger .reveal:nth-child(8) {
  --reveal-delay: 700ms;
}

.stagger .reveal:nth-child(9) {
  --reveal-delay: 800ms;
}

.stagger .reveal:nth-child(10) {
  --reveal-delay: 900ms;
}

.stagger .reveal:nth-child(11) {
  --reveal-delay: 1000ms;
}

.stagger .reveal:nth-child(12) {
  --reveal-delay: 1100ms;
}