/* 1. Set the initial hidden state for the images */
.curtain-anim .kt-inside-inner-col .wp-block-kadence-image {
    opacity: 0; 
    transform: translateY(60px);
    will-change: opacity, transform;
    animation: fadeUpIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. Define the lightweight hardware-accelerated animation */
@keyframes fadeUpIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. Apply the sequential 50ms staggering delays */
.curtain-anim .kt-inside-inner-col .wp-block-kadence-image:nth-child(1) { animation-delay: 0ms; }
.curtain-anim .kt-inside-inner-col .wp-block-kadence-image:nth-child(2) { animation-delay: 70ms; }
.curtain-anim .kt-inside-inner-col .wp-block-kadence-image:nth-child(3) { animation-delay: 140ms; }
.curtain-anim .kt-inside-inner-col .wp-block-kadence-image:nth-child(4) { animation-delay: 210ms; }
.curtain-anim .kt-inside-inner-col .wp-block-kadence-image:nth-child(5) { animation-delay: 280ms; }
.curtain-anim .kt-inside-inner-col .wp-block-kadence-image:nth-child(6) { animation-delay: 350ms; }
.curtain-anim .kt-inside-inner-col .wp-block-kadence-image:nth-child(7) { animation-delay: 420ms; }
.curtain-anim .kt-inside-inner-col .wp-block-kadence-image:nth-child(8) { animation-delay: 490ms; }

.eh--above-the-fold h1.wp-block-kadence-advancedheading, 
.eh--above-the-fold p.slogan, 
.eh--above-the-fold .kt-svg-icon-list,
.eh--above-the-fold .kb-button,
.eh--business-pages-hero .business-page-title-heading,
.eh--business-pages-hero .ar--subtitle
{
    opacity: 0;
    transform: translateY(60px);
    will-change: opacity, transform;
    animation: fadeUpIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    
    /* Optional: If you want the heading to wait a tiny bit or start instantly */
    animation-delay: 0ms; 
}


/* media for desktop only */

@media (min-width: 768px) {
    /* Automated Algorithm: Targets the sequential instances of buttons automatically */
    .eh--above-the-fold .kb-button:nth-of-type(1), .eh--business-pages-hero .kb-button:nth-of-type(1) { animation-delay: 200ms !important; }
    .eh--above-the-fold .kb-button:nth-of-type(2), .eh--business-pages-hero .kb-button:nth-of-type(2) { animation-delay: 400ms !important; }
    .eh--above-the-fold .kb-button:nth-of-type(3), .eh--business-pages-hero .kb-button:nth-of-type(3) { animation-delay: 600ms !important; }
    .eh--above-the-fold .kb-button:nth-of-type(4), .eh--business-pages-hero .kb-button:nth-of-type(4) { animation-delay: 800ms !important; }
    

    .slight-delay {
        animation-delay: 200ms !important;
    }
    .more-delay {
        animation-delay: 400ms !important;
    }
    
}