/* Definisci le transizioni per il corpo (body) della pagina */

/* Movimento verso il basso, come se si stesse andando su */
.move-down {
    animation: moveDown 1s forwards;
}

/* Movimento diagonale verso l'alto sinistra */
.move-diagonal-up-left {
    animation: moveDiagonalUpLeft 1s forwards;
}

/* Movimento verso sinistra, come se si andasse a destra */
.move-left {
    animation: moveLeft 1s forwards;
}

/* Movimento verso l'alto, come se si stesse andando giù */
.move-up {
    animation: moveUp 1s forwards;
}

/* Movimento verso destra, come se si andasse a sinistra */
.move-right {
    animation: moveRight 1s forwards;
}

/* Movimento diagonale verso l'alto a destra */
.move-diagonal-up-right {
    animation: moveDiagonalUpRight 1s forwards;
}

/* Movimento diagonale verso il basso sinistra */
.move-diagonal-down-left {
    animation: moveDiagonalDownLeft 1s forwards;
}

/* Movimento diagonale verso il basso destra */
.move-diagonal-down-right {
    animation: moveDiagonalDownRight 1s forwards;
}

/* Move Down (Usato per page1, che simula l'utente che scende) */
.move-down {
    animation: moveDown 1s forwards;
}

/* Definizione delle keyframes per ogni animazione */

/* Move Down - Simula l'effetto di andare verso l'alto, quindi la pagina si muove in basso */
@keyframes moveDown {
    from {
        transform: translateY(0);
        opacity: 1;		
		filter: blur(0px); 		
    }
    to {
        transform: translateY(-100%); /* La pagina sale, simulando che l'utente scende */
        opacity: 0.5;
        filter: blur(5px);		
    }
}

/* Move Diagonal Down Right - Simula l'effetto di andare verso l'alto a sinistra */
@keyframes moveDiagonalUpLeft {
    from {
        transform: translate(0, 0);
        opacity: 1;		
    }
    to {
        transform: translate(100%, 100%); /* La pagina si muove in basso a destra per simulare l'utente che va in alto a sinistra */
        opacity: 0.3;
        filter: blur(5px);
    }
}

/* Move Left - Simula l'effetto di andare verso destra, quindi la pagina si muove a sinistra */
@keyframes moveLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Move Up - Simula l'effetto di andare verso il basso, quindi la pagina si muove in alto */
@keyframes moveUp {
    from {
        transform: translateY(0);
        opacity: 1;		
		filter: blur(0px); 		
    }
    to {
        transform: translateY(100%); /* La pagina scende, simulando che l'utente sale */
        opacity: 0.5;
        filter: blur(5px);		
    }
}

/* Move Right - Simula l'effetto di andare verso sinistra, quindi la pagina si muove a destra */
@keyframes moveRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* Keyframes per la transizione diagonale verso l'alto a destra */
@keyframes moveDiagonalUpRight {
    from {
        transform: translate(0, 0);
        opacity: 1;
    }
    to {
        transform: translate(-100%, 100%); /* Pagina va in basso a sinistra per simulare l'utente che va in alto a destra */
        opacity: 0.3;
        filter: blur(5px);
    }
}

/* Movimento diagonale verso il basso sinistra */
@keyframes moveDiagonalDownLeft {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(100%, -100%); /* Pagina si muove in alto a destra per simulare l'utente che va in basso a sinistra */
        opacity: 0.3;
        filter: blur(5px);
    }
}

/* Movimento diagonale verso il basso destra */
@keyframes moveDiagonalDownRight {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-100%, -100%); /* Pagina si muove in alto a sinistra per simulare l'utente che va in basso a destra */
        opacity: 0.3;
        filter: blur(5px);
    }
}

@keyframes moveDown {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%); /* La pagina si muove verso l'alto per simulare che l'utente va verso il basso */
    }
}

/* Applicare easing personalizzato alle transizioni diagonali */
.move-diagonal-up-left, .move-diagonal-up-right, .move-diagonal-down-left, .move-diagonal-down-right {
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-duration: 2.5s;
}

/* Modificare le animazioni su/giù con easing personalizzato */
.move-up, .move-down {
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* Più fluido e graduale */
    animation-duration: 2.5s; /* Aumenta leggermente la durata */
}

/* Aggiungere un overlay sfumato durante le transizioni */
.move-diagonal-up-left, .move-diagonal-up-right, .move-diagonal-down-left, .move-diagonal-down-right {
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5)); /* Overlay gradiente che copre gli angoli */
}

/* Aggiungere sfocatura agli angoli durante le transizioni diagonali */
.move-diagonal-up-left, .move-diagonal-up-right, .move-diagonal-down-left, .move-diagonal-down-right {
    filter: blur(2px); /* Sfocatura leggera per ammorbidire gli angoli */
    border-radius: 20px;
    overflow: hidden;
}