/* ── Keyframes ──────────────────────── */

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

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

@keyframes sweep {
  0%, 50% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(138, 26, 42, 0); }
  50%      { transform: scale(1.02); box-shadow: 0 0 0 12px rgba(138, 26, 42, 0.06); }
}

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

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

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

/* ── Utility classes ───────────────── */

.anim-fade {
  animation: iv-fade var(--duration-normal) var(--ease-out) both;
}
.anim-slide {
  animation: iv-slide var(--duration-normal) var(--ease-out) both;
}
.anim-float {
  animation: float 4s ease-in-out infinite;
}
.anim-pulse {
  animation: pulse-glow 4s ease-in-out infinite;
}

/* Stagger delays */
.stagger-1 { animation-delay: 0.15s; }
.stagger-2 { animation-delay: 0.30s; }
.stagger-3 { animation-delay: 0.45s; }
.stagger-4 { animation-delay: 0.60s; }
.stagger-5 { animation-delay: 0.75s; }
.stagger-6 { animation-delay: 0.90s; }

/* Live indicator dot */
.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-pulse 1.6s ease-in-out infinite;
  display: inline-block;
}

/* Pending dots */
.pending-dots {
  display: flex;
  gap: 8px;
}
.pending-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-pulse 1.8s ease-in-out infinite;
}
.pending-dots .dot:nth-child(2) { animation-delay: 0.3s; }
.pending-dots .dot:nth-child(3) { animation-delay: 0.6s; }

/* Cursor blink */
.cursor-blink {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}

/* ── View transitions (progressive) ── */

@supports (view-transition-name: foo) {
  ::view-transition-old(root) {
    animation: 0.3s ease-out both fade-out;
  }
  ::view-transition-new(root) {
    animation: 0.3s ease-out both fade-in;
  }
  @keyframes fade-out {
    to { opacity: 0; transform: translateX(-15px); }
  }
  @keyframes fade-in {
    from { opacity: 0; transform: translateX(30px); }
  }
}