/* Fast feedback for shopping controls; the opening sequence lives separately. */
:root {
  --motion-settle: cubic-bezier(.22, 1, .36, 1);
  --motion-spring: cubic-bezier(.2, .85, .3, 1.18);
}

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-reduce-motion="true"]) :is(.btn, .catalog-button) {
    transition: transform 320ms var(--motion-spring), background-color 170ms ease,
      border-color 170ms ease, color 170ms ease, box-shadow 200ms ease;
  }
  :root:not([data-reduce-motion="true"]) :is(.btn, .catalog-button):not(:disabled):not([aria-disabled="true"]):active {
    transform: translateY(1px) scale(.975);
    transition-duration: 90ms;
  }
  :root:not([data-reduce-motion="true"]) :is(.copybtn, .catalog-favourite, .mobile-quick-nav a, .header-action, .menu-btn, .themebtn) {
    transition: scale 280ms var(--motion-spring), color 160ms ease,
      background-color 160ms ease, border-color 160ms ease;
  }
  :root:not([data-reduce-motion="true"]) :is(.copybtn, .catalog-favourite, .mobile-quick-nav a, .header-action, .menu-btn, .themebtn):not(:disabled):active {
    scale: .94;
    transition-duration: 90ms;
  }
  :root:not([data-reduce-motion="true"]) .catalog-favourite:active { transform: none; }

  :root:not([data-reduce-motion="true"]) :is(.picture-category, .explore-card, .catalog-product) {
    transition: transform 380ms var(--motion-settle), border-color 180ms ease,
      box-shadow 260ms ease;
  }
  :root:not([data-reduce-motion="true"]) :is(.category-art svg, .catalog-product-art > svg, .explore-symbol) {
    transform-origin: 50% 65%;
    transition: rotate 460ms var(--motion-spring), scale 460ms var(--motion-spring);
  }
  :root:not([data-reduce-motion="true"]) .picture-category i {
    transition: translate 300ms var(--motion-settle);
  }

  /* Animate the selection mark, not the label or the running price. */
  :root:not([data-reduce-motion="true"]) .opt {
    transition: background-color 170ms ease, border-color 170ms ease,
      box-shadow 200ms ease, transform 240ms var(--motion-settle);
  }
  :root:not([data-reduce-motion="true"]) .opt.on .tick::after {
    animation: pm-choice-check 260ms var(--motion-settle) both;
    transform-origin: center;
  }
  :root:not([data-reduce-motion="true"]) .methods .opt.on .method-icon {
    animation: pm-choice-icon 340ms var(--motion-spring) both;
  }
  :root:not([data-reduce-motion="true"]) .builder-progress button[aria-current="step"] .progress-number {
    animation: pm-choice-icon 340ms var(--motion-spring) both;
  }
  :root:not([data-reduce-motion="true"]) .catalog-favourite[aria-pressed="true"]:focus svg {
    animation: pm-heart-save 390ms var(--motion-spring) both;
  }

  /* Short entrances keep the next choice available immediately. */
  :root:not([data-reduce-motion="true"]) .builder-panel:not([hidden]) {
    animation: pm-panel-enter 340ms var(--motion-settle) both;
  }
  :root:not([data-reduce-motion="true"]) :is(.payment-card, .reviewed-details):not([hidden]) {
    animation: pm-panel-enter 360ms var(--motion-settle) both;
  }
  :root:not([data-reduce-motion="true"]) .mnav.on:not([hidden]) > :is(a, button) {
    animation: pm-menu-item 300ms var(--motion-settle) both;
  }
  :root:not([data-reduce-motion="true"]) .mnav.on:not([hidden]) > :nth-child(2) { animation-delay: 20ms; }
  :root:not([data-reduce-motion="true"]) .mnav.on:not([hidden]) > :nth-child(3) { animation-delay: 40ms; }
  :root:not([data-reduce-motion="true"]) .mnav.on:not([hidden]) > :nth-child(4) { animation-delay: 60ms; }
  :root:not([data-reduce-motion="true"]) .mnav.on:not([hidden]) > :nth-child(5) { animation-delay: 80ms; }
  :root:not([data-reduce-motion="true"]) .mnav.on:not([hidden]) > :nth-child(6) { animation-delay: 100ms; }
  :root:not([data-reduce-motion="true"]) .mnav.on:not([hidden]) > :nth-child(7) { animation-delay: 120ms; }
  :root:not([data-reduce-motion="true"]) .mnav.on:not([hidden]) > :nth-child(8) { animation-delay: 140ms; }
  :root:not([data-reduce-motion="true"]) .mnav.on:not([hidden]) > :nth-child(9) { animation-delay: 160ms; }
  :root:not([data-reduce-motion="true"]) .qa summary::after {
    transition: transform 300ms var(--motion-spring);
  }
  :root:not([data-reduce-motion="true"]) .qa[open] .ans {
    animation: pm-answer-enter 240ms var(--motion-settle) both;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  :root:not([data-reduce-motion="true"]) .picture-category:hover { transform: translateY(-4px); }
  :root:not([data-reduce-motion="true"]) .picture-category:hover .category-art svg { rotate: 10deg; scale: 1.06; }
  :root:not([data-reduce-motion="true"]) .picture-category:hover i { translate: 2px -2px; }
  :root:not([data-reduce-motion="true"]) .catalog-product:hover .catalog-product-art > svg { rotate: -6deg; scale: 1.06; }
  :root:not([data-reduce-motion="true"]) .explore-card:hover .explore-symbol { rotate: -8deg; scale: 1.05; }
}

@keyframes pm-choice-check {
  from { opacity: .35; scale: .5; }
  to { opacity: 1; scale: 1; }
}
@keyframes pm-choice-icon {
  from { scale: .88; }
  to { scale: 1; }
}
@keyframes pm-heart-save {
  0% { scale: .7; rotate: -12deg; }
  55% { scale: 1.18; rotate: 5deg; }
  100% { scale: 1; rotate: 0deg; }
}
@keyframes pm-panel-enter {
  from { opacity: .55; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes pm-menu-item {
  from { opacity: .35; translate: 0 -7px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes pm-answer-enter {
  from { opacity: .5; translate: 0 -4px; }
  to { opacity: 1; translate: 0 0; }
}

/* Existing theme hover transforms also stop when the in-account preference is on. */
:root[data-reduce-motion="true"] :is(.picture-category, .explore-card, .catalog-product):hover,
:root[data-reduce-motion="true"] :is(.btn, .catalog-button, .opt):hover,
:root[data-reduce-motion="true"] :is(.btn, .catalog-button, .catalog-favourite, .opt):active {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  :is(.picture-category, .explore-card, .catalog-product):hover,
  :is(.btn, .catalog-button, .opt):hover,
  :is(.btn, .catalog-button, .catalog-favourite, .opt):active { transform: none; }
}