/* Magic Image Expander Styles - Due Step Rigorosi */

.magic-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 35px 0;
    width: 100%;
    overflow: hidden;
}

/* STEP 1: Immagine rigorosamente piccolissima fin dal caricamento */
.magic-image {
    width: 100% !important;
    max-width: 120px !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    filter: blur(2px) grayscale(30%);
    opacity: 0.9;
    cursor: pointer;

    /* Nessuna transizione finche e piccolissima: parte fissa e pulita */
    transition: none;
}

/* STEP 2: Quando entra nel viewport, si sblocca la transizione graduale di 10 secondi */
.magic-image.is-expanded {
    max-width: 900px !important;
    filter: blur(0px) grayscale(0%);
    opacity: 1;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.25);

    /* Transizione slow-motion a 10 secondi rigorosamente in espansione */
    transition: max-width 10s cubic-bezier(0.16, 1, 0.3, 1),
                filter 6s ease-out,
                box-shadow 6s ease-out;
}