/* Animazioni leggere: cambio stato, caricamento, apertura pannelli e pagine.
   Tutte si disattivano con "riduci movimento" del sistema. */

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Caricamento: barre che brillano al posto del testo "Verifica radar…" */
.place-radar-status[data-state=loading] .skel{display:block;height:11px;border-radius:6px;margin:0 0 12px;background:linear-gradient(90deg,#e4eaf3 25%,#f6f8fc 50%,#e4eaf3 75%);background-size:200% 100%;animation:motion-shimmer 1.4s ease-in-out infinite}
.place-radar-status[data-state=loading] .skel-title{width:55%;height:14px;margin-bottom:16px}
.place-radar-status[data-state=loading] .skel-short{width:70%}
@keyframes motion-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* Stato luogo: transizione di colore e lieve impulso quando il risultato arriva o cambia */
.place-radar-status{transition:background-color .4s ease,border-color .4s ease,color .4s ease}
.place-radar-status.state-reveal>*{animation:motion-fade-up .3s ease-out both}
.place-radar-status.state-changed{animation:motion-pulse .9s ease-out 1}
@keyframes motion-pulse{0%{box-shadow:0 0 0 0 #1375d255;transform:scale(1)}35%{transform:scale(1.025)}100%{box-shadow:0 0 0 14px #1375d200;transform:scale(1)}}
.place-radar-status[data-state=hail].state-changed,.place-radar-status[data-state=arrival].state-changed{animation-name:motion-pulse-alert}
@keyframes motion-pulse-alert{0%{box-shadow:0 0 0 0 #d9482e66;transform:scale(1)}35%{transform:scale(1.03)}100%{box-shadow:0 0 0 16px #d9482e00;transform:scale(1)}}

/* Pannelli (finestre) e pagine: comparsa morbida da 200-300 ms */
dialog[open]{animation:motion-pop .25s ease-out}
dialog[open]::backdrop{animation:motion-backdrop .25s ease-out}
@keyframes motion-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes motion-backdrop{from{opacity:0}to{opacity:1}}
#app.page-enter{animation:motion-fade-up .28s ease-out}
details[open]>:not(summary){animation:motion-fade-up .22s ease-out}
@keyframes motion-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .place-radar-status[data-state=loading] .skel{animation:none}
  .place-radar-status.state-reveal>*,.place-radar-status.state-changed,dialog[open],dialog[open]::backdrop,#app.page-enter,details[open]>:not(summary){animation:none}
}