/* ============================================================
   AiMuzica — animatii pentru prima pagina
   ------------------------------------------------------------
   Aceeasi logica de miscare ca playerul din ghid: opacitate +
   o deplasare scurta, cu o curba care porneste repede si se
   opreste lin. Nimic nu sare, nimic nu se repeta la nesfarsit.

   Efecte (puse de landing-motion.js dupa ce reprezinta blocul):
   fade        doar apare                    supratitluri, filtre desktop
   rise        urca de jos                   titluri, texte, liste, carduri pe telefon
   scale       se aseaza din mai mic          piese pe desktop, imaginea telefonului
   pop         creste cu un mic arc           imaginile pasilor pe telefon
   from-left   vine din stanga                cardurile din coloana stanga, telefonul pe desktop
   from-right  vine din dreapta               coloana dreapta, textul pasilor pe telefon

   Telefon: miscari scurte (18px), 650ms. Desktop: mai ample (28–44px), 750ms.
   Cu „reducerea miscarii” pornita nu se aplica nimic din acest fisier.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  :root {
    --lm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --lm-ease-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
    --lm-dur: 650ms;
    --lm-rise: 18px;
    --lm-shift: 22px;
    --lm-scale: 0.94;
  }

  /* ---------- Blocurile care apar la derulare ---------- */

  html.lm-ready [data-lm] {
    transition:
      opacity var(--lm-dur) var(--lm-ease) var(--lm-delay, 0ms),
      transform var(--lm-dur) var(--lm-ease) var(--lm-delay, 0ms) !important;
    will-change: opacity, transform;
  }

  html.lm-ready [data-lm="pop"] {
    transition:
      opacity var(--lm-dur) var(--lm-ease) var(--lm-delay, 0ms),
      transform var(--lm-dur) var(--lm-ease-pop) var(--lm-delay, 0ms) !important;
  }

  html.lm-ready [data-lm]:not(.lm-in) {
    opacity: 0 !important;
  }

  html.lm-ready [data-lm="rise"]:not(.lm-in) {
    transform: translate3d(0, var(--lm-rise), 0) !important;
  }

  html.lm-ready [data-lm="scale"]:not(.lm-in) {
    transform: scale(var(--lm-scale)) !important;
  }

  html.lm-ready [data-lm="pop"]:not(.lm-in) {
    transform: scale(0.86) !important;
  }

  html.lm-ready [data-lm="from-left"]:not(.lm-in) {
    transform: translate3d(calc(var(--lm-shift) * -1), 0, 0) !important;
  }

  html.lm-ready [data-lm="from-right"]:not(.lm-in) {
    transform: translate3d(var(--lm-shift), 0, 0) !important;
  }

  /* Imaginea din card apare imediat dupa card, cu un mic arc. */
  html.lm-ready .use-tile[data-lm] .use-art,
  html.lm-ready .how-art[data-lm] .how-number,
  html.lm-ready .how-step[data-lm] .how-number {
    transition:
      opacity 500ms var(--lm-ease) calc(var(--lm-delay, 0ms) + 160ms),
      transform 700ms var(--lm-ease-pop) calc(var(--lm-delay, 0ms) + 160ms) !important;
  }

  html.lm-ready .use-tile[data-lm]:not(.lm-in) .use-art {
    opacity: 0 !important;
    transform: scale(0.82) rotate(-4deg) !important;
  }

  html.lm-ready .how-art[data-lm]:not(.lm-in) .how-number,
  html.lm-ready .how-step[data-lm]:not(.lm-in) .how-number {
    opacity: 0 !important;
    transform: scale(0.6) !important;
  }

  /* Piesele noi dupa schimbarea filtrului din „Asculta si inspira-te”. */
  html.lm-ready .landing-listen-track.lm-swap {
    animation: lm-swap 420ms var(--lm-ease) var(--lm-delay, 0ms) backwards;
  }

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

  /* Raspunsul unei intrebari se deschide lin. */
  html.lm-ready .landing-faq-item[open] > p {
    animation: lm-answer 380ms var(--lm-ease) backwards;
  }

  @keyframes lm-answer {
    from {
      opacity: 0;
      transform: translate3d(0, -6px, 0);
    }
  }

  /* ---------- Prima ecranare: intrarea de la incarcare ----------
     Doar CSS, fara sa astepte scriptul. Titlul mare si imaginea mare
     raman pe loc (sunt primele lucruri pe care le vede Google la viteza),
     restul intra in ordinea in care se citeste. */

  body.intro-page #mobile-landing-screen .mobile-landing-intro-pill {
    animation: lm-hero-fade 700ms var(--lm-ease) 60ms backwards;
  }

  body.intro-page #mobile-landing-screen .mobile-landing-reference-art {
    animation: lm-hero-settle 1100ms var(--lm-ease) backwards;
  }

  body.intro-page #mobile-landing-screen .mobile-landing-mini-step {
    animation: lm-hero-pop 650ms var(--lm-ease-pop) backwards;
  }

  body.intro-page #mobile-landing-screen .mobile-landing-mini-step:nth-of-type(1) { animation-delay: 160ms; }
  body.intro-page #mobile-landing-screen .mobile-landing-mini-step:nth-of-type(2) { animation-delay: 260ms; }
  body.intro-page #mobile-landing-screen .mobile-landing-mini-step:nth-of-type(3) { animation-delay: 360ms; }

  body.intro-page #mobile-landing-screen .mobile-landing-mini-step-arrow {
    animation: lm-hero-fade 500ms var(--lm-ease) 320ms backwards;
  }

  body.intro-page #mobile-landing-screen #mobile-landing-start {
    animation: lm-hero-rise 700ms var(--lm-ease) 420ms backwards;
  }

  body.intro-page #mobile-landing-screen .mobile-landing-chip {
    animation: lm-hero-rise 600ms var(--lm-ease) backwards;
  }

  body.intro-page #mobile-landing-screen .mobile-landing-chip:nth-child(1) { animation-delay: 540ms; }
  body.intro-page #mobile-landing-screen .mobile-landing-chip:nth-child(2) { animation-delay: 600ms; }
  body.intro-page #mobile-landing-screen .mobile-landing-chip:nth-child(3) { animation-delay: 660ms; }
  body.intro-page #mobile-landing-screen .mobile-landing-chip:nth-child(4) { animation-delay: 720ms; }

  @keyframes lm-hero-fade {
    from {
      opacity: 0;
    }
  }

  @keyframes lm-hero-rise {
    from {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
    }
  }

  @keyframes lm-hero-pop {
    from {
      opacity: 0;
      transform: scale(0.8);
    }
  }

  /* Imaginea mare nu dispare niciodata: doar se aseaza putin. */
  @keyframes lm-hero-settle {
    from {
      transform: translate3d(0, 14px, 0) scale(0.985);
    }
  }
}

