/* Nuova home: hero con l'eclissi e navbar in vetro (scelte il 25/10/2026, prototipo in docs/concepts/home-design/home.html).
   Caricato solo da index.php via $extraCss, dopo tutti gli altri CSS. */

body.public-site.homepage {
    --home-gutter: clamp(16px, 4vw, 40px);
    --home-ease: cubic-bezier(.2, .7, .2, 1);

    /* Le misure di tutti i pulsanti della home (Luca, 30/10/2026: «uniforma tutto»). Uno grande per hero, card e
       chiusura, uno piccolo per la navbar; stessi angoli morbidi, stesso testo, stessa freccia, stessa pressione
       (il pulsante si gonfia un poco, come il vetro di Apple). Cambia solo la pelle: vetro nell'hero, contorno che si
       riempie di bianco sulle card e in chiusura, cristallo blu nella navbar. */
    --home-btn-h: 52px;
    --home-btn-px: 24px;
    --home-btn-r: 20px;
    --home-btn-fs: 16px;
    --home-btn-ls: -.01em;
    --home-btn-sm-h: 42px;
    --home-btn-sm-px: 20px;
    --home-btn-sm-r: 15px;
    --home-btn-sm-fs: 15px;
    --home-btn-line: 1.5px;
    --home-btn-press: scale(1.03);
    --home-btn-spring: cubic-bezier(.3, 1.5, .5, 1);
}

/* ---------- Vetro liquido, secondo la guida Apple «Adopting Liquid Glass» (Luca, 29/10/2026) ----------
   developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass e la pagina Materials delle HIG:
   - è lo strato dei comandi e della navigazione, che galleggia sopra i contenuti: navbar e pulsanti; si usa con
     parsimonia, solo sugli elementi più importanti, e mai vetro sopra vetro;
   - due varianti. Regular (.liquid): sfoca e regola la luminosità di quello che c'è dietro, così i testi si leggono;
     è quella di base e va dove c'è testo. Clear (.liquid--clear): molto trasparente, solo sopra fondi ricchi di
     colore o immagini; sopra un fondo chiaro vuole un velo scuro del 35% (--g-dim). Il colore (.liquid--blue) si usa
     come tinta per dare risalto all'azione principale;
   - riflette e rifrange quello che ha sotto: la lente sui bordi la aggiunge js/glass-refraction.js (Chromium con il
     mouse), i riflessi speculari sono sul bordo (in luce in alto a sinistra, un rimbalzo in basso a destra);
   - reagisce al puntatore e al tocco: la luce segue il mouse (--mx, --my da js/glass-refraction.js) e i comandi
     (.liquid--interactive) alla pressione si gonfiano un poco e si illuminano;
   - con «riduci trasparenza» o «aumenta contrasto» diventa una tinta piena (--g-solid). */

@property --g-spot {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.liquid {
    --g-tint: rgba(18, 20, 27, .46);
    --g-solid: #15171e;
    --g-dim: transparent;
    --g-blur: 12px;
    --g-sat: 180%;
    --g-bright: 1.06;
    --g-rim: 255, 255, 255;
    --g-spec: .72;
    --g-spec-2: .32;
    --g-sheen: .09;
    --g-drop: 0 10px 28px -14px rgba(0, 0, 0, .75);

    position: relative;
    isolation: isolate;
    background: linear-gradient(var(--g-dim), var(--g-dim)), var(--g-tint);
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bright));
    backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bright));
    box-shadow:
        inset 0 1px 1px -.5px rgba(var(--g-rim), calc(var(--g-spec) * .7)),
        inset 0 -1px 1px -.5px rgba(var(--g-rim), calc(var(--g-spec-2) * .7)),
        inset 0 0 18px rgba(var(--g-rim), .05),
        var(--g-drop);
}

/* Il bordo speculare: acceso dove arriva la luce (in alto a sinistra), un rimbalzo dalla parte opposta, quasi niente
   sui lati. */
.liquid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from 135deg,
        rgba(var(--g-rim), var(--g-spec-2)) 0%,
        rgba(var(--g-rim), .06) 20%,
        rgba(var(--g-rim), var(--g-spec)) 50%,
        rgba(var(--g-rim), .06) 80%,
        rgba(var(--g-rim), var(--g-spec-2)) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

