/* Author/creator: nattapat2871 (https://nattapat2871.me) */
/* Rich-motion pass: restores visible motion while preserving reduced-motion accessibility. */

:root {
  --nl-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nl-motion-fast: 180ms;
  --nl-motion-medium: 320ms;
  --nl-motion-reveal: 680ms;
}

.motion-ready [data-motion] {
  transition:
    opacity var(--nl-motion-reveal) var(--nl-motion-ease) var(--motion-delay, 0ms),
    transform var(--nl-motion-reveal) var(--nl-motion-ease) var(--motion-delay, 0ms),
    filter var(--nl-motion-medium) ease;
}

.motion-ready [data-motion="fade-up"] {
  transform: translate3d(0, 28px, 0);
}

.motion-ready [data-motion="fade-down"] {
  transform: translate3d(0, -24px, 0);
}

.motion-ready [data-motion="fade-left"] {
  transform: translate3d(34px, 0, 0);
}

.motion-ready [data-motion="fade-right"] {
  transform: translate3d(-34px, 0, 0);
}

.motion-ready [data-motion="zoom-in"] {
  transform: scale(0.955);
}

.motion-ready [data-motion="zoom-in-up"] {
  transform: translate3d(0, 26px, 0) scale(0.965);
}

.motion-ready [data-motion].is-visible {
  opacity: 1;
  transform: none;
}

.site-header,
.feature-card,
.loader-card,
.proof-card,
.compare-card,
.upgrade-card,
.latest-showcase,
.screenshot-frame,
.creator-card,
.activity-card,
.partner-card,
.download-section,
.legal-card,
.install-platform,
.linux-package,
.install-help {
  transition:
    transform var(--nl-motion-medium) var(--nl-motion-ease),
    border-color var(--nl-motion-fast) ease,
    background-color var(--nl-motion-fast) ease,
    box-shadow var(--nl-motion-medium) var(--nl-motion-ease),
    opacity var(--nl-motion-fast) ease;
}

.feature-card:hover,
.loader-card:hover,
.proof-card:hover,
.upgrade-card:hover,
.creator-card:hover,
.activity-card:hover,
.partner-card:hover,
.install-platform:hover,
.linux-package:hover,
.install-help:hover {
  transform: translateY(-4px);
}

.compare-card:hover,
.screenshot-frame:hover,
.screenshot-frame:focus-within {
  transform: translateY(-3px);
}

.site-nav .nav-icon,
.button svg,
.partner-open svg,
.download-guide-link svg,
.footer-socials svg,
.footer-discord svg,
.legal-quick-arrow {
  transition:
    transform var(--nl-motion-fast) var(--nl-motion-ease),
    opacity var(--nl-motion-fast) ease;
}

.site-nav a:hover .nav-icon {
  transform: translateY(-1px) scale(1.08);
}

.button:hover svg,
.partner-open:hover svg,
.download-guide-link:hover svg {
  transform: translateX(1px) scale(1.04);
}

.button:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(0.965);
}

.feature-icon,
.download-platform-icon,
.activity-icon,
.partner-logo-shell,
.proof-icon,
.heading-icon {
  transition:
    transform var(--nl-motion-medium) var(--nl-motion-ease),
    filter var(--nl-motion-medium) ease,
    background-color var(--nl-motion-fast) ease;
}

.feature-card:hover .feature-icon,
.proof-card:hover .proof-icon,
.partner-card:hover .partner-logo-shell,
.legal-card:hover .heading-icon {
  transform: translateY(-2px) scale(1.045);
}

.gallery-link:hover .screenshot-capture,
.compare-card:hover .compare-media img {
  transform: scale(1.025);
}

