/* ============================================================
   hero.css — Componente hero centralizzato (tutte le pagine)
   Varianti sfondo:
     .lid-hero--fog   Vanta FOG (WebGL)  — solo home
     .lid-hero--mesh  mesh-gradient CSS  — pagine interne
   Token: style.css :root (--color-*)
   ============================================================ */

/* utility — testo solo per screen reader */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.lid-hero {
    position: relative;
    overflow: hidden;
    background: var(--color-green-dk);
    color: #fff;
    padding: 120px 0 96px;
}

/* hero a tutta altezza — usato dalla home (carosello) */
.lid-hero--full {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 116px 0 64px;
}

/* ── strato sfondo ──────────────────────────────────────────────── */
.lid-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.lid-hero__bg #vanta-bg { position: absolute; inset: 0; }

/* velo: leggero — quanto basta per il testo, lascia respirare il fog */
.lid-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(15,33,29,.50) 0%, rgba(15,33,29,.10) 30%, rgba(15,33,29,.12) 62%, rgba(15,33,29,.55) 100%);
}

/* ── variante MESH — blob radiali CSS, 0 dipendenze ────────────────
   Vanta non viene caricato: le pagine interne restano leggere. */
.lid-hero__blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
.lid-hero--fog .lid-hero__blob { display: none; }
.lid-hero__blob.b1 {
    width: 640px; height: 640px; top: -160px; left: -140px;
    background: radial-gradient(circle, rgba(167,201,184,.50), transparent 65%);
    filter: blur(60px);
    animation: lidDrift1 28s ease-in-out infinite;
}
.lid-hero__blob.b2 {
    width: 560px; height: 560px; bottom: -220px; right: -180px;
    background: radial-gradient(circle, rgba(22,90,105,.65), transparent 66%);
    filter: blur(55px);
    animation: lidDrift2 34s ease-in-out infinite;
}
.lid-hero__blob.b3 {
    width: 460px; height: 460px; top: 30%; right: 12%;
    background: radial-gradient(circle, rgba(54,112,95,.55), transparent 64%);
    filter: blur(70px);
    animation: lidDrift3 40s ease-in-out infinite;
}
.lid-hero__blob.b4 {
    width: 380px; height: 380px; bottom: 6%; left: 20%;
    background: radial-gradient(circle, rgba(167,201,184,.28), transparent 68%);
    filter: blur(75px);
    animation: lidDrift1 46s ease-in-out infinite reverse;
}
@keyframes lidDrift1 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(70px,55px) scale(1.10); }
}
@keyframes lidDrift2 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(-80px,-45px) scale(1.12); }
}
@keyframes lidDrift3 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(-55px,60px) scale(.90); }
}

/* ── layout standard (pagine interne) ──────────────────────────── */
.lid-hero__inner { position: relative; z-index: 2; }
.lid-hero--center .lid-hero__inner { text-align: center; }
.lid-hero--center .lid-hero__eyebrow { justify-content: center; }
.lid-hero--center .lid-hero__subtitle { margin-left: auto; margin-right: auto; }

.lid-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 22px;
}
.lid-hero__eyebrow .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: lidPulse 2s infinite;
}
@keyframes lidPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .5; transform: scale(.7); }
}

.lid-hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--t-h1);
    line-height: 1.08;
    letter-spacing: -.025em;
    max-width: 20ch;
    margin-bottom: 22px;
    text-shadow: 0 2px 30px rgba(15,33,29,.40);
}
.lid-hero--center .lid-hero__title { max-width: 22ch; margin-left: auto; margin-right: auto; }
.lid-hero__title em { font-style: italic; color: var(--color-accent); font-weight: 500; }

.lid-hero__subtitle {
    font-size: var(--t-lead);
    line-height: 1.6;
    color: rgba(255,255,255,.82);
    max-width: 52ch;
    margin-bottom: 32px;
}

.lid-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.lid-hero--center .lid-hero__ctas { justify-content: center; }

.lid-hero__extra { margin-top: 36px; }

/* hero scuro: il bottone outline diventa bianco */
.lid-hero .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.lid-hero .btn-outline:hover { background: #fff; color: var(--color-primary); border-color: #fff; }

/* hero scuro: il CTA primario diventa bianco — niente verde-su-verde */
.lid-hero--fog .btn-primary,
.lid-hero--mesh .btn-primary,
.lid-hero--dotgrid .btn-primary {
    background: #fff;
    color: var(--color-primary);
}
.lid-hero--fog .btn-primary:hover,
.lid-hero--mesh .btn-primary:hover,
.lid-hero--dotgrid .btn-primary:hover {
    background: var(--color-accent);
    color: var(--color-green-dk);
}

/* ── variante DOTGRID — verde pieno + griglia di punti (Diventa Partner) ── */
.lid-hero--dotgrid {
    background-color: var(--color-primary);
    background-image: radial-gradient(circle, rgba(167,201,184,.22) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
}
.lid-hero__geo {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.lid-hero__geo.a {
    width: 660px; height: 660px;
    background: var(--color-accent);
    opacity: .10;
    top: -200px; right: -200px;
}
.lid-hero__geo.b {
    width: 440px; height: 440px;
    border: 1.5px solid rgba(167,201,184,.22);
    top: -90px; right: -90px;
}
.lid-hero--dotgrid .lid-hero__veil { display: none; }

/* ── variante LIGHT — Cambridge chiaro, testo scuro (News) ── */
.lid-hero--light {
    background:
        radial-gradient(ellipse 62% 72% at  2% 12%, rgba(42,93,80,.50)    0%, transparent 58%),
        radial-gradient(ellipse 55% 60% at 96% 88%, rgba(42,93,80,.18)    0%, transparent 52%),
        radial-gradient(ellipse 75% 55% at 58%  0%, rgba(167,201,184,.95) 0%, transparent 62%),
        radial-gradient(ellipse 48% 50% at 80% 45%, rgba(167,201,184,.58) 0%, transparent 54%),
        radial-gradient(ellipse 40% 40% at 30% 90%, rgba(210,227,218,.80) 0%, transparent 50%),
        var(--color-mist);
    color: var(--color-text);
    border-bottom: 1px solid rgba(42,93,80,.12);
}
.lid-hero--light .lid-hero__veil { display: none; }
.lid-hero--light .lid-hero__title { color: var(--color-green-dk); text-shadow: none; }
.lid-hero--light .lid-hero__title em { color: var(--color-primary); }
.lid-hero--light .lid-hero__eyebrow { color: var(--color-petroleum); }
.lid-hero--light .lid-hero__eyebrow .dot { background: var(--color-petroleum); }
.lid-hero--light .lid-hero__subtitle { color: var(--color-text); opacity: .72; }
.lid-hero--light .btn-outline { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.lid-hero--light .btn-outline:hover { background: var(--color-primary); color: #fff; }

@media (max-width: 700px) {
    .lid-hero { padding: 96px 0 72px; }
    .lid-hero--full { padding: 104px 0 56px; }
}

/* ── accessibilità — niente movimento se l'utente lo chiede ──────── */
@media (prefers-reduced-motion: reduce) {
    .lid-hero__blob,
    .lid-hero__eyebrow .dot { animation: none !important; }
}