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

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-fade-up {
  animation: fade-up var(--duration-normal) var(--ease-out);
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent-primary);
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

.loading-spinner--lg {
  width: var(--space-8);
  height: var(--space-8);
  border-width: 3px;
}

::view-transition-old(root) {
  animation: fade-out var(--duration-fast) var(--ease-in);
}

::view-transition-new(root) {
  animation: fade-in var(--duration-fast) var(--ease-out);
}

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

::view-transition-old(step-editor) {
  animation: fade-out var(--duration-fast) var(--ease-in);
}

::view-transition-new(step-editor) {
  animation: fade-in var(--duration-normal) var(--ease-out);
}

#step_editor {
  view-transition-name: step-editor;
}

.launch-overlay__spinner {
  border-top-color: var(--accent-primary);
}

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}
.typing-dots[hidden] { display: none; }
.typing-dots span {
  width: var(--space-1-5);
  height: var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--text-tertiary);
  animation: typing-dot 1.2s var(--ease-in-out) infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(calc(var(--space-1) * -1)); }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots span { animation: none; }
}

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