html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    overflow: hidden;
}

.intro-stage {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 900px;
}

/* Contenitore dei due livelli: il tappo (fisso) e il cavatappi (che vi affonda dentro) */
.assembly {
    position: relative;
    width: min(40vw, 320px);
    /* stesso rapporto larghezza/altezza dell'immagine sorgente (676x618) */
    aspect-ratio: 676 / 618;
}

    .assembly img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

/* Il cavatappi: manico + asta + spirale. Ruota attorno al proprio asse
   verticale (perpendicolare al tappo) e ad ogni giro affonda un po' di più,
   sparendo progressivamente dietro al tappo che sta fisso sopra di lui */
.corkscrew-moving {
    z-index: 1;
    transform-origin: 50% 40%;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Il tappo: resta fermo, in primo piano, e "inghiotte" il cavatappi
   man mano che questo affonda */
.cork-fixed {
    z-index: 2;
    pointer-events: none;
}

.corkscrew-moving.turn-1 {
    animation: turnY1 0.6s linear forwards;
}

.corkscrew-moving.turn-2 {
    animation: turnY2 0.55s linear forwards;
}

.corkscrew-moving.turn-3 {
    animation: turnY3 0.5s linear forwards;
}

@keyframes turnY1 {
    from {
        transform: rotateY(0deg) translateY(0px);
    }

    to {
        transform: rotateY(360deg) translateY(14px);
    }
}

@keyframes turnY2 {
    from {
        transform: rotateY(360deg) translateY(14px);
    }

    to {
        transform: rotateY(720deg) translateY(30px);
    }
}

@keyframes turnY3 {
    from {
        transform: rotateY(720deg) translateY(30px);
    }

    to {
        transform: rotateY(1080deg) translateY(48px);
    }
}

/* Stappo: a questo punto cavatappi e tappo sono "agganciati" insieme
   e si sollevano di scatto tutti e due, sfumando */
.assembly.pop-out {
    animation: popOut 0.6s cubic-bezier(.2, .8, .3, 1) forwards;
}

@keyframes popOut {
    from {
        transform: translateY(0px);
        opacity: 1;
    }

    to {
        transform: translateY(-90px);
        opacity: 0;
    }
}

/* Dissolvenza dell'intera pagina prima del redirect verso la Home */
.intro-stage.fade-out {
    transition: opacity 0.5s ease-in;
    opacity: 0;
}