/* Viewport motion stays compositor-friendly: only opacity and transform. */
.motion-ready .section > :is(
  .feature-grid,
  .loaders-section,
  .latest-showcase,
  .upgrade-grid,
  .proof-grid,
  .comparison-heading,
  .comparison-grid,
  .changelog-timeline,
  .changelog-footer-action,
  .screenshot-grid,
  .creator-layout,
  .partner-grid,
  .download-section,
  .legal-grid,
  .history-board,
  .install-flow,
  .install-platform,
  .install-after,
  .install-faq,
  .install-help
) {
  opacity: 0.58;
  transform: translate3d(0, 14px, 0) scale(0.996);
  transition:
    opacity 420ms var(--nl-motion-ease),
    transform 520ms var(--nl-motion-ease);
}

.motion-ready .section.is-ambient-active > :is(
  .feature-grid,
  .loaders-section,
  .latest-showcase,
  .upgrade-grid,
  .proof-grid,
  .comparison-heading,
  .comparison-grid,
  .changelog-timeline,
  .changelog-footer-action,
  .screenshot-grid,
  .creator-layout,
  .partner-grid,
  .download-section,
  .legal-grid,
  .history-board,
  .install-flow,
  .install-platform,
  .install-after,
  .install-faq,
  .install-help
) {
  opacity: 1;
  transform: none;
}

.motion-ready :is(
  .history-hero,
  .history-board,
  .install-hero,
  .platform-jump,
  .install-platform,
  .install-after,
  .install-faq,
  .install-help,
  .legal-hero,
  .legal-quick-nav,
  .legal-grid,
  .legal-reader-shell
) {
  transition:
    opacity 420ms var(--nl-motion-ease),
    transform 520ms var(--nl-motion-ease);
}

.motion-ready :is(
  .history-hero,
  .history-board,
  .install-hero,
  .platform-jump,
  .install-platform,
  .install-after,
  .install-faq,
  .install-help,
  .legal-hero,
  .legal-quick-nav,
  .legal-grid,
  .legal-reader-shell
):not(.is-ambient-active) {
  opacity: 0.62;
  transform: translate3d(0, 12px, 0) scale(0.997);
}

.motion-ready :is(
  .history-hero,
  .history-board,
  .install-hero,
  .platform-jump,
  .install-platform,
  .install-after,
  .install-faq,
  .install-help,
  .legal-hero,
  .legal-quick-nav,
  .legal-grid,
  .legal-reader-shell
).is-ambient-active {
  opacity: 1;
  transform: none;
}

/* Shared interaction language for links, buttons, tabs and disclosure controls. */
:is(
  .button,
  .site-nav a,
  .language-switcher button,
  .mobile-menu-toggle,
  .partner-open,
  .activity-source,
  .download-guide-link,
  .compare-copy > a,
  .gallery-link,
  .legal-quick-nav a,
  .platform-jump a,
  .install-source,
  .changelog-entry summary
) {
  transition:
    transform var(--nl-motion-fast) var(--nl-motion-ease),
    opacity var(--nl-motion-fast) ease,
    color var(--nl-motion-fast) ease,
    border-color var(--nl-motion-fast) ease,
    background-color var(--nl-motion-fast) ease;
  -webkit-tap-highlight-color: transparent;
}

:is(
  .install-copy-button,
  .install-faq-item summary,
  .install-note summary,
  .legal-toc-link,
  .download-menu-toggle,
  [data-primary-download],
  .history-back,
  .brand,
  .footer-brand,
  .footer-nav a,
  .footer-socials a,
  .footer-discord
) {
  transition:
    transform var(--nl-motion-fast) var(--nl-motion-ease),
    opacity var(--nl-motion-fast) ease,
    color var(--nl-motion-fast) ease,
    border-color var(--nl-motion-fast) ease,
    background-color var(--nl-motion-fast) ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  :is(
    .install-copy-button,
    .install-faq-item summary,
    .install-note summary,
    .legal-toc-link,
    .download-menu-toggle,
    [data-primary-download],
    .history-back,
    .brand,
    .footer-brand,
    .footer-nav a,
    .footer-socials a,
    .footer-discord
  ):hover {
    transform: translate3d(0, -2px, 0);
  }

  :is(
    .button,
    .site-nav a,
    .language-switcher button,
    .partner-open,
    .activity-source,
    .download-guide-link,
    .compare-copy > a,
    .legal-quick-nav a,
    .platform-jump a,
    .install-source
  ):hover {
    transform: translate3d(0, -2px, 0);
  }

  .gallery-link:hover {
    transform: scale(1.006);
  }

  .changelog-entry summary:hover {
    transform: translate3d(3px, 0, 0);
  }
}

