#notebook-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 1;
    z-index: 5; /* Abbassato per permettere all'handheld di andare sopra */
}

#handheld-image {
    position: relative; /* O absolute, a seconda del tuo layout */
    width: 100%;
    height: auto;
    opacity: 0; /* Aggiungi questa riga per nasconderla inizialmente */
    z-index: 10; /* Più alto di notebook-image */
}

#screen-container {
    /* Le tue proprietà esistenti per il posizionamento e le dimensioni */
    position: absolute;
    overflow: hidden;
    width: 46.5%;
    height: 52.5%;
    top: 27%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15; /* Aggiungi o modifica questa riga. Deve essere maggiore di z-index: 10 di #handheld-image */
}

/* 1. Animazione lenta CON GRADAZIONE BLUR PIÙ LENTA */
@keyframes notebook-slow-pan {
    /* Inizio (0 secondi) */
    0% {
        transform: translateX(0) scale(1);
        filter: blur(0px);
        opacity: 1;
    }
    /* Inizio transizione blur (al secondo 1.75) */
    70% {
        filter: blur(0px); /* <- MODIFICATO: Inizia a sfocare prima */
    }
    /* Fine (2.5 secondi) */
    100% {
        transform: translateX(-15%) scale(0.85);
        filter: blur(4px); /* <- MODIFICATO: Effetto finale più leggero */
        opacity: 1;
    }
}

/* 2. Animazione veloce che PARTE dal nuovo valore di blur */
@keyframes notebook-fast-pan-blur {
    /* Inizio */
    from {
        transform: translateX(-15%) scale(0.85);
        filter: blur(4px); /* <- MODIFICATO: Parte da 4px per coerenza */
        opacity: 1;
    }
    /* Fine */
    to {
        transform: translateX(-150%) scale(0.1);
        filter: blur(20px);
        opacity: 0;
    }
}

/* 3. Animazione di slide-in per l'immagine handheld */
@keyframes handheld-slide-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Animazione di slide-out per l'immagine handheld */
@keyframes handheld-slide-out-down {
    from {
        transform: translateY(0);
        opacity: 1; /* Assicurati che parta visibile */
    }
    to {
        transform: translateY(100%); /* Scivola in basso fuori dalla vista */
        opacity: 0; /* Scompare durante lo slide */
    }
}

/* Classi di utility per applicare le animazioni via JavaScript */
.notebook-slow-pan-animation {
    animation: notebook-slow-pan 2.5s ease-out forwards;
}

.notebook-fast-pan-blur-animation {
    /* Utilizza una curva cubica per un'accelerazione realistica (120fps feel) */
    animation: notebook-fast-pan-blur 1.0s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

.handheld-slide-in-animation {
    /* La visibilità è gestita da JS, l'animazione fa lo slide */
    animation: handheld-slide-in 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.handheld-slide-out-down-animation {
    /* Usa la stessa durata e easing della slide-in per coerenza o personalizza */
    animation: handheld-slide-out-down 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}