/* --- IMPACT SECTION --- */
.pinned-section {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
}

.visual-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Sotto al testo */
    display: flex;
    justify-content: center;
    align-items: center;
}

#layer-earth {
    z-index: 0; /* Lo mettiamo in fondo, così il PCB si dissolve svelandolo */
}

/* Stile per il codice hacker */
.code-snippet {
    color: #00ff00; /* Verde terminale */
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    opacity: 0.3; /* Leggero, come sfondo */
    text-align: left;
}

/* Stile per i Testi centrali */
.impact-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Sopra a tutte le immagini */
    text-align: center;
    width: 100%;
}

.impact-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-weight: 700;
    width: 100%;
    margin: 0;
}


/* --- VECTOR ROUTING (PCB) --- */
/* Modifica queste regole in impact.css o style.css */
#layer-pcb {
    justify-content: flex-start; /* Fondamentale per allineare l'SVG a sinistra */
}

.neon-svg {
    width: 1500px;
    min-width: 1500px; /* Impedisce che si schiacci sui telefoni */
    overflow: visible;
    margin-left: -20px; /* Fa nascere le piste proprio dal bordo */
    transform: translateY(120px); 
}
/* --- VECTOR ROUTING (PCB) --- */
.trace {
    fill: none;
    stroke: var(--accent); 
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round; /* Smussa perfettamente gli angoli a 45 gradi */
    filter: drop-shadow(0 0 10px var(--accent));
    
    /* Valore alto per garantire un flusso continuo */
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000; 
}

.via {
    fill: var(--bg-color); /* Centro nero come un foro reale */
    stroke: var(--accent);
    stroke-width: 3;
    filter: drop-shadow(0 0 10px var(--accent));
    opacity: 0; 
    transform-origin: center;
}

/* ========================================================
   1. SETUP DESKTOP (Regole base in percentuali)
   ======================================================== */
#layer-code .code-snippet {
    /* 15vh = 15% dell'altezza dello schermo verso il basso. */
    transform: translateY(15vh); 
    transition: transform 0.3s ease;
}

#layer-pcb .neon-svg {
    /* translate(X, Y). 
       Se prima usavi 1660px su PC, equivale a circa l'80% di uno schermo normale (80vw).
       Così la proporzione rimane identica a prescindere dalla grandezza del monitor! */
    transform: translate(20vw, 15vh) scale(2.35); 
    transform-origin: left center;
    transition: transform 0.3s ease;
}

/* ========================================================
   2. SETUP TABLET (Schermi medi e iPad)
   ======================================================== */
@media (max-width: 1024px) {
    #layer-code .code-snippet {
        transform: translateY(12vh);
    }
    
    #layer-pcb .neon-svg {
        /* Riduciamo scala e spostamento laterale per adattarli al tablet */
        transform: translate(12vw, 12vh) scale(1.8); 
    }
}

/* ========================================================
   3. SETUP SMARTPHONE (Schermi piccoli e verticali)
   ======================================================== */
@media (max-width: 768px) {
    #layer-code .code-snippet {
        transform: translateY(15vh); 
        font-size: 1.1rem !important; 
    }

    #layer-pcb .neon-svg {
        /* Su telefono teniamo la scala compatta e lo spostiamo di poco */
        transform: translate(8vw, 25vh) scale(1.2); 
    }
}