/* FORMA: movimento e motion graphics (js/motion.js). Solo movimento, opacità e luce che passa:
   colori e impaginazione restano in app.css, visual.css e atleta.css (il grafico). Con "Riduci movimento" non si attiva nulla.
   Curve: --m-out per gli ingressi, --m-spring per le risposte al tocco. */
:root { --m-out: cubic-bezier(.2, .8, .2, 1); --m-spring: cubic-bezier(.2, 1.35, .4, 1); --m-fast: .16s; --m-mid: .34s; }

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Cambio pagina: segue la barra in basso (destra o sinistra), più in profondità entra da destra ---------- */
  /* Solo opacità: spostare pagine piene di pannelli sfocati fa ricalcolare la sfocatura a ogni fotogramma (lag su iPhone). */
  #main.motion-page, #main.motion-push, #main.motion-pop { animation: motion-in .18s ease-out both; }
  @keyframes motion-in { from { opacity: 0; } }
  /* L'ingresso del grafico (main > * "rise") ripartiva a ogni tocco, perché la pagina si ridisegna: sfarfallio. Gli ingressi li gestisce motion.js. */
  main > * { animation: none; }

  /* ---------- Ingressi a cascata ---------- */
  .motion-stagger { animation: motion-rise .3s ease-out both; animation-delay: calc(var(--k, 0) * 30ms); }
  @keyframes motion-rise { from { opacity: 0; } to { opacity: 1; } }

  .motion-enter, .motion-from-left, .rest-screen.motion-enter { animation: motion-fadein .2s ease-out both; }
  @keyframes motion-fadein { from { opacity: 0; } to { opacity: 1; } }

  /* ---------- Tocco: tutto risponde subito, con un piccolo rimbalzo al rilascio ---------- */
  .btn, .icon-btn, .row, .ex-pill, .chip, .day-chip, .check, .focus-pick button, .tabbar a, .step {
    transition: transform .26s var(--m-spring), background-color .15s, border-color .15s, box-shadow .15s, color .15s;
  }
  .btn:active, .icon-btn:active, .row:active, .ex-pill:active, .chip:active, .day-chip:active, .check:active, .focus-pick button:active, .step:active {
    transform: scale(.955); transition-duration: .07s;
  }
  [data-act="g-done"]:active, [data-act="set-done"]:active { transform: scale(.93); }

  /* Barra in basso: l'icona della sezione scelta fa un salto */
  .tabbar a.on svg { animation: motion-tab .5s var(--m-spring); }
  @keyframes motion-tab { 0% { transform: scale(.7) translateY(4px); } 60% { transform: scale(1.15) translateY(-2px); } 100% { transform: none; } }

  /* Onda di luce dal punto toccato */
  .motion-ripple {
    position: fixed; z-index: 60; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent, #d7ff72) 55%, transparent) 0%, transparent 70%);
    animation: motion-ripple .7s var(--m-out) forwards;
  }
  @keyframes motion-ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(calc(14 * var(--s, 1))); } }

  /* + e −: il numero scorre su o giù */
  .motion-roll-up { animation: motion-roll-up .22s var(--m-out); }
  .motion-roll-down { animation: motion-roll-down .22s var(--m-out); }
  @keyframes motion-roll-up { from { opacity: .2; transform: translateY(10px); } }
  @keyframes motion-roll-down { from { opacity: .2; transform: translateY(-10px); } }

  /* ---------- Recupero ---------- */
  [data-live="rest"].motion-pulse { animation: motion-pulse .6s var(--m-out); display: inline-block; }
  @keyframes motion-pulse { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }

  /* ---------- Record e traguardi ---------- */
  .record-flash { animation: motion-stamp .5s var(--m-spring) both; }
  @keyframes motion-stamp { 0% { opacity: 0; transform: scale(1.18); } 60% { opacity: 1; } 100% { transform: none; } }

  /* Fine allenamento: pioggia di coriandoli */
  .motion-rain { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
  .motion-drop {
    position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; background: var(--done, #3ddc84); opacity: 0;
    animation: motion-drop var(--t, 1.8s) cubic-bezier(.25, .6, .4, 1) var(--d, 0ms) forwards;
  }
  .motion-drop:nth-child(3n) { background: #fff; }
  .motion-drop:nth-child(5n) { border-radius: 50%; width: 9px; height: 9px; }
  @keyframes motion-drop { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), 105vh) rotate(var(--rot)); } }

  /* ---------- Grafici: le barre crescono dal basso, la linea si disegna ---------- */
  .motion-grow { transform-box: fill-box; transform-origin: bottom; animation: motion-grow .6s var(--m-out) both; animation-delay: calc(var(--k, 0) * 45ms); }
  @keyframes motion-grow { from { transform: scaleY(0); } }
  .motion-fade-late { animation: motion-fade .5s ease-out .8s both; }
  @keyframes motion-fade { from { opacity: 0; } }

  /* Anelli chiusi: un lampo quando si completano */
  .rings li.closed .ring { animation: motion-closed .6s var(--m-spring) 1s both; }
  @keyframes motion-closed { 50% { transform: scale(1.08); } 100% { transform: none; } }

  /* ---------- 2.4 "Atleta notturno": movimenti brevi e secchi, uno per ogni stato ---------- */
  /* Missione del giorno (Home): il nome della seduta sale e si posa, poi arriva il pulsante. */
  .motion-mission .hero-title { animation: motion-mission .42s var(--m-out) both; }
  .motion-mission .btn.primary { animation: motion-fadein .3s ease-out .16s both; }
  @keyframes motion-mission { from { opacity: 0; transform: translateY(14px); } }
  /* Esercizio nuovo nella seduta: entra dal lato verso cui si va. */
  .guided-ex.motion-enter { animation: motion-slide-next .24s var(--m-out) both; }
  .guided-ex.motion-from-left { animation: motion-slide-prev .24s var(--m-out) both; }
  @keyframes motion-slide-next { from { opacity: 0; transform: translateX(18px); } }
  @keyframes motion-slide-prev { from { opacity: 0; transform: translateX(-18px); } }
  /* Serie fatta: il trattino della serie si riempie, la serie dopo sale al suo posto. */
  .motion-fill { transform-origin: left center; animation: motion-fill .32s var(--m-out) both; }
  @keyframes motion-fill { from { transform: scaleX(0); } }
  .g-set.motion-next { animation: motion-next .26s var(--m-out) both; }
  @keyframes motion-next { from { opacity: 0; transform: translateY(10px); } }
  /* Recupero: la barra del tempo scorre continua invece che a scatti. */
  [data-live="rest-fill"] { transition: width 1s linear; }

  /* ---------- Messaggio in basso: entra con una molla ---------- */
  #toast { transition: opacity .2s, transform .45s var(--m-spring); }

  /* ---------- Benvenuto: il marchio si accende, i punti salgono uno alla volta ---------- */
  .welcome > .brand { animation: motion-brand .9s var(--m-out) both; }
  .welcome > h1 { animation: motion-title .8s var(--m-out) .12s both; }
  @keyframes motion-brand { from { opacity: 0; transform: translateY(-8px); } }
  @keyframes motion-title { from { opacity: 0; transform: translateY(18px); } }

}

