/* ==========================================================================
   HERO SECTION ENTRANCE ANIMATION
   Add "tv-hero-animate" to the hero section's CSS Class field in Divi.
   Children animate in on page load with a staggered fade-up effect.
   This is CSS-only — no JavaScript required.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes tv-hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Target animatable children within .tv-hero-animate ---------- */
.tv-hero-animate .et_pb_text,
.tv-hero-animate .et_pb_heading,
.tv-hero-animate .et_pb_button_module_wrapper,
.tv-hero-animate .et_pb_image,
.tv-hero-animate .et_pb_blurb,
.tv-hero-animate .tv-animate {
    animation: tv-hero-fade-up 0.7s ease-out both;
}

/* ---------- Staggered delays by element order within each column ---------- */
.tv-hero-animate .et_pb_row .et_pb_column > *:nth-child(1) {
    animation-delay: 0.1s;
}

.tv-hero-animate .et_pb_row .et_pb_column > *:nth-child(2) {
    animation-delay: 0.25s;
}

.tv-hero-animate .et_pb_row .et_pb_column > *:nth-child(3) {
    animation-delay: 0.4s;
}

.tv-hero-animate .et_pb_row .et_pb_column > *:nth-child(4) {
    animation-delay: 0.55s;
}

.tv-hero-animate .et_pb_row .et_pb_column > *:nth-child(5) {
    animation-delay: 0.7s;
}

/* ---------- Respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
    .tv-hero-animate .et_pb_text,
    .tv-hero-animate .et_pb_heading,
    .tv-hero-animate .et_pb_button_module_wrapper,
    .tv-hero-animate .et_pb_image,
    .tv-hero-animate .et_pb_blurb,
    .tv-hero-animate .tv-animate {
        animation: none;
        opacity: 1;
        transform: none;
    }
}