/* ModX motion layer — load after the existing stylesheets. */
:root {
  --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-soft: cubic-bezier(.2, .8, .2, 1);
  --motion-fast: 180ms;
  --motion-base: 520ms;
}

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

html.motion-ready [data-motion="hero"] {
  transform: translate3d(0, 14px, 0);
}

html.motion-ready [data-motion="media"] {
  transform: scale(1.025);
  transform-origin: center;
}

html.motion-ready [data-motion="card"] {
  transform: translate3d(0, 22px, 0);
}

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

.primary-button,
.outline-button,
.add-button,
.filter-tab,
.search-button,
.search-close,
.search-result,
.menu-toggle,
.icon-btn,
.game-chip,
.product-image {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.primary-button,
.outline-button,
.add-button,
.filter-tab,
.search-button,
.search-close,
.search-result,
.icon-btn,
.menu-toggle {
  transition:
    transform var(--motion-fast) var(--motion-ease-soft),
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.primary-button:focus-visible,
.outline-button:focus-visible,
.add-button:focus-visible,
.filter-tab:focus-visible,
.search-button:focus-visible,
.search-close:focus-visible,
.search-result:focus-visible,
.icon-btn:focus-visible,
.menu-toggle:focus-visible,
.product-image:focus-visible,
.desktop-nav a:focus-visible,
.modal-close:focus-visible {
  outline: 3px solid rgba(0, 113, 227, .38);
  outline-offset: 3px;
}

.product-card {
  transform-origin: center bottom;
}

.product-card .product-image,
.game-chip,
.benefit {
  transition:
    transform 360ms var(--motion-ease-out),
    box-shadow 360ms var(--motion-ease-out),
    border-color 240ms ease,
    background-color 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
  html.motion-ready .product-card.is-visible:hover {
    transform: translate3d(0, -7px, 0);
    box-shadow: 0 24px 54px rgba(0, 0, 0, .13);
  }

  .product-card:hover .product-image {
    transform: scale(1.018);
  }

  .game-chip:hover,
  .benefit:hover {
    transform: translate3d(0, -3px, 0);
  }

  .primary-button:hover,
  .outline-button:hover,
  .add-button:hover,
  .filter-tab:hover {
    box-shadow: 0 10px 24px rgba(0, 113, 227, .14);
  }
}

.primary-button:active,
.outline-button:active,
.add-button:active,
.filter-tab:active,
.icon-btn:active,
.menu-toggle:active,
.product-image:active,
.game-chip:active {
  transform: translate3d(0, 1px, 0) scale(.985);
  transition-duration: 80ms;
}

/* Keep the existing menu state while making display:none animatable on mobile. */
@media (max-width: 880px) {
  html.motion-ready .site-header .desktop-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -9px, 0) scale(.985);
    transform-origin: top center;
    transition:
      opacity 220ms ease,
      transform 280ms var(--motion-ease-out),
      visibility 0s linear 280ms;
  }

  html.motion-ready .site-header.menu-open .desktop-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  html.motion-ready .site-header .desktop-nav a {
    border-bottom-color: rgba(0, 0, 0, .08);
    opacity: 0;
    transform: translate3d(0, -5px, 0);
    transition:
      opacity 180ms ease,
      transform 240ms var(--motion-ease-out),
      color 180ms ease;
  }

  html.motion-ready .site-header.menu-open .desktop-nav a {
    opacity: 1;
    transform: none;
  }

  html.motion-ready .site-header.menu-open .desktop-nav a:nth-child(2) { transition-delay: 35ms; }
  html.motion-ready .site-header.menu-open .desktop-nav a:nth-child(3) { transition-delay: 70ms; }
  html.motion-ready .site-header.menu-open .desktop-nav a:nth-child(4) { transition-delay: 105ms; }
  html.motion-ready .site-header.menu-open .desktop-nav a:nth-child(5) { transition-delay: 140ms; }

  .menu-toggle span {
    transform-origin: center;
    transition: transform 220ms var(--motion-ease-out), opacity 160ms ease;
  }

  .site-header.menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .site-header.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(.3);
  }

  .site-header.menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* Modal transitions preserve the current .open contract used by script.js. */
html.motion-ready .product-modal {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 200ms ease,
    visibility 0s linear 320ms;
}

html.motion-ready .product-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

html.motion-ready .product-modal .modal-backdrop {
  opacity: 0;
  transition: opacity 260ms ease;
}

html.motion-ready .product-modal .modal-card {
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(.982);
  transform-origin: center;
  transition:
    opacity 220ms ease,
    transform 360ms var(--motion-ease-out);
}

html.motion-ready .product-modal.open .modal-backdrop,
html.motion-ready .product-modal.open .modal-card {
  opacity: 1;
}

html.motion-ready .product-modal.open .modal-card {
  transform: none;
}

html.motion-ready .cart-panel {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 340ms;
}

html.motion-ready .cart-panel.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

html.motion-ready .cart-panel .cart-backdrop {
  opacity: 0;
  transition: opacity 240ms ease;
}

html.motion-ready .cart-panel .cart-sheet {
  transform: translate3d(36px, 0, 0);
  transition: transform 360ms var(--motion-ease-out);
}

html.motion-ready .cart-panel.open .cart-backdrop {
  opacity: 1;
}

html.motion-ready .cart-panel.open .cart-sheet {
  transform: none;
}

html.motion-ready .search-panel {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 300ms;
}

html.motion-ready .search-panel.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

html.motion-ready .search-panel .search-backdrop {
  opacity: 0;
  transition: opacity 220ms ease;
}

html.motion-ready .search-panel .search-dialog {
  opacity: 0;
  transform: translate3d(0, -12px, 0) scale(.985);
  transition: opacity 200ms ease, transform 320ms var(--motion-ease-out);
}

html.motion-ready .search-panel.open .search-backdrop,
html.motion-ready .search-panel.open .search-dialog {
  opacity: 1;
}

html.motion-ready .search-panel.open .search-dialog {
  transform: none;
}

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

  html.motion-ready [data-motion],
  html.motion-ready [data-motion].is-visible,
  html.motion-ready .product-modal,
  html.motion-ready .product-modal .modal-backdrop,
  html.motion-ready .product-modal .modal-card,
  html.motion-ready .cart-panel,
  html.motion-ready .cart-panel .cart-backdrop,
  html.motion-ready .cart-panel .cart-sheet,
  html.motion-ready .search-panel,
  html.motion-ready .search-panel .search-backdrop,
  html.motion-ready .search-panel .search-dialog,
  html.motion-ready .site-header .desktop-nav,
  html.motion-ready .site-header .desktop-nav a,
  .primary-button,
  .outline-button,
  .add-button,
  .filter-tab,
  .search-button,
  .search-close,
  .search-result,
  .icon-btn,
  .menu-toggle,
  .menu-toggle span,
  .product-card,
  .product-card .product-image,
  .game-chip,
  .benefit {
    animation: none !important;
    transition: none !important;
  }

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