/* =============================================
  animations.css — PixieConverter Keyframes
  ============================================= */

/* ─── Entry Animations ───────────────────────── */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

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

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

/* ─── Loading / Progress ─────────────────────── */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

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

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--color-success); }
  50%       { opacity: 0.6; box-shadow: 0 0 4px var(--color-success); }
}

/* ─── Toast Animations ───────────────────────── */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(24px) scale(0.95);
  }
}

/* ─── Hero Background ────────────────────────── */
@keyframes mesh-drift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(1deg); }
  66%       { transform: translateY(-5px) rotate(-1deg); }
}

/* ─── Upload Zone ────────────────────────────── */
@keyframes border-pulse {
  0%, 100% {
    border-color: var(--color-accent-2);
    box-shadow: 0 0 20px var(--color-accent-2-glow);
  }
  50% {
    border-color: var(--color-accent);
    box-shadow: 0 0 40px var(--color-accent-glow);
  }
}

.upload-zone.drag-over {
  animation: border-pulse 1.5s ease infinite;
}

/* ─── Format Pill Entrance ───────────────────── */
@keyframes pill-pop {
  from { opacity: 0; transform: scale(0.8) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.format-pill {
  animation: pill-pop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

/* Stagger pills */
.format-pill:nth-child(1) { animation-delay: 0.05s; }
.format-pill:nth-child(2) { animation-delay: 0.10s; }
.format-pill:nth-child(3) { animation-delay: 0.15s; }
.format-pill:nth-child(4) { animation-delay: 0.20s; }
.format-pill:nth-child(5) { animation-delay: 0.25s; }
.format-pill:nth-child(6) { animation-delay: 0.30s; }
.format-pill:nth-child(7) { animation-delay: 0.35s; }

/* ─── Success Checkmark ──────────────────────── */
@keyframes check-pop {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.status-icon-success {
  display: inline-block;
  animation: check-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ─── Stats Counter ──────────────────────────── */
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Page Load Stagger ──────────────────────── */
.hero-badge      { animation: fade-up 0.5s ease 0.1s backwards; }
.hero h1         { animation: fade-up 0.5s ease 0.2s backwards; }
.hero-subtitle   { animation: fade-up 0.5s ease 0.3s backwards; }
.hero-format-badges { animation: fade-up 0.5s ease 0.4s backwards; }
.hero-stats      { animation: fade-up 0.5s ease 0.5s backwards; }