/* The arrival: one orchestrated moment, spoken in the sky's own tongue.
   The ring turns to its station, the wanderers alight at their seats a
   breath later, and the words rise like dawn. Seekers who ask for less
   motion get a page that simply is. */
@layer components {

@media (prefers-reduced-motion: no-preference) {
  /* Smooth scrolling is the web's manner; the native app has scroll
     physics of its own and the webview must not second-guess them. */
  html:not(:has(body.hotwire-native)) { scroll-behavior: smooth; }

  .lesson-ring svg, .spotlight__figure svg {
    animation: ring-settle 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .zodiac-ring__mark {
    transform-box: fill-box; transform-origin: center;
    animation: mark-alight 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 0.5s backwards;
  }
  .spotlight__words > * { animation: words-dawn 0.55s ease-out 0.2s backwards; }
  .spotlight__glyph { animation: wanderer-drift 6s ease-in-out 1s infinite alternate; }
  .lesson-card { animation: words-dawn 0.5s ease-out backwards; }
}

}

@keyframes ring-settle { from { opacity: 0; transform: rotate(-14deg) scale(0.96); } }
@keyframes mark-alight { from { opacity: 0; transform: scale(0.2); } }
@keyframes words-dawn { from { opacity: 0; transform: translateY(10px); } }
@keyframes wanderer-drift { to { transform: translateY(-5px); } }