.iphone-container {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(10px);
    transition:
        opacity 0.5s ease-out,
        transform 0.5s ease-out,
        filter 0.5s ease-out;
    border-radius: 70px;
}

.iphone-container.visible {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);

    /* Trigger extended visual effect */
    animation: ambientEffect 6s ease-in-out forwards;
}

/* Extra animation AFTER appearing */
@keyframes ambientEffect {
    0% {
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
        transform: scale(0) rotate(1deg);
    }

    20% {
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.4);
        transform: scale(1.05) rotate(1deg);
    }

    30% {
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
        transform: scale(1) rotate(-1deg);
    }

    40% {
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.4);
        transform: scale(1.02) rotate(1deg);
    }

    50% {
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
        transform: scale(1) rotate(-1deg);
    }

    60% {
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.4);
        transform: scale(1.02) rotate(1deg);
    }

    70% {
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
        transform: scale(1) rotate(-1deg);
    }

    80% {
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.4);
        transform: scale(1.02) rotate(1deg);
    }

    90% {
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
        transform: scale(1) rotate(-1deg);
    }

    100% {
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
        transform: scale(1) rotate(0deg);
    }
}

.hidden {
    display: none;
}