/* Decorazioni di stagione (vedi assets/js/festivita.js): neve a Natale, petali a Pasqua. Solo transform e opacity. */

.festa-fx { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }

.festa-fx i {
  position: absolute;
  top: -16px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  opacity: var(--o);
  animation: festa-cade var(--d) linear var(--r) infinite;
  will-change: transform;
}

.festa-fx--natale i { border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(150, 195, 255, .85); }

.festa-fx--pasqua i { height: calc(var(--s) * 1.35); border-radius: 80% 0 80% 0; background: #ffbcd3; box-shadow: 0 0 0 1px rgba(255, 150, 185, .5); animation-name: festa-cade, festa-gira; animation-duration: var(--d), 5s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-delay: var(--r), var(--r); }

.festa-fx--pasqua i:nth-child(3n) { background: #fff0a8; box-shadow: 0 0 0 1px rgba(230, 200, 80, .5); }
.festa-fx--pasqua i:nth-child(3n + 1) { background: #cfeec6; box-shadow: 0 0 0 1px rgba(120, 190, 110, .5); }

@keyframes festa-cade {
  0% { transform: translate3d(0, -4vh, 0); }
  50% { transform: translate3d(var(--dx), 52vh, 0); }
  100% { transform: translate3d(0, 108vh, 0); }
}

@keyframes festa-gira {
  0%, 100% { rotate: -25deg; }
  50% { rotate: 35deg; }
}

.festa-pausa .festa-fx i { animation-play-state: paused; }

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