:is(
  .button,
  .site-nav a,
  .language-switcher button,
  .mobile-menu-toggle,
  .partner-open,
  .activity-source,
  .download-guide-link,
  .compare-copy > a,
  .gallery-link,
  .legal-quick-nav a,
  .platform-jump a,
  .install-source,
  .changelog-entry summary
):active {
  transform: scale(0.965);
  transition-duration: 90ms;
}

:is(.feature-card, .loader-card, .proof-card, .compare-card, .upgrade-card, .creator-card, .activity-card, .partner-card, .screenshot-frame):active {
  transform: translate3d(0, 1px, 0) scale(0.992);
  transition-duration: 100ms;
}

:is(
  .button,
  .site-nav a,
  .language-switcher button,
  .mobile-menu-toggle,
  .partner-open,
  .activity-source,
  .download-guide-link,
  .compare-copy > a,
  .gallery-link,
  .legal-quick-nav a,
  .platform-jump a,
  .install-source,
  .changelog-entry summary
):focus-visible {
  transform: translate3d(0, -1px, 0);
}

:is(.button, .site-nav a, .language-switcher button, .partner-open, .activity-source):hover :is(svg, .nav-icon),
:is(.button, .site-nav a, .language-switcher button, .partner-open, .activity-source):focus-visible :is(svg, .nav-icon) {
  transform: translate3d(1px, -1px, 0) scale(1.06);
}

:is(
  .install-copy-button,
  .install-faq-item summary,
  .install-note summary,
  .legal-toc-link,
  .download-menu-toggle,
  [data-primary-download],
  .history-back,
  .brand,
  .footer-brand,
  .footer-nav a,
  .footer-socials a,
  .footer-discord
):active {
  transform: scale(0.965);
  transition-duration: 90ms;
}

.motion-lite .section > :is(
  .feature-grid,
  .loaders-section,
  .latest-showcase,
  .upgrade-grid,
  .proof-grid,
  .comparison-heading,
  .comparison-grid,
  .changelog-timeline,
  .screenshot-grid,
  .creator-layout,
  .partner-grid,
  .download-section
) {
  transform: none;
  transition-duration: 180ms;
}

.motion-lite :is(.gallery-link:hover .screenshot-capture, .compare-card:hover .compare-media img, .proof-card:hover .proof-media img) {
  transform: none;
}

.back-to-top {
  transition:
    opacity 220ms ease,
    transform 280ms var(--nl-motion-ease),
    background-color var(--nl-motion-fast) ease,
    box-shadow var(--nl-motion-fast) ease;
}

.back-to-top.is-visible {
  animation: nl-back-to-top-in 360ms var(--nl-motion-ease) both;
}

@keyframes nl-back-to-top-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-force) .motion-ready [data-motion],
  html:not(.motion-force).motion-ready [data-motion] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: opacity 140ms ease-out !important;
  }

  html:not(.motion-force) .feature-card:hover,
  html:not(.motion-force) .loader-card:hover,
  html:not(.motion-force) .proof-card:hover,
  html:not(.motion-force) .compare-card:hover,
  html:not(.motion-force) .upgrade-card:hover,
  html:not(.motion-force) .creator-card:hover,
  html:not(.motion-force) .activity-card:hover,
  html:not(.motion-force) .partner-card:hover,
  html:not(.motion-force) .screenshot-frame:hover,
  html:not(.motion-force) .screenshot-frame:focus-within,
  html:not(.motion-force) .install-platform:hover,
  html:not(.motion-force) .linux-package:hover,
  html:not(.motion-force) .install-help:hover {
    transform: none !important;
  }

  html:not(.motion-force) .back-to-top.is-visible {
    animation: none !important;
  }
}