/* Stili personalizzati */
body {
    /* Usa il font di sistema predefinito, simile all'approccio di Apple */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    overscroll-behavior: none; /* Previene "bounce" su scroll */
}
/* I titoli (h1, h2, h3) useranno il font del body per coerenza */

/* Struttura a scorrimento orizzontale */
.page-container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Nasconde la scrollbar principale */
}
.content-wrapper {
    display: flex;
    width: 100%; 
    transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); /* Transizione accelerata */
}
.page {
    width: 94%; /* Crea spazio per l'anteprima della pagina successiva */
    margin-right: 1%; /* Aggiunge un gap visivo tra le pagine */
    flex-shrink: 0;
    height: 100vh;
    overflow-y: auto; 
    scroll-behavior: smooth;
}
/* Stile per la navigazione a segnalibro */
.nav-link.active {
    background-color: #4f46e5; /* indigo-600 */
    color: white;
    transform: translateX(0);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.nav-link {
    transition: all 0.3s ease-in-out;
}

/* Stile per la sezione "Altri Progetti" (sfondo scuro) */
.altri-progetti-bg {
     background-color: #1f2937; /* gray-800 */
     color: #f3f4f6; /* gray-100 */
}
.altri-progetti-bg h2 {
    color: white;
}

/* Stili per le finestre modali (pop-up) */
.modal-overlay {
    transition: opacity 0.3s ease;
}
.modal-content {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
body.modal-open {
    overflow: hidden;
}

/* Animazione per la freccia di swipe su mobile */
@keyframes fade-pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}
.animate-fade-pulse {
    animation: fade-pulse 2.5s infinite;
}

/* Stile per l'icona di caricamento (loader) */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #4f46e5;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}