/* =========================================================
   LibriVivi — Stili specifici della pagina index.html
   (estratto dallo <style> inline per separare gli stili
   pagina-specifici da quelli condivisi in style.css)
   ========================================================= */
/* --- Font-face: riutilizziamo i font già presenti in _assets/fonts --- */
@font-face {
    font-family: 'Bagoss Standard Medium';
    src: url("_assets/fonts/71P7eLHIxhnwz43s92WyuKrlij8.woff2") format("woff2");
    font-display: swap;
    font-weight: 520;
}

@font-face {
    font-family: 'Bagoss Standard Regular';
    src: url("_assets/fonts/wIToJ1u8zFUcjwwnWZ7e4uUfC0.woff2") format("woff2");
    font-display: swap;
    font-weight: 385;
}

@font-face {
    font-family: 'General Grotesque Mono Regular';
    src: url("_assets/fonts/lw3NS7JlK2RsOIZE41wupSQFgco.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
}

:root {
    --dark: rgb(19, 23, 19);
    --light: rgb(247, 243, 240);
    --light-70: rgba(247, 243, 240, 0.7);
    --light-45: rgba(247, 243, 240, 0.45);
    --light-18: rgba(247, 243, 240, 0.18);
    --font-heading: 'Bagoss Standard Medium', Georgia, serif;
    --font-body: 'Bagoss Standard Regular', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    --font-label: 'General Grotesque Mono Regular', monospace;

    /* Font dedicato a microcopy / metadata / descrizioni (Lato — humanist).
       Da Google Fonts. Applicato esplicitamente a .lv-meta e .lv-credit. */
    --font-info: 'Lato', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-body);
    font-weight: 385;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark);
    background: var(--dark);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 520;
    line-height: 1.15;
}

/* =========================================================
   HERO — card stack reveal SENZA deadzone iniziale.

   Differenza chiave rispetto a un pattern sticky uniforme:
   - hero-1 è in NORMAL FLOW (position: relative). Scivola via
     dal primo px di scroll → nessuna fase "stuck" all'inizio.
   - hero-2/3/4 sono sticky e stanno "in attesa" dietro la
     card davanti. Il loro tempo stuck coincide ESATTAMENTE
     con il tempo di slide della card precedente, quindi a
     video non c'è mai un istante senza movimento: ogni px
     di scroll produce visibile.

   Topologia:
   - z-index DISCENDENTE (hero-1=4 davanti .. hero-4=1 dietro)
   - hero-1 senza .card-frame, in flusso, alta 100vh
   - hero-2/3/4 dentro .card-frame da 200vh, ognuno con
     margin-top: -100vh: il primo frame parte sovrapposto
     ad hero-1 (a doc 0) così hero-2 è già pronta dietro;
     i successivi si sovrappongono al precedente di 100vh.
   - quando hero-4 finisce di scorrere via, si rivela
     .contacts (z-0) come nella versione originale.

   Tempi: 0–100vh hero-1 esce / 100–200 hero-2 esce /
          200–300 hero-3 esce / 300–400 hero-4 esce →
          totale 400vh di card-stack (era 500vh).
   ========================================================= */
.card-stack {
    position: relative;
}

.card-frame {
    position: relative;
    height: 200vh;
    margin-top: -100vh;
}

.hero {
    height: 100vh;
    min-height: 0;

    /* annulla il min-height: 600px ereditato da style.css.
       NB: background-image non è più qui — applicato inline solo sul
       hero-1 della home (vedi index.html). Le pagine editorial usano
       .lv-card.lv-banner per coprire la hero col proprio bg, quindi
       senza .hero { background-image } evitiamo flash librivivi_home. */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 20px 100px;
}

/* Hero-1: normal flow → parte allo scroll, niente deadzone */
.hero-1 {
    position: relative;
    z-index: 4;
}

