:root {
    --bg-color: #0f172a;
    --text-color: #cbd5e1;
    --accent-color: #38bdf8;
    --secondary-bg: #1e293b;
    --border-color: #334155;
    --font-main: 'Inter', sans-serif;
    --font-mono: 'Fira Code', monospace;
}

* {
    font-family: var(--font-main), sans-serif !important;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden; /* Evita scroll orizzontale indesiderato */
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #7dd3fc;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    color: #f8fafc;
    font-weight: 700;
}

/* --- TIPOGRAFIA --- */

h1 {
    font-size: 3rem;
    letter-spacing: -0.05em;
    margin-bottom: 1rem;
}

.lbb h5, h2, .section-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-top: 3rem;
    margin-bottom: 2rem !important;
    letter-spacing: -0.02em;
}

.job-card h3 {
    font-size: 1.4rem !important;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.job-card:hover h3 {
    color: var(--accent-color);
}

p, .job-card ul li, .bottom-ul li {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #cbd5e1;
}

.job-meta {
    font-size: 0.95rem;
    color: #94a3b8;
    font-family: var(--font-mono), monospace;
    margin-bottom: 1.2rem;
    display: block;
    font-weight: 500;
}

.ml-4 { margin-left: 4rem !important; }

/* --- SIDEBAR (FIX LAYOUT) --- */

.bg-grayish {
    background-color: var(--secondary-bg);
    border-right: 1px solid var(--border-color);
    padding-top: 2rem !important;
    min-height: 100vh;
    /* FLEXBOX: Allinea tutto verticalmente al centro della colonna */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- FOTO PROFILO "TECH PORTAL" (FIX JS TOGGLE) --- */

.image-container {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 2rem auto !important;

    /* Flexbox per centrare perfettamente il contenuto (testo o foto) */
    display: flex;
    justify-content: center;
    align-items: center;

    border: none !important;
    border-radius: 50%;
    box-shadow: none !important;
    background: rgba(15, 23, 42, 0.5); /* Sfondo scuro del portale */
    cursor: pointer;
    overflow: hidden; /* Importante per contenere gli effetti */
    flex-shrink: 0;
}

/* 1. L'IMMAGINE: Deve partire NASCOSTA per far funzionare il tuo custom.js */
.image-container img {
    display: none; /* <--- ECCO IL FIX: Nasce nascosta! */
    width: 260px;
    height: 260px;
    object-fit: cover;
    border-radius: 50% !important;
    z-index: 5;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
}

/* 2. IL TESTO PLACEHOLDER ("Clicca per vedere...") */
/* Lo stilizziamo per sembrare un comando del terminale */
#placeholder {
    color: var(--accent-color);
    font-family: var(--font-mono), monospace;
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem;
    z-index: 6; /* Sta sopra agli anelli */
    animation: pulse-text 2s infinite;
    pointer-events: none; /* Cliccando il testo, clicchi il container */
}

/* Animazione pulsante per il testo */
@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ANELLO 1: Ruota in senso orario (AZZURRO) */
.image-container::before {
    content: "";
    position: absolute;
    inset: 0; /* Occupa tutto lo spazio esterno */
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--accent-color); /* Colore solo sopra */
    border-right-color: rgba(56, 189, 248, 0.3); /* Colore sfumato a destra */
    animation: spin 4s linear infinite;
    z-index: 1;
}

/* ANELLO 2: Ruota in senso antiorario (ARANCIONE) */
.image-container::after {
    content: "";
    position: absolute;
    inset: 10px; /* Più interno di 10px */
    border-radius: 50%;
    border: 2px solid transparent;
    /* ARANCIONE ACCESO */
    border-bottom-color: #fb923c;
    /* ARANCIONE SFUMATO */
    border-left-color: rgba(251, 146, 60, 0.3);
    animation: spin-reverse 6s linear infinite;
    z-index: 2;
}

/* Effetto Hover: Gli anelli accelerano e brillano di più (MANTENENDO I COLORI) */
.image-container:hover::before {
    animation-duration: 1s;
    border-top-color: var(--accent-color); /* Mantiene l'azzurro */
    box-shadow: 0 0 20px var(--accent-color); /* Bagliore azzurro più intenso */
}
.image-container:hover::after {
    animation-duration: 2s;
    border-bottom-color: #fb923c; /* Mantiene l'arancione */
    box-shadow: 0 0 20px #fb923c; /* Bagliore arancione più intenso */
}

