/* ─── KEYFRAMES ──────────────────────────────────────────── */

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

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* ─── INITIAL VISIBILITY STATES ──────────────────────────── */

.anim-hero-eyebrow,
.anim-hero-headline,
.anim-hero-sub,
.anim-url-form,
.anim-chips {
  opacity: 0;
}

.step-card {
  opacity: 0;
  transform: translateY(60px);
}

/* ─── PROGRESS BAR — INDETERMINATE ───────────────────────── */

.progress-bar__fill.indeterminate {
  width: 30% !important;
  animation: progress-indeterminate 1.4s ease-in-out infinite;
}

/* ─── ASSET ITEM SHIMMER (loading skeleton) ──────────────── */

.asset-item--skeleton .asset-item__name {
  width: 60%;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--color-surface-2) 25%,
    var(--color-border) 50%,
    var(--color-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ─── BUTTON STATES ──────────────────────────────────────── */

.btn--primary.loading {
  pointer-events: none;
}

/* ─── PANEL SLIDE-IN ─────────────────────────────────────── */

.progress-panel {
  transform: translateY(20px);
}

/* ─── HEADER SCROLL EFFECT ───────────────────────────────── */

.header.scrolled {
  box-shadow: 0 1px 0 var(--color-border);
}

/* ─── CHIP PRESS FEEDBACK ────────────────────────────────── */

.chip:active {
  transform: scale(0.96);
}

/* ─── GLOW PULSE ON SUCCESS ──────────────────────────────── */

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--color-accent-glow); }
  50%       { box-shadow: 0 0 40px rgba(79,70,229,0.3); }
}

.btn--primary:not(:disabled) {
  animation: glow-pulse 3s ease-in-out infinite;
}

.btn--primary:hover,
.btn--primary.loading {
  animation: none;
}

/* ─── FOCUS RING ACCENT ──────────────────────────────────── */

.url-input:focus {
  box-shadow: 0 0 0 3px var(--color-accent-glow), 0 0 20px var(--color-accent-glow);
}