/* Hero-2/3/4: sticky dietro, sostano mentre la precedente esce */
.hero-2,
.hero-3,
.hero-4 {
    position: sticky;
    top: 0;
}

.hero-2 {
    z-index: 3;
}

.hero-3 {
    z-index: 2;
}

.hero-4 {
    z-index: 1;
}

/* =========================================================
   PRODUCTIONS GRID — la "5ª scheda": dopo lo stack delle 4
   hero diventa il corpo della pagina che scorre normalmente.
   Sta sopra .contacts (z-0) per coprirla finché non si scrolla
   via, replicando il reveal-footer originale.
   ========================================================= */
#productions {
    position: relative;
    z-index: 1;
}

/* Riempimento automatico dei buchi della grid: le card piccole
   "saltano" indietro a tappare spazi vuoti lasciati da card 2x2
   o 2x1. L'ordine visivo può divergere da quello nel DOM. */
#productions .lv-grid {
    grid-auto-flow: dense;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero.is-ready .hero-content {
    opacity: 1;
}

.hero-logo {
    height: 110px;
    width: auto;
    margin-bottom: 10px;
}

/* Tipografia "Legendary Voices" — solo hero-1 (le card 2/3/4
   usano lo stile .hero-slide-content da style.css). */
.hero-1 h1 {
    font-size: 63px;
    letter-spacing: -0.02em;
    line-height: 0.98;
    color: var(--light);
    max-width: 800px;
    padding-left: 92px;
}

.hero-1 h2 {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 385;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--light);
    margin-top: 20px;
    padding-left: 92px;
}

/* =========================================================
   CARD 2/3/4 — LAYOUT, THEMING E STILI INTERNI CONDIVISI

   Architettura:
     1. Layout per-card (hero-2 colonna, hero-3/4 riga)
     2. Theming per-card (background + brand color via CSS vars)
     3. Regole condivise sugli ELEMENTI INTERNI in :is(...)
        → modifica QUI per propagare a tutte le 3 card insieme
        → modifica le var --slide-* per re-skinnare 1 sola card
   ========================================================= */
/* --- 1. Layout per-card --- */
.hero-2 {
    justify-content: center;
    padding: 80px 138px;
}

.hero-3,
.hero-4 {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 138px;
}

/* --- 2. Theming per-card (background + brand colors) --- */
.hero-2 {
    background: #222226;
    background-image: none;
    overflow: hidden;
    --slide-btn-bg: var(--light);
    --slide-btn-color: var(--dark);
}

/* hero-3 e hero-4: il background-image NON è qui, è inline sul .lv-inner di
   ciascuna card così è facilmente editabile da Pinegrow allo stesso
   posto di hero-2 (Cantata_Violante). Qui restano solo le brand vars. */
.hero-3 {
    --slide-btn-bg: #980c15;
    --slide-btn-color: #ffffff;
}

.hero-4 {
    --slide-btn-bg: #000000;
    --slide-btn-color: #ffffff;
}

/* --- 3. Stili condivisi sugli elementi interni di card 2/3/4 ---
   Modifica una qualunque di queste regole = aggiorna tutte e 3.
   h1 / h2 / .hero-slide-body sono in hero-2 soltanto, ma le regole
   sono scritte per tutte: comode da estendere se in futuro 3 o 4
   guadagnano un titolo o un body. */
:is(.hero-2, .hero-3, .hero-4) .hero-slide-content {
    color: var(--light);
}