/* Animazioni Rotazione */
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spin-reverse { 100% { transform: rotate(-360deg); } }


/* BLOCCHI SIDEBAR (Contatti, Profilo, Skills) */
/* Questo è il segreto per allineare tutto: una larghezza fissa invisibile */
.sidebar-block {
    display: block;           /* Come richiesto */
    width: 100%;              /* Occupa tutto lo spazio disponibile... */
    max-width: 260px;         /* ...ma si ferma a 260px per non uscire dalla colonna */
    margin: 0 auto 1.5rem auto; /* Centrato nel mezzo della colonna grigia */
    text-align: left;         /* Allinea tutto a sinistra */
    overflow: hidden;         /* Taglia tutto ciò che prova a uscire */
    padding-bottom: 1.5rem;
}

/* Titoli nella sidebar */
.sidebar-block h4 {
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Linea divisoria */
.sidebar-divider {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    width: 100%;
}

/* Icone e testi contatti */
.sidebar-block p {
    font-size: 0.95rem;
    color: #cbd5e1;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
}

.sidebar-block p i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    color: var(--accent-color);
    font-size: 1.1rem;
}

/* --- PROFILO "RETRO BRUTALIST" (Stile Cookie Banner) --- */
.profile-text {
    /* Visibilità base */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: block !important;
    width: 100%;

    /* --- IL LOOK "TEAL" --- */
    background-color: #01a7a8 !important; /* Sfondo Verde Acqua */
    color: #000000 !important;             /* Testo Nero */
    border: 2px solid #000 !important;     /* Bordo Nero spesso */
    border-radius: 0 !important;           /* Angoli vivi (Squadrati) */

    /* OMBRA SOLIDA "HARD" */
    box-shadow: 12px 12px 0 0 rgba(0, 0, 0, 0.85) !important;

    padding: 20px;
    margin-top: 1rem;

    /* Font */
    font-family: 'JetBrains Mono', Menlo, Monaco, Consolas, monospace !important;
    font-size: 14px; /* Leggermente più grande per leggibilità su teal */
    line-height: 1.6;
    font-weight: 500; /* Testo un po' più marcato */

    white-space: pre-wrap;
    overflow-wrap: break-word;
    text-align: left !important;
}

.profile-text.terminal-active {
    visibility: visible;
    opacity: 1;
}

/* --- PROMPT (Sovrascriviamo i colori neon inline) --- */
.terminal-prompt {
    display: block;
    margin-bottom: 12px;
    font-family: inherit;
    color: #000000 !important; /* Forza il nero */
    border-bottom: 2px solid #000; /* Linea separatrice tipica retro */
    padding-bottom: 10px;
}

/* Forziamo tutti gli span del prompt (user, host, path) a diventare neri */
.terminal-prompt span {
    color: #000000 !important;
    font-weight: 800 !important; /* Molto grassetto per distinguersi */
}

/* --- PAROLE CHIAVE NEL TESTO --- */
/* Rimuoviamo l'alternanza blu/arancio per coerenza col tema "inchiostro" */
.profile-text b, .profile-text strong {
    color: #000000 !important;
    font-weight: 900 !important; /* Extra bold */
    text-decoration: underline;  /* Sottolineato per enfasi vecchio stile */
}

/* --- CURSORE --- */
.cursor-blink {
    display: inline-block;
    width: 10px;
    height: 1.2em;
    background-color: #000000 !important; /* Cursore Nero */
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
    margin-left: 2px;
}

/* STAMPA */
@media print {
    .profile-text {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        background: none !important;
    }
}

/* Lista Skills */
.sidebar-block ul {
    padding-left: 0;
    list-style: none;
}

.sidebar-block ul li {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    color: #cbd5e1;
}

.sidebar-block ul li::before {
    content: "•";
    color: var(--accent-color);
    font-weight: bold;
    display: inline-block;
    width: 1em;
}

/* --- ANIMAZIONI HACKER & GLITCH --- */

/* Stile base per il testo che cambia */
.hacker-text {
    font-family: var(--font-mono), monospace !important; /* Importante per non far saltare il layout */
    cursor: default;

    /* Forza l'a capo se necessario */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal; /* Assicura che gli spazi funzionino come a capo */

    /* Assicura che non forzi larghezze strane */
    max-width: 100%;
    display: inline-block;
}

/* Glitch Effect (Solo per il titolo principale H1) */
.glitch-wrapper {
    position: relative;
    display: inline-block;
}

