/* Lightweight, one-time motion for the full PassionFood website. */
html {
  scroll-behavior: smooth;
}

:where(section[id], main[id], [id]) {
  scroll-margin-top: 108px;
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-enabled .motion-item {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity 520ms ease-out,
      transform 620ms cubic-bezier(.22, .76, .25, 1) !important;
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
  }

  html.motion-enabled .motion-item.motion-from-up {
    transform: translate3d(0, -22px, 0);
  }

  html.motion-enabled .motion-item.motion-from-left {
    transform: translate3d(-28px, 0, 0);
  }

  html.motion-enabled .motion-item.motion-from-right {
    transform: translate3d(28px, 0, 0);
  }

  html.motion-enabled .motion-item.motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }
}

@media (max-width: 900px), (pointer: coarse) {
  :where(section[id], main[id], [id]) {
    scroll-margin-top: 88px;
  }

  @media (prefers-reduced-motion: no-preference) {
    html.motion-enabled .motion-item {
      transform: translate3d(0, 14px, 0);
      transition-duration: 380ms, 460ms;
    }

    html.motion-enabled .motion-item.motion-from-up {
      transform: translate3d(0, -14px, 0);
    }

    html.motion-enabled .motion-item.motion-from-left {
      transform: translate3d(-16px, 0, 0);
    }

    html.motion-enabled .motion-item.motion-from-right {
      transform: translate3d(16px, 0, 0);
    }

    html.motion-enabled .motion-item.motion-visible {
      transform: translate3d(0, 0, 0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .motion-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}