@keyframes home-enter {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes home-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
@keyframes home-sway {
  0%, 100% { rotate: -5deg; }
  50% { rotate: 5deg; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .homepage-motion .hero-copy > * {
    animation: home-enter 1200ms cubic-bezier(.2,.7,.2,1) both;
  }
  .homepage-motion .hero-copy > :nth-child(2) { animation-delay: 180ms; }
  .homepage-motion .hero-copy > :nth-child(3) { animation-delay: 360ms; }
  .homepage-motion .hero-copy > :nth-child(4) { animation-delay: 540ms; }
  .homepage-motion .hero .decoration { animation: home-sway 8s ease-in-out infinite; }
  .homepage-motion .hero .cloud { animation: home-float 11s ease-in-out infinite; }
  .homepage-motion .hero .cloud.right { animation-delay: -3s; }
  .homepage-motion .hero-copy .badge { position: relative; }
  .homepage-motion .hero-copy .badge::after {
    content: ''; position: absolute; inset: -4px; border: 1px solid #ffe68480;
    border-radius: inherit; pointer-events: none;
    animation: home-float 7s ease-in-out infinite;
  }
  .homepage-motion .motion-pending { opacity: 0; translate: 0 24px; }
  .homepage-motion .motion-revealed {
    animation: home-enter 1200ms cubic-bezier(.2,.7,.2,1) both;
    animation-delay: var(--motion-delay, 0ms);
  }
  .homepage-motion .btn .arrow { transition: translate 400ms ease; }
  .homepage-motion .btn:is(:hover,:focus-visible) .arrow { translate: 5px 0; }
  .homepage-motion .topic .homepage-image,
  .homepage-motion .image-cta .homepage-image {
    transition: transform 600ms cubic-bezier(.2,.7,.2,1);
  }
  .homepage-motion .topic:is(:hover,:focus-visible) .homepage-image { transform: scale(1.025); }
  .homepage-motion .image-cta a:is(:hover,:focus-visible) .homepage-image { transform: scale(1.015); }
  .homepage-motion .step-icon { transition: transform 450ms ease; }
  .homepage-motion .step:is(:hover,:focus-visible) .step-icon { transform: translateY(-3px) rotate(-4deg); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #gejala .image-card > .homepage-image {
    transition: transform 600ms cubic-bezier(.2,.7,.2,1);
    transform-origin: center;
  }
  #gejala .image-card:hover > .homepage-image {
    transform: translateY(-5px) scale(1.025);
  }
}