/* ═══════════════════════════════════════════════════════════
   HOME PAGE — Scroll-reveal animations
   Matches the delayed smooth reveal system on the About page.
   Elements start faint and shifted, then settle in with a
   springy ease as they scroll into view.
   ═══════════════════════════════════════════════════════════ */

/* Base hidden state — elements start invisible and shifted down */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Visible state — smooth ease-out settle */
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for grouped children */
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

/* Pop-in — for featured banners (e.g. Become an Author CTA) */
.reveal-pop {
    opacity: 0;
    transform: scale(0.9);
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
}

.reveal-pop.visible {
    opacity: 1;
    transform: scale(1);
}

/* Rise-in — smooth transition for stacked feature banners (Explore Stories).
   Complements the Become an Author pop above: the banner rises from below,
   the background image slowly settles into place (subtle Ken Burns zoom),
   and the text layers in with a soft stagger — like a gentle page turn. */
.reveal-rise {
    opacity: 0;
    transform: translateY(44px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-rise img {
    transform: scale(1.12);
    transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.reveal-rise .home-cta-banner-content {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.9s ease 0.15s,
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

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

.reveal-rise.visible img {
    transform: scale(1);
}

.reveal-rise.visible .home-cta-banner-content {
    opacity: 1;
    transform: translateY(0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-pop,
    .reveal-rise,
    .reveal-rise img,
    .reveal-rise .home-cta-banner-content {
        opacity: 1;
        transform: none;
        transition: none;
    }
}