:is(.hero-2, .hero-3, .hero-4) h1 {
    font-family: var(--font-heading);
    font-size: clamp(40px, 5vw, 64px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 14px;
    color: var(--light);
}

:is(.hero-2, .hero-3, .hero-4) h2 {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 385;
    line-height: 1.4;
    margin-bottom: 16px;
    color: rgba(247, 243, 240, 0.7);
}

:is(.hero-2, .hero-3, .hero-4) .hero-slide-body {
    color: rgba(247, 243, 240, 0.55);
}

:is(.hero-2, .hero-3, .hero-4) .hero-slide-btn {
    background-color: var(--slide-btn-bg);
    color: var(--slide-btn-color);
}

/* Canvas line-engraving della hero-2 (riempie tutta la section).
   Resta nel CSS perché lo script #line-canvas gira ancora ma fa
   early-return se l'elemento non c'è (e adesso non c'è più). */
#line-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Hero-2/3/4 ospitano un .lv-card.lv-banner come template di contenuto.
   Lo facciamo riempire tutta la section (ignora padding 80x138 di hero-2,
   e padding 20x138 di hero-3/4) così l'overlay arriva fino al bordo.
   NB: per hero-3/4 il .lv-inner NON ha background-image inline, così si
   vede attraverso il bg image impostato sul <header class="hero hero-N">. */
:is(.hero-2, .hero-3, .hero-4) .lv-card.lv-banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Logo SVG centrale dei banner hero: dimensione FISSA a scaglioni
   (stile Netflix), via media query standard. La width salta a step
   sui breakpoint, NON scala in continuo. Tunable via CSS vars. */
.hero {
    --logo-w-mobile: 280px;

    /* < 768 */
    --logo-w-tablet: 400px;

    /* ≥ 768 */
    --logo-w-desktop: 500px;

    /* ≥ 1024 */
    --logo-w-large: 640px;

    /* ≥ 1440 */
    --logo-w-xxl: 680px;

    /* ≥ 1920 */
}

.hero .lv-overlay-center > img {
    width: var(--logo-w-mobile);
}

@media (min-width: 768px)  {
    .hero .lv-overlay-center > img {
        width: var(--logo-w-tablet);
    }
}

@media (min-width: 1024px) {
    .hero .lv-overlay-center > img {
        width: var(--logo-w-desktop);
    }
}

@media (min-width: 1440px) {
    .hero .lv-overlay-center > img {
        width: var(--logo-w-large);
    }
}

@media (min-width: 1920px) {
    .hero .lv-overlay-center > img {
        width: var(--logo-w-xxl);
    }
}

/* =========================================================
   .lv-meta — riga di metadata sotto il logo SVG dei banner hero
   Struttura: Categoria | [icon] Durata | Lingua | [SERIE bordered]
   Layout: bandiera a sinistra, title-case, niente uppercase tranne serie.
   - icona Material Symbols solo accanto alla durata (le altre voci pulite)
   - separatore: | con spaziatura ampia
   - serie: piccolo box con bordo 1px (stile "HD" di Netflix), color brand
   - color del testo eredita: per default white-85, hero-2 inline override
   Scoped a .hero .lv-overlay-center così non tocca la productions grid.
   ========================================================= */
.hero .lv-overlay-center .lv-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 16px;
    width: 100%;
    margin-top: 16px;

    /* spazio dal logo SVG sopra (invariato) */
    margin-bottom: 0;
    line-height: 1;

    /* Stesso carattere del cast (lv-credit) sotto: family/size/weight/color */
    font-family: var(--font-info);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);

    /* text-transform: uppercase */
}

.hero .lv-overlay-center .lv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.hero .lv-overlay-center .lv-meta-item .material-symbols-outlined {
    font-size: 15px;
    opacity: 0.6;
}

.hero .lv-overlay-center .lv-meta-sep {
    opacity: 0.35;
    font-size: 14px;
    line-height: 1;
}

/* Serie: piccolo box bordato in stile "HD Netflix".
   Bordo + colore testo ereditano dal brand color tramite currentColor. */
.hero .lv-overlay-center .lv-meta-series {
    display: inline-block;
    border: 1px solid currentColor;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1.4;

    /* font-weight non dichiarato → eredita 700 dal .lv-meta parent */
}

.hero .lv-overlay-center .lv-meta-series--colossal {
    color: #9bd99b;
}

