/**
 * landing.css — CSS NOSTRO della landing pubblica (app/Views/public/landing.php)
 *
 * 🖼️ 2026-10-05 — BUG-207 hero (TEMP/BUG-207/doc-19, doc-20, doc-21).
 * I CSS in public/build/ sono GENERATI (copiati da gamenotes-v3) e NON si toccano:
 * ogni regola nostra della landing va qui, inclusa dopo i CSS del build.
 */

/* Newsreader 400 (latin), ospitato da noi: niente Google Fonts per il titolo dell'hero (doc-21, doc-23) */
@font-face {
    font-family: "Newsreader";
    src: url("/assets/fonts/newsreader-400-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Colori dell'hero «variante B» (mockup TEMP/BUG-207/mockup-hero-gamenotes.html):
   fondo come l'immagine «La Settimana dell'Allievo», titolo crema, sottotitolo nebbia.
   I pulsanti restano nel viola Vuexy (btn-primary), la navbar non si tocca. */
.landing-hero {
    --gn-hero-midnight: #0c1119;
    --gn-hero-ink: #141a27;
    --gn-hero-cream: #ecdcb9;
    --gn-hero-mist: #b4bccb;
}

/* 🌗 2026-10-06 — tema chiaro: crema e nebbia sono colori per il fondo notte, sul fondo chiaro
   del template il titolo spariva. Qui valgono i colori del tema Vuexy chiaro (emphasis e body). */
[data-bs-theme=light] .landing-hero {
    --gn-hero-cream: #2f2b3d;
    --gn-hero-mist: #6d6b77;
}

/* Fondo: gradiente notte + leggero bagliore ambra al centro. Sostituisce il #1e2130 del tema
   (stessa specificita' della regola del build, che viene prima). */
[data-bs-theme=dark] .landing-hero {
    --bs-hero-bg:
        radial-gradient(60% 55% at 50% 38%, rgba(242, 165, 65, .07), transparent 70%),
        linear-gradient(180deg, var(--gn-hero-midnight) 0%, var(--gn-hero-ink) 100%);
}

/* Via il bagliore viola di hero-bg.png: e' l'unica <img> figlia diretta di #landingHero */
#landingHero > img {
    display: none;
}

/* Titolo: serif crema, senza il gradiente animato del template (.hero-title con animation: shine).
   Newsreader e' il font previsto (ospitato da noi, file ancora da fornire): finche' manca vale Georgia. */
.landing-hero .hero-title {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--gn-hero-cream);
    font-family: "Newsreader", Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.landing-hero .hero-sub-title {
    color: var(--gn-hero-mist);
    font-weight: 400;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
}

/* Immagine «La Settimana dell'Allievo»: i bordi quasi neri si sciolgono nello sfondo della pagina
   invece di disegnare un rettangolo. 12 % ai lati; 8 % sopra e sotto come nel mockup (doc-21),
   cosi' le etichette «Giorno 1…7» restano piene.
   height: auto tiene le proporzioni: il template forza solo la larghezza (inline-size: 100%)
   e senza questa regola varrebbe l'altezza dell'attributo height (immagine schiacciata). */
#heroAnimationImg img {
    height: auto;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-composite: intersect;
}

/* 📸 2026-10-06 — foto ai lati dell'hero (mockup TEMP/BUG-207/mockup-hero-foto-lati.html):
   chitarra sfocata a sinistra, Danilo a destra, bordi sciolti nello sfondo. Solo da 1400 px in su e col tema scuro:
   sotto, il testo centrale ci finirebbe sopra. Stanno sotto il contenuto (z-index 0 vs 1). */
.gn-hero-side {
    display: none;
    position: absolute;
    z-index: 0;
    top: 5.5rem;
    bottom: 4.5rem;
    width: clamp(240px, 22vw, 420px);
    pointer-events: none;
}
#landingHero > .container {
    position: relative;
    z-index: 1;
}
.gn-hero-side img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gn-hero-side-l {
    left: 0;
}
.gn-hero-side-l img {
    filter: blur(2.5px) brightness(.5) saturate(.85);
    object-position: 60% 40%;
    -webkit-mask-image:
        linear-gradient(to right, #000 35%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 18%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, #000 35%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 18%, #000 70%, transparent 100%);
    mask-composite: intersect;
}
.gn-hero-side-r {
    right: 2vw;
}
.gn-hero-side-r img {
    object-fit: contain;
    object-position: right top;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 38%),
        linear-gradient(to bottom, transparent 0, #000 10%, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 38%),
        linear-gradient(to bottom, transparent 0, #000 10%, #000 72%, transparent 100%);
    mask-composite: intersect;
}
/* Solo tema scuro: su fondo chiaro le foto diventano rettangoli scuri */
@media (min-width: 1400px) {
    [data-bs-theme=dark] .gn-hero-side {
        display: block;
    }
}