/* spirai.app motion demo (kanban ef6f71cd), live since 2026-10-26 (Geri OK). Everything sits behind prefers-reduced-motion: no-preference,
   so a reduced-motion visitor gets the page exactly as before. LCP guard: the h1, the .sub line and the phone image are never faded (on the longer-language pages, hu and others, the .sub line is the LCP element: fading it cost ~900 ms, measured 2026-10-26)
   (opacity stays 1), they only move, so the largest paint is not delayed. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sm-up   { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  @keyframes sm-rise { from { translate: 0 28px; } to { translate: 0 0; } }
  @keyframes sm-pop  { from { opacity: 0; scale: .82; } to { opacity: 1; scale: 1; } }
  @keyframes sm-phone { from { translate: 0 70px; scale: .93; } to { translate: 0 0; scale: 1; } }
  @keyframes sm-halo { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
  .hero .badge, .hero .musa-hero-widget, .hero .store-row, .hero .hero-trust {
    animation: sm-up .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero h1, .hero .sub { animation: sm-rise 1s cubic-bezier(.2, .7, .2, 1) both; }
  .hero .badge { animation-delay: .05s; } .hero h1 { animation-delay: .1s; } .hero .sub { animation-delay: .25s; }
  .hero .musa-hero-widget { animation-delay: .4s; } .hero .store-row { animation-delay: .55s; } .hero .hero-trust { animation-delay: .65s; }
  .hero .phone { animation: sm-phone 1.2s cubic-bezier(.2, .7, .2, 1) .15s both, float 5s ease-in-out 1.35s infinite; }
  .hero .halo { animation: sm-halo 1.6s cubic-bezier(.2, .7, .2, 1) .1s both; }
  /* the cards keep their own CSS float (transform); the pop uses opacity + scale, so the two compose */
  .hero .gcard.c1 { animation: sm-pop .7s cubic-bezier(.3, 1.4, .5, 1) .7s both, float 6s ease-in-out 1.4s infinite; }
  .hero .gcard.c2 { animation: sm-pop .7s cubic-bezier(.3, 1.4, .5, 1) .85s both, float 5.4s ease-in-out 1.55s infinite; }
  .hero .gcard.c3 { animation: sm-pop .7s cubic-bezier(.3, 1.4, .5, 1) 1s both, float 6.6s ease-in-out 1.7s infinite; }
  /* scroll layer (motion.js) */
  .sm-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
  .sm-word > i { display: inline-block; font-style: inherit; }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: hidden; }
}
/* reduced motion: the live site's own float / pulse loops kept running for these visitors (measured 10-25: 8 running
   animations on the unchanged page). Stop every animation and transition, so "no motion" is true for the whole page. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}