.journey-map-background-underlay {
    background-image: url('../assets/images/backgrounds/start-bg.webp');
}

.journey-map-background-overlay {
    background-image: url('../assets/images/backgrounds/map-bg.webp');
}

.map-pulse-container {
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.map-pulse-container.pulsing {
    animation: pulseScroll 2s ease-in-out infinite;
}

#map-scroll-item {
    width: 35cqw;
    max-width: 300px;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.7));
    transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.8s ease-in-out;
}

#map-scroll-item.zoomed {
    transform: scale(15) rotate(12deg);
    opacity: 0;
    pointer-events: none;
}

.continue-button-image {
    position: absolute;
    bottom: 8cqh;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out, transform 0.2s ease;
}

.continue-button-image.visible {
    opacity: 1;
    pointer-events: auto;
}

.continue-button-image img {
    width: 25cqw;
    max-width: 220px;
    height: auto;
    object-fit: contain;
}

.continue-button-image.visible img {
    animation: danceAndPulse 2.5s infinite ease-in-out;
}

@keyframes danceAndPulse {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 10px 20px rgba(207, 168, 110, 0.4));
    }

    25% {
        transform: scale(1.05) rotate(-3deg);
        filter: drop-shadow(0 12px 25px rgba(207, 168, 110, 0.6));
    }

    50% {
        transform: scale(1.08) rotate(0deg);
        filter: drop-shadow(0 15px 30px rgba(207, 168, 110, 0.8));
    }

    75% {
        transform: scale(1.05) rotate(3deg);
        filter: drop-shadow(0 12px 25px rgba(207, 168, 110, 0.6));
    }
}

@keyframes pulseScroll {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 10px 25px rgba(207, 168, 110, 0.5));
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 10px 35px rgba(207, 168, 110, 0.8));
    }
}