/* =========================================================================
   Lexicad — tema del sito (scuro, scroll-reattivo, sfondo aurora)
   Derivato da css/lexicad_onepage.css di lexiper.it (onepage «Sistema Lexicad»).
   Impaginazione (container, colonne, spaziature): Bootstrap 5.3. Qui restano
   solo tema, pannelli e animazioni.
   Sfondo: aurora boreale + rete di particelle (js/particle_net.js)
   Logica scroll: js/lexicad.js
   ========================================================================= */
:root {
    --lc-cyan:      #06b6d4;
    --lc-cyan-soft: #22d3ee;
    --lc-mint:      #84f0b5;
    --lc-violet:    #7c5cff;
    --lc-magenta:   #e054c8;
    --lc-peri:      #94a2e8;
    --lc-ink:       #e6ebff;
    --lc-muted:     #9aa7c7;
    --lc-line:      rgba(148,162,232,.16);
    --lc-panel:     rgba(16,21,47,.55);
    --lc-nav-h:     0px;   /* altezza reale della navbar sticky, misurata in JS */
}

body.lc-site {
    /* fondo di base: resta visibile finché l'immagine dell'aurora non è carica */
    background: #080b1a;
    color: var(--lc-ink);
    font-family: "Comfortaa", sans-serif;
    font-weight: 300;
    overflow-x: hidden;
}
html { scroll-behavior: smooth; }
.lc-site h1, .lc-site h2, .lc-site h3 {
    font-family: "Josefin Slab", serif;
    font-weight: 300;
    letter-spacing: .01em;
}

/* ---- Sfondo fisso dietro al contenuto (#particle-canvas.lc-bg) ----
   Immagine dell'aurora + canvas della rete di particelle. #lc-veil è il velo
   che mantiene leggibili i testi: la foto schiarisce parecchio verso il basso. */
.lc-bg, #lc-veil { position: fixed; inset: 0; pointer-events: none; }
.lc-bg {
    z-index: 0;
    overflow: hidden;
    background: #080b1a url("../img/boreale.jpg") center bottom / cover no-repeat;
}
.lc-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#lc-veil {
    z-index: 1;
    background:
        radial-gradient(75% 60% at 50% 34%, rgba(8,11,26,.20) 0%, rgba(8,11,26,.62) 100%),
        linear-gradient(180deg, rgba(8,11,26,.45) 0%, rgba(8,11,26,.30) 35%, rgba(8,11,26,.42) 65%, rgba(5,6,15,.70) 100%);
}
.lc-main { position: relative; z-index: 2; }

/* Link «vai al contenuto», visibile solo da tastiera */
.lc-skip {
    position: absolute; top: .5rem; left: .5rem;
    z-index: 1200;
    padding: .4rem .8rem;
    border-radius: 6px;
    background: var(--lc-cyan);
    color: #04121a;
}

/* Navbar sticky e traslucida */
.lc-nav {
    background: rgba(10,14,31,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lc-line);
}
.lc-nav .nav-link {
    color: var(--lc-muted);
    font-size: .9rem;
    letter-spacing: .03em;
}
.lc-nav .nav-link:hover,
.lc-nav .nav-link:focus-visible { color: var(--lc-ink); }
.lc-nav .nav-link.active { color: var(--lc-cyan-soft); }
@media (max-width: 991.98px) {
    .lc-nav .navbar-collapse { padding-bottom: .75rem; }
}

/* Barra di avanzamento scroll */
#lc-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 1100;
    background: linear-gradient(90deg, var(--lc-cyan), var(--lc-violet) 55%, var(--lc-magenta));
    box-shadow: 0 0 12px rgba(34,211,238,.6);
    transition: width .08s linear;
}

/* Navigazione a pallini laterale (display/flex/gap: utility Bootstrap) */
#lc-dots {
    position: fixed;
    right: 22px; top: 50%;
    transform: translateY(-50%);
    z-index: 900;
}
#lc-dots a {
    position: relative;
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 1px solid var(--lc-muted);
    transition: transform .25s, background .25s, border-color .25s;
}
#lc-dots a::after {
    content: attr(data-label);
    position: absolute;
    right: 22px; top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--lc-ink);
    background: rgba(10,14,31,.85);
    border: 1px solid var(--lc-line);
    padding: 3px 9px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
