/* ======================================================================
   MOTION: keyframe e preferenze di movimento
   Generato dalla migrazione Fase 0; modificare nel file della responsabilita.
   ====================================================================== */

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes appEnter { from { opacity: 0; transform: translateY(9px) } to { opacity: 1; transform: none } }
@keyframes sweep{to{transform:translateX(120px)}}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes eventIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes playerGoal{0%{opacity:0;transform:scale(.92)}60%{transform:scale(1.035)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@keyframes runIn { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
@keyframes rowUp { from { transform: translateY(14px); background: color-mix(in srgb, var(--state-positive-strong) 35%, transparent) } to { transform: none } }
@keyframes rowDown { from { transform: translateY(-14px); background: color-mix(in srgb, var(--state-negative-strong) 30%, transparent) } to { transform: none } }
@keyframes growPop { from { opacity: 0; transform: translateY(10px) scale(.9) } to { opacity: 1; transform: none } }
@keyframes celRays { to { transform: translate(-50%, -50%) rotate(360deg) } }
@keyframes celRaysIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes celBloom { 0% { transform: scale(.3); opacity: 0 } 30% { opacity: 1 } 100% { transform: scale(1.15); opacity: .55 } }
@keyframes celRise { from { opacity: 0; transform: translateY(26px) scale(.8) } to { opacity: 1; transform: none } }
@keyframes celSlam { from { opacity: 0; transform: scale(1.35) } to { opacity: 1; transform: none } }
@keyframes celFade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes celFall {
  0% { opacity: 0; transform: translateY(0) rotate(var(--confetti-rotation)) }
  12% { opacity: 1 }
  100% { opacity: 0; transform: translateY(108vh) rotate(calc(var(--confetti-rotation) + 520deg)) }
}

/* chi preferisce meno movimento vede solo la comparsa */
@media (prefers-reduced-motion: reduce) {
  .cel-rays, .cel-confetti { display: none; }
  .cel-icon, .cel-title, .cel-kicker, .cel-detail, .cel-bloom { animation-duration: .01s; }
}
@keyframes burstWord { 0% { opacity: 0; transform: scale(2.1) } 60% { opacity: 1 } 100% { opacity: 1; transform: scale(1) } }
@keyframes burstWho { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes burstFade { 0%,72% { opacity: 1 } 100% { opacity: 0 } }
@keyframes shakeIt {
  10%, 90% { transform: translate3d(-2px, 0, 0) }
  20%, 80% { transform: translate3d(4px, 0, 0) }
  30%, 50%, 70% { transform: translate3d(-7px, 0, 0) }
  40%, 60% { transform: translate3d(7px, 0, 0) }
}
@keyframes scorePop { 0% { transform: scale(1) } 35% { transform: scale(1.42); color: var(--accent-brand) } 100% { transform: scale(1) } }

/* Solo per la regressione visuale: il gioco normale non riceve mai questa classe. */
.visual-static *, .visual-static *::before, .visual-static *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@keyframes countPulse { 0% { transform: scale(1) } 40% { transform: scale(1.18) } 100% { transform: scale(1) } }

@media (prefers-reduced-motion: reduce) {
  .goal-burst, .gb-word, .gb-who, .score-pop, .count-pulse { animation-duration: .01s; }
  .match-transition.shake .transition-content { animation: none; }
}
@keyframes outcomeMark { 0% { opacity: 0; transform: scale(.35) } 100% { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .outcome-mark { animation-duration: .01s } }
@media (prefers-reduced-motion: reduce) { }
@keyframes shakeSoft {
  20%, 80% { transform: translate3d(2px, 0, 0) }
  40%, 60% { transform: translate3d(-3px, 0, 0) }
}
@media (prefers-reduced-motion: reduce) {
  .burst-assist, .burst-parata, .burst-intervento { animation-duration: .01s }
  .match-transition.shake-soft .transition-content { animation: none }
}
@keyframes chanceGrow { from { transform: scaleX(0); transform-origin: left } to { transform: none } }
@media (prefers-reduced-motion: reduce) { .chance i { animation: none } }
@media (prefers-reduced-motion: reduce) { .in-match-choice, .imc-card { transition: none } }
@media (prefers-reduced-motion: reduce) { .wizard-footer { transition: none } }
@media (prefers-reduced-motion: reduce) { .comp-intro, .ci-body { transition: none } }

/* ---------- Riepilogo: l'ingresso delle slide non passa più da opacità 0 ----------
   Se il browser congela un'animazione al primo fotogramma (schede in background,
   automazioni), una slide che parte trasparente resta invisibile: il contenuto
   "sparisce". Ora l'ingresso muove soltanto, il testo è sempre visibile. */
@keyframes revealMove { from { transform: translateY(-4px) } to { transform: none } }

/* Fine stagione: il capitolo entra salendo di dieci pixel, niente di piu.
   Non si tocca l opacita: se il movimento e sospeso la pagina deve essere
   comunque visibile, e un ingresso in dissolvenza lascerebbe testo a zero. */
@media (prefers-reduced-motion: no-preference) {
  .fs-pagina.fs-entra { animation: fs-arriva .32s ease-out; }
  @keyframes fs-arriva { from { transform: translateY(10px); } to { transform: translateY(0); } }
}