.glitch {
    position: relative;
    color: white;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0); transform: skew(0.85deg); }
    5% { clip: rect(70px, 9999px, 11px, 0); transform: skew(0.4deg); }
    10% { clip: rect(25px, 9999px, 86px, 0); transform: skew(0.06deg); }
    /* ... altri frame randomici ... */
    50% { clip: rect(78px, 9999px, 37px, 0); transform: skew(0.5deg); }
    100% { clip: rect(96px, 9999px, 3px, 0); transform: skew(0.2deg); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(15px, 9999px, 62px, 0); transform: skew(0.3deg); }
    50% { clip: rect(40px, 9999px, 12px, 0); transform: skew(0.5deg); }
    100% { clip: rect(88px, 9999px, 12px, 0); transform: skew(0.7deg); }
}

/* --- DEFINIZIONE VARIABILE ANIMATA (Necessaria per la rotazione fluida) --- */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* --- CARD STYLE --- */
.job-card {
    position: relative;
    background-color: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border-color); /* Bordo statico di base */
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;

    /* Effetto vetro */
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    /* Importante: permettiamo all'effetto di uscire leggermente se serve */
    overflow: visible;
}

/* Effetto Hover sulla card (sollevamento) */
.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(56, 189, 248, 0.2);
    background-color: rgba(30, 41, 59, 0.8);
    border-color: transparent; /* Nascondiamo il bordo grigio per mostrare le luci */
}

