/* --- MOTION GRAPHICS (Line Art) --- */

.motion-container {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    overflow: visible;
}

/* Stile base dell'SVG */
.motion-icon {
    width: 80px; /* Grandezza icona */
    height: 80px;
    display: block;
}

    /* Le linee del disegno */
    .motion-icon path,
    .motion-icon circle,
    .motion-icon rect,
    .motion-icon line {
        fill: none; /* Trasparente dentro */
        stroke: var(--accent); /* Colore Oro */
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        /* TRUCCO PER L'ANIMAZIONE */
        stroke-dasharray: 1000; /* Lunghezza tratto */
        stroke-dashoffset: 1000; /* Nasconde il tratto inizialmente */
        transition: stroke-dashoffset 2.5s ease-out, fill 1s ease 2s;
    }

    /* Quando la classe .play viene aggiunta dal JS */
    .motion-icon.play path,
    .motion-icon.play circle,
    .motion-icon.play rect,
    .motion-icon.play line {
        stroke-dashoffset: 0; /* Disegna la linea */
    }

/* Effetto Float (Galleggiamento continuo) */
.float-anim {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Decorazione "Bollicine" di sfondo (opzionale, effetto champagne) */
.bubbles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bubble {
    position: absolute;
    bottom: -10px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0.3;
    animation: rise 10s infinite ease-in;
}

@keyframes rise {
    0% {
        bottom: -10px;
        transform: translateX(0);
        opacity: 0;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        bottom: 100%;
        transform: translateX(-20px);
        opacity: 0;
    }
}
/* --- BOLLICINE VERSO IL BASSO (Effetto Fizz Forte) --- */
.bubble-down {
    position: absolute;
    top: -10px; /* Parte dall'alto */
    background: rgba(212, 175, 55, 0.8); /* Oro più solido (Forte) */
    border-radius: 50%;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    animation: fall linear infinite; /* Movimento lineare e costante */
}

@keyframes fall {
    0% {
        top: -10px;
        transform: translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 0.8; /* Diventa subito visibile */
    }

    100% {
        top: 100%; /* Arriva in fondo */
        transform: translateX(20px); /* Leggero spostamento laterale */
        opacity: 0;
    }
}

/* --- EFFETTO "PORTA" (PARALLAX REVEAL) --- */
.parallax-window {
    min-height: 500px; /* Altezza Desktop */
    /* CONFIGURAZIONE BASE */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* Copre tutto lo spazio */
    /* IL CUORE DELL'EFFETTO: L'immagine sta ferma rispetto allo schermo */
    background-attachment: fixed;
    position: relative;
    z-index: 1;
    /* Ombre interne per dare profondità */
    box-shadow: inset 0 20px 20px rgba(0,0,0,0.8), inset 0 -20px 20px rgba(0,0,0,0.8);
}

/* --- MOBILE CONFIGURATION --- */
@media (max-width: 768px) {
    .parallax-window {
        /* FORZA L'EFFETTO FISSO ANCHE SU MOBILE */
        background-attachment: fixed !important;
        /* Assicuriamo che l'immagine sia centrata e copra tutto */
        background-position: center center !important;
        background-size: cover !important;
        /* Riduciamo l'altezza della finestra su mobile per proporzione */
        min-height: 300px;
    }
}