/**
 * Shared UI motion — linked from wwwroot pages + dev mocks.
 * Respects prefers-reduced-motion.
 */

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

@keyframes ui-fade-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ui-scale-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ui-card-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-row-in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ui-podium-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-tab-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ui-icon-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  70% {
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ui-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Panels (login, payment-plans, payment-result, dev hub) ── */
.ui-panel-enter {
  animation: ui-scale-in 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Play: lobby ── */
.ui-header-enter {
  animation: ui-fade-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ui-header-enter .header__nav a {
  animation: ui-fade-in 0.4s ease-out both;
}

.ui-header-enter .header__nav a:nth-child(1) {
  animation-delay: 0.12s;
}

.ui-header-enter .header__nav a:nth-child(2) {
  animation-delay: 0.2s;
}

.ui-card-enter {
  animation: ui-card-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--enter-delay, 0ms);
}

.ui-tab-enter {
  animation: ui-tab-in 0.36s ease-out both;
  animation-delay: calc(var(--tab-i, 0) * 42ms);
}

.ui-section-reveal {
  animation: ui-fade-rise 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

.ui-state-enter {
  animation: ui-scale-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ui-state-enter .state__icon-wrap {
  animation: ui-icon-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both;
}

/* ── Leaderboard ── */
.ui-page-header-enter {
  animation: ui-fade-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ui-podium-card {
  animation: ui-podium-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--podium-delay, 0ms);
}

.ui-row-enter {
  animation: ui-row-in 0.42s ease-out both;
  animation-delay: calc(var(--row-i, 0) * 48ms);
}

.ui-table-wrap-enter {
  animation: ui-fade-rise 0.45s ease-out 0.12s both;
}

/* ── Payment plans rows ── */
.ui-plan-row {
  animation: ui-card-in 0.42s ease-out both;
  animation-delay: calc(var(--plan-i, 0) * 58ms);
}

/* ── Payment result ── */
.result-card.ui-panel-enter {
  animation: ui-scale-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.status-icon.ok,
.status-icon.bad {
  animation: ui-icon-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

body.success-state .status-title.ok,
body.error-state .status-title.bad {
  animation: ui-fade-rise 0.4s ease-out both;
}

body.success-state .status-detail:not(:empty),
body.error-state .status-detail:not(:empty) {
  animation: ui-fade-in 0.45s ease-out 0.08s both;
}

/* ── Landing (index) ── */
.ui-landing-hero > * {
  animation: ui-fade-rise 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ui-landing-hero > *:nth-child(1) {
  animation-delay: 0.04s;
}

.ui-landing-hero > *:nth-child(2) {
  animation-delay: 0.1s;
}

.ui-landing-hero > *:nth-child(3) {
  animation-delay: 0.16s;
}

.ui-landing-hero > *:nth-child(4) {
  animation-delay: 0.22s;
}

.ui-landing-hero > *:nth-child(5) {
  animation-delay: 0.3s;
}

.ui-landing-hero > *:nth-child(6) {
  animation-delay: 0.38s;
}

.ui-landing-hero .cta {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* ── Subtle link / button polish (non-breaking) ── */
a.ui-soft-hover {
  transition: transform 0.15s ease, opacity 0.15s ease;
}

a.ui-soft-hover:hover {
  transform: translateY(-1px);
}