/* GPU-friendly motion with an accessibility fallback. */
@keyframes ui-view-enter {
  from { opacity: 0; transform: translate3d(0, 0.7rem, 0) scale(0.995); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes ui-card-enter {
  from { opacity: 0; transform: translate3d(0, 0.9rem, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-ripple-expand { to { opacity: 0; transform: translate(-50%, -50%) scale(24); } }
@keyframes ui-shimmer { to { transform: translateX(100%); } }
@keyframes ui-loader-track {
  0% { transform: translateX(-120%); }
  65%, 100% { transform: translateX(150%); }
}
@keyframes ui-logo-breathe {
  0%, 100% { transform: scale(0.96); filter: drop-shadow(0 8px 14px rgba(255, 62, 15, 0.2)); }
  50% { transform: scale(1.02); filter: drop-shadow(0 12px 22px rgba(255, 62, 15, 0.36)); }
}
@keyframes ui-ambient-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2rem, 1.4rem, 0) scale(1.06); }
}

html[data-theme] {
body::after { animation: ui-ambient-drift 20s ease-in-out infinite; }

.header-shell, .main-nav, .nav-dropdown, .nav-scrim, .nav-direct, .nav-account,
.nav-group-trigger, .nav-dropdown a, .theme-toggle, .primary-link, .secondary-link,
.header-user-toggle, .header-user-chevron, .header-user-links > a, .header-user-links > button,
.auth-primary, .auth-secondary, .auth-back, .refresh-small, .icon-button,
.pagination button, .tiktok-button, input, select, textarea, .stats article,
.top-levels-panel, .top-donors-panel, .recent-panel, .deban-panel,
.deban-appeal-card, .level-card, .user-card, .member-sidebar button,
.home-moderator-card, .home-level-card, .recent-item,
.modal-close, [data-ui-tooltip]::before {
  transition:
    color var(--ui-fast) var(--ui-ease),
    background-color var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease),
    filter var(--ui-duration) var(--ui-ease),
    opacity var(--ui-duration) var(--ui-ease),
    transform var(--ui-duration) var(--ui-spring);
}

.nav-dropdown, .nav-scrim, .main-nav {
  transition-property: visibility, opacity, transform, max-height, padding, margin;
}

.primary-link::after, .secondary-link::after, .auth-primary::after,
.auth-secondary::after, .refresh-small::after, .tiktok-button::after {
  transition: opacity var(--ui-duration) var(--ui-ease), transform 650ms var(--ui-spring);
}

&[data-ui-ready="true"] .view.active { animation: ui-view-enter var(--ui-slow) var(--ui-spring) both; }
&[data-ui-ready="true"] .view.active.ui-view-enter > :not(script) {
  animation: ui-card-enter 540ms var(--ui-spring) both;
  animation-delay: min(calc(var(--ui-order, 0) * 42ms), 260ms);
}

.modal:not([hidden]) .profile-modal-card { animation: ui-card-enter 340ms var(--ui-spring) both; }
.ui-ripple { animation: ui-ripple-expand 580ms var(--ui-ease) forwards; }
.ui-skeleton::after, [data-ui-skeleton]::after { animation: ui-shimmer 1.5s ease-in-out infinite; }
.ui-boot-loader-mark::before, button.is-loading::before, button[aria-busy="true"]::before { animation: ui-spin 900ms linear infinite; }
.ui-boot-loader-mark img { animation: ui-logo-breathe 1.8s ease-in-out infinite; }
.ui-boot-loader-track span { animation: ui-loader-track 1.25s var(--ui-ease) infinite; }
.ui-boot-loader { transition: visibility 0s linear 420ms, opacity 420ms var(--ui-ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  &[data-ui-ready="true"] .view.active,
  &[data-ui-ready="true"] .view.active.ui-view-enter > :not(script) {
    opacity: 1 !important;
    transform: none !important;
  }
}
}