/* ==========================================================================
   7/11 · Rifinitura «emil-design-eng» (regole di Emil Kowalski). Si carica dopo tutti gli altri file:
   togliendo la riga in index.html si torna a com'era (restano solo i ritocchi di main.js e moto.js, che non cambiano
   l'aspetto: servono a non far ricalcolare la pagina mentre si scorre).
   Con «riduci movimento» queste animazioni restano attive, come il resto del primo schermo (decisione di Nicolò, 6/11).
   ========================================================================== */

/* ---------- 1. Tasti «Prima» / «Dopo»: la pillola bianca scorre ----------
   .ba-sw-on è una copia dei due tasti (bianca, scritte nere) ritagliata con clip-path sul tasto scelto da main.js.
   Così anche il colore delle scritte cambia esattamente sul bordo della pillola, senza due stati che si sovrappongono.
   Senza JavaScript la copia non c'è e resta lo sfondo bianco sul tasto premuto (quadro.css). */
.ba-sw-on{display:none}
.ba-sw.thumb .ba-sw-on{position:absolute;inset:3px;z-index:1;display:flex;gap:2px;border-radius:999px;background:#FFFFFF;color:#0B0B0C;pointer-events:none;
  clip-path:inset(0 100% 0 0 round 999px);transition:clip-path .26s var(--ease-out)}
.ba-sw-on>span{display:flex;align-items:center;min-height:38px;padding:0 13px;font:700 .82rem/1 var(--font);white-space:nowrap}
.ba-sw.thumb .ba-sw-b[aria-pressed="true"]{background:transparent;color:#F5F5F7}
@media (max-width:345px){.ba-sw-on>span{padding:0 10px;font-size:.76rem}}
/* pressione: tutto il selettore si abbassa appena, dall'angolo in cui sta (in basso a sinistra) */
.ba-sw{transform-origin:0 100%;transition:opacity .4s ease,transform .16s var(--ease-out)}
.ba-sw:active{transform:scale(.97);transition-duration:.1s}

/* ---------- 2. Passaggio foto ↔ video: dissolvenza più rapida e una sfocatura leggera ----------
   Foto e video sono ripresi da due punti diversi: senza sfocatura si vedono due immagini sovrapposte.
   La classe ba-x resta 150 ms (main.js): la sfocatura sale e scende mentre l'opacità passa in 300 ms. */
.ba-vs .ba-vid{transition:opacity .3s var(--ease-out),filter .15s ease}
.ba-vs .before{transition:filter .15s ease}
.ba-vs.ba-x .ba-pic{filter:blur(4px)}

/* ---------- 3. La leva al passaggio del mouse: il colore cambia in 200 ms invece di 400 (lo si vede spesso) ---------- */
.q-panel .btn,.final .btn{transition:transform .18s var(--ease-out),background-color .2s ease}

/* ---------- 4. Ogni cosa che si tocca risponde alla pressione ---------- */
.alt{transition:border-color .2s ease,transform .16s var(--ease-out)}
.f-tel:active{transform:scale(.97);transition-duration:.1s}
footer nav a{transition:background-color .2s ease,transform .16s var(--ease-out)}
footer nav a:active{transform:scale(.97);transition-duration:.1s}

/* ---------- 5. Spunta verde nei campi: entra da 0,8 (non da 0,6), con la curva forte ---------- */
.inp::after{transform:scale(.8);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}

/* ---------- 6. Avviso breve: esce più in fretta di come entra ---------- */
.toast{transition:opacity .15s ease,transform .15s var(--ease-out)}
.toast.show{transition-duration:.25s}

/* ---------- 7. «Chi siamo»: i tre numeri salgono a 70 ms l'uno dall'altro (erano 140) ---------- */
.nums.odo-on>div{transition-delay:calc(var(--i,0) * 70ms)}

/* ---------- Movimento ridotto: le regole generali di main.css toglierebbero queste transizioni.
   Per il primo schermo si rimettono (decisione di Nicolò, 6/11); il resto segue la regola generale. ---------- */
@media (prefers-reduced-motion:reduce){
  .ba-sw.thumb .ba-sw-on{transition:clip-path .26s var(--ease-out)!important}
  .ba-sw{transition:opacity .4s ease,transform .16s var(--ease-out)!important}
  .ba-vs .ba-vid{transition:opacity .3s var(--ease-out),filter .15s ease!important}
  .ba-vs.intro .ba-vid{transition-duration:.12s!important}
  .ba-vs .before{transition:filter .15s ease!important}
}