@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.875rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(1.875rem);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(calc(-100% - 2rem));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(calc(100% + 2rem));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100vh);
  }
}

@keyframes scaleInBounce {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.15);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scaleInPop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 184, 74, 0);
  }
  50% {
    box-shadow: 0 0 1.125rem rgba(255, 184, 74, 0.45);
  }
}

@keyframes pulseBeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes emberPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25);
  }
}

@keyframes logoPulse {
  0%,
  90%,
  100% {
    filter: drop-shadow(0 8px 24px rgba(255, 121, 0, 0.36));
  }
  94% {
    filter: drop-shadow(0 10px 30px rgba(255, 168, 82, 0.7));
  }
  97% {
    filter: drop-shadow(0 12px 34px rgba(255, 210, 140, 0.8));
  }
}

@keyframes logoAura {
  0%,
  90%,
  100% {
    opacity: 0;
  }
  94% {
    opacity: 0.65;
  }
  97% {
    opacity: 0.35;
  }
}

@keyframes logoSweep {
  0%,
  10% {
    opacity: 0;
    -webkit-mask-position: -100% 0%;
    mask-position: -100% 0%;
  }
  12% {
    opacity: 0.85;
  }
  18% {
    opacity: 0.85;
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%;
  }
  20%,
  100% {
    opacity: 0;
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%;
  }
}

@keyframes hudBarTextureDrift {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 0 0, 6rem 0;
  }
}

@keyframes hudBarSurfaceShift {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 9rem 0, -11rem 0, 7rem 0, 4.4rem 0, 0 0.42rem;
  }
}

@keyframes screenShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(0.1875rem);
  }
  40% {
    transform: translateX(-0.1875rem);
  }
  60% {
    transform: translateX(0.1875rem);
  }
  80% {
    transform: translateX(-0.1875rem);
  }
}

@keyframes typewriterCursor {
  0%,
  49% {
    border-color: transparent;
  }
  50%,
  100% {
    border-color: var(--color-accent);
  }
}

@keyframes fadeInRow {
  from {
    opacity: 0;
    transform: translateY(0.9rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes settleIntoHistory {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0.85;
    transform: translateY(1.25rem) scale(0.97);
  }
}

@keyframes settleCardDown {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0.75rem) scale(0.98);
  }
}

.state-screen {
  animation: fadeInUp var(--animation-speed-normal) ease-out;
}

.card-slide-in-left {
  animation: slideInLeft calc(var(--animation-speed-normal) * 1.75) cubic-bezier(0.42, 0.06, 0.16, 1) both;
}

.card-slide-in-right {
  animation: slideInRight calc(var(--animation-speed-normal) * 1.75) cubic-bezier(0.42, 0.06, 0.16, 1) 0.28s both;
}

.card-slide-out-down {
  animation: slideOutDown var(--animation-speed-slow) ease-out;
}

.card-settle-down {
  animation: settleCardDown var(--animation-speed-normal) ease-out;
}

#llm_answer_raw.is-streaming {
  border-right: 0;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .state-screen,
  .card-slide-in-left,
  .card-slide-in-right,
  .card-slide-out-down,
  .card-settle-down,
  .scorecard-row-enter,
  .vs-label,
  .logo-sweep,
  .hero__ember,
  #llm_answer_raw.is-streaming,
  .hud-meter-fill,
  .hud-meter-fill::before,
  .hud-pulse,
  .screen-shake {
    animation: none !important;
    transition: none !important;
  }

  .scorecard-details-body {
    transition: none !important;
  }
}