/* ============================================================
   GesTask — Animazioni
   Fotogrammi chiave e transizioni riusate dai fogli applicativi.
   ============================================================ */

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* La transizione fra tema chiaro e scuro. È applicata dallo script di
   commutazione per la sola durata del cambio e poi tolta: lasciata sempre
   attiva, farebbe sfumare anche gli stati al passaggio del mouse. */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        fill .25s ease,
        stroke .25s ease,
        box-shadow .25s ease !important;
}

/* Il riempimento è `backwards` e non `both` di proposito: con `both` la
   trasformazione del fotogramma finale resta applicata a animazione
   conclusa, e un elemento con `transform` diventa blocco contenitore dei
   discendenti `position: fixed` — le finestre finirebbero dentro
   `.app-main`, sotto la maschera e non cliccabili. Con `backwards` il
   riempimento vale solo prima dell'avvio: stesso risultato visivo, e
   tornano a funzionare anche le trasformazioni al passaggio del mouse. */
.page-transition {
    animation: fadeSlideIn .3s ease-out backwards;
}

/* L'alone che pulsa attorno a una task in evidenza. Il colore arriva da
   `--task-prio` e non è fissato qui: su una task urgente un alone indaco
   contraddirebbe il rosso della sua priorità. */
@keyframes pulsePriority {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--task-prio) 40%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--task-prio) 0%, transparent); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--p-primary-color) 35%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--p-primary-color) 0%, transparent); }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

@media (prefers-reduced-motion: reduce) {
    .page-transition { animation: none; }
}