/**
 * Hero Hotspots Animation Styles
 */

/* Keyframes for the drop and bounce effect */
@keyframes dropAndPin {
    0% {
        opacity: 0;
        transform: translateY(-200%);
    }
    60% {
        opacity: 1;
        transform: translateY(10%);
    }
    80% {
        transform: translateY(-5%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyframes for the continuous pulsing effect */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Target Hotspots in the first Elementor Section/Container (Hero) */
.elementor-section:first-child .e-hotspot__button,
.elementor-container:first-child .e-hotspot__button,
.e-con:first-child .e-hotspot__button {
    /* Chain animations: dropAndPin (once) then pulse (forever) */
    animation-name: dropAndPin, pulse;
    animation-duration: 1.5s, 2s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1), ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
    
    opacity: 0; /* Start invisible */
    will-change: transform, opacity;
}

/* Staggered delays */
/* First value: drop start delay */
/* Second value: pulse start delay (drop delay + 1.5s duration) */
.elementor-widget-hotspot:nth-child(1) .e-hotspot__button { animation-delay: 0.3s, 1.8s; }
.elementor-widget-hotspot:nth-child(2) .e-hotspot__button { animation-delay: 0.6s, 2.1s; }
.elementor-widget-hotspot:nth-child(3) .e-hotspot__button { animation-delay: 0.9s, 2.4s; }
.elementor-widget-hotspot:nth-child(4) .e-hotspot__button { animation-delay: 1.2s, 2.7s; }
.elementor-widget-hotspot:nth-child(5) .e-hotspot__button { animation-delay: 1.5s, 3.0s; }

/* Ensure tooltips don't animate */
.e-hotspot__tooltip {
    animation: none !important;
}