.hero .lv-overlay-center .lv-meta-series--palco {
    color: #f0d060;
}

.hero .lv-overlay-center .lv-meta-series--recital {
    color: #000000;
}

.hero .lv-overlay-center .lv-meta-series--fiabe {
    color: #f08080;
}

.hero .lv-overlay-center .lv-meta-series--letture {
    color: #70d5b8;
}

/* lv-credit dentro le hero ospita il CAST (non più copyright/studios).
   Stesso carattere del meta sopra (Inter, --font-info). */
.hero .lv-overlay-center .lv-credit {
    font-family: var(--font-info);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px !important;

    /* spazio meta→cast — !important per forzare oltre eventuali override */
    max-width: 90%;
}

/* Spazio cast → bottone (overrride dell'inline margin: 20px 0 0 sui bottoni) */
.hero .lv-overlay-center .lv-btn {
    margin-top: 30px !important;
}

.hero .lv-overlay-center .lv-credit b {
    font-weight: 700;
    color: #ffffff;
}

/* =========================================================
   CONTACTS
   ========================================================= */
/* Contatti allineati allo stesso inset dell'H1 dell'hero:
   hero ha padding 0 20px, h1 ha padding-left 92px → inset totale 112px */
.contacts {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    max-height: 100vh;
    overflow-y: auto;
    background: var(--dark);
    color: var(--light);
    padding: 140px 112px 48px;
}

.contacts-intro {
    max-width: 800px;
    margin: 0 0 96px;
    text-align: left;
}

.contacts-intro h2 {
    font-family: var(--font-heading);
    font-size: clamp(32px, 3.6vw, 48px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 18px;
    color: var(--light);
}

.contacts-intro p {
    color: var(--light-70);
    font-size: 18px;
    line-height: 1.5;
    max-width: 60ch;
}

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 64px 72px;
    border-top: 1px solid var(--light-18);
    padding-top: 72px;
}

.contact-item h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    letter-spacing: 0;
    font-weight: 520;
    line-height: 1.2;
    margin-bottom: 14px;
    color: var(--light);
}

.contact-item p {
    color: var(--light-70);
    font-size: 17px;
    line-height: 1.55;
    margin-bottom: 10px;
    min-height: 4.8em;
}

.mail-link {
    color: var(--light);
    border-bottom: 1px solid var(--light-18);
    padding-bottom: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: border-color 0.2s, opacity 0.2s;
    display: inline-block;
}

.mail-link:hover,
.mail-link:focus {
    border-color: var(--light);
    opacity: 0.85;
    outline: none;
}

.honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
    margin: 96px 0 0;
    border-top: 1px solid var(--light-18);
    padding-top: 32px;
    color: var(--light-45);
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

/* =========================================================
   Fade-in on scroll: intro + contact-item
   ========================================================= */
.lv-fade {
    opacity: 0 !important;
    transform: translateY(18px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.lv-fade.is-visible {
    opacity: 1 !important;
    transform: translateY(0);
}

/* =========================================================
   Responsive
   ========================================================= */
/* Breakpoint intermedio: segue lo stesso restringimento dell'hero */
@media (max-width: 1100px) {
    .contacts {
        padding: 120px 60px 40px;
    }
}

@media (max-width: 860px) {
    .hero {
        padding: 0 20px 60px;
    }

    .hero-logo {
        height: 70px;
    }

    .hero-1 h1 {
        font-size: 40px;
        padding-left: 0;
    }

    .hero-1 h2 {
        font-size: 18px;
        padding-left: 0;
    }

    .hero-2 {
        padding: 60px 20px;
    }

    .hero-3,
    .hero-4 {
        padding: 20px;
    }

    .contacts {
        padding: 80px 20px 32px;
    }

    .contacts-intro {
        margin-bottom: 64px;
    }

    .contacts-grid {
        padding-top: 48px;
        gap: 40px;
    }

    .contact-item p {
        min-height: 0;
    }
}