/* ═══════════════════════════════════════════════════════════════════════════
   CASA DEL PELLEGRINO — ATRII STAGIONALI (theme switcher festivo/stagionale)
   Layer visivo: con html.tema-on ridefinisce i token (colore, gradiente,
   cornice, badge) e li applica a header, hero, bottoni, card e footer.
   Senza .tema-on il file non cambia nulla: il sito d'origine resta identico.
   Zero layout shift. Testi, icone e contenuti non si toccano.
   Logica auto/manuale: public/temi-feed.php · UI: area-riservata/temi.php.
   Motore: /temi.js (classe .tema-on su <html>).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Rendi animabili i colori-gancio: le transizioni sui token cambiano SOLO colore */
@property --accent      { syntax: "<color>"; inherits: true; initial-value: #EE6A2C; }
@property --accent-deep { syntax: "<color>"; inherits: true; initial-value: #C9531E; }
@property --grad-a      { syntax: "<color>"; inherits: true; initial-value: #EE6A2C; }
@property --grad-b      { syntax: "<color>"; inherits: true; initial-value: #C1185B; }
@property --mode-1      { syntax: "<color>"; inherits: true; initial-value: #F6A81E; }
@property --mode-2      { syntax: "<color>"; inherits: true; initial-value: #C1185B; }

:root {
  --tema-soft:   rgba(233,99,31,.06);  /* alone trasversale dietro alle sezioni  */
  --tema-soft-2: rgba(233,99,31,.04);  /* alone secondario (contrasto)           */
  --tema-ring:   rgba(233,99,31,.55);  /* filo della cornice vetro               */
  --tema-r:      14px;                 /* raggio cornice                         */
  --tema-t:      1.1s;                 /* durata transizione colori              */
}

/* Token CTA di marca: le stagioni NON li ridefiniscono mai. Rispecchiano il
   --accent-deep d'origine (sito, modalità asso, mondi) così i bottoni d'azione
   (Prenota, Iscrivimi, invii) restano identici al sito senza tema. */
:root               { --cta: #C9531E; }
[data-mode="asso"]  { --cta: #3E7A2C; }
[data-group="coop"] { --cta: #C9531E; }
[data-group="asso"] { --cta: #3E7A2C; }
[data-group="az"]   { --cta: #5B3A85; }

:root, html[data-tema] {
  transition:
    --accent var(--tema-t) cubic-bezier(.16,.6,.2,1),
    --accent-deep var(--tema-t) cubic-bezier(.16,.6,.2,1),
    --grad-a var(--tema-t) cubic-bezier(.16,.6,.2,1),
    --grad-b var(--tema-t) cubic-bezier(.16,.6,.2,1),
    --mode-1 var(--tema-t) cubic-bezier(.16,.6,.2,1),
    --mode-2 var(--tema-t) cubic-bezier(.16,.6,.2,1);
}

/* Token per tema. --tema-h* e --tema-g* NON vengono rimappati da [data-group]:
   le superfici grandi (hero, bottoni, fasce) li leggono anche dentro un mondo.
   --accent / --grad-* restano i ganci del design system (eyebrow, link, focus). */
html[data-tema="natale"] {
  --accent: #C43A47; --accent-deep: #8E1F2C; --accent-soft: #F6E3E0;
  --mode-1: #D9A441; --mode-2: #8E1F2C;
  --grad-a: #D9A441; --grad-b: #A8262F;
  --hero-1: #D9A441; --hero-2: #A8262F; --hero-3: #1E4A44;
  --grp: #C43A47; --grp-deep: #8E1F2C; --grp-soft: #F6E3E0;
  --tema-h1: #D9A441; --tema-h2: #A8262F; --tema-h3: #1E4A44;
  --tema-ga: #D9A441; --tema-gb: #A8262F;
  --tema-soft: rgba(168,38,47,.08); --tema-soft-2: rgba(30,74,68,.06);
  --tema-ring: rgba(217,164,65,.55);
  --shadow-glow: 0 6px 16px rgba(142,31,44,.32);
  --neon: 0 0 7px rgba(196,58,71,.45), 0 0 18px rgba(217,164,65,.28);
}

/* ─── 2 · PASQUA — pastello, verde rinascita, oro chiaro ──────────────────── */
html[data-tema="pasqua"] {
  --accent: #6E9A52; --accent-deep: #3F6B34; --accent-soft: #E7F0DC;
  --mode-1: #E4C56A; --mode-2: #6E9A52;
  --grad-a: #E4C56A; --grad-b: #6E9A52;
  --hero-1: #F6E7C1; --hero-2: #8FB56E; --hero-3: #4F7D45;
  --grp: #6E9A52; --grp-deep: #3F6B34; --grp-soft: #E7F0DC;
  --tema-h1: #F6E7C1; --tema-h2: #8FB56E; --tema-h3: #4F7D45;
  --tema-ga: #E4C56A; --tema-gb: #6E9A52;
  --tema-soft: rgba(110,154,82,.08); --tema-soft-2: rgba(228,197,106,.07);
  --tema-ring: rgba(228,197,106,.6);
  --shadow-glow: 0 6px 16px rgba(63,107,52,.28);
  --neon: 0 0 7px rgba(110,154,82,.4), 0 0 18px rgba(228,197,106,.28);
}

/* ─── 3 · CARNEVALE — sberleffi di viola, oro e smeraldo (elegante, non pacchiano) ── */
html[data-tema="carnevale"] {
  --accent: #7C4DA8; --accent-deep: #572D80; --accent-soft: #EFE7F6;
  --mode-1: #D9A441; --mode-2: #572D80;
  --grad-a: #D9A441; --grad-b: #7C4DA8;
  --hero-1: #D9A441; --hero-2: #7C4DA8; --hero-3: #3C2060;
  --grp: #7C4DA8; --grp-deep: #572D80; --grp-soft: #EFE7F6;
  --tema-h1: #D9A441; --tema-h2: #7C4DA8; --tema-h3: #3C2060;
  --tema-ga: #D9A441; --tema-gb: #7C4DA8;
  --tema-soft: rgba(124,77,168,.08); --tema-soft-2: rgba(217,164,65,.06);
  --tema-ring: rgba(217,164,65,.55);
  --shadow-glow: 0 6px 16px rgba(87,45,128,.3);
  --neon: 0 0 7px rgba(124,77,168,.42), 0 0 18px rgba(217,164,65,.26);
}

/* ─── 4 · PRIMAVERA — verde germoglio, rosa tenue, giallo solare ──────────── */
html[data-tema="primavera"] {
  --accent: #68A847; --accent-deep: #3E7A2C; --accent-soft: #EBF4E1;
  --mode-1: #F2A5C0; --mode-2: #3E7A2C;
  --grad-a: #F2A5C0; --grad-b: #68A847;
  --hero-1: #F5C3D3; --hero-2: #A9CF8A; --hero-3: #58943C;
  --grp: #68A847; --grp-deep: #3E7A2C; --grp-soft: #EBF4E1;
  --tema-h1: #F5C3D3; --tema-h2: #A9CF8A; --tema-h3: #58943C;
  --tema-ga: #F2A5C0; --tema-gb: #68A847;
  --tema-soft: rgba(242,165,192,.1); --tema-soft-2: rgba(104,168,71,.06);
  --tema-ring: rgba(242,165,192,.65);
  --shadow-glow: 0 6px 16px rgba(62,122,44,.28);
  --neon: 0 0 7px rgba(104,168,71,.4), 0 0 18px rgba(242,165,192,.3);
}

/* ─── 5 · ESTATE — blu oceano, sabbia calda, arancio tramonto ─────────────── */
html[data-tema="estate"] {
  --accent: #E98A3C; --accent-deep: #C96A24; --accent-soft: #FBEADA;
  --mode-1: #2E9BC0; --mode-2: #E98A3C;
  --grad-a: #2E9BC0; --grad-b: #E98A3C;
  --hero-1: #63C7E4; --hero-2: #F0A54E; --hero-3: #DD6B2F;
  --grp: #E98A3C; --grp-deep: #C96A24; --grp-soft: #FBEADA;
  --tema-h1: #63C7E4; --tema-h2: #F0A54E; --tema-h3: #DD6B2F;
  --tema-ga: #2E9BC0; --tema-gb: #E98A3C;
  --tema-soft: rgba(46,155,192,.09); --tema-soft-2: rgba(233,138,60,.07);
  --tema-ring: rgba(46,155,192,.55);
  --shadow-glow: 0 6px 16px rgba(201,106,36,.3);
  --neon: 0 0 7px rgba(46,155,192,.4), 0 0 18px rgba(233,138,60,.28);
}

/* ─── 6 · AUTUNNO — terracotta, ambra, marrone bosco ──────────────────────── */
html[data-tema="autunno"] {
  --accent: #C56A2E; --accent-deep: #95501F; --accent-soft: #F6E7D8;
  --mode-1: #D9A45C; --mode-2: #95501F;
  --grad-a: #D9A45C; --grad-b: #8A4A2A;
  --hero-1: #D9A45C; --hero-2: #B4612E; --hero-3: #6E3A1E;
  --grp: #C56A2E; --grp-deep: #95501F; --grp-soft: #F6E7D8;
  --tema-h1: #D9A45C; --tema-h2: #B4612E; --tema-h3: #6E3A1E;
  --tema-ga: #D9A45C; --tema-gb: #8A4A2A;
  --tema-soft: rgba(176,122,60,.09); --tema-soft-2: rgba(110,58,30,.06);
  --tema-ring: rgba(176,122,60,.58);
  --shadow-glow: 0 6px 16px rgba(149,80,31,.3);
  --neon: 0 0 7px rgba(197,106,46,.42), 0 0 18px rgba(176,122,60,.26);
}

/* ─── 7 · INVERNO — blu notte, argento, bianco ghiaccio ───────────────────── */
html[data-tema="inverno"] {
  --accent: #4E6E9E; --accent-deep: #33496F; --accent-soft: #E7EDF6;
  --mode-1: #9FB8D8; --mode-2: #33496F;
  --grad-a: #9FB8D8; --grad-b: #33496F;
  --hero-1: #B8CCE6; --hero-2: #6E8FB8; --hero-3: #33496F;
  --grp: #4E6E9E; --grp-deep: #33496F; --grp-soft: #E7EDF6;
  --tema-h1: #B8CCE6; --tema-h2: #6E8FB8; --tema-h3: #33496F;
  --tema-ga: #9FB8D8; --tema-gb: #33496F;
  --tema-soft: rgba(78,110,158,.08); --tema-soft-2: rgba(159,184,216,.07);
  --tema-ring: rgba(159,184,216,.6);
  --shadow-glow: 0 6px 16px rgba(51,73,111,.28);
  --neon: 0 0 7px rgba(78,110,158,.4), 0 0 18px rgba(159,184,216,.3);
}

/* ─── 8 · HALLOWEEN / OGNISSANTI — zucca calda su notte viola ─────────────── */
html[data-tema="halloween"] {
  --accent: #D9772A; --accent-deep: #A34E18; --accent-soft: #F7E9DC;
  --mode-1: #E8944A; --mode-2: #3C2060;
  --grad-a: #E8944A; --grad-b: #3C2060;
  --hero-1: #E8944A; --hero-2: #8A4A6A; --hero-3: #2A163F;
  --grp: #D9772A; --grp-deep: #A34E18; --grp-soft: #F7E9DC;
  --tema-h1: #E8944A; --tema-h2: #8A4A6A; --tema-h3: #2A163F;
  --tema-ga: #E8944A; --tema-gb: #3C2060;
  --tema-soft: rgba(217,119,42,.09); --tema-soft-2: rgba(60,32,96,.07);
  --tema-ring: rgba(217,119,42,.55);
  --shadow-glow: 0 6px 16px rgba(163,78,24,.32);
  --neon: 0 0 7px rgba(217,119,42,.45), 0 0 18px rgba(60,32,96,.3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   VESTITO A 360° — solo con html.tema-on + body.cinema (sito pubblico).
   Spento: nessuna di queste regole scatta, il sito resta com'è.
   Non tocca testi, icone, WhatsApp, né il semaforo aperto/chiuso.
   I tre mondi in nav (arancio/verde/viola) restano: sono orientamento, non decoro.
   [data-group] e [data-mode=asso] non possono ribattere la palette stagionale.
   ═══════════════════════════════════════════════════════════════════════════ */
html.tema-on body.cinema[data-group],
html.tema-on body.cinema [data-group],
html.tema-on body.cinema .recensioni {
  --accent: inherit; --accent-deep: inherit; --accent-soft: inherit;
  --grad-a: inherit; --grad-b: inherit;
  --hero-1: inherit; --hero-2: inherit; --hero-3: inherit;
  --mode-1: inherit; --mode-2: inherit;
  --grp: inherit; --grp-deep: inherit; --grp-soft: inherit;
  --shadow-glow: inherit; --neon: inherit;
}

/* Header: fascia, filo, tagline. Il drawer prende lo stesso alone. */
html.tema-on body.cinema .hdr {
  background: color-mix(in srgb, var(--accent-soft) 62%, #FCFAF6);
  border-bottom-color: color-mix(in srgb, var(--tema-ring) 70%, var(--line));
  box-shadow: inset 0 -3px 0 var(--tema-ga);
}
html.tema-on body.cinema .hdr.is-condensed {
  box-shadow: inset 0 -3px 0 var(--tema-ga), 0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}
html.tema-on body.cinema .hdr__name small { color: var(--accent-deep); }
html.tema-on body.cinema .hdr__drawer {
  background:
    radial-gradient(62% 30% at 88% -6%, color-mix(in srgb, var(--tema-ga) 18%, transparent), transparent 70%),
    radial-gradient(55% 28% at -12% 32%, color-mix(in srgb, var(--tema-gb) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--accent-soft) 40%, #FCFAF6);
}

/* Hero interno (pagine) + hero home (il film resta, cambia la luce). */
html.tema-on body.cinema .page-hero {
  background: linear-gradient(150deg, var(--tema-h1) 0%, var(--tema-h2) 48%, var(--tema-h3) 96%);
}
html.tema-on body.cinema .alba__scrim {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--tema-h3) 86%, #1c130f) 0%,
      color-mix(in srgb, var(--accent-deep) 58%, rgba(28,19,15,.55)) 46%,
      color-mix(in srgb, var(--tema-h1) 22%, rgba(28,19,15,.22)) 78%),
    linear-gradient(0deg, color-mix(in srgb, var(--tema-h3) 72%, #1c130f), transparent 56%);
}
html.tema-on body.cinema .alba::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--tema-h3) 30%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--tema-h1) 24%, transparent), transparent 24% 70%, color-mix(in srgb, var(--tema-gb) 26%, transparent));
  mix-blend-mode: soft-light;
}
html.tema-on body.cinema .alba__line { border-color: color-mix(in srgb, #fff 55%, var(--tema-h1)); }

/* BOTTONI D'AZIONE — restano quelli del sito (fix 05/10/2026).
   Prima: .btn-primary riceveva linear-gradient(--tema-ga → --tema-gb) con specificità
   0,3,2 / 0,4,2 (html.tema-on[data-mode]…) che batteva il fill pieno di cinema.css
   (body.cinema .btn-primary 0,2,1 e [data-page=home] .hdr__cta 0,3,1): il «Prenota»
   diventava una pillola bronzo/oro con testo bianco a ~2:1 (autunno #D9A45C).
   Ora: nessun background imposto qui. Sul bottone si ri-ancorano solo i token che
   cinema.css legge (--accent-deep / --grp-deep) al --cta di marca → fill pieno, testo
   bianco, nessun gradiente; padding/min-height/hit area intatti (non si toccano).
   Gli override di pagina (es. .wellness__cta, .tour, .form-az) continuano a vincere. */
html.tema-on body.cinema :is(.btn-primary, .hdr__cta, .alba__fill, .apptab__item--cta, .rez__cta) {
  --accent-deep: var(--cta, #C9531E);
  --grp-deep: var(--cta, #C9531E);
}
/* Fasce con testo bianco: la luce di stagione resta, ma i colori chiari (oro, rosa,
   pastello) non stanno più sotto al testo — base scurita ≥ 4.5:1, alone chiaro in angolo. */
html.tema-on body.cinema .cta-band,
html.tema-on[data-mode] body.cinema .cta-band {
  background:
    radial-gradient(110% 130% at 100% 0%, color-mix(in srgb, var(--tema-ga) 30%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-deep) 86%, #1c130f), color-mix(in srgb, var(--tema-gb) 72%, #1c130f));
}
html.tema-on body.cinema .docs-cta__band {
  background:
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--tema-ga) 28%, transparent), transparent 60%),
    linear-gradient(120deg, color-mix(in srgb, var(--tema-h3) 82%, #1c130f) 0%, color-mix(in srgb, var(--tema-gb) 72%, #1c130f) 60%, color-mix(in srgb, var(--accent-deep) 86%, #1c130f) 100%);
}
html.tema-on body.cinema .docs-cta__btn { color: var(--cta, #C9531E); }
html.tema-on body.cinema .docs-cta__btn:hover { background: var(--tema-h1); color: #2A211C; }
html.tema-on body.cinema .docs-cta__eyebrow { color: #fff; --grp: #fff; }

/* Badge / eyebrow: anello della palette, non un colore a caso. */
html.tema-on body.cinema .eyebrow {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tema-ring) 75%, transparent);
}
html.tema-on body.cinema .grad-text {
  background-image: linear-gradient(100deg, var(--mode-1), var(--grad-a) 40%, var(--grad-b));
}
html.tema-on body.cinema .page-hero .grad-text {
  background: none; -webkit-text-fill-color: #fff; color: #fff; filter: none;
}
html.tema-on body.cinema .valori__num {
  background-image: linear-gradient(135deg, var(--tema-ga), var(--tema-gb));
}
html.tema-on body.cinema #valGrad stop:nth-child(1),
html.tema-on body.cinema #tavGrad stop:nth-child(1) { stop-color: var(--tema-h1); }
html.tema-on body.cinema #valGrad stop:nth-child(2),
html.tema-on body.cinema #tavGrad stop:nth-child(2) { stop-color: var(--tema-ga); }
html.tema-on body.cinema #valGrad stop:nth-child(3),
html.tema-on body.cinema #tavGrad stop:nth-child(3) { stop-color: var(--tema-gb); }

/* Card: filo in cima + cornice. Il contenuto dentro non si sposta. */
html.tema-on body.cinema :is(.card, .tl__body, .rec-card, .recap) {
  border-color: color-mix(in srgb, var(--tema-ring) 50%, var(--line));
  box-shadow: inset 0 3px 0 var(--tema-ga), var(--shadow-sm);
}
html.tema-on body.cinema .card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: inset 0 3px 0 var(--tema-ga), var(--shadow-md);
}
html.tema-on body.cinema .tl::before,
html.tema-on[data-mode] body.cinema .tl::before {
  background: linear-gradient(var(--tema-ga), var(--tema-gb));
}
html.tema-on body.cinema .facts-strip {
  background: color-mix(in srgb, var(--accent-soft) 70%, #f4eee4);
  border-bottom-color: color-mix(in srgb, var(--tema-ring) 40%, var(--line));
}
html.tema-on body.cinema .facts-strip__nl {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  color: var(--accent-deep);
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--accent-deep) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.55);
}
html.tema-on body.cinema .facts-strip__nl:hover,
html.tema-on body.cinema .facts-strip__nl:focus-visible {
  background: color-mix(in srgb, var(--accent) 24%, #fff);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent-deep);
}
html.tema-on body.cinema .audience {
  background:
    radial-gradient(circle at 12% 35%, color-mix(in srgb, var(--tema-ga) 20%, transparent), transparent 34rem),
    radial-gradient(circle at 88% 60%, color-mix(in srgb, var(--tema-gb) 16%, transparent), transparent 36rem);
}
html.tema-on body.cinema .menupop-fab {
  border-color: color-mix(in srgb, var(--tema-ring) 75%, var(--line));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Footer: barra firma + carta leggermente tinta. Le stelle delle recensioni restano oro. */
html.tema-on body.cinema .ftr {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 72%, var(--cream-2)), color-mix(in srgb, var(--tema-soft) 55%, #efe3d1));
}
html.tema-on body.cinema .ftr::before {
  background-image: linear-gradient(90deg, var(--tema-h1), var(--tema-ga), var(--tema-gb), var(--tema-h1));
  background-size: 220% 100%;
}

/* Tab bar dell'app installata (nascosta sul sito normale). */
html.tema-on.cdp-standalone body.cinema .apptab {
  background: color-mix(in srgb, var(--accent-soft) 55%, rgba(251,246,238,.96));
  border-top-color: color-mix(in srgb, var(--tema-ring) 55%, var(--line));
}
html.tema-on.cdp-standalone body.cinema .apptab__item[aria-current="page"]::before,
html.tema-on.cdp-standalone body.cinema .apptab__item.is-active::before {
  background: linear-gradient(135deg, var(--tema-ga), var(--tema-gb));
}

html.tema-on body.cinema ::selection { background: var(--accent); color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  html.tema-on body.cinema :is(.hdr, .ftr, .page-hero, .alba__scrim, .facts-strip, .docs-cta__band, .cta-band) {
    transition: background-color .9s cubic-bezier(.16,.6,.2,1), background .9s cubic-bezier(.16,.6,.2,1), border-color .9s cubic-bezier(.16,.6,.2,1), box-shadow .9s cubic-bezier(.16,.6,.2,1);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.tema-on body.cinema :is(.hdr, .ftr, .page-hero, .alba__scrim, .facts-strip, .docs-cta__band, .cta-band, .card, .btn-primary) {
    transition: none !important;
  }
  html.tema-on body.cinema .ftr::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRATO D'ATMOSFERA — cornice vetro + alone trasversale. Solo quando il motore
   conferma il tema (html.tema-on), mai da statico. Puro CSS, niente immagini.
   ═══════════════════════════════════════════════════════════════════════════ */
html.tema-on body { position: relative; }
html.tema-on body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--tema-ring), inset 0 0 34px var(--tema-soft);
  border-radius: var(--tema-r);
}
html.tema-on body::after {
  content: ""; position: fixed; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60vw 44vh at 8% 0%, var(--tema-soft), transparent 70%),
    radial-gradient(52vw 40vh at 96% 100%, var(--tema-soft-2), transparent 70%);
  animation: temaBreath 18s ease-in-out infinite alternate;
}
@keyframes temaBreath { from { opacity: .65; } to { opacity: 1; } }

/* Le sezioni ereditano l'alone del tema (chi lo richiede con .section—zero diffusi) */
html.tema-on .section { position: relative; }
html.tema-on .section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(70% 60% at 50% 0%, var(--tema-soft), transparent 75%);
}

/* Lista temi (reparto Temi) — vetrina colori costruita sui token */
.temi-swatch { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); background: linear-gradient(135deg, var(--tema-c1, #ddd), var(--tema-c2, #999)); }
.temi-swatch--d { background: linear-gradient(135deg, var(--tema-c2, #999), var(--tema-c1, #ddd)); }
.temi-r { background: linear-gradient(105deg, var(--grad-a), var(--grad-b)); border-radius: 999px; padding: .28rem .85rem; color: #fff; font-weight: 800; font-size: .78rem; display: inline-flex; align-items: center; gap: .4rem; }
.temi-r .temi-swatch { width: 14px; height: 14px; border: 0; }

/* Reduced-motion: niente respiro, i colori restano (il tema è informativo, non animato) */
@media (prefers-reduced-motion: reduce) {
  html.tema-on body::after, html.tema-on .section::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NASTRO AUGURIO — testi e grafica del tema. Fisso in basso al centro,
   esente CLS (entra con transform, non tocca il flusso), chiudibile (il
   motore ricorda la chiusura in sessionStorage per tema). Esce da solo.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Chip compatto: una riga su telefono, sopra la safe-area Safari, non copre tile/pellegrino. */
#tema-msg {
  position: fixed; left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 60; display: inline-flex; align-items: center; gap: .35rem;
  box-sizing: border-box;
  width: max-content;
  max-width: min(18rem, 88vw);
  padding: .28rem .4rem .28rem .55rem;
  background: linear-gradient(105deg, color-mix(in srgb, var(--accent-deep) 86%, #1c130f), color-mix(in srgb, var(--grad-b) 72%, #1c130f));
  color: #fff; border-radius: 999px;
  font: 600 .72rem/1.2 system-ui, -apple-system, sans-serif; letter-spacing: .01em;
  text-align: left; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(20,12,8,.22), inset 0 1px 0 rgba(255,255,255,.28);
  animation: temaMsgIn .55s cubic-bezier(.2,.9,.25,1.15) both;
}
#tema-msg.is-out { animation: temaMsgOut .4s ease-in both; }
.tema-msg__i { display: grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.18); }
.tema-msg__i svg { width: 11px; height: 11px; }
.tema-msg__t { text-shadow: 0 1px 2px rgba(20,12,8,.22); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tema-msg__x { appearance: none; border: 0; background: rgba(255,255,255,.16); color: #fff; width: 18px; height: 18px; margin-left: .05rem;
  border-radius: 50%; font: 700 12px/1 system-ui, sans-serif; cursor: pointer; flex-shrink: 0; padding: 0; }
.tema-msg__x:hover { background: rgba(255,255,255,.3); }
/* La regola globale tap-target (button { min-width/min-height: 48px }) gonfiava la X a 48px e il
   chip a ~57px d'altezza: X visiva 18px, area tocco ~36px con uno pseudo-elemento (non tocca il layout). */
#tema-msg .tema-msg__x { position: relative; min-width: 0; min-height: 0; }
#tema-msg .tema-msg__x::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
/* Sopra barre fisse in basso (es. glass-dock della home): la pagina può alzare il chip con
   --tema-msg-lift senza ridefinire il bottom; transizione morbida quando la barra compare. */
#tema-msg { bottom: calc(var(--tema-msg-lift, 0px) + 10px + env(safe-area-inset-bottom, 0px)); transition: bottom .2s ease; }
@keyframes temaMsgIn  { from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.97); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes temaMsgOut { to   { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  #tema-msg, #tema-msg.is-out { animation: none !important; }
  #tema-msg.is-out { opacity: 0; }
}

/* Scena motion (canvas del motore): overlay sotto header/menu, mai interattivo.
   Blend normale: i petali/foglie/coriandoli devono vedersi ANCHE su sfondo chiaro
   (lo screen li lavava via fuori dall'hero). */
canvas.tema-fx { position: fixed; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: normal; opacity: .9; }

/* ═══════════════════════════════════════════════════════════════════════════
   SCENA ANIMATA DEL TEMA — SVG + CSS motion, zero immagini, zero loop JS.
   Natale: renna che trotterella (naso rosso pulsante) + cometa nel cielo.
   Pasqua: coniglio che salta (orecchie che si agitano) + uova che dondolano.
   Tutto decorativo (aria-hidden, pointer-events none), mai sopra il nastro.
   ═══════════════════════════════════════════════════════════════════════════ */
.tema-scena { position: fixed; left: 0; right: 0; bottom: 0; height: 150px; z-index: 4; pointer-events: none; }
.tema-scena svg { position: absolute; overflow: visible; }

/* Colori della scena per tema (le silhouette vestono il tema) */
html[data-tema="natale"] { --tema-sc-1: #4A2A1E; }
html[data-tema="pasqua"] { --tema-sc-1: #8A6A4E; --tema-sc-acc: #E88AA8; --tema-sc-e1: #E9C46A; --tema-sc-e2: #7FA85C; --tema-sc-e3: #F2A5C0; }

/* ── NATALE · renna che attraversa lo schermo trotterellando ── */
.ts-renna { bottom: 10px; left: -150px; width: 128px; height: 90px;
  animation: temaRenna 38s linear infinite; }
.ts-renna .tsg { transform-box: fill-box; transform-origin: 50% 8%; }
.ts-renna .tsa { animation: temaZampa .52s ease-in-out infinite alternate; }
.ts-renna .tsb { animation: temaZampa .52s ease-in-out infinite alternate-reverse; }
.ts-renna .ts-naso { animation: temaLume 1.6s ease-in-out infinite; }
.ts-renna .ts-naso2 { animation: temaNaso 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes temaRenna { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 320px)); } }
@keyframes temaZampa { from { transform: rotate(15deg); } to { transform: rotate(-15deg); } }
@keyframes temaLume { 0%, 100% { opacity: .3; } 50% { opacity: .85; } }
@keyframes temaNaso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* ── NATALE · cometa che attraversa il cielo (sopra la renna) ── */
.ts-cometa { top: 8px; right: -170px; width: 150px; height: 64px;
  animation: temaCometa 30s ease-in infinite; }
.ts-cometa .ts-stella { transform-box: fill-box; transform-origin: center; animation: temaTwinkle 1.5s ease-in-out infinite; }
@keyframes temaCometa {
  0%   { transform: translate(0, 0) rotate(-6deg); opacity: 0; }
  6%   { opacity: 1; }
  38%  { transform: translate(-52vw, 26px) rotate(-6deg); opacity: 1; }
  46%  { transform: translate(-62vw, 32px) rotate(-6deg); opacity: 0; }
  100% { transform: translate(-62vw, 32px) rotate(-6deg); opacity: 0; }
}
@keyframes temaTwinkle { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.25); opacity: 1; } }

/* ── PASQUA · coniglio che salta attraversando lo schermo ── */
.ts-coniglio { bottom: 6px; left: -110px; width: 86px; height: 99px;
  animation: temaConiglio 40s linear infinite, temaSalto 1.15s cubic-bezier(.45,0,.55,1) infinite; }
.ts-coniglio .ts-orec { transform-box: fill-box; transform-origin: 50% 92%; }
.ts-coniglio .ts-orec-a { animation: temaOrecchia 1.15s ease-in-out infinite alternate; }
.ts-coniglio .ts-orec-b { animation: temaOrecchia 1.15s ease-in-out infinite alternate-reverse; }
@keyframes temaConiglio { from { left: -110px; } to { left: calc(100% + 130px); } }
@keyframes temaSalto { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-17px); } 55% { transform: translateY(-14px); } }
@keyframes temaOrecchia { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* ── PASQUA · uova che dondolano nell'angolo ── */
.ts-prato { position: absolute; right: 14px; bottom: 6px; width: 120px; height: 74px; }
.ts-uovo { position: absolute; width: 34px; height: 44px; transform-origin: 50% 96%; animation: temaDondolo 2.6s ease-in-out infinite alternate; }
.ts-uovo.u1 { left: 6px; bottom: 0; }
.ts-uovo.u2 { left: 42px; bottom: 3px; width: 30px; height: 39px; animation-delay: .7s; animation-duration: 2.2s; }
.ts-uovo.u3 { left: 74px; bottom: 0; width: 27px; height: 35px; animation-delay: 1.3s; animation-duration: 3s; }
@keyframes temaDondolo { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

/* Mobile: scena più compatta ma visibile */
@media (max-width: 640px) {
  .tema-scena { height: 110px; }
  .ts-renna { width: 96px; height: 68px; bottom: 8px; }
  .ts-cometa { width: 110px; top: 2px; }
  .ts-coniglio { width: 70px; height: 80px; }
  .ts-prato { transform: scale(.8); transform-origin: bottom right; right: 8px; }
}

/* Reduced-motion: niente scene animate (il motore non le crea; doppia sicurezza) */
@media (prefers-reduced-motion: reduce) {
  .tema-scena { display: none !important; }
}