/* La lucentezza del corpo, dall'alto, e la luce che segue il puntatore. */
.liquid::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(circle min(240px, 80%) at var(--mx, 30%) var(--my, 0%), rgba(var(--g-rim), calc(var(--g-spot) * .16)), transparent 70%),
        linear-gradient(172deg, rgba(var(--g-rim), var(--g-sheen)), rgba(var(--g-rim), 0) 46%);
    transition: --g-spot .35s var(--home-ease);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .liquid:hover {
        --g-spot: 1;
    }
}

/* Clear: molto trasparente, la luce e i colori dietro restano protagonisti. */
.liquid--clear {
    --g-tint: rgba(255, 255, 255, .05);
    --g-solid: #1b1e26;
    --g-blur: 3px;
    --g-sat: 170%;
    --g-bright: 1.2;
    --g-spec: .8;
    --g-spec-2: .4;
    --g-sheen: .14;
}

/* La tinta dell'azione principale: blu «cristallo», trasparente, con la luce del pianeta che passa dentro piegata dalla
   lente e il bordo acceso (scelto da Luca il 30/10/2026 in docs/concepts/home-design/home-vetro-apple.php, versione D). */
.liquid--blue {
    --g-tint: linear-gradient(180deg, rgba(70, 135, 255, .36), rgba(var(--public-blue-rgb), .56));
    --g-solid: #1a52e6;
    --g-blur: 2px;
    --g-sat: 220%;
    --g-bright: 1.3;
    --g-rim: 255, 255, 255;
    --g-spec: 1;
    --g-spec-2: .55;
    --g-sheen: .18;
    --g-drop: 0 12px 30px -14px rgba(var(--public-blue-rgb), .8);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* I comandi reagiscono: alla pressione il vetro si gonfia un poco e si illumina, e torna con una molla. */
.liquid.liquid--interactive {
    transition: transform .5s var(--home-btn-spring), box-shadow .3s var(--home-ease);
}

.liquid.liquid--interactive:active {
    --g-spot: 1;
    transform: var(--home-btn-press);
    transition-duration: .18s;
}

/* Senza backdrop-filter, con «riduci trasparenza» o con «aumenta contrasto»: tinta piena e bordo netto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .liquid {
        --g-tint: var(--g-solid);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .liquid {
        --g-tint: var(--g-solid);
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (prefers-contrast: more) {
    .liquid {
        --g-tint: var(--g-solid);
        --g-spec: 1;
        --g-spec-2: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .liquid.liquid--interactive:active {
        transform: none;
    }
}

/* ---------- Pulsanti ---------- */

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--home-btn-h);
    padding: 0 var(--home-btn-px);
    border-radius: var(--home-btn-r);
    color: #fff;
    font-family: var(--public-font-body);
    font-size: var(--home-btn-fs);
    font-weight: 400;
    line-height: 1;
    letter-spacing: var(--home-btn-ls);
    text-decoration: none;
    white-space: nowrap;
    transition: transform .25s var(--home-ease), box-shadow .25s var(--home-ease);
}

.home-btn svg {
    width: 18px;
    height: 18px;
    transition: transform .25s var(--home-ease);
}

.home-btn:hover svg {
    transform: translateX(4px);
}

.home-btn:focus-visible,
.home-nav a:focus-visible,
.home-nav__toggle:focus-visible {
    outline: 2px solid var(--public-orange);
    outline-offset: 3px;
}

/* Il pulsante della navbar: lo stesso vetro cristallo blu dell'hero (.liquid--blue), in piccolo, con gli angoli nella
   stessa proporzione dei pulsanti della pagina (20 px su 52, qui 15 su 42). Luca, 30/10/2026: «come quelli nella
   pagina», dopo aver scartato la tinta piatta e gli angoli più tondi; poi, lo stesso giorno, navbar più grande. */
.home-btn--sm {
    min-height: var(--home-btn-sm-h);
    padding: 0 var(--home-btn-sm-px);
    border-radius: var(--home-btn-sm-r);
    font-size: var(--home-btn-sm-fs);
}

/* ---------- Header e navbar: centrata, di vetro ----------
   Più grande e più staccata dal bordo alto (28 px invece di 14) dal 30/10/2026, scelta nella pagina del metodo
   (docs/concepts/metodo-design/metodo-hero.php): «la navbar troppo piccola». */

