/* Victory — shared motion & micro-interactions (site-wide) */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.18s;
  --dur-med: 0.38s;
  --dur-slow: 0.55s;
}

/* ── Page shell ── */
body.vt-page:not(.vt-ready) .vt-shell {
  opacity: 0;
}

body.vt-page.vt-ready .vt-shell {
  animation: vtShellEnter var(--dur-slow) var(--ease-out-expo) both;
}

@keyframes vtShellEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.vt-page.vt-ready .vt-page-head > * {
  animation: vtTextIn var(--dur-med) var(--ease-out-expo) both;
}

body.vt-page.vt-ready .vt-page-head > *:nth-child(1) {
  animation-delay: 0.06s;
}
body.vt-page.vt-ready .vt-page-head > *:nth-child(2) {
  animation-delay: 0.12s;
}
body.vt-page.vt-ready .vt-page-head > *:nth-child(3) {
  animation-delay: 0.18s;
}

@keyframes vtTextIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered blocks (cards, sections, list rows) */
.vt-stagger > .vt-rise,
.vt-stagger > .card,
.vt-stagger > .section-card,
.vt-stagger > .hero-card,
.vt-stagger > .bot-row,
.vt-stagger > .feature,
.vt-stagger > .legend {
  opacity: 0;
}

body.vt-page.vt-ready .vt-stagger > .vt-rise,
body.vt-page.vt-ready .vt-stagger > .metric-tile,
body.vt-page.vt-ready .vt-stagger > .vt-animate-in,
body.vt-page.vt-ready .vt-stagger-active > .vt-animate-in {
  animation: vtRise var(--dur-med) var(--ease-out-expo) both;
  animation-delay: calc(var(--vt-i, 0) * 55ms + 0.08s);
}

@keyframes vtRise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Initial stagger without JS (static children) */
body.vt-page.vt-ready .vt-stagger > .card:nth-child(1),
body.vt-page.vt-ready .vt-stagger > .section-card:nth-child(1),
body.vt-page.vt-ready .vt-stagger > .hero-card:nth-child(1) {
  --vt-i: 0;
}
body.vt-page.vt-ready .vt-stagger > .card:nth-child(2),
body.vt-page.vt-ready .vt-stagger > .section-card:nth-child(2) {
  --vt-i: 1;
}
body.vt-page.vt-ready .vt-stagger > .section-card:nth-child(3) {
  --vt-i: 2;
}
body.vt-page.vt-ready .vt-stagger > .section-card:nth-child(4) {
  --vt-i: 3;
}
body.vt-page.vt-ready .vt-stagger > .section-card:nth-child(5) {
  --vt-i: 4;
}
body.vt-page.vt-ready .vt-stagger > .feature:nth-child(1) {
  --vt-i: 1;
}
body.vt-page.vt-ready .vt-stagger > .feature:nth-child(2) {
  --vt-i: 2;
}
body.vt-page.vt-ready .vt-stagger > .feature:nth-child(3) {
  --vt-i: 3;
}

/* ── Interactive primitives ── */
body.vt-page .btn,
body.vt-page .bot-row,
body.vt-lobby-page .pill,
body.vt-lobby-page .param-modal-close,
body.vt-lobby-page .skin-modal-close,
body.vt-lobby-page .emote-wheel-close {
  transition:
    transform var(--dur-fast) var(--ease-out-back),
    box-shadow var(--dur-fast) var(--ease-smooth),
    filter var(--dur-fast) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth),
    background var(--dur-fast) var(--ease-smooth);
}

body.vt-page .btn:hover:not(:disabled),
body.vt-page a.btn:hover {
  transform: translateY(-2px);
}

body.vt-page .btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

body.vt-page .bot-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), 0 0 28px rgba(14, 165, 233, 0.14);
}

body.vt-page .input-wrap:focus-within,
body.vt-page input:focus-visible,
body.vt-page textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--vt-accent-soft, rgba(14, 165, 233, 0.15));
  transition: box-shadow var(--dur-fast) var(--ease-smooth);
}

.vt-pulse {
  animation: vtPulse 0.5s var(--ease-out-back);
}

@keyframes vtPulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.06);
    color: #7dd3fc;
  }
  100% {
    transform: scale(1);
  }
}