#lc-dots a:hover::after { opacity: 1; }
#lc-dots a.is-active {
    background: var(--lc-cyan);
    border-color: var(--lc-cyan-soft);
    transform: scale(1.35);
    box-shadow: 0 0 10px rgba(34,211,238,.8);
}

/* Sezioni */
.lc-section { position: relative; padding: clamp(4rem, 9vh, 8rem) 0; }
.lc-kicker {
    text-transform: uppercase;
    letter-spacing: .28em;
    font-size: .7rem;
    color: var(--lc-cyan-soft);
    margin-bottom: 1rem;
}
.lc-section h1,
.lc-section h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 1.6rem; }
.lc-section p {
    color: var(--lc-muted);
    font-size: 1.04rem;
    line-height: 1.85;
    margin-bottom: 1.1rem;
}
.lc-section p strong { color: var(--lc-ink); font-weight: 400; }
.lc-section p em { color: var(--lc-peri); font-style: italic; }
/* :where() azzera la specificità: le regole dei singoli componenti vincono sempre */
.lc-section :where(a:not(.impl-ext):not(.btn)) { color: var(--lc-cyan-soft); text-decoration: none; border-bottom: 1px solid rgba(34,211,238,.35); }
.lc-section :where(a:not(.impl-ext):not(.btn)):hover { color: #fff; }

/* Testata delle pagine interne: meno aria sotto, la griglia segue subito */
.lc-page-head { padding-bottom: clamp(2rem, 5vh, 3.5rem); }

/* HERO — la navbar sticky sta nel flusso sopra: senza sottrarne l'altezza la
   sezione sfora il viewport e lo scroll cue finisce sotto la piega. Su mobile
   100vh include le barre del browser, svh è l'altezza davvero visibile. */
.lc-hero {
    min-height: calc(100vh - var(--lc-nav-h));
    min-height: calc(100svh - var(--lc-nav-h));
    padding-bottom: clamp(5rem, 10vh, 7rem);   /* spazio per lo scroll cue */
}
.lc-hero-intro { perspective: 900px; }
.lc-hero-logo {
    width: min(340px, 100%);
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(8,11,26,.65));
    transform-style: preserve-3d;
    will-change: transform;
}
.lc-hero h1 {
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    color: var(--lc-muted);
    letter-spacing: .04em;
    margin: 0;
}
.lc-tag { color: var(--lc-mint); font-size: .95rem; }
/* «Cos'è Lexicad» accanto al titolo: corpo un filo più compatto, perché deve
   stare nella prima schermata insieme al logo. */
.lc-hero-testo h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
.lc-hero-testo p  { font-size: .93rem; line-height: 1.66; margin-bottom: .85rem; }
.lc-hero-testo p:last-child { margin-bottom: 0; }

.lc-scrollcue {
    position: absolute;
    bottom: 2rem; left: 50%;
    transform: translateX(-50%);
    color: var(--lc-muted);
    font-size: .68rem;
    letter-spacing: .25em;
    text-transform: uppercase;
}
.lc-scrollcue .mouse {
    position: relative;
    width: 22px; height: 36px;
    border: 1.5px solid var(--lc-muted);
    border-radius: 12px;
}
.lc-scrollcue .mouse::after {
    content: "";
    position: absolute;
    top: 6px; left: 50%;
    width: 3px; height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--lc-cyan-soft);
    animation: lc-wheel 1.8s ease-in-out infinite;
}
@keyframes lc-wheel { 0%{opacity:0;transform:translateY(0);} 30%{opacity:1;} 100%{opacity:0;transform:translateY(12px);} }

/* Reveal allo scroll. Nelle righe di card (.lc-cards) l'ingresso è laterale e
   sfalsato: sta sulla .col, non sulla .lc-card, così non litiga con la
   transition dell'hover. Senza JS (html senza .lc-js) tutto resta visibile. */
