/* ── Scroll Reveal ──────────────────────────────────────────────────────────
 * Base hidden state for all reveal elements.
 * Add class="reveal" to any element you want to animate in on scroll.
 * Add class="reveal reveal-left" or "reveal reveal-right" for slide-in variants.
 * Wrap a group in "reveal-stagger" to stagger children automatically.
 * ───────────────────────────────────────────────────────────────────────── */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.reveal-left {
    transform: translateX(-32px);
    opacity: 0;
}

.reveal.reveal-right {
    transform: translateX(32px);
    opacity: 0;
}

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

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

/* Hero content loads on page load, not scroll */
.hero .hero-content {
    opacity: 0;
    transform: translateY(20px);
    animation: hero-enter 0.8s ease 0.2s forwards;
}

@keyframes hero-enter {
    to { opacity: 1; transform: translateY(0); }
}