/* ============================================================
   LA MIMOSA – Temi stagionali (Halloween, Natale, Pasqua)
   Si accendono con <html data-tema="..."> (lo mette js/tema.js, chiedendo /api/tema).
   Senza attributo il sito resta quello di sempre.

   Ogni tema fa tre cose, e solo queste:
     1. ricolora le variabili di style.css (tutto il sito le usa, quindi cambia tutto insieme);
     2. una fila di lucine sotto l'header, su tutte le pagine;
     3. una decorazione nell'apertura della home (neve, pipistrelli, petali) e una riga nel footer.
   Le decorazioni sono pseudo-elementi senza testo (niente da tradurre, niente da leggere per
   uno screen reader) e si fermano per chi ha chiesto meno animazioni.

   Contrasti: il colore principale porta testo bianco sui bottoni, quindi ognuno sta sopra 4.5:1
   sul bianco (Natale 6.3, Halloween 5.2, Pasqua 5.6).
   ============================================================ */

/* ── Natale ─────────────────────────────────────────────────── */
html[data-tema="natale"] {
  --pink: #B3202E;
  --pink-light: #D93644;
  --pink-dark: #7A1020;
  --pink-pale: #FBEAEA;
  --rose: #EDC1C4;
  --cream: #FFFBF6;
  --cream-dark: #F6EEE6;
  --gold: #C9A84C;
  --text-muted: #7A5A5E;
  --shadow-sm: 0 2px 8px rgba(122, 16, 32, 0.10);
  --shadow-md: 0 6px 24px rgba(122, 16, 32, 0.15);
  --shadow-lg: 0 12px 48px rgba(122, 16, 32, 0.20);
  --tema-accento: #2E6B3A;
}
html[data-tema="natale"] .hero-overlay {
  background: linear-gradient(160deg, rgba(122, 16, 32, 0.72) 0%, rgba(179, 32, 46, 0.45) 50%, rgba(16, 40, 24, 0.62) 100%);
}

