/* Gentle motion for the animated designs: sections fade in as they scroll into view and the
   hero background drifts slowly. Everything is off for visitors who prefer reduced motion,
   and content stays visible if scripts do not run (the hidden state needs html.motion-ready). */

@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .motion-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: var(--motion-delay, 0ms);
  }

  html.motion-ready .motion-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  html.design-animated .hero,
  html.design-animated #home.landing,
  html.design-animated main > section:first-child {
    background-size: 220% 220%;
    animation: motion-drift 28s ease-in-out infinite alternate;
  }
}

@keyframes motion-drift {
  from { background-position: 0% 40%; }
  to   { background-position: 100% 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}