/* ── Motion ── all gated on the user's reduced-motion preference ── */

@media (prefers-reduced-motion: no-preference) {

  /* Hero: staggered rise + fade on load */
  #hero .hero-tag,
  #hero .hero-title,
  #hero .hero-lede,
  #hero .hero-desc {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
  }
  #hero .hero-tag   { animation-delay: 0.05s; }
  #hero .hero-title { animation-delay: 0.15s; }
  #hero .hero-lede  { animation-delay: 0.32s; }
  #hero .hero-desc  { animation-delay: 0.46s; }

  /* The mark: slow, meditative rotation (hero only) */
  #hero .hero-title .mark {
    display: inline-block;
    transform-origin: 50% 52%;
    animation: drift-rotate 36s linear infinite;
  }

  /* Sections: reveal as they enter the viewport (class added in markup,
     .in toggled by js/anim.js). Gated on html.js so no-JS users see content. */
  html.js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  html.js .reveal.in { opacity: 1; transform: none; }
}

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes drift-rotate { to { transform: rotate(360deg); } }