/* Gesti della seduta guidata: lo scorrimento verticale resta al browser, quello orizzontale è dell'app. */
.guided-ex, .rest-screen { touch-action: pan-y; }
.guided-ex img, .rest-screen img { -webkit-user-drag: none; user-select: none; }

/* 4.0: l'AI costruisce la scheda alla fine del questionario. */
.ai-building { display: grid; justify-items: center; gap: 12px; padding: 32px 0 12px; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .ai-pulse { display: inline-flex; animation: ai-pulse 1.4s ease-in-out infinite; }
  @keyframes ai-pulse { 0%, 100% { opacity: .45; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
}

/* 4.2: la scintilla dell'AI brilla piano. */
@media (prefers-reduced-motion: no-preference) {
  .ai-chip .ic, .ai-ask-ic .ic { animation: ai-twinkle 2.6s ease-in-out infinite; }
  @keyframes ai-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.18) rotate(12deg); opacity: .8; } }
}

/* 4.2: apertura dell'app (js/motion.js, intro). Stesso logo e stesso punto della schermata di avvio di iPhone. */
#intro { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #33284a, #1b1e27 62%); transition: opacity .42s ease, visibility .42s; }
#intro .intro-tile { position: relative; width: min(41vw, 19vh); aspect-ratio: 1; border-radius: 22.5%; overflow: hidden; box-shadow: 0 24px 60px rgba(194, 91, 208, .35);
  animation: intro-pop .7s cubic-bezier(.2, 1.35, .4, 1) both; }
#intro .intro-spark { transform-origin: 752px 346px; animation: intro-spark .8s .12s cubic-bezier(.2, 1.4, .4, 1) both; }
#intro .intro-f1, #intro .intro-f2 { stroke-dasharray: 900; animation: intro-draw .55s .05s ease-out both; }
#intro .intro-f2 { stroke-dasharray: 220; animation: intro-draw2 .4s .25s ease-out both; }
#intro .intro-sheen { position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%); transform: translateX(-120%); animation: intro-sheen .7s .3s ease-in-out both; }
#intro.out { opacity: 0; visibility: hidden; }
#intro.out .intro-tile { transform: scale(1.5); opacity: 0; transition: transform .45s cubic-bezier(.5, 0, .7, .4), opacity .4s ease; animation: none; }
@keyframes intro-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes intro-spark { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 70% { transform: scale(1.25) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes intro-draw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@keyframes intro-draw2 { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@keyframes intro-sheen { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { #intro { display: none; } }
@media (prefers-reduced-motion: no-preference) { .bc-frame i { animation: bc-line 1.6s ease-in-out infinite alternate; } @keyframes bc-line { from { transform: translateY(-9vh); } to { transform: translateY(9vh); } } }