/* Alerts */
body.vt-page .alert.show {
  animation: vtAlertIn var(--dur-med) var(--ease-out-back) both;
}

@keyframes vtAlertIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Live indicator */
.live-dot {
  animation: vtLivePulse 2s var(--ease-smooth) infinite;
}

@keyframes vtLivePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.88);
  }
}

/* ── Party lobby page ── */
body.vt-lobby-page:not(.vt-ready) .page {
  opacity: 0;
}

body.vt-lobby-page.vt-ready .page {
  animation: vtShellEnter var(--dur-slow) var(--ease-out-expo) both;
}

body.vt-lobby-page.vt-ready .lobby-header {
  animation: vtTextIn calc(var(--dur-med) + 0.05s) var(--ease-out-expo) both;
}

body.vt-lobby-page .lobby-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(14, 165, 233, 0.08), transparent 70%);
  animation: vtBgBreath 8s var(--ease-smooth) infinite alternate;
  pointer-events: none;
}

@keyframes vtBgBreath {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

body.vt-lobby-page.vt-ready .party-frame {
  animation: vtPanelIn var(--dur-med) var(--ease-out-expo) both;
  animation-delay: 0.12s;
}

@keyframes vtPanelIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.vt-lobby-page .row.vt-slots-ready .slot.vt-slot-in {
  animation: vtSlotIn 0.48s var(--ease-out-expo) both;
  animation-delay: calc(var(--vt-i, 0) * 70ms + 0.15s);
}

@keyframes vtSlotIn {
  from {
    opacity: 0;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.slot.player.join-flash .platform-disc {
  animation: vtJoinFlash 0.65s var(--ease-out-expo);
}

@keyframes vtJoinFlash {
  0% {
    box-shadow: 0 0 0 rgba(52, 211, 153, 0);
  }
  40% {
    box-shadow: 0 0 32px rgba(52, 211, 153, 0.75);
  }
  100% {
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.2);
  }
}

/* Modals / overlays */
.vt-overlay.vt-overlay-open {
  animation: vtOverlayBg var(--dur-fast) var(--ease-smooth) both;
}

.vt-overlay.vt-overlay-open .emote-wheel-panel,
.vt-overlay.vt-overlay-open .skin-modal-panel,
.vt-overlay.vt-overlay-open .param-modal-panel,
.vt-overlay.vt-overlay-open .cos-modal-glow {
  animation: vtModalPanel var(--dur-med) var(--ease-out-back) both;
}

.vt-overlay.vt-overlay-closing {
  animation: vtOverlayBgOut 0.22s var(--ease-smooth) forwards;
}

.vt-overlay.vt-overlay-closing .emote-wheel-panel,
.vt-overlay.vt-overlay-closing .skin-modal-panel,
.vt-overlay.vt-overlay-closing .param-modal-panel,
.vt-overlay.vt-overlay-closing .cos-modal-glow {
  animation: vtModalPanelOut 0.22s var(--ease-smooth) forwards;
}

@keyframes vtOverlayBg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes vtOverlayBgOut {
  to {
    opacity: 0;
  }
}

@keyframes vtModalPanel {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes vtModalPanelOut {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}

body.vt-lobby-page .emote-wheel-slot.filled {
  transition: transform var(--dur-fast) var(--ease-out-back), box-shadow var(--dur-fast);
}

body.vt-lobby-page .emote-wheel-slot.filled:hover {
  transform: scale(1.08);
}

body.vt-lobby-page .skin-result {
  transition: transform var(--dur-fast) var(--ease-out-back), border-color var(--dur-fast);
}

body.vt-lobby-page .skin-result:hover {
  transform: translateY(-2px);
}

/* Copy button success */
.vt-copy-ok {
  animation: vtCopyPop 0.45s var(--ease-out-back);
}

@keyframes vtCopyPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
    filter: brightness(1.1);
  }
  100% {
    transform: scale(1);
  }
}

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

  body.vt-page:not(.vt-ready) .vt-shell,
  body.vt-lobby-page:not(.vt-ready) .page {
    opacity: 1;
  }

  body.vt-page .bot-row:hover,
  body.vt-page .btn:hover:not(:disabled) {
    transform: none;
  }

  .live-dot {
    animation: none;
  }
}