/* ============================================
   Hero Entry Animation — "Cinematic Reveal"
   Staggered entrance for index.html hero section
   ============================================ */

/* --- Keyframes --- */

/* Badge: soft pop-in */
@keyframes heroPop {
    0% {
        opacity: 0;
        transform: scale(0.6);
        filter: blur(4px);
    }

    60% {
        transform: scale(1.08);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* Title words: clip-path reveal from below */
@keyframes heroRevealClip {
    0% {
        opacity: 0;
        clip-path: inset(100% 0 -10% 0);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 -10% 0);
        transform: translateY(0);
    }
}

/* Subtitle: gentle fade + drift up */
@keyframes heroFadeUp {
    0% {
        opacity: 0;
        transform: translateY(24px);
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Buttons: elastic rise */
@keyframes heroSlideUp {
    0% {
        opacity: 0;
        transform: translateY(32px) scale(0.95);
    }

    70% {
        transform: translateY(-4px) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Stats: snappy pop */
@keyframes heroStatPop {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(16px);
    }

    70% {
        transform: scale(1.06) translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Video: smooth scale-in */
@keyframes heroScaleIn {
    0% {
        opacity: 0;
        transform: scale(0.88) translateY(16px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Floating card: slide up from below */
@keyframes heroFloatUp {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }

    70% {
        transform: translateY(-6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- Animation Classes --- */

/* All animated elements start invisible */
.hero-anim-badge,
.hero-anim-title-1,
.hero-anim-title-2,
.hero-anim-title-3,
.hero-anim-subtitle,
.hero-anim-btn-primary,
.hero-anim-btn-secondary,
.hero-anim-stats,
.hero-anim-video,
.hero-anim-float-card {
    opacity: 0;
}

/* Badge */
.hero-anim-badge {
    animation: heroPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

/* Title — 3 spans staggered */
.hero-anim-title-1 {
    display: inline-block;
    animation: heroRevealClip 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

.hero-anim-title-2 {
    display: inline-block;
    animation: heroRevealClip 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

.hero-anim-title-3 {
    display: inline-block;
    animation: heroRevealClip 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

/* Subtitle */
.hero-anim-subtitle {
    animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
}

/* CTA Buttons */
.hero-anim-btn-primary {
    animation: heroSlideUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both;
}

.hero-anim-btn-secondary {
    animation: heroSlideUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.25s both;
}

/* Stats container */
.hero-anim-stats {
    animation: heroStatPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both;
}

/* Video / Image */
.hero-anim-video {
    animation: heroScaleIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

/* Floating card */
.hero-anim-float-card {
    animation: heroFloatUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s both;
}


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

    .hero-anim-badge,
    .hero-anim-title-1,
    .hero-anim-title-2,
    .hero-anim-title-3,
    .hero-anim-subtitle,
    .hero-anim-btn-primary,
    .hero-anim-btn-secondary,
    .hero-anim-stats,
    .hero-anim-video,
    .hero-anim-float-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}