.lc-js .lc-reveal {
    opacity: 0;
    transform: translateY(46px) scale(.985);
    transform-origin: 50% 100%;
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--d, 0s);
    will-change: opacity, transform;
}
.lc-js .lc-reveal.is-visible { opacity: 1; transform: none; }
.lc-js .lc-cards > .lc-reveal:nth-child(odd)  { transform: translateX(-48px) scale(.985); }
.lc-js .lc-cards > .lc-reveal:nth-child(even) { transform: translateX(48px)  scale(.985); }
.lc-js .lc-cards > .lc-reveal.is-visible      { transform: none; }
.lc-cards > *:nth-child(3n+2) { --d: .1s; }
.lc-cards > *:nth-child(3n)   { --d: .2s; }
/* Righe da quattro: il ciclo del ritardo segue le quattro colonne. */
.lc-cards--4 > *:nth-child(4n+1) { --d: 0s; }
.lc-cards--4 > *:nth-child(4n+2) { --d: .1s; }
.lc-cards--4 > *:nth-child(4n+3) { --d: .2s; }
.lc-cards--4 > *:nth-child(4n)   { --d: .3s; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lc-reveal { opacity: 1 !important; transform: none !important; }
    .lc-scrollcue .mouse::after { animation: none; }
    .lc-card:hover .impl-shot img { transform: none; }
}

/* Pannelli: il riquadro dell'hero/scheda e le card della griglia */
.lc-panel, .lc-card {
    background: var(--lc-panel);
    border: 1px solid var(--lc-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.lc-panel { border-radius: 24px; box-shadow: 0 30px 80px -42px rgba(6,182,212,.55); }
.lc-card {
    position: relative;
    border-radius: 16px;
    padding: 1.7rem;
    transition: transform .25s ease, border-color .3s;
    overflow: hidden;
}
.lc-card:hover { border-color: rgba(34,211,238,.45); transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { .lc-card:hover { transform: none; } }
.lc-card h3 { font-size: 1.3rem; margin: 0 0 .7rem; color: var(--lc-ink); }
.lc-card p  { font-size: .94rem; line-height: 1.7; margin-bottom: 1rem; }
.lc-card p:last-child { margin-bottom: 0; }
.lc-feat-ico { color: var(--lc-cyan-soft); }

/* Testo a gradiente: sigle delle implementazioni e contatore */
.lc-grad {
    font-family: "Josefin Slab", serif;
    line-height: 1;
    background: linear-gradient(135deg, var(--lc-cyan-soft), var(--lc-violet));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lc-counter { font-size: 1.3em; vertical-align: -.08em; }

.lc-chip {
    font-size: .78rem;
    padding: .35rem .8rem;
    border: 1px solid var(--lc-line);
    border-radius: 999px;
    color: var(--lc-peri);
    background: rgba(148,162,232,.06);
}

/* Screenshot del sito: fascia a filo dei bordi della card (i margini negativi
   annullano il padding di .lc-card, che con overflow:hidden la ritaglia agli
   angoli arrotondati). Le schermate sono chiare: un velo e un filtro le
   raccordano al fondo scuro, che si scioglie al passaggio del mouse. */
.impl-shot {
    position: relative;
    margin: -1.7rem -1.7rem 1.3rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 1px solid var(--lc-line);
}
.impl-shot img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: saturate(.8) brightness(.82);
    transition: filter .4s ease, transform .5s ease;
}
.impl-shot::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8,11,26,.12) 0%, rgba(8,11,26,.55) 100%);
    transition: opacity .4s ease;
}
.lc-card:hover .impl-shot img    { filter: none; transform: scale(1.04); }
.lc-card:hover .impl-shot::after { opacity: .35; }

/* Card della griglia: tutta la card porta alla scheda (stretched-link sulla
   sigla); i link nella descrizione e al sito restano cliccabili sopra. */
.lc-section .impl-sigla { font-size: 1.9rem; font-weight: 400; margin: 0; }
.lc-section .impl-sigla a { color: inherit; border: 0; }
.lc-section .impl-sigla a:focus-visible { outline: none; }
.lc-card:has(.stretched-link:focus-visible) { border-color: var(--lc-cyan-soft); box-shadow: 0 0 0 2px rgba(34,211,238,.45); }
.impl-titolo { font-size: .86rem; font-weight: 600; color: var(--lc-ink); line-height: 1.35; margin-bottom: .35rem; }
.impl-ist    { font-size: .76rem; color: var(--lc-muted); }
.lc-section p.impl-ist { font-size: .8rem; line-height: 1.5; }
.impl-desc   { color: var(--lc-muted); }
.impl-desc a, .impl-ext { position: relative; z-index: 2; }
.impl-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}
.impl-foot {
    padding-top: .9rem;
    border-top: 1px solid var(--lc-line);
    font-size: .8rem;
}
.impl-more { color: var(--lc-cyan-soft); letter-spacing: .04em; }
.impl-ext { color: var(--lc-muted); text-decoration: none; }
.impl-ext:hover { color: var(--lc-ink); text-decoration: underline; }

