/* ==============================
   Animations — Page Load & Scroll Reveal
   ============================== */

/* ---- Page-load hero animation ---- */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__badge,
.hero h1,
.hero__desc,
.hero__buttons,
.hero__image {
    animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__badge {
    animation-delay: 0.05s;
}

.hero h1 {
    animation-delay: 0.12s;
}

.hero__desc {
    animation-delay: 0.2s;
}

.hero__buttons {
    animation-delay: 0.28s;
}

.hero__image {
    animation-delay: 0.18s;
}


/* ---- Scroll-reveal system ---- */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

/* Stagger delays for grouped items */
.reveal-delay-1 {
    transition-delay: 0.08s;
}

.reveal-delay-2 {
    transition-delay: 0.16s;
}

.reveal-delay-3 {
    transition-delay: 0.24s;
}

.reveal-delay-4 {
    transition-delay: 0.32s;
}

.reveal-delay-5 {
    transition-delay: 0.40s;
}


/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {

    .hero__badge,
    .hero h1,
    .hero__desc,
    .hero__buttons,
    .hero__image {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}