/* Motion-only tokens. Existing theme colors, dimensions and imagery remain authoritative. */
:root {
  --sr-motion-snap: 160ms;
  --sr-motion-quick: 260ms;
  --sr-motion-base: 380ms;
  --sr-motion-reveal: 680ms;
  --sr-motion-long: 800ms;
  --sr-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --sr-motion-return: cubic-bezier(.2, 1.23, .35, 1);
}
/* Fail open: reveals animate only after intersection, never hide content waiting for JS. */
.sr-motion-enter {
  animation: sr-motion-reveal var(--sr-motion-reveal) var(--sr-motion-ease) var(--sr-motion-delay, 0ms) both;
}
@keyframes sr-motion-reveal {
  from { opacity: .01; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
.sr-motion-enter-fade { animation: sr-motion-fade var(--sr-motion-long) var(--sr-motion-ease) both; }
@keyframes sr-motion-fade { from { opacity: .88; } to { opacity: 1; } }
/* translate owns entrance; this single transform composition owns tilt/lift/press. */
.sr-motion-surface {
  --sr-motion-x: 0px; --sr-motion-y: 0px; --sr-motion-rx: 0deg; --sr-motion-ry: 0deg; --sr-motion-press: 1;
  position: relative;
  transform: perspective(1000px) translate3d(var(--sr-motion-x, 0px), var(--sr-motion-y, 0px), 0) rotateX(var(--sr-motion-rx, 0deg)) rotateY(var(--sr-motion-ry, 0deg)) scale(var(--sr-motion-press, 1));
  transition: transform var(--sr-motion-base) var(--sr-motion-return);
}
.sr-motion-cta { position: relative; isolation: isolate; }
.sr-motion-face {
  --sr-motion-x: 0px; --sr-motion-y: 0px; --sr-motion-press: 1;
  display: inline-flex;
  align-items: inherit;
  justify-content: inherit;
  gap: inherit;
  pointer-events: none;
  transform: translate3d(var(--sr-motion-x, 0px), var(--sr-motion-y, 0px), 0) scale(var(--sr-motion-press, 1));
  transition: transform var(--sr-motion-base) var(--sr-motion-return);
}
.sr-motion-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 24%, color-mix(in srgb, currentColor 16%, transparent) 48%, transparent 70%);
  background-size: 250% 100%;
  background-position: 130% 0;
  opacity: 0;
}
.sr-motion-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sr-motion-cta:focus-visible::after { animation: sr-motion-sheen 650ms var(--sr-motion-ease) both; }
@keyframes sr-motion-sheen { 0% { opacity: 0; background-position: 130% 0; } 20% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }
.sr-motion-reflection {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--sr-motion-quick) var(--sr-motion-ease);
}
.sr-motion-reflection::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sr-amber, currentColor) 13%, transparent), transparent 60%);
  transform: translate3d(var(--sr-motion-x, 0px), var(--sr-motion-y, 0px), 0);
}
.sr-motion-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--sr-motion-long) var(--sr-motion-ease);
}
.sr-motion-glow::before {
  content: '';
  position: absolute;
  inset: -15%;
  background: radial-gradient(ellipse at 48% 42%, color-mix(in srgb, var(--sr-amber, currentColor) 12%, transparent), transparent 62%);
  transform: translate3d(var(--sr-motion-x, 0px), var(--sr-motion-y, 0px), 0);
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  /* rAF owns both tracking and leave-to-rest; touch press keeps its CSS spring. */
  .sr-motion-surface, .sr-motion-face { transition: none; }
  .sr-motion-hover > .sr-motion-reflection { opacity: 1; }
  .sr-motion-hero.sr-motion-hover .sr-motion-glow { opacity: 1; }
  .sr-motion-depth { transform: translate3d(var(--sr-motion-x, 0px), var(--sr-motion-y, 0px), 0); }
  .sr-motion-cta:hover::after { animation: sr-motion-sheen 650ms var(--sr-motion-ease) both; }
  .sr-footer-social a { position: relative; overflow: hidden; transition: transform var(--sr-motion-quick) var(--sr-motion-ease), border-color var(--sr-motion-quick) var(--sr-motion-ease); }
  .sr-footer-social a::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 24%, color-mix(in srgb, currentColor 12%, transparent) 48%, transparent 70%); background-size: 250% 100%; opacity: 0; }
  .sr-footer-social a:hover::after, .sr-footer-social a:focus-visible::after { animation: sr-motion-sheen 650ms var(--sr-motion-ease) both; }
}
.sr-nav a::after { transition-duration: var(--sr-motion-quick); transition-timing-function: var(--sr-motion-ease); }
.sr-nav a:focus-visible::after { transform: scaleX(1); }
.sr-nav a:focus-visible, .sr-nav-drawer a:focus-visible, .sr2-bottom-nav a:focus-visible, .sr-footer-social a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sr-motion-details > summary { position: relative; }
.sr-motion-details > summary svg { transition: transform var(--sr-motion-base) var(--sr-motion-ease); }
.sr-motion-details.sr2-faq-item > summary::after { content: ''; position: absolute; right: 2px; top: 26px; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform var(--sr-motion-base) var(--sr-motion-ease); pointer-events: none; }
.sr-motion-details.sr2-faq-item[open] > summary::after { transform: rotate(225deg); }
/* Platform sidebar retains its own translateX/backdrop/focus lifecycle. Only real-open rows enter. */
.sr-motion-drawer-open .sr-nav-drawer li { animation: sr-motion-drawer-row var(--sr-motion-base) var(--sr-motion-ease) var(--sr-motion-delay, 0ms) both; }
@keyframes sr-motion-drawer-row { from { opacity: .1; translate: 12px 0; } to { opacity: 1; translate: 0 0; } }
.src__input { transition-duration: var(--sr-motion-quick); transition-timing-function: var(--sr-motion-ease); }
.src__row:focus-within .src__label { transition: opacity var(--sr-motion-quick) var(--sr-motion-ease); }
.product-info-variant-option, .product-variant__select, .srp-opt, .product-detail-thumbs-item, .product-detail-thumb-button { transition: border-color var(--sr-motion-quick) var(--sr-motion-ease), background-color var(--sr-motion-quick) var(--sr-motion-ease), opacity var(--sr-motion-quick) var(--sr-motion-ease); }
.product-info__qty:focus-within, spz-quantity:focus-within { outline: 1px solid currentColor; outline-offset: 2px; }
@media (max-width: 899px), (pointer: coarse) {
  .sr-motion-glow, .sr-motion-reflection { display: none; }
  .sr-motion-cta.sr-motion-pressed > .sr-motion-face, .sr-motion-pressed.sr-motion-surface { --sr-motion-press: .98; transition-duration: var(--sr-motion-snap); }
  .sr-motion-pressed.product-info_atc_btn > [role='content'] { scale: .98; }
  .product-info_atc_btn > [role='content'] { transition: scale 300ms var(--sr-motion-return); }
  .sr-nav-drawer a.sr-motion-pressed, .sr-footer-social a.sr-motion-pressed, .sr-motion-pressed.product-info-variant-option, .sr-motion-pressed.srp-opt, .sr-motion-pressed.spz-carousel-button, .sr-motion-pressed.product-detail-thumbs-item, .sr-motion-pressed.product-detail-thumb-button { opacity: .82; }
  .sr-motion-pressed.sr3-prev svg, .sr-motion-pressed.sr3-next svg, .sr-motion-pressed.sr-why-prev svg, .sr-motion-pressed.sr-why-next svg { scale: .92; }
  .sr3-dots i.on, .sr2-why-dots i.on { animation: sr-motion-dot-pop 300ms var(--sr-motion-return) both; }
  .sr3-nav svg, .sr2-why-nav svg { transition: scale 300ms var(--sr-motion-return); }
}
@keyframes sr-motion-dot-pop { from { scale: .8; } 65% { scale: 1.12; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sr3-dots i.on, .sr2-why-dots i.on { animation: none; }
  .sr-motion-enter, .sr-motion-enter-fade, .sr-motion-drawer-open .sr-nav-drawer li { animation: none; opacity: 1; translate: none; }
  .sr-motion-surface, .sr-motion-face, .sr-motion-depth { transform: none; transition: none; }
  .sr-motion-glow, .sr-motion-reflection, .sr-motion-cta::after, .sr-footer-social a::after { display: none; }
  .sr-motion-cta, .sr-motion-details > summary::after, .sr-motion-details > summary svg, .sr-nav a::after, .src__input, .product-info-variant-option, .product-variant__select, .srp-opt { transition: none; }
  .sr-motion-pressed.product-info_atc_btn > [role='content'], .sr3-nav svg, .sr2-why-nav svg { scale: 1; transition: none; }
}