/**
 * Il movimento del sito.
 *
 * COSA SI MUOVE, E PERCHE'
 * ------------------------
 * Niente si muove per fare scena. Ogni animazione qui dentro risponde a una
 * domanda che la persona si sta ponendo in quel momento:
 *
 *   «e' arrivato altro contenuto?»   -> le sezioni entrano salendo di 16 px
 *   «ho premuto o no?»               -> il pulsante si abbassa di 1 px
 *   «questa scheda e' cliccabile?»   -> la card si solleva all'avvicinarsi
 *   «il prezzo e' cambiato?»         -> il totale pulsa una volta sola
 *   «sta caricando o si e' rotto?»   -> il pulsante mostra di stare lavorando
 *
 * Una tenda su misura si compra dopo aver capito misure, tessuto e prezzo: il
 * movimento serve a non far perdere il filo, non a intrattenere. La scheda
 * `ui-ux-pro-max` mette l'animazione al settimo posto su dieci per impatto, e
 * segna «animazione solo decorativa» fra gli anti-pattern. Questo file prende
 * quella indicazione alla lettera.
 *
 * LE REGOLE CHE NON SI VIOLANO
 * ----------------------------
 * 1. Si animano **solo** `transform` e `opacity`. Sono le due proprieta' che
 *    il browser sa comporre senza ricalcolare il layout: tutto il resto —
 *    `width`, `height`, `top`, `margin` — costringe la pagina a rifare i conti
 *    a ogni fotogramma, e su un telefono si vede.
 * 2. Durate fra 150 e 300 ms. Sotto non si percepisce, sopra si aspetta.
 * 3. Niente si muove se la persona ha chiesto di non far muovere niente.
 * 4. **Se il JavaScript non arriva, tutto resta visibile.** E' la regola piu'
 *    importante: un effetto di comparsa scritto male nasconde la pagina a chi
 *    ha la rete lenta. Lo stato di partenza invisibile si applica solo dopo
 *    che `motion.js` ha marcato `<html>`, mai per impostazione predefinita.
 */

:root {
    /* Una curva sola per tutto, tranne dove serve un rimbalzo. Cambiare
       velocita' a meta' pagina fa sembrare il sito montato da due persone. */
    --st-ease: cubic-bezier(.22, .61, .36, 1);
    --st-dur-fast: 160ms;
    --st-dur: 220ms;
    --st-dur-slow: 300ms;
}

/* ------------------------------------------------------------------ comparsa
   Le sezioni entrano salendo di poco. Sedici pixel: abbastanza da accorgersene,
   troppo pochi perche' sembri un carosello. */
.st-reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--st-dur-slow) var(--st-ease),
                transform var(--st-dur-slow) var(--st-ease);
    will-change: opacity, transform;
}
.st-reveal-ready [data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;   /* si toglie appena finito: tenerlo costa memoria */
}

/* Gli elementi in fila entrano a scaletta. Il ritardo lo mette il JavaScript
   come variabile, cosi' non servono venti classi diverse. */
.st-reveal-ready [data-reveal][style*="--st-delay"] {
    transition-delay: var(--st-delay, 0ms);
}

/* --------------------------------------------------------------- superfici
   Le schede del catalogo si sollevano all'avvicinarsi del puntatore: dice
   «questa e' una cosa sola, e ci si puo' cliccare sopra». */
.st-card {
    transition: transform var(--st-dur) var(--st-ease),
                box-shadow var(--st-dur) var(--st-ease),
                border-color var(--st-dur) var(--st-ease);
}
.st-card:hover { transform: translateY(-3px); }
.st-card:active { transform: translateY(-1px); }

/* La fotografia dentro la scheda si allarga appena: il ritaglio resta fermo,
   si muove solo il contenuto. Va sull'immagine, non sulla scheda, se no si
   muoverebbe anche il testo. */
.st-card__media { overflow: hidden; }
.st-card__media img {
    transition: transform var(--st-dur-slow) var(--st-ease);
}
.st-card:hover .st-card__media img { transform: scale(1.04); }

/* ---------------------------------------------------------------- comandi
   Un pulsante che non reagisce al dito sembra rotto. Un pixel basta. */
.st-btn, .woocommerce a.button, .woocommerce button.button {
    transition: background var(--st-dur-fast) var(--st-ease),
                border-color var(--st-dur-fast) var(--st-ease),
                transform var(--st-dur-fast) var(--st-ease);
}
.st-btn:active, .woocommerce a.button:active, .woocommerce button.button:active {
    transform: translateY(1px);
}

/* Il fuoco da tastiera non si anima: deve comparire **subito**. Chi naviga con
   il tabulatore preme piu' volte di seguito, e un contorno che sfuma in
   ritardo fa perdere il segno di dove si e' arrivati. */
:focus-visible { transition: none !important; }

/* ------------------------------------------------------------------ prezzo
   Il totale del configuratore cambia mentre si sceglie. Senza un segnale, il
   numero nuovo si confonde con quello vecchio: chi guarda le opzioni non sta
   guardando il prezzo, e non si accorge che si e' mosso. Una pulsazione sola,
   niente colore — il colore direbbe «errore» o «sconto». */
@keyframes st-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.045); }
    100% { transform: scale(1); }
}
[data-summary-total].is-updated {
    animation: st-pulse var(--st-dur-slow) var(--st-ease);
    transform-origin: left center;
}

/* ------------------------------------------------------------------ attesa
   «Sta caricando o si e' rotto?» e' la domanda che fa abbandonare un carrello.
   La striscia scorre solo finche' si aspetta davvero. */
@keyframes st-progress {
    from { transform: translateX(-100%); }
    to   { transform: translateX(400%); }
}
.st-is-busy { position: relative; overflow: hidden; }
.st-is-busy::after {
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: 25%;
    background: linear-gradient(90deg, transparent,
                rgba(255, 255, 255, .35), transparent);
    animation: st-progress 1.1s linear infinite;
}

/* --------------------------------------------------- il menu del telefono
   Scende da sotto l'header invece di apparire di colpo: si capisce da dove
   viene, e quindi dove tornera' chiudendolo. */
@keyframes st-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
.st-mobilemenu__panel { animation: st-slide-down var(--st-dur) var(--st-ease); }

/* ==========================================================================
   Chi ha chiesto di non far muovere niente.
   ==========================================================================
   Non e' una preferenza estetica: per una parte delle persone il movimento su
   schermo provoca nausea o emicrania, e il sistema operativo lo dichiara. Qui
   si azzera tutto — comprese le animazioni che il tema padre o un plugin
   potrebbero aggiungere domani senza chiedere il permesso.

   Le durate diventano 0,01 ms e non 0: certi browser, con `0s`, non emettono
   l'evento di fine transizione, e il JavaScript che lo aspetta resta appeso. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .st-reveal-ready [data-reveal] { opacity: 1; transform: none; }
    .st-card:hover { transform: none; }
    .st-card:hover .st-card__media img { transform: none; }
    .st-is-busy::after { animation: none; opacity: .35; }
}