/* ==========================================================
   STAGIONE — hook cosmetici del motore eventi (calendario.js).
   Badge nell'Hub + banner di saluto una-tantum. Tinta guidata
   dalla variabile --stagione-accento (impostata da js/stagione.js).
   ================================================---------- */

/* Badge stagione nella testata dell'Hub */
.hub-stagione {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 2px auto 6px; padding: 3px 12px;
    font-size: 0.74rem; letter-spacing: 1px; text-transform: uppercase;
    color: var(--stagione-accento, #cfd6e6);
    border: 1px solid var(--stagione-accento, rgba(207,214,230,.4));
    border-radius: 999px;
    background: color-mix(in srgb, var(--stagione-accento, #cfd6e6) 12%, transparent);
}
.hub-stag-ico { font-size: 0.95rem; }
.hub-stagione[role="button"] { cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.hub-stagione[role="button"]:hover {
    background: color-mix(in srgb, var(--stagione-accento, #cfd6e6) 22%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--stagione-accento, #cfd6e6) 40%, transparent);
}
.hub-stagione[role="button"]:focus-visible { outline: 2px solid var(--stagione-accento, #cfd6e6); outline-offset: 2px; }
.hub-stagione.is-evento {
    box-shadow: 0 0 10px color-mix(in srgb, var(--stagione-accento, #fff) 45%, transparent);
    animation: stag-pulse 2.4s ease-in-out infinite;
}
@keyframes stag-pulse { 0%,100% { opacity: .85; } 50% { opacity: 1; } }

/* Banner di saluto stagionale (overlay leggero, una volta per tema).
   Fade-in via ANIMAZIONE (parte da sola alla creazione: nessuna dipendenza
   dal timing del toggle di classe). Uscita = animazione inversa. */
.stag-banner {
    position: fixed; inset: 0; z-index: 95;
    display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
    background: var(--velo, rgba(2,0,8,.975));
}
.stag-banner.uscita { opacity: 0; transition: opacity .2s ease; }
.stag-card {
    width: 100%; max-width: 360px; text-align: center;
    padding: 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: var(--surface, #0d0a1a);
    border: 1px solid var(--stagione-accento, var(--accent, #7038f8));
    box-shadow: 0 0 26px color-mix(in srgb, var(--stagione-accento, #7038f8) 40%, transparent);
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.stag-ico { font-size: 2.6rem; filter: drop-shadow(0 0 10px var(--stagione-accento, #fff)); }
.stag-nome {
    font-size: 1.05rem; letter-spacing: 2px; text-transform: uppercase; font-weight: bold;
    color: var(--stagione-accento, var(--testo, #fff)); text-shadow: 0 0 10px color-mix(in srgb, var(--stagione-accento, #fff) 50%, transparent);
}
.stag-testo { font-size: 0.9rem; color: rgba(224,208,255,.9); line-height: 1.5; margin: 0; }
.stag-periodo {
    font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; margin: -2px 0 2px;
    color: var(--stagione-accento, #cfd6e6);
}
.stag-nota { font-size: 0.74rem; color: rgba(224,208,255,.6); line-height: 1.45; margin: 2px 0 0; }
.stag-ok {
    margin-top: 6px; font-family: inherit; font-size: 0.82rem; letter-spacing: 1px; cursor: pointer;
    color: var(--stagione-accento, var(--testo, #fff)); padding: 9px 20px;
    background: color-mix(in srgb, var(--stagione-accento, #7038f8) 16%, transparent);
    border: 1px solid var(--stagione-accento, var(--accent, #7038f8));
}
.stag-ok:hover { background: color-mix(in srgb, var(--stagione-accento, #7038f8) 34%, transparent); }