/* --- IL BORDO LUMINOSO ANIMATO --- */
.job-card::before {
    content: "";
    position: absolute;
    /* Copre esattamente il bordo della card + 2px extra */
    inset: -2px;
    z-index: 2; /* Sta SOPRA la card (effetto overlay) */
    pointer-events: none !important; /* Non blocca i click */

    border-radius: 13px; /* Leggermente più curvo della card */
    padding: 2px; /* Spessore del bordo luminoso */

    /* IL GRADIENTE MAGICO: Blu -> Trasparente -> Arancione -> Trasparente */
    background: conic-gradient(
        from var(--gradient-angle),
        var(--accent-color) 0%,   /* Luce Blu */
        transparent 20%,          /* Coda */
        transparent 50%,
        #fb923c 50%,              /* Luce Arancione */
        transparent 70%,          /* Coda */
        transparent 100%
    );

    /* MASCHERA: Taglia via il centro per lasciare solo il bordo */
    /* Sintassi Standard (Firefox, Modern Browsers) */
    mask:
        linear-gradient(#fff, #fff) content-box,
        linear-gradient(#fff, #fff);
    mask-composite: exclude;

    /* Sintassi WebKit (Chrome, Safari, Edge, e vecchi browser) */
    -webkit-mask:
        linear-gradient(#fff, #fff) content-box,
        linear-gradient(#fff, #fff);
    -webkit-mask-composite: xor; /* 'xor' in WebKit equivale a 'exclude' per le maschere alpha */

    /* Animazione */
    animation: rotation 4s linear infinite;

    /* Default: invisibile. Appare all'hover */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Mostra le luci all'hover */
.job-card:hover::before {
    opacity: 1;
}

/* Definizione dell'animazione circolare */
@keyframes rotation {
    0% { --gradient-angle: 0deg; }
    100% { --gradient-angle: 360deg; }
}

/* Liste standard */
.right-ul, .notomia-ul {
    padding-left: 1.5rem !important;
    list-style-position: outside;
    margin-bottom: 1.5rem;
}

.blackmarkers > li::marker { content: '>'; color: var(--accent-color); font-family: var(--font-mono), monospace; font-weight: bold; }
.greenmarkers > li::marker { color: var(--accent-color); }

/* --- UTILITIES --- */
.lbb { border-left: none; padding-left: 2rem; }
.bbb { border-bottom: 1px solid var(--border-color); margin-bottom: 2rem; padding-bottom: 2rem; }
.hide-md { visibility: hidden; max-height: 0; }
.hide-sm { visibility: visible; max-height: unset; }
.unselectable { user-select: none; }
.slateg { color: var(--accent-color); }
.privacy { color: #475569; font-size: 12px; margin-top: 4rem; }

/* Buttons */
.icon-save, .icon-language {
    position: fixed;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--secondary-bg);
    color: var(--accent-color);
    cursor: pointer;
    padding: 15px;
    font-size: 24px;
    border-radius: 50%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.icon-save {
    bottom: 30px;
    right: 30px;
}

.icon-language {
    bottom: 30px;
    left: 30px;
}

.icon-save:hover, .icon-language:hover {
    transform: translateY(-5px);
    background-color: var(--accent-color);
    color: var(--bg-color);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Responsive */
@media only screen and (max-width: 991px) {
    .image-container { width: 180px; height: 180px; }
    .image-container img { width: 160px; height: 160px; }
    .hide-sm { display: none; }
    .hide-md { visibility: visible; max-height: unset; margin-bottom: 2rem; }
    .lbb { border-left: none; padding-left: 0; }
    .ml-4 { margin-left: 0 !important; }
}

/* --- PRINT (PDF) --- */
@media print {
    .bg-grayish { display: block !important; text-align: left !important; padding-top: 1rem !important; background-color: #CFDFE6 !important; }
    .sidebar-block { max-width: none !important; margin: 0 !important; page-break-inside: avoid; }
    .sidebar-divider, .glitch::before, .glitch::after { display: none !important; }
    .glitch, .hacker-text { color: black !important; text-shadow: none !important; font-family: sans-serif !important; }
    .job-card { background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
    .image-container { margin: 0 0 1rem 0 !important; width: 150px !important; height: 150px !important; }
    * { color: black !important; }

    .lbb h5, h2, .section-title {
        font-size: 1.25rem !important;
        margin-top: 1rem !important;
        margin-bottom: 0.5rem !important;
        color: #0F657E !important;
    }

    .job-card h3 {
        color: black !important;
        font-size: 1rem !important;
        margin-top: 2rem !important;
    }

    .job-meta {
        color: black !important;
        font-family: "Blinker", sans-serif !important;
        margin-bottom: 0.5rem !important;
    }

    .sidebar-block p i {
        color: black !important;
    }

    .sidebar-block ul li::before {
        display: none !important;
    }

    .sidebar-block h4 {
        color: black !important;
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
        text-transform: none !important;
    }

    .profile-text {
        visibility: visible !important;
        opacity: 1 !important;
        background: none !important;
        border: none !important;
        color: black !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .profile-text b, .profile-text strong { color: black !important; text-shadow: none; }
    .terminal-prompt, .cursor-blink { display: none !important; }

    .sidebar-block ul li {
        color: black !important;
    }

    .blackmarkers > li::marker {
        content: '◾';
        color: black !important;
        font-family: "Blinker", sans-serif;
    }

    .greenmarkers > li::marker {
        color: #0F657E !important;
    }

    .slateg {
        color: #0F657E !important;
    }

    /* Grid system for print */
    .col-print-1 { width: 8%; float: left; }
    .col-print-2 { width: 16%; float: left; }
    .col-print-3 { width: 25%; float: left; }
    .col-print-4 { width: 33%; float: left; }
    .col-print-5 { width: 42%; float: left; }
    .col-print-6 { width: 50%; float: left; }
    .col-print-7 { width: 58%; float: left; }
    .col-print-8 { width: 66%; float: left; }
    .col-print-9 { width: 75%; float: left; }
    .col-print-10 { width: 83%; float: left; }
    .col-print-11 { width: 92%; float: left; }
    .col-print-12 { width: 100%; float: left; }

    /* Fix per la stampa: rimuove gli anelli */
    .image-container::before, .image-container::after { display: none !important; }
    .image-container { border: none !important; background: none !important; }
    .image-container img { display: block !important; } /* Forza la foto in stampa */
    #placeholder { display: none !important; }

    /* FIX STAMPA PER LE CARD */
    .job-card::before { display: none !important; }
    .job-card {
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 1rem !important;
        page-break-inside: avoid;
    }
}

/* --- FOTO PROFILO: VIDEO SIGNAL GLITCH (Effetti Separati) --- */

/* EFFETTO 1: SCOSSA (Shake) */
.glitch-effect-shake {
    animation: video-shake 0.2s cubic-bezier(.36,.07,.19,.97) both infinite;
}

/* EFFETTO 2: INVERSIONE COLORI (Invert) */
.glitch-effect-invert img {
    filter: invert(1) hue-rotate(180deg) contrast(1.5);
    opacity: 0.8;
}

/* Keyframes per lo scossone */
@keyframes video-shake {
  10%, 90% { transform: translate3d(-3px, 2px, 0); }
  20%, 80% { transform: translate3d(4px, -3px, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 4px, 0); }
  40%, 60% { transform: translate3d(6px, -5px, 0); }
}