/* ── Halloween ──────────────────────────────────────────────── */
html[data-tema="halloween"] {
  --pink: #C2410C;
  --pink-light: #EA580C;
  --pink-dark: #5B21B6;
  --pink-pale: #FFF1E6;
  --rose: #FDC9A3;
  --cream: #FFF9F3;
  --cream-dark: #F8ECE0;
  --text-muted: #6B4B5E;
  --shadow-sm: 0 2px 8px rgba(91, 33, 182, 0.10);
  --shadow-md: 0 6px 24px rgba(91, 33, 182, 0.14);
  --shadow-lg: 0 12px 48px rgba(91, 33, 182, 0.20);
  --tema-accento: #5B21B6;
}
html[data-tema="halloween"] .hero-overlay {
  background: linear-gradient(160deg, rgba(59, 7, 100, 0.75) 0%, rgba(194, 65, 12, 0.45) 55%, rgba(10, 5, 15, 0.7) 100%);
}
html[data-tema="halloween"] .hero-title em { color: #FDBA74; }

/* ── Pasqua ─────────────────────────────────────────────────── */
html[data-tema="pasqua"] {
  --pink: #7149B8;
  --pink-light: #9575CD;
  --pink-dark: #4A2F86;
  --pink-pale: #F3EEFB;
  --rose: #D9CCF0;
  --cream: #FFFDF6;
  --cream-dark: #F6F1E4;
  --gold: #E0B530;
  --text-muted: #6B5A7E;
  --shadow-sm: 0 2px 8px rgba(74, 47, 134, 0.10);
  --shadow-md: 0 6px 24px rgba(74, 47, 134, 0.14);
  --shadow-lg: 0 12px 48px rgba(74, 47, 134, 0.20);
  --tema-accento: #2E7D5B;
}
html[data-tema="pasqua"] .hero-overlay {
  background: linear-gradient(160deg, rgba(74, 47, 134, 0.62) 0%, rgba(149, 117, 205, 0.4) 50%, rgba(46, 125, 91, 0.45) 100%);
}
html[data-tema="pasqua"] .hero-title em { color: #FFE58A; }

/* ── Comune a tutti i temi ──────────────────────────────────── */

/* Le etichette sopra i titoli ("Le nostre creazioni") prendono il secondo colore del tema. */
html[data-tema] .section-label { color: var(--tema-accento); }

/* Fila di lucine sotto l'header. Quattro colori a giro, ogni 48px; tremolano piano. */
html[data-tema] .site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -7px; height: 7px;
  pointer-events: none;
  --l1: #E53935; --l2: #2E7D32; --l3: #F9A825; --l4: #1E88E5;
  background:
    radial-gradient(circle at 6px 3.5px, var(--l1) 2.6px, transparent 3.2px) 0 0 / 48px 7px repeat-x,
    radial-gradient(circle at 18px 3.5px, var(--l2) 2.6px, transparent 3.2px) 0 0 / 48px 7px repeat-x,
    radial-gradient(circle at 30px 3.5px, var(--l3) 2.6px, transparent 3.2px) 0 0 / 48px 7px repeat-x,
    radial-gradient(circle at 42px 3.5px, var(--l4) 2.6px, transparent 3.2px) 0 0 / 48px 7px repeat-x;
  filter: drop-shadow(0 0 2px rgba(255, 220, 120, 0.7));
  animation: lm-luci 2.4s ease-in-out infinite alternate;
}
html[data-tema="halloween"] .site-header::after { --l1: #F97316; --l2: #7C3AED; --l3: #FACC15; --l4: #16A34A; }
html[data-tema="pasqua"] .site-header::after { --l1: #F9D65C; --l2: #F48FB1; --l3: #81C784; --l4: #9575CD; filter: none; }
@keyframes lm-luci { from { opacity: 0.75; } to { opacity: 1; } }

/* Una riga di decorazioni sopra il nome nel footer. */
html[data-tema] .footer-center::before {
  display: block; margin-bottom: 0.6rem; font-size: 1.15rem; letter-spacing: 0.6rem;
}
html[data-tema="natale"] .footer-center::before { content: "❄️🎄❄️"; }
html[data-tema="halloween"] .footer-center::before { content: "🦇🎃🦇"; }
html[data-tema="pasqua"] .footer-center::before { content: "🌷🐣🌷"; }

/* ── Decorazione dell'apertura (solo home: .hero) ───────────── */
html[data-tema] .hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}

/* Neve: tre strati di fiocchi a dimensioni diverse che scendono a velocita' diverse. */
html[data-tema="natale"] .hero::after {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 120px 80px, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
    radial-gradient(2px 2px at 60px 150px, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(4px 4px at 170px 120px, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 90px 190px, #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 150px 10px, rgba(255, 255, 255, 0.85) 50%, transparent 51%);
  background-size: 200px 200px;
  animation: lm-neve 16s linear infinite;
  opacity: 0.85;
}
@keyframes lm-neve { to { background-position: 40px 200px, -30px 200px, 20px 200px, -10px 200px, 30px 200px, -20px 200px; } }

/* Pipistrelli: due, che attraversano l'apertura in alto a tempi diversi. */
html[data-tema="halloween"] .hero::before,
html[data-tema="halloween"] .hero::after {
  content: "🦇";
  position: absolute; inset: auto; z-index: 0; pointer-events: none;
  font-size: 2.2rem; top: 16%; left: -10%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
  animation: lm-volo 13s linear infinite;
}
html[data-tema="halloween"] .hero::before { top: 30%; font-size: 1.5rem; animation-duration: 17s; animation-delay: -6s; opacity: 0.8; }
@keyframes lm-volo {
  0% { transform: translate(0, 0) rotate(-6deg); }
  25% { transform: translate(35vw, -4vh) rotate(6deg); }
  50% { transform: translate(65vw, 3vh) rotate(-4deg); }
  75% { transform: translate(90vw, -3vh) rotate(5deg); }
  100% { transform: translate(125vw, 0) rotate(-6deg); }
}

/* Petali pastello che scendono piano. */
html[data-tema="pasqua"] .hero::after {
  background-image:
    radial-gradient(5px 3px at 30px 40px, rgba(249, 214, 92, 0.9) 50%, transparent 52%),
    radial-gradient(4px 6px at 130px 90px, rgba(244, 143, 177, 0.85) 50%, transparent 52%),
    radial-gradient(5px 4px at 80px 160px, rgba(129, 199, 132, 0.85) 50%, transparent 52%),
    radial-gradient(4px 5px at 180px 20px, rgba(255, 255, 255, 0.9) 50%, transparent 52%),
    radial-gradient(6px 4px at 200px 140px, rgba(206, 147, 216, 0.85) 50%, transparent 52%);
  background-size: 240px 220px;
  animation: lm-petali 22s linear infinite;
}
@keyframes lm-petali { to { background-position: 60px 220px, -40px 220px, 30px 220px, -60px 220px, 20px 220px; } }

@media (prefers-reduced-motion: reduce) {
  html[data-tema] .site-header::after,
  html[data-tema] .hero::before,
  html[data-tema] .hero::after { animation: none; }
  html[data-tema="halloween"] .hero::before { display: none; }
  html[data-tema="halloween"] .hero::after { left: 8%; }
}