:root {
  --motion-enter: cubic-bezier(.16, 1, .3, 1);
  --motion-exit: cubic-bezier(.4, 0, 1, 1);
  --motion-spring: cubic-bezier(.2, .8, .2, 1.12);
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 360ms;
}

/* Remove the old global shine/ripple treatment. */
.tb-motion-v2 :is(button, .btn, .quickBtn, [role="button"])::before {
  animation: none !important;
  opacity: 0 !important;
}

.tb-motion-v2 .twRipple {
  display: none !important;
}

.tb-motion-v2 :is(button, .btn, .quickBtn, .productCard, .method, [role="button"]) {
  transition:
    transform var(--motion-fast) var(--motion-enter),
    border-color var(--motion-base) ease-out,
    background-color var(--motion-base) ease-out,
    color var(--motion-base) ease-out,
    opacity var(--motion-base) ease-out !important;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .tb-motion-v2 :is(button, .btn, .quickBtn, .productCard, .method, [role="button"]):not(:disabled):hover {
    transform: translateY(-1px) !important;
    filter: none !important;
  }
}

.tb-motion-v2 :is(button, .btn, .quickBtn, .productCard, .method, [role="button"]):not(:disabled):active,
.tb-motion-v2 .twPressing {
  transform: scale(.97) !important;
  transition-duration: 80ms !important;
}

.tb-motion-v2 :is(button, .btn, .quickBtn, .productCard, .method, [role="button"]):focus-visible {
  outline: 2px solid #19d3c5 !important;
  outline-offset: 3px !important;
}

.tb-motion-v2 .tbMotionEnter {
  animation: tbMotionEnter var(--motion-slow) var(--motion-enter) both;
  animation-delay: min(calc(var(--motion-index, 0) * 34ms), 240ms);
}

.tb-motion-v2 :is(.accountMenu, .menu, .dropdown, [role="menu"]) {
  transform-origin: top right;
}

.tb-motion-v2 :is(.accountMenu, .menu, .dropdown, [role="menu"]):not([hidden]) {
  animation: tbMotionPopover var(--motion-base) var(--motion-enter) both !important;
}

.tb-motion-v2 :is(.productOverlay.open, .modal.open, dialog[open]) {
  animation: tbMotionFade 180ms ease-out both;
}

.tb-motion-v2 :is(.detailApp, .modal > .card, dialog > *) {
  transform-origin: center;
  animation: tbMotionDialog 280ms var(--motion-enter) both !important;
}

.tb-motion-v2 .twToast,
.tb-motion-v2 .toast.show {
  animation: tbMotionToast 260ms var(--motion-spring) both !important;
}

.tb-motion-v2 :is(.loadingSpinner, .statusLine.loading .statusDot) {
  animation-timing-function: linear !important;
}

@keyframes tbMotionEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tbMotionPopover {
  from { opacity: 0; transform: translateY(-5px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tbMotionFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tbMotionDialog {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tbMotionToast {
  from { opacity: 0; transform: translate(-50%, 10px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tb-motion-v2 *,
  .tb-motion-v2 *::before,
  .tb-motion-v2 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}