/* ============================================================
   AiMusica — animatii in generator (General si Exemple)
   ------------------------------------------------------------
   Aceeasi familie de miscari ca prima pagina si playerul din ghid:
   opacitate + o deplasare scurta, curba care porneste repede si se
   opreste lin. generator-motion.js alege efectul dupa cum arata
   fiecare element si il scoate imediat ce animatia se termina.

   bar         bara cu pasi coboara usor
   pop         cercurile pasilor, imaginea laterala: cresc cu un mic arc
   draw        linia dintre pasi se deseneaza de la stanga
   panel/rise  panourile urca pe rand
   zoom        cardurile cu poza se aseaza din mai mic
   circle      stilurile rotunde din Exemple (desktop) cresc cu arc
   chip/tile   butoanele mici apar repede, unul dupa altul
   row         randurile listei vin din stanga
   row-right   randurile din coloana laterala vin din dreapta
   aside       coloana laterala (desktop) vine din dreapta
   footer-up   bara de jos de pe telefon urca de sub ecran
   step-next   pasul urmator vine din dreapta
   step-back   pasul anterior vine din stanga
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  :root {
    --gm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --gm-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
    --gm-rise: 14px;
    --gm-shift: 22px;
    --gm-panel-dur: 560ms;
  }

  html.gm-ready [data-gm] {
    animation-delay: var(--gm-delay, 0ms) !important;
    animation-fill-mode: backwards !important;
    animation-iteration-count: 1 !important;
  }

  html.gm-ready [data-gm="bar"] { animation: gm-bar 480ms var(--gm-ease) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="pop"] { animation: gm-pop 560ms var(--gm-pop) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="draw"] { animation: gm-draw 520ms var(--gm-ease) var(--gm-delay, 0ms) backwards !important; transform-origin: left center; }
  html.gm-ready [data-gm="panel"],
  html.gm-ready [data-gm="rise"] { animation: gm-rise var(--gm-panel-dur) var(--gm-ease) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="zoom"] { animation: gm-zoom 520ms var(--gm-ease) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="circle"] { animation: gm-circle 620ms var(--gm-pop) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="tile"] { animation: gm-tile 460ms var(--gm-ease) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="chip"] { animation: gm-chip 380ms var(--gm-ease) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="row"] { animation: gm-row 460ms var(--gm-ease) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="row-right"] { animation: gm-row-right 520ms var(--gm-ease) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="aside"] { animation: gm-aside 640ms var(--gm-ease) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="footer-up"] { animation: gm-footer-up 520ms var(--gm-ease) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="step-next"] { animation: gm-step-next 480ms var(--gm-ease) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="step-back"] { animation: gm-step-back 480ms var(--gm-ease) var(--gm-delay, 0ms) backwards !important; }
  html.gm-ready [data-gm="fade"] { animation: gm-fade 420ms var(--gm-ease) var(--gm-delay, 0ms) backwards !important; }

  @keyframes gm-bar {
    from { opacity: 0; transform: translate3d(0, -10px, 0); }
  }

  @keyframes gm-pop {
    from { opacity: 0; transform: scale(0.6); }
  }

  @keyframes gm-draw {
    from { transform: scaleX(0); }
  }

  @keyframes gm-rise {
    from { opacity: 0; transform: translate3d(0, var(--gm-rise), 0); }
  }

  @keyframes gm-zoom {
    from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.9); }
  }

  @keyframes gm-circle {
    from { opacity: 0; transform: scale(0.55) rotate(-8deg); }
  }

  @keyframes gm-tile {
    from { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.95); }
  }

  @keyframes gm-chip {
    from { opacity: 0; transform: scale(0.9); }
  }

  @keyframes gm-row {
    from { opacity: 0; transform: translate3d(-14px, 0, 0); }
  }

  @keyframes gm-row-right {
    from { opacity: 0; transform: translate3d(14px, 0, 0); }
  }

  @keyframes gm-aside {
    from { opacity: 0; transform: translate3d(var(--gm-shift), 0, 0); }
  }

  @keyframes gm-footer-up {
    from { transform: translate3d(0, 110%, 0); }
  }

  @keyframes gm-step-next {
    from { opacity: 0; transform: translate3d(var(--gm-shift), 0, 0); }
  }

  @keyframes gm-step-back {
    from { opacity: 0; transform: translate3d(calc(var(--gm-shift) * -1), 0, 0); }
  }

  @keyframes gm-fade {
    from { opacity: 0; }
  }
}

/* Fereastra „Cum vrei sa incepi?” de dupa „Incepe acum”:
   fundalul se estompeaza, fereastra se apropie usor, apoi cele trei
   alegeri urca una dupa alta. Folosim `scale`/`translate` separate, ca sa
   nu atingem `transform`, cu care fereastra e centrata pe ecran. */
@media (prefers-reduced-motion: no-preference) {
  .generator-mode-dialog[open] {
    animation: gm-dialog 420ms var(--gm-ease) backwards;
  }

  .generator-mode-dialog[open]::backdrop {
    animation: gm-fade 320ms ease-out backwards;
  }

  .generator-mode-dialog[open] .generator-mode-choices > a {
    animation: gm-choice 560ms var(--gm-ease) backwards;
  }

  .generator-mode-dialog[open] .generator-mode-choices > a:nth-child(1) { animation-delay: 140ms; }
  .generator-mode-dialog[open] .generator-mode-choices > a:nth-child(2) { animation-delay: 220ms; }
  .generator-mode-dialog[open] .generator-mode-choices > a:nth-child(3) { animation-delay: 300ms; }

  .generator-mode-dialog[open] .generator-choice-icon,
  .generator-mode-dialog[open] .generator-example-art {
    animation: gm-choice-art 620ms var(--gm-pop) 320ms backwards;
  }

  .generator-mode-dialog[open] .generator-mode-footnote {
    animation: gm-fade 420ms ease-out 380ms backwards;
  }

  @keyframes gm-dialog {
    from { opacity: 0; scale: 0.96; translate: 0 10px; }
  }

  @keyframes gm-choice {
    from { opacity: 0; translate: 0 12px; }
  }

  @keyframes gm-choice-art {
    from { opacity: 0; scale: 0.7; }
  }
}

/* Desktop: aceeasi logica, miscari putin mai ample. */
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  :root {
    --gm-rise: 20px;
    --gm-shift: 32px;
    --gm-panel-dur: 620ms;
  }
}