:root {
  --site-motion-ease: cubic-bezier(.22, .72, .2, 1);
  --site-motion-duration: 860ms;
}

@keyframes site-content-fade-in {
  0% { opacity: .22; }
  48% { opacity: .76; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  html.site-motion-on [data-site-reveal] {
    /* Keep real content readable even if an observer misses its first
       notification. Motion should enhance content, never make it disappear. */
    opacity: .82;
    translate: 0 18px;
    scale: .99;
    filter: none;
    transition:
      opacity var(--site-motion-duration) var(--site-motion-ease),
      translate var(--site-motion-duration) var(--site-motion-ease),
      scale var(--site-motion-duration) var(--site-motion-ease),
      clip-path var(--site-motion-duration) var(--site-motion-ease);
    transition-delay: var(--site-motion-delay, 0ms);
    will-change: opacity, translate, scale;
  }

  html.site-motion-on [data-site-reveal="title"] {
    translate: 0 .14em;
    scale: .995;
    clip-path: none;
  }

  html.site-motion-on [data-site-reveal="visual"] {
    translate: 0 25px;
    scale: .97;
    filter: blur(0);
    clip-path: inset(8% 0 8% round 8px);
  }

  html.site-motion-on [data-site-reveal="card"] {
    translate: 0 24px;
    scale: .985;
  }

  html.site-motion-on [data-site-reveal].site-motion-visible {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: none;
    clip-path: none;
    animation: site-content-fade-in var(--site-motion-duration) var(--site-motion-ease) both;
    animation-delay: var(--site-motion-delay, 0ms);
    will-change: auto;
  }

  html.site-motion-on [data-site-motion-initial="true"],
  html.site-motion-on [data-site-motion-initial="true"].site-motion-visible {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  html.site-motion-on .home-category-card,
  html.site-motion-on #productGrid > *,
  html.site-motion-on .about-case-card,
  html.site-motion-on .faq-item,
  html.site-motion-on .contact-step {
    transition:
      opacity var(--site-motion-duration) var(--site-motion-ease),
      translate 320ms var(--site-motion-ease),
      scale 320ms var(--site-motion-ease),
      box-shadow 320ms var(--site-motion-ease),
      border-color 320ms var(--site-motion-ease);
  }

  html.site-motion-on .header .brand,
  html.site-motion-on .header-tools > *,
  html.site-motion-on .mobile-nav a,
  html.site-motion-on .footer-column a,
  html.site-motion-on .process-hero-link,
  html.site-motion-on .process-step-link {
    transition:
      color 240ms var(--site-motion-ease),
      background-color 240ms var(--site-motion-ease),
      border-color 240ms var(--site-motion-ease),
      translate 240ms var(--site-motion-ease),
      opacity 240ms var(--site-motion-ease);
  }

  html.site-motion-on :where(button, [role="button"]):active {
    scale: .99;
  }

  html.site-motion-on a[href]:active {
    opacity: .76;
  }

  html.site-motion-on .home-category-card:hover,
  html.site-motion-on #productGrid > *:hover,
  html.site-motion-on .about-case-card:hover,
  html.site-motion-on .faq-item:hover,
  html.site-motion-on .contact-step:hover {
    translate: 0 -4px;
  }

  html.site-motion-on #productGrid img,
  html.site-motion-on .home-category-card img,
  html.site-motion-on .about-case-card img {
    transition: scale 600ms var(--site-motion-ease);
  }

  html.site-motion-on #productGrid > *:hover img,
  html.site-motion-on .home-category-card:hover img,
  html.site-motion-on .about-case-card:hover img {
    scale: 1.025;
  }

  html.site-motion-on :where(.home-collection-action a, .process-hero-link, .process-step-link, .process-cta a):hover {
    translate: 0 -1px;
  }

  html.site-motion-on .footer-column a:hover,
  html.site-motion-on .mobile-nav a:hover {
    translate: 3px 0;
  }
}

:where(a[href], button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent, #c84913);
  outline-offset: 3px;
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  :root { --site-motion-duration: 740ms; }
  html.site-motion-on [data-site-reveal] { translate: 0 16px; }
  html.site-motion-on [data-site-reveal="title"] { translate: 0 .12em; }
  html.site-motion-on [data-site-reveal="visual"] { translate: 0 20px; }
  html.site-motion-on [data-site-reveal="card"] { translate: 0 19px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-site-reveal],
  [data-site-reveal].site-motion-visible,
  :where(a[href], button, input, select, textarea, summary) {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}