/* ==========================================================================
   Animations — slide directions + stagger support
   ==========================================================================
   Usage:
     Basic:     <div class="reveal reveal-slide-up">...</div>
     Stagger:   <div class="stagger">
                    <div class="reveal">1</div>
                    <div class="reveal">2</div>
                    <div class="reveal">3</div>
                 </div>

   Customization via CSS custom properties:
     --animation-duration   (default: 0.7s)
     --animation-delay      (default: 0s, used per-element)
     --stagger-delay        (default: 0.12s, gap between staggered children)
     --animation-distance   (default: 40px, slide distance)
     --animation-easing     (default: cubic-bezier(0.16, 1, 0.3, 1))
   ========================================================================== */

:root {
	--animation-duration: 0.7s;
	--animation-delay: 0s;
	--stagger-delay: 0.2s;
	--animation-distance: 40px;
	--animation-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base: hidden until .is-visible ---------- */

.reveal {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity var(--animation-duration) var(--animation-easing) var(--animation-delay),
		transform var(--animation-duration) var(--animation-easing) var(--animation-delay);
}

/* ---------- Slide Up ---------- */

.reveal-slide-up {
	transform: translateY(var(--animation-distance));
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0) translateX(0);
}

/* ---------- Slide Right ---------- */

.reveal-slide-right {
	transform: translateX(calc(-1 * var(--animation-distance)));
}

/* ---------- Slide Left ---------- */

.reveal-slide-left {
	transform: translateX(var(--animation-distance));
}

/* ---------- Slide Down ---------- */

.reveal-slide-down {
	transform: translateY(calc(-1 * var(--animation-distance)));
}

/* ---------- Fade (no slide, just opacity) ---------- */

.reveal-fade {
	transform: none;
}

/* ---------- Stagger container ---------- */
/* Stagger delay is set via inline --animation-delay by JS,
   so it works regardless of nesting depth. */

/* ---------- Manual delay overrides ---------- */

.delay-200 { --animation-delay: 0.2s !important; }
.delay-400 { --animation-delay: 0.4s !important; }
.delay-600 { --animation-delay: 0.6s !important; }

/* ---------- Reduced motion ---------- */

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