/* Decorazioni dei periodi di festa (decorazioni.py + feste.js). Tutto dietro i contenuti e senza clic. */
.festa-layer { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx { position: absolute; top: -40px; display: block; line-height: 1; will-change: transform, opacity;
  animation: var(--dur) linear var(--delay) infinite; user-select: none; }

/* cade dall'alto, ondeggiando */
.fx-cade { animation-name: fx-cade; opacity: .55; }
@keyframes fx-cade {
  0%   { transform: translate3d(0, -5vh, 0) rotate(0); }
  50%  { transform: translate3d(calc(var(--drift) * .5), 52vh, 0) rotate(calc(var(--spin) * .5)); }
  100% { transform: translate3d(var(--drift), 110vh, 0) rotate(var(--spin)); }
}
/* sale dal basso (cuori, palloncini) */
.fx-sale { top: auto; bottom: -50px; animation-name: fx-sale; opacity: .6; }
@keyframes fx-sale {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(var(--drift), -55vh, 0); }
  100% { transform: translate3d(calc(var(--drift) * -.4), -115vh, 0); }
}
/* attraversa lo schermo svolazzando (pipistrelli) */
.fx-fluttua { left: -60px !important; top: calc(10% + var(--drift) * .5 + 30px); animation-name: fx-fluttua; opacity: .5; }
@keyframes fx-fluttua {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  25%  { transform: translate3d(28vw, -30px, 0) scale(.9); }
  50%  { transform: translate3d(55vw, 20px, 0) scale(1.05); }
  75%  { transform: translate3d(80vw, -20px, 0) scale(.95); }
  100% { transform: translate3d(110vw, 10px, 0) scale(1); }
}
/* coriandoli */
.fx-coriandoli { border-radius: 2px; opacity: .7; animation-name: fx-coriandoli; }
@keyframes fx-coriandoli {
  0%   { transform: translate3d(0, -5vh, 0) rotate(0) rotateX(0); }
  100% { transform: translate3d(var(--drift), 110vh, 0) rotate(var(--spin)) rotateX(720deg); }
}
/* fuochi d'artificio: scintille che si aprono e si spengono */
.fx-botti { top: 20%; width: 0; height: 0; animation: none; }
.fx-botti i { position: absolute; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%;
  background: var(--hue); box-shadow: 0 0 6px var(--hue); opacity: 0;
  animation: fx-botto var(--dur) ease-out var(--delay) infinite; }
@keyframes fx-botto {
  0%, 62%  { transform: rotate(var(--a)) translateX(0); opacity: 0; }
  66%      { opacity: 1; }
  92%      { transform: rotate(var(--a)) translateX(70px); opacity: .9; }
  100%     { transform: rotate(var(--a)) translateX(84px); opacity: 0; }
}

/* colori dei simboli disegnati come testo */
.neve { color: #f2ead6; text-shadow: 0 0 6px rgba(242, 234, 214, .5); }
.oro { color: var(--gold); opacity: .6; }
.cuori { color: #e0707a; }
.tenue { opacity: .4; }
.palloncini { opacity: .75; }

/* augurio sotto l'intestazione */
.festa-banner { text-align: center; font-size: .9rem; font-weight: 700; color: var(--gold);
  padding: 6px 16px; background: rgba(214, 173, 82, .08); border-bottom: 1px solid rgba(214, 173, 82, .18); }
.festa-banner { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.festa-banner .festa-emoji { margin-right: 6px; }
.countdown strong { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .festa-layer { display: none; } }