/* Scheda di un'implementazione */
.lc-breadcrumb { font-size: .8rem; --bs-breadcrumb-divider-color: var(--lc-muted); --bs-breadcrumb-item-active-color: var(--lc-muted); }
.lc-scheda-shot {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--lc-line);
    box-shadow: 0 24px 60px -30px rgba(6,182,212,.5);
    aspect-ratio: 16 / 10;
}
.lc-scheda-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lc-section h1.lc-scheda-sigla { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 400; }
.lc-section p.lc-scheda-titolo { color: var(--lc-ink); font-weight: 600; font-size: 1.05rem; line-height: 1.4; }
.lc-section p.lc-scheda-desc { font-size: .98rem; line-height: 1.8; }
.lc-scheda-url { font-size: .76rem; color: var(--lc-muted); word-break: break-all; }
.lc-pager { font-size: .9rem; }

/* Pulsante del tema */
.lc-btn {
    --bs-btn-color: var(--lc-ink);
    --bs-btn-border-color: rgba(34,211,238,.55);
    --bs-btn-hover-color: #04121a;
    --bs-btn-hover-bg: var(--lc-cyan-soft);
    --bs-btn-hover-border-color: var(--lc-cyan-soft);
    --bs-btn-active-color: #04121a;
    --bs-btn-active-bg: var(--lc-cyan);
    --bs-btn-active-border-color: var(--lc-cyan);
    --bs-btn-focus-shadow-rgb: 34,211,238;
    border-radius: 999px;
    padding: .55rem 1.3rem;
    font-size: .88rem;
    letter-spacing: .03em;
    background: rgba(34,211,238,.08);
}

/* Footer: crediti (Sviluppo) e fonte delle schede */
.lc-footer { padding: 2.5rem 0 3rem; font-size: .85rem; color: var(--lc-muted); }
.lc-footer p strong { color: var(--lc-ink); font-weight: 400; }
.lc-footer a { color: var(--lc-cyan-soft); text-decoration: none; border-bottom: 1px solid rgba(34,211,238,.35); }
.lc-footer a:hover { color: #fff; }
.lc-credits p { font-size: .92rem; }
.lc-divline {
    width: 80px; height: 2px; margin: 0 auto 1.8rem;
    background: linear-gradient(90deg, transparent, var(--lc-cyan), transparent);
}

/* Sigle della home come link alle schede */
.lc-section a.lc-chip { display: inline-block; color: var(--lc-peri); border: 1px solid var(--lc-line); transition: color .2s, border-color .2s, background .2s; }
.lc-section a.lc-chip:hover, .lc-section a.lc-chip:focus-visible { color: var(--lc-ink); border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.08); }

/* Pubblicazioni */
.lc-pubbl-tipo { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lc-mint); }
.lc-section h2.lc-pubbl-titolo { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.3; margin-bottom: .8rem; }
.lc-section h2.lc-pubbl-titolo a { color: var(--lc-ink); border-bottom-color: rgba(34,211,238,.25); }
.lc-section p.lc-pubbl-autori { color: var(--lc-ink); font-size: .95rem; }
.lc-section p.lc-pubbl-sede { font-size: .88rem; color: var(--lc-muted); }
.lc-pubbl-abstract summary { cursor: pointer; font-size: .85rem; color: var(--lc-cyan-soft); letter-spacing: .04em; }
.lc-section .lc-pubbl-abstract p { font-size: .9rem; line-height: 1.7; }
.lc-btn.btn-sm { padding: .35rem 1rem; font-size: .8rem; }

/* Adotta: passi numerati */
.lc-passo-n { font-size: 2.2rem; min-width: 2rem; text-align: center; }
.lc-passi p { font-size: 1rem; }