body.public-site.homepage > header.home-header {
    position: fixed;
    inset: 28px 0 auto;
    z-index: 1000;
    display: flex;
    justify-content: center;
    width: auto;
    padding: 0 var(--home-gutter);
    overflow: visible;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
}

body.public-site.homepage > header.home-header::before {
    display: none;
}

/* Il vetro regular della navigazione, un po' più scuro: le voci restano leggibili anche sopra il riquadro bianco. */
.home-nav {
    --g-tint: rgba(10, 12, 20, .56);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px 9px 28px;
    border-radius: 24px;
    pointer-events: auto;
}

/* Logo più piccolo e senza margini negativi: resta staccato dai bordi del vetro. */
.home-nav__logo img {
    display: block;
    width: auto;
    height: 36px;
}

.home-nav__menu {
    display: flex;
    align-items: center;
    gap: 6px;
}

.home-nav__links {
    display: flex;
    gap: 4px;
    margin: 0 12px 0 34px;
    list-style: none;
}

.home-nav__links a {
    display: block;
    padding: 11px 18px;
    border-radius: 12px;
    color: #fff;
    font-size: 15.5px;
    font-weight: 400;
    text-decoration: none;
    opacity: .82;
    transition: opacity .2s, background-color .2s;
}

.home-nav__links a:hover {
    opacity: 1;
    background: var(--public-on-dark-08);
}

.home-nav__toggle {
    display: none;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.home-nav__toggle span {
    display: block;
    width: 18px;
    height: 1.5px;
    margin: 5px auto;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s var(--home-ease);
}

.home-nav.is-open .home-nav__toggle span:first-child {
    transform: translateY(3.25px) rotate(45deg);
}

.home-nav.is-open .home-nav__toggle span:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
}

/* ---------- Hero ---------- */

body.public-site.homepage .home-hero {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: max(660px, 100svh);
    padding: 132px var(--home-gutter) 104px;
    overflow: hidden;
    isolation: isolate;
    background: #000;
    color: #fff;
    text-align: center;
}

.home-hero__bg {
    --planet-top: 73%;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    container-type: inline-size;
}

/* In fondo gli angoli del cielo sfumano nel nero della sezione dopo: niente taglio orizzontale. */
.home-hero__bg::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 140px;
    background: linear-gradient(transparent, #000);
    pointer-events: none;
}

