/* ============================================================
   chapters.css — Layer "Capitoli cromatici" (sovrascrive style.css)

   Caricato DOPO style.css: ridefinisce i colori dei componenti in
   termini di custom property --page-* pilotati da colorChapters.js,
   così sfondo / testo / accento transitano sezione per sezione nello
   scroll. La transizione morbida vive qui (@property + transition).

   ⚠️ Evoluzione consapevole del CLAUDE.md: la regola "bianco come tela /
   bordeaux solo nel marquee" è superata dal sistema a capitoli. Vedi
   CLAUDE.md §1/§4 aggiornati.
   ============================================================ */

/* ── @property: rende i custom prop interpolabili (tipo <color>) ──
   Senza questo, il browser non sa transire tra due colori in una var. */
@property --page-bg         { syntax: '<color>'; inherits: true; initial-value: #0E0E0C; }
@property --page-fg         { syntax: '<color>'; inherits: true; initial-value: #FBFAF7; }
@property --page-accent     { syntax: '<color>'; inherits: true; initial-value: #004903; }
@property --page-accent-ink { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }

:root {
  /* Palette estesa Pop-Baroque (token statici di riferimento) */
  --c-cream:    #FBFAF7;
  --c-dark:     #0E0E0C;
  --c-ink:      #16120E;
  --c-bordeaux: #81251E;
  --c-lime:     #BFC403;
  --c-green:    #004903;
  --c-paper:    #F2ECDD;

  /* Valori live iniziali = capitolo hero (scuro). colorChapters.js li
     riscrive allo scroll; la transition qui sotto li fa sfumare. */
  --page-bg:         #0E0E0C;
  --page-fg:         #FBFAF7;
  --page-accent:     #004903;
  --page-accent-ink: #FFFFFF;

  /* Cross-fade cromatico globale. Curva expo-out morbida (entra deciso,
     si posa lento) — la firma "premium" del cambio capitolo. */
  transition:
    --page-bg         0.75s cubic-bezier(0.22, 1, 0.36, 1),
    --page-fg         0.75s cubic-bezier(0.22, 1, 0.36, 1),
    --page-accent     0.75s cubic-bezier(0.22, 1, 0.36, 1),
    --page-accent-ink 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Pagina ──────────────────────────────────────────────────── */
body {
  background-color: var(--page-bg);
  color: var(--page-fg);
}

/* ── Testi: ereditano il colore del capitolo ─────────────────── */
.title,
.body,
.paragraph,
.paragraph-norm,
.accordion__trigger {
  color: var(--page-fg);
}

/* Highlight keyword → accento del capitolo (sempre contrastante col bg) */
.hl { color: var(--page-accent); }

/* ── Chip titolo (.hero__word): box accentato, testo che ci sta sopra ──
   Era verde/bianco fisso; ora è il chip del capitolo. Su hero resta
   verde (accent=green), su verde/bordeaux diventa lime, su lime bordeaux. */
.hero__word {
  background: var(--page-accent);
  color: var(--page-accent-ink);
}

/* La location dell'hero resta panna (hero è sempre scuro) */
.hero__location { color: var(--page-fg); }

/* ── MARQUEE → "inverted ticker": sempre in contrasto col capitolo ──
   bg = testo del capitolo, testo = sfondo del capitolo. Su panna diventa
   una barra scura, su fondi scuri/colore una barra panna. La keyword si
   accende con l'accento. Sostituisce il bordeaux fisso (più versatile e
   sempre leggibile su qualunque capitolo). */
.marquee {
  background: var(--page-fg);
  color: var(--page-bg);
}

/* ── CTA: il lime resta la costante brand sui capitoli chiari/scuri.
   Solo il focus outline diventa coerente col capitolo. ── */
.btn:focus-visible { outline-color: var(--page-accent-ink); }

/* … MA sui capitoli con FONDO LIME (food, merch) il pulsante lime sparirebbe
   (lime su lime): lì diventa bordeaux (accento del capitolo) con testo bianco;
   in hover si inverte su scuro/lime. Stesso per i chip/highlight, che già usano
   --page-accent (bordeaux) → contrastano sul lime. */
:root[data-chapter="food"] .btn,
:root[data-chapter="merch"] .btn {
  background: var(--page-accent);
  color: var(--page-accent-ink);
}
:root[data-chapter="food"] .btn:hover,
:root[data-chapter="food"] .btn:focus-visible,
:root[data-chapter="merch"] .btn:hover,
:root[data-chapter="merch"] .btn:focus-visible {
  background: var(--page-fg);
  color: var(--page-bg);
}

/* ── NAV ─────────────────────────────────────────────────────── */
/* Hamburger: barre nel colore del capitolo (visibili su scuro e chiaro) */
.nav__toggle span { background: var(--page-fg); }
/* Pannello menu mobile: fondo BORDEAUX fisso (scelta richiesta), NON più
   legato al capitolo. Prima era var(--page-bg) → il menu cambiava colore in
   base alla sezione da cui lo aprivi (per questo si vedeva panna/verde/ecc).
   Le voci restano pillole lime con testo bianco, la X bianca (vedi style.css). */
@media (max-width: 1024px) {
  .nav__center {
    background: var(--color-bordeaux);   /* #81251E */
  }
}

/* ── Focus globale coerente col capitolo ─────────────────────── */
:focus-visible { outline-color: var(--page-fg); }

/* ── Cintura di sicurezza: layer FISSI dell'hero nei capitoli profondi ──
   #hero-bg (tunnel nero, z:-2) e .scene-3d (mascherone, z:-1) sono fixed
   dietro a tutto e normalmente spariscono con fade legati allo scroll.
   Se quei fade saltano (es. prefers-reduced-motion che li bypassava — bug
   visto su iPhone: nero + mascherone fantasma dietro TUTTO il sito — o
   refresh mancati su device particolari), da qui li spegne il capitolo
   stesso: mai visibili da 'birre-artigianali' in poi. hero/intro/birre
   restano esclusi: lì il mascherone viaggia/parcheggia/risale
   legittimamente (desktop). Il data-chapter è scritto da colorChapters.js,
   attivo anche con reduced-motion. */
:root:not([data-chapter="hero"]):not([data-chapter="intro"]):not([data-chapter="birre"]) #hero-bg,
:root:not([data-chapter="hero"]):not([data-chapter="intro"]):not([data-chapter="birre"]) .scene-3d {
  visibility: hidden;
}

/* ── BIRRE strip: trasparente, mostra il fondo del capitolo ──── */
.birre-strip { background: transparent; }

/* ============================================================
   GRIGLIA BIRRIFICI — chapter-aware (capitolo verde)
   Tile trasparenti, linee = testo a bassa opacità, hover = accento.
   ============================================================ */
.brewery-grid {
  /* Le linee della griglia = questo fondo che traspare dai gap di 1px (bordo
     esterno + divider tra righe/colonne). Alzato da 16% → 40% così il divider
     tra la 1ª e la 2ª riga (e le colonne) si vede bene sul verde del capitolo. */
  background: color-mix(in srgb, var(--page-fg) 40%, transparent);
  border-color: color-mix(in srgb, var(--page-fg) 40%, transparent);
}
.brewery-tile { background: var(--page-bg); }
.brewery-tile__num { color: color-mix(in srgb, var(--page-fg) 22%, transparent); }
.brewery-tile__name { color: var(--page-fg); }
.brewery-tile__desc { color: color-mix(in srgb, var(--page-fg) 62%, transparent); }

/* Hover/tap → riempie con l'accento del capitolo */
.brewery-tile:hover,
.brewery-tile:focus-within,
.brewery-tile:active {
  background: var(--page-accent);
  color: var(--page-accent-ink);
}
.brewery-tile:hover .brewery-tile__num,
.brewery-tile:focus-within .brewery-tile__num,
.brewery-tile:active .brewery-tile__num {
  color: color-mix(in srgb, var(--page-accent-ink) 35%, transparent);
}
.brewery-tile:hover .brewery-tile__name,
.brewery-tile:focus-within .brewery-tile__name,
.brewery-tile:active .brewery-tile__name { color: var(--page-accent-ink); }
.brewery-tile:hover .brewery-tile__desc,
.brewery-tile:focus-within .brewery-tile__desc,
.brewery-tile:active .brewery-tile__desc {
  color: color-mix(in srgb, var(--page-accent-ink) 80%, transparent);
}

/* ============================================================
   PASSPORT — chapter-aware (capitolo bordeaux)
   ============================================================ */
.accordion { border-top-color: color-mix(in srgb, var(--page-fg) 30%, transparent); }
.accordion__icon::before,
.accordion__icon::after { background: var(--page-fg); }
.accordion__content { color: color-mix(in srgb, var(--page-fg) 78%, transparent); }
.accordion__lead { color: var(--page-fg); }
.prize-3d__hint { color: var(--page-accent-ink); }

/* Placeholder (.ph): bordo/fondo/testo derivati dal capitolo */
.ph {
  border-color: color-mix(in srgb, var(--page-fg) 28%, transparent);
  background: color-mix(in srgb, var(--page-fg) 8%, transparent);
  color: color-mix(in srgb, var(--page-fg) 55%, transparent);
}

/* ============================================================
   REDUCED MOTION — niente cross-fade: lo switch colore è istantaneo
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
}