/* MENU-AB-001 only. Theme layout belongs to A/B; motion hooks own inner transforms. */
.menu-preview {
  --menu-motion-ease: cubic-bezier(.2, 0, 0, 1);
  --menu-motion-ambient-ease: cubic-bezier(.45, 0, .55, 1);
  --menu-motion-quick: 120ms;
  --menu-motion-panel: 220ms;
  --menu-atmosphere-alpha: .12;
}

.menu-preview .menu-hero-motion {
  transform-origin: 50% 100%;
  animation: menu-hero-breathe 8s var(--menu-motion-ambient-ease) infinite;
  animation-play-state: paused;
}

.menu-preview[data-theme="b"] .menu-hero-motion {
  /* The full canvas and bottom origin keep the footwear planted. */
  animation-name: menu-hero-grounded;
}

.menu-preview .menu-atmosphere {
  pointer-events: none;
  opacity: var(--menu-atmosphere-alpha);
  animation: menu-atmosphere-drift 22s var(--menu-motion-ambient-ease) infinite;
  animation-play-state: paused;
}

.menu-preview .menu-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.menu-preview .menu-primary-title,
.menu-preview .menu-primary-subtitle {
  position: relative;
  z-index: 1;
  transition: transform var(--menu-motion-quick) var(--menu-motion-ease),
              opacity var(--menu-motion-quick) var(--menu-motion-ease);
}

.menu-preview .menu-primary:active:not(:disabled) .menu-primary-title {
  transform: translateY(1px);
  opacity: .82;
}

.menu-preview .menu-primary:active:not(:disabled) .menu-primary-subtitle {
  opacity: .78;
}

.menu-preview .menu-cta-sheen {
  position: absolute;
  inset: -20% auto -20% -28%;
  width: 18%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 231, 164, .26) 48%, transparent 100%);
  animation: menu-cta-sheen 12s var(--menu-motion-ease) infinite;
  animation-play-state: paused;
}

.menu-preview[data-motion="on"] .menu-hero-motion,
.menu-preview[data-motion="on"] .menu-atmosphere,
.menu-preview[data-motion="on"] .menu-cta-sheen {
  animation-play-state: running;
}

.menu-preview .menu-panel-motion {
  animation: menu-panel-reveal var(--menu-motion-panel) var(--menu-motion-ease) both;
}

.menu-preview[data-motion="paused"] .menu-panel-motion {
  animation-play-state: paused;
}

.menu-preview[data-motion="off"] .menu-hero-motion,
.menu-preview[data-motion="off"] .menu-atmosphere,
.menu-preview[data-motion="off"] .menu-cta-sheen,
.menu-preview[data-motion="off"] .menu-panel-motion,
.menu-preview:not([data-motion]) .menu-hero-motion,
.menu-preview:not([data-motion]) .menu-atmosphere,
.menu-preview:not([data-motion]) .menu-cta-sheen {
  animation: none;
}

.menu-preview .menu-primary:disabled .menu-cta-sheen,
.menu-preview .menu-primary[aria-busy="true"] .menu-cta-sheen {
  animation: none;
  opacity: 0;
}

@keyframes menu-hero-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.003); }
}

@keyframes menu-hero-grounded {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.003); }
}

@keyframes menu-atmosphere-drift {
  0%, 100% {
    transform: translate3d(-6px, 1px, 0);
    opacity: calc(var(--menu-atmosphere-alpha) * .75);
  }
  50% {
    transform: translate3d(6px, -1px, 0);
    opacity: var(--menu-atmosphere-alpha);
  }
}

@keyframes menu-cta-sheen {
  0%, 68% { transform: translateX(0) skewX(-16deg); opacity: 0; }
  72% { opacity: .5; }
  87% { transform: translateX(740%) skewX(-16deg); opacity: .5; }
  90%, 100% { transform: translateX(740%) skewX(-16deg); opacity: 0; }
}

@keyframes menu-panel-reveal {
  from { transform: translateY(6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.menu-preview[data-motion="off"] .menu-primary-title,
.menu-preview[data-motion="off"] .menu-primary-subtitle {
  transition: none;
}

.menu-preview[data-motion="off"] .menu-primary:active:not(:disabled) .menu-primary-title {
  transform: none;
}

/* CSS remains a fail-safe if the media listener or optional SDK is unavailable. */
@media (prefers-reduced-motion: reduce) {
  .menu-preview .menu-hero-motion,
  .menu-preview .menu-atmosphere,
  .menu-preview .menu-cta-sheen,
  .menu-preview .menu-panel-motion {
    animation: none;
  }
  .menu-preview .menu-primary-title,
  .menu-preview .menu-primary-subtitle {
    transition: none;
  }
  .menu-preview .menu-primary:active:not(:disabled) .menu-primary-title {
    transform: none;
  }
}