.home-hero__gl {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* La griglia del sito (public-site-shell.css), fissa sulla finestra così combacia con quella delle altre sezioni.
   Niente griglia dentro il pianeta: stessa circonferenza dello shader (raggio 80% della larghezza, minimo 575 px). */
.home-hero__grid {
    --r: max(575px, 80cqw);
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--public-on-dark-05) 1px, transparent 1px),
        linear-gradient(90deg, var(--public-on-dark-05) 1px, transparent 1px);
    background-size: 54px 54px;
    background-attachment: fixed;
    -webkit-mask: radial-gradient(circle var(--r) at 50% calc(var(--planet-top) + var(--r)), transparent calc(var(--r) - .5px), #000 calc(var(--r) + .5px));
    mask: radial-gradient(circle var(--r) at 50% calc(var(--planet-top) + var(--r)), transparent calc(var(--r) - .5px), #000 calc(var(--r) + .5px));
}

/* Senza WebGL: luce ferma in CSS. */
.home-hero.no-gl .home-hero__bg {
    background:
        radial-gradient(50% 45% at 92% 105%, var(--public-orange), transparent 70%),
        radial-gradient(90% 60% at 30% 110%, var(--public-blue), transparent 75%),
        #030409;
}

.home-hero__inner {
    display: grid;
    justify-items: center;
    gap: 48px;
    max-width: 1320px;
}

body.public-site.homepage .home-hero__title {
    margin: 0;
    color: #fff;
    font-family: var(--public-font-heading);
    font-size: clamp(2.4rem, 1rem + 3.6vw, 4.6rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.045em;
    text-wrap: balance;
}

/* «con l'AI», come tutte le parti evidenziate della home, più spessa del resto (600 contro 500); niente riquadro
   (29/10/2026, concept in docs/concepts/home-design/home-claim.php). */
.home-hero__ai {
    font-weight: 600;
    white-space: nowrap;
}

/* L'entrata (js/pages/home-hero.js): ogni parola in uno span .w. Le parole compaiono dal nero con l'onda dei problemi
   (--t da 0 a 1); «con l'AI» la muove lo script. */
.home-hero__title .w {
    --t: 0;
    display: inline-block;
    color: rgba(255, 255, 255, var(--t));
}

.home-hero__ai.w {
    --t: 1;
    opacity: 0;
}

/* Desktop e tablet: sempre due righe, larghe il 55% dello spazio tra i margini (l'86% sul tablet); il corpo lo calcola
   lo script, e finché non l'ha calcolato il titolo non si vede (senza JavaScript resta il corpo del CSS). */
@media (min-width: 641px) {
    body.public-site.homepage .home-hero__title {
        text-wrap: nowrap;
    }
}

@media (min-width: 641px) and (scripting: enabled) {
    .home-hero__title:not(.is-fit) {
        visibility: hidden;
    }
}

@media (scripting: none) {
    .home-hero__title .w,
    .home-hero__ai.w {
        --t: 1;
        opacity: 1;
    }
}

/* Sottotitolo: più vicino al titolo che ai pulsanti. */
.home-hero__lead {
    max-width: 40em;
    margin: -24px 0 0;
    color: var(--public-on-dark-74);
    font-size: clamp(1rem, .9rem + .3vw, 1.2rem);
    line-height: 1.55;
    text-wrap: balance;
    font-weight: 300;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.home-hero__note {
    margin: -32px 0 0;
    color: var(--public-on-dark-66);
    font-size: .875rem;
    font-weight: 300;
}

/* Desktop: il testo poggia sopra il pianeta (bordo al 73% dell'altezza), a 112 px dalla corona: staccato dalla luce,
   non incollato (Luca, 29/10). */
@media (min-width: 861px) {
    body.public-site.homepage .home-hero {
        align-items: end;
        padding-bottom: calc(max(660px, 100svh) * .27 + 112px);
    }
}

@media (max-width: 640px) {
    .home-hero__title br {
        display: none;
    }

    body.public-site.homepage .home-hero__title {
        max-width: 16ch;
    }
}

@media (max-width: 860px) {
    /* Sul telefono la barra resta vicina al bordo e il logo alla misura di prima: lo schermo è poco. */
    body.public-site.homepage > header.home-header {
        inset: 14px 0 auto;
    }

    .home-nav {
        position: relative;
        width: 100%;
        padding: 6px 10px 6px 16px;
        border-radius: 20px;
    }

    .home-nav__logo img {
        height: 30px;
    }

    .home-nav__toggle {
        display: block;
    }

    /* Menu a tendina sotto la barra. Tinta quasi piena: dentro un elemento con backdrop-filter non si sfoca il fondo. */
    .home-nav__menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 10px;
        border: 1px solid var(--public-on-dark-08);
        border-radius: var(--home-btn-r);
        background: rgba(8, 10, 20, .94);
        box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9);
    }

    .home-nav.is-open .home-nav__menu {
        display: flex;
    }

    .home-nav__links {
        flex-direction: column;
        margin: 0;
    }

    .home-nav__links a {
        padding: 12px 14px;
        font-size: 1rem;
    }

    /* Nel menu a tendina il pulsante è quello grande, alto per il dito, con angoli che seguono quelli della tendina
       (20 px meno i 10 px di margine). */
    .home-nav__menu .home-btn--sm {
        min-height: var(--home-btn-h);
        margin-top: 4px;
        border-radius: 10px;
        font-size: var(--home-btn-fs);
    }

    body.public-site.homepage .home-hero {
        padding-top: 112px;
    }

    .home-hero__bg {
        --planet-top: 80%;
    }

    .home-hero__inner {
        gap: 36px;
    }

    .home-hero__lead {
        margin-top: -16px;
    }

    .home-hero__note {
        margin-top: -20px;
    }
}

/* Telefono: i pulsanti uno sotto l'altro, larghi quanto il testo; sul tablet restano affiancati. */
@media (max-width: 640px) {
    .home-hero__actions {
        flex-direction: column;
        width: 100%;
        max-width: 360px;
    }

    .home-hero__actions .home-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__title .w,
    .home-hero__ai.w {
        --t: 1;
        opacity: 1;
    }

    .home-btn,
    .home-btn svg,
    .home-nav__toggle span {
        transition: none;
    }
}