:root {
  --motion-ease-out: cubic-bezier(.22,.8,.2,1);
  --motion-ease-spring: cubic-bezier(.2,.9,.25,1.08);
  --motion-duration: 620ms;
}

html.motion-capable [data-motion] {
  opacity: 0;
  transform: translate3d(0,16px,0);
  transition:
    opacity var(--motion-duration) ease,
    transform var(--motion-duration) var(--motion-ease-out);
  transition-delay: var(--motion-delay,0ms);
  will-change: opacity,transform;
}

html.motion-capable [data-motion="scale"] {
  transform: translate3d(0,10px,0) scale(.975);
}

html.motion-capable [data-motion="left"] {
  transform: translate3d(-20px,0,0);
}

html.motion-capable [data-motion="right"] {
  transform: translate3d(20px,0,0);
}

html.motion-capable [data-motion].motion-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

html.motion-capable [data-motion-replay]:not([hidden]).motion-replaying {
  animation: motion-state-enter 480ms var(--motion-ease-out) both;
}

.motion-card {
  transition:
    transform 260ms var(--motion-ease-out),
    box-shadow 260ms ease,
    border-color 220ms ease,
    background-color 220ms ease;
}

:where(
  .site-button,.header-primary,.header-ghost,.hero-download,.download-center-button,
  .home-link,.icon-button,.theme-toggle,.article-action,.dialog-button,
  .guide-download,.guide-header a,.license-paste,.header-button,.back-link,
  .runtime-popup-button,.download-resolver-actions button,.secondary-button,.danger-button
) {
  transition:
    transform 180ms var(--motion-ease-out),
    box-shadow 220ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

:where(
  .site-button,.header-primary,.header-ghost,.hero-download,.download-center-button,
  .home-link,.icon-button,.theme-toggle,.article-action,.dialog-button,
  .guide-download,.guide-header a,.license-paste,.header-button,.back-link,
  .runtime-popup-button,.download-resolver-actions button,.secondary-button,.danger-button
):active {
  transform: translateY(1px) scale(.98);
  transition-duration: 90ms;
}

:where(.hero-slide img,.scene-visual img,.guide-image img,.article-visual img,.extension-center-cover img) {
  transition: transform 700ms var(--motion-ease-out),filter 420ms ease;
}

.theme-toggle.is-switching,
[data-theme-button].is-switching {
  animation: motion-theme-control 680ms var(--motion-ease-spring);
}

@media (hover:hover) and (pointer:fine) {
  .motion-card:hover,
  html.motion-capable [data-motion].motion-visible.motion-card:hover {
    transform: translateY(-3px);
  }

  :where(.hero-product,.scene-visual,.guide-image,.article-visual,.extension-center-cover):hover img {
    transform: scale(1.012);
  }

  :where(.site-button,.header-primary,.hero-download,.download-center-button,.guide-download):hover {
    transform: translateY(-2px);
  }

  html.motion-capable [data-motion].motion-visible:is(.site-button,.header-primary,.hero-download,.download-center-button,.guide-download):hover {
    transform: translateY(-2px);
  }
}

html.motion-capable [data-motion].motion-visible:is(
  .site-button,.header-primary,.header-ghost,.hero-download,.download-center-button,
  .home-link,.icon-button,.theme-toggle,.article-action,.dialog-button,
  .guide-download,.license-paste,.header-button,.back-link,
  .runtime-popup-button,.secondary-button,.danger-button
):active {
  transform: translateY(1px) scale(.98);
}

@keyframes motion-state-enter {
  from { opacity: 0; transform: translate3d(0,10px,0) scale(.99); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-theme-control {
  0%,100% { transform: rotate(0) scale(1); }
  48% { transform: rotate(150deg) scale(.88); }
}

@media (max-width:640px) {
  :root { --motion-duration: 500ms; }
  html.motion-capable [data-motion] { transform: translate3d(0,10px,0); }
  html.motion-capable [data-motion="scale"] { transform: translate3d(0,7px,0) scale(.985); }
  html.motion-capable [data-motion="left"],
  html.motion-capable [data-motion="right"] { transform: translate3d(0,10px,0); }
  html.motion-capable [data-motion].motion-visible { transform: none; }
}

@media (prefers-reduced-motion:reduce) {
  html.motion-capable [data-motion],
  html.motion-capable [data-motion].motion-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.motion-capable [data-motion-replay]:not([hidden]).motion-replaying,
  .theme-toggle.is-switching,
  [data-theme-button].is-switching {
    animation: none !important;
  }

  .motion-card,
  :where(.hero-slide img,.scene-visual img,.guide-image img,.article-visual img,.extension-center-cover img) {
    transition: none !important;
  }
}