/* ==========================================================================
   HERO SECTION ENTRANCE ANIMATION
   Add "jw-hero" to the hero section's CSS Class field in Divi.
   Children animate in on page load with a staggered fade-up effect.
   ========================================================================== */

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

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

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

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

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

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

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

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