/* Desktop version */
@media (min-width: 768px) {
    @keyframes dropAndHang {
        0% {
            transform: translate(-50%, -100vh);
            opacity: 0;
        }
        60% {
            transform: translate(-50%, 10px);
            opacity: 1;
        }
        70% {
            transform: translate(-50%, -5px);
        }
        80% {
            transform: translate(-50%, 3px);
        }
        90% {
            transform: translate(-50%, -2px);
        }
        100% {
            transform: translate(-50%, 0);
            opacity: 1;
        }
    }
}

/* Mobile version */
@media (max-width: 767px) {
    @keyframes dropAndHang {
        0% {
            transform: translate(-50%, -100vh);
            opacity: 0;
        }
        60% {
            transform: translate(-50%, 10px);
            opacity: 1;
        }
        70% {
            transform: translate(-50%, -5px);
        }
        80% {
            transform: translate(-50%, 3px);
        }
        90% {
            transform: translate(-50%, -2px);
        }
        100% {
            transform: translate(-50%, 0);
            opacity: 1;
        }
    }
}

.hanging-lamp {
    position: absolute;
    top: -50px; /* Aangepast om beter te positioneren binnen hero-content */
    left: 50%;
    z-index: 10; /* Zorg dat de lamp achter de tekst komt */
    animation: none; /* Temporarily disable animation */
    max-width: 320px;
    height: auto;
    /* Ensure the lamp is centered horizontally from the start */
    transform: translateX(-50%);
}

/* Apply animation after a tiny delay to ensure initial transform is applied first */
@media (min-width: 768px) {
    .hanging-lamp {
        animation: dropAndHang 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.01s forwards;
    }
}

@media (max-width: 767px) {
    .hanging-lamp {
        animation: dropAndHang 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.01s forwards;
    }
}