/* --- style.css --- */

:root {
    --bg-color: #0a0a0a;
    --text-color: #f5f5f7;
    --accent: #2997ff;
}

/* Fix per Mobile e Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden; /* Taglia l'eccesso orizzontale solo qui */
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    /* Rimosso overflow-x da qui per non confondere i browser Android */
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; }
a  { text-decoration: none; color: inherit; }
.github { text-decoration: solid; color: var(--accent);  }

/* --- NAVBAR SUPERIORE --- */
.top-nav {
    position: absolute; /* Sostituisce 'fixed' per farla scorrere via */
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 0; /* Più respiro visto che non blocca lo schermo */
    background: transparent; /* Tolto l'effetto vetro, non serve più */
    z-index: 1000;
    display: flex;
    justify-content: center;
    gap: 40px; /* Spazio aumentato per i tasti rimanenti */
}

.top-nav a {
    font-size: 0.9rem;
    font-weight: 500;
    color: #a1a1a6;
    transition: color 0.3s ease;
}

.top-nav a:hover { color: var(--text-color); }

/* --- CONTATTI --- */
#contact {
    background-color: #000; /* Stacco netto col grigio scuro del resto */
    min-height: 80dvh; /* Non serve che occupi tutto lo schermo */
}

.contact-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: -0.02em;
}

.contact-subtitle {
    color: #86868b;
    font-size: 1.2rem;
    margin-bottom: 50px;
    max-width: 600px;
    text-align: center;
    line-height: 1.5;
}

.contact-links {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Pulsanti stile Apple */
.contact-btn {
    background: #1d1d1f;
    color: var(--text-color);
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 500;
    font-size: 1.1rem;
    transition: transform 0.3s ease, background 0.3s ease;
    border: 1px solid rgba(255,255,255,0.05);
}

.contact-btn:hover {
    background: var(--accent); /* Diventa blu al passaggio */
    color: white;
    transform: translateY(-3px); /* Si solleva leggermente */
}

/* --- SEZIONI GENERICHE --- */
section {
    min-height: 100dvh; /* dvh per gestire la barra degli indirizzi mobile */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

/* --- HERO & HOOK --- */
.hero-title { font-size: 4rem; font-weight: 700; letter-spacing: -0.05em; text-align: center;}
.dynamic-text { color: var(--accent); display: block; height: 1.2em; }

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    opacity: 0.5;
    font-size: 0.9rem;
    animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(10px); } }

.reveal-text { opacity: 0; transform: translateY(50px); text-align: center; }



/* --- ESPERIENZE (Bento Box Layout) --- */
#experience {
    background-color: var(--bg-color);
    padding: 100px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.experience-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 50px;
    text-align: center;
}

/* La Griglia */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonne di base */
    gap: 20px;
    max-width: 1000px;
    width: 100%;
}

/* Il singolo Blocco */
.bento-box {
    background: #111;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, background 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bento-box:hover {
    transform: translateY(-5px);
    background: #161616;
}

/* Blocco grande (occupa 2 unità in orizzontale) */
.span-2 {
    grid-column: span 2;
}

/* Tipografia dentro i blocchi */
.bento-date {
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.bento-role {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.bento-company {
    font-size: 1.1rem;
    color: #a1a1a6;
    margin-bottom: 15px;
}

.bento-desc {
    color: #86868b;
    line-height: 1.6;
    font-size: 1rem;
}

/* --- RESPONSIVE PER MOBILE --- */
@media (max-width: 768px) {
    /* 1. L'ARMA SEGRETA: Forza le parole lunghe (es: Telecommunications) ad andare a capo */
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* 2. Riduciamo leggermente i font giganti per il mobile */
    .hero-title, .contact-title { font-size: 2.5rem; }
    .projects-title, .experience-title { font-size: 2rem; }
    .bento-role { font-size: 1.3rem; }
    .bento-company { font-size: 1rem; }

    /* 3. Stringiamo la Navbar per non farla sbordare ai lati */
    .top-nav {
        gap: 15px; 
        padding: 20px 10px;
        flex-wrap: wrap; 
    }

    /* 4. Mettiamo in gabbia la griglia e le scatole */
    .bento-grid {
        grid-template-columns: 1fr;
        width: 100%;
        margin: 0;
    }
    
    .span-2 {
        grid-column: span 1;
    }
    
    .bento-box {
        padding: 25px;
        width: 100%;
        max-width: 100%; /* Impedisce fisicamente l'allargamento */
        overflow: hidden; /* Taglia via qualsiasi difetto visivo */
    }

    /* ========================================================
   FIX RESPONSIVE PER LA SEZIONE HOOK (MOBILE COHERENCE)
   ======================================================== */
#hook-text-container {
    font-size: 1.8rem !important; /* Ridotto da 3.2rem per non far spezzare le frasi */
    line-height: 1.3 !important;
    padding: 0 15px;
    width: 100%;
}

#word-engineer {
    font-size: 2.2rem !important; /* Ridotto da 2.2rem, così scalato con GSAP rimane leggibile */
}

/* Riprologhiamo il budget dei 100vh verticali dello smartphone */
#fsae-photo-wrapper {
    top: 25vh !important;       /* Spostato leggermente più in basso */
    width: 24vh !important;      /* Stringiamo la larghezza mantenendo il ratio verticale */
    height: 35vh !important;     /* Accorciamo l'altezza da 46vh a 35vh per salvare spazio */
}

#text-compromise {
    top: 65vh !important;        /* Portiamo il testo sotto la foto più in alto (la foto finisce a 60vh) */
    font-size: 1.2rem !important; /* Ridotto da 2.2rem */
    white-space: normal !important; /* Permette al testo di andare a capo su schermi molto stretti */
    width: 100%;
    padding: 0 20px;
}

#text-compromise span {
    font-size: 2.2rem !important; /* Il parolone finale scende da 3.5rem a un perfetto 2.2rem */
    letter-spacing: 1px !important;
    display: block;
    margin-top: 5px;
}

/* Rimpiccioliamo i simboli matematici per non impastare il testo su mobile */
.engineering-symbols {
    font-size: 1.1rem !important;
    opacity: 0.2 !important;
}
}

/* Nasconde la barra di scorrimento per Chrome, Safari e Opera */
::-webkit-scrollbar {
    display: none;
}

/* Nasconde la barra di scorrimento per IE, Edge e Firefox */
html, body {
    -ms-overflow-style: none;  /* IE e Edge */
    scrollbar-width: none;  /* Firefox */
}

/* La nascondiamo a Brave usando nomi generici */
.linea-decorativa {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  height: 3px;
  background-color: rgba(255, 255, 255, 0);
  z-index: 2147483647; 
  pointer-events: none; 
}

.linea-colore {
  height: 100%;
  background-color: var(--accent);
  opacity: 0.6;
  width: 0%; 
}