/* Shared interaction motion. Page content is intentionally stable on first paint. */
:root {
  --teddy-motion-fast: 140ms;
  --teddy-motion-base: 220ms;
  --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 :is(
  button,
  a,
  input,
  select,
  textarea,
  [role="button"],
  .card,
  .photo-card,
  .store-card,
  .status-card,
  .toggle-card,
  .nav-item,
  .choice,
  .channel,
  .package-card,
  .staff-card,
  .discord-profile,
  .guide-chat__launcher,
  .page-stats
) {
  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 a:hover :is(i, .theme-icon),
  html.teddy-motion button:hover :is(i, .theme-icon) {
    transform: scale(1.06);
  }
}

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 {
  transform: translateY(1px) scale(.975) !important;
  transition-duration: var(--teddy-motion-fast) !important;
}

html.teddy-motion :is(i, .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);
}

@media (prefers-reduced-motion: reduce) {
  html.teddy-motion :is(
    button,
    a,
    input,
    select,
    textarea,
    [role="button"],
    .card,
    .photo-card,
    .store-card,
    .status-card,
    .toggle-card,
    .nav-item,
    .choice,
    .channel,
    .package-card,
    .staff-card,
    .discord-profile,
    .guide-chat__launcher,
    .page-stats
  ) {
    transition-duration: 1ms !important;
  }

  html.teddy-motion :is(.fa-beat, .fa-beat-fade, .fa-bounce, .fa-fade, .fa-flip, .fa-pulse, .fa-shake, .fa-spin, .fa-spin-pulse) {
    animation: none !important;
  }
}