/* TeddyPayments motion layer: compositor-only interactions that stay enabled
   even when the host OS reports reduced/performance animations. */
:root {
  --teddy-motion-fast: 180ms;
  --teddy-motion-base: 300ms;
  --teddy-motion-slow: 640ms;
  --teddy-motion-ease: cubic-bezier(.2, .8, .2, 1);
  --teddy-motion-spring: cubic-bezier(.16, 1, .3, 1);
}

html.teddy-motion img {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

html.teddy-motion body {
  animation: teddy-page-in var(--teddy-motion-slow) var(--teddy-motion-spring) backwards;
}

html.teddy-motion :is(
  button,
  a,
  input,
  select,
  textarea,
  [role="button"],
  .card,
  .panel,
  .photo-card,
  .store-card,
  .status-card,
  .toggle-card,
  .nav-item,
  .choice,
  .channel,
  .package-card
) {
  transition-duration: var(--teddy-motion-base) !important;
  transition-timing-function: var(--teddy-motion-ease) !important;
}

html.teddy-motion :is(button, a, [role="button"], .toggle-card, .choice, .channel, .package-card) {
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  html.teddy-motion :is(
    button:not(:disabled),
    [role="button"]:not([aria-disabled="true"]),
    .toggle-card,
    .choice:not(:disabled),
    .channel:not(:disabled),
    .package-card:not(:disabled)
  ):hover {
    transform: translateY(-2px) scale(1.012);
  }

  html.teddy-motion :is(.photo-card, .store-card, .status-card, .panel):hover {
    transform: translateY(-3px);
  }

  html.teddy-motion a:hover :is(i, img, .theme-icon),
  html.teddy-motion button:hover :is(i, img, .theme-icon) {
    transform: scale(1.08) rotate(-2deg);
  }
}

html.teddy-motion :is(
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  a,
  .toggle-card,
  .choice:not(:disabled),
  .channel:not(:disabled),
  .package-card:not(:disabled)
):active,
html.teddy-motion .motion-pressing {
  transform: translateY(1px) scale(.975) !important;
  transition-duration: var(--teddy-motion-fast) !important;
}

html.teddy-motion :is(i, img, .theme-icon, .toggle-ui) {
  transition: transform var(--teddy-motion-base) var(--teddy-motion-spring),
              opacity var(--teddy-motion-base) var(--teddy-motion-ease),
              color var(--teddy-motion-base) var(--teddy-motion-ease);
}

html.teddy-motion .toggle-ui::after {
  transition: transform var(--teddy-motion-base) var(--teddy-motion-spring),
              opacity var(--teddy-motion-base) var(--teddy-motion-ease);
}

html.teddy-motion :is(input, select, textarea):focus {
  transform: translateY(-1px);
}

html.teddy-motion .motion-enter {
  animation: teddy-section-in var(--teddy-motion-slow) var(--teddy-motion-spring) backwards;
  animation-delay: min(var(--teddy-motion-delay, 0ms), 180ms);
}

html.teddy-motion .motion-ripple-host {
  position: relative;
  isolation: isolate;
}

html.teddy-motion .motion-ripple {
  position: absolute;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  margin: -.5rem;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: .2;
  animation: teddy-ripple 720ms var(--teddy-motion-ease) forwards !important;
}

html.teddy-motion .motion-pulse {
  animation: teddy-control-pulse 360ms var(--teddy-motion-spring) backwards !important;
}

@keyframes teddy-page-in {
  from { opacity: .01; }
}

@keyframes teddy-section-in {
  from { opacity: .01; transform: translateY(14px) scale(.992); }
}

@keyframes teddy-ripple {
  to { opacity: 0; transform: scale(18); }
}

@keyframes teddy-control-pulse {
  0% { transform: scale(.98); }
  55% { transform: scale(1.025); }
}

/* Explicit product requirement: do not disable TeddyPayments interaction
   feedback when Windows/browser exposes a reduced-motion performance flag. */
@media (prefers-reduced-motion: reduce) {
  html.teddy-motion body,
  html.teddy-motion .motion-enter {
    animation-duration: var(--teddy-motion-slow) !important;
    animation-iteration-count: 1 !important;
  }

  html.teddy-motion :is(
    button,
    a,
    input,
    select,
    textarea,
    [role="button"],
    .card,
    .panel,
    .photo-card,
    .store-card,
    .status-card,
    .toggle-card,
    .nav-item,
    .choice,
    .channel,
    .package-card
  ) {
    transition-duration: var(--teddy-motion-base) !important;
  }

  html.teddy-motion .motion-ripple {
    animation-duration: 720ms !important;
    animation-iteration-count: 1 !important;
  }
}