/* Theme transitions: ONLY while html.is-theme-animating
   (always-on 1s transitions on .panel/.nav-pill caused dashboard jank). */

:root {
  --theme-transition-duration: 0.55s;
  --theme-transition-ease: ease;
  --theme-transition-surface-delay: 0s;
  --theme-transition-bg-delay: 0.08s;
}

html.is-theme-animating {
  transition:
    background-color var(--theme-transition-duration) var(--theme-transition-ease)
      var(--theme-transition-bg-delay),
    color var(--theme-transition-duration) var(--theme-transition-ease)
      var(--theme-transition-bg-delay);
}

html.is-theme-animating body {
  transition:
    background-color var(--theme-transition-duration) var(--theme-transition-ease)
      var(--theme-transition-bg-delay),
    color var(--theme-transition-duration) var(--theme-transition-ease)
      var(--theme-transition-bg-delay);
}

html.is-theme-animating .site-header,
html.is-theme-animating .panel,
html.is-theme-animating .metric-card,
html.is-theme-animating .link-card,
html.is-theme-animating .nav-pill,
html.is-theme-animating .internal-bar,
html.is-theme-animating .donate-paid-card,
html.is-theme-animating .tier-card,
html.is-theme-animating .site-footer,
html.is-theme-animating .hero-copy,
html.is-theme-animating .page-auth__copy {
  transition:
    background-color var(--theme-transition-duration) var(--theme-transition-ease)
      var(--theme-transition-surface-delay),
    color var(--theme-transition-duration) var(--theme-transition-ease)
      var(--theme-transition-surface-delay),
    border-color var(--theme-transition-duration) var(--theme-transition-ease)
      var(--theme-transition-surface-delay);
}

/* Interactive chrome — short hover only */
.auth-card,
.btn,
.btn-primary,
.btn-orange,
.btn-secondary {
  transition:
    background 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-transition-duration: 0.01ms;
    --theme-transition-bg-delay: 0s;
  }

  html.is-theme-animating,
  html.is-theme-animating body,
  html.is-theme-animating .site-header,
  html.is-theme-animating .panel,
  .auth-card,
  .btn,
  .btn-primary,
  .btn-orange,
  .btn-secondary {
    transition: none;
  }
}