/* ---------- Telefon: ce vine din lateral nu largeste pagina ----------
   Cat timp un bloc „from-right” asteapta sa apara, e mutat 22px spre
   dreapta si iese din ecran cu 1–2px. Sectiunile il taie pe orizontala
   (clip nu creeaza zona de derulare, deci sticky si derularea raman). */

@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  html.lm-ready #mobile-landing-screen .landing-how-section,
  html.lm-ready #mobile-landing-screen .landing-library-section {
    overflow-x: clip;
  }
}

/* ---------- Desktop: miscari mai ample, aceeasi logica ---------- */

@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  :root {
    --lm-dur: 750ms;
    --lm-rise: 28px;
    --lm-shift: 44px;
    --lm-scale: 0.95;
  }

  /* Telefonul din „Melodiile tale” vine din stanga si se indreapta. */
  html.lm-ready .landing-library-phone-wrap[data-lm="from-left"]:not(.lm-in) {
    transform: translate3d(calc(var(--lm-shift) * -1), 12px, 0) rotate(-2deg) !important;
  }

  /* Chips-urile de sub prima ecranare apar de la stanga la dreapta, pe un rand. */
  body.intro-page #mobile-landing-screen .mobile-landing-chip {
    animation-name: lm-hero-slide;
  }

  @keyframes lm-hero-slide {
    from {
      opacity: 0;
      transform: translate3d(-12px, 0, 0);
    }
  }
}