/* Ambient drifts */
@keyframes drift-accent {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.05); }
}
@keyframes drift-info {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-30px, 40px) scale(1.08); }
}

/* Hero device float */
@keyframes device-float {
  from { transform: translateY(0) rotate(-1.2deg); }
  to   { transform: translateY(-10px) rotate(-1.2deg); }
}

/* Diagram link dashes */
@keyframes dash-flow {
  to { stroke-dashoffset: -22; }
}

/* Step player hotspot pulse */
@keyframes pulse-hotspot {
  0%   { box-shadow: 0 0 0 0    rgba(61, 220, 151, 0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(61, 220, 151, 0); }
  100% { box-shadow: 0 0 0 0    rgba(61, 220, 151, 0); }
}

/* Step player success sweep */
@keyframes border-sweep {
  0%   { border-color: var(--glass-border); box-shadow: 0 0 0 0 rgba(61,220,151,0); }
  50%  { border-color: var(--accent);       box-shadow: 0 0 24px 4px rgba(61,220,151,0.3); }
  100% { border-color: var(--glass-border); box-shadow: 0 0 0 0 rgba(61,220,151,0); }
}

/* Fade + slide in (view transitions fallback) */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Live dot pulse */
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0   rgba(61,220,151,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(61,220,151,0); }
  100% { box-shadow: 0 0 0 0   rgba(61,220,151,0); }
}

/* Step card stagger entrance */
.step-card { animation: fade-up var(--dur) var(--ease-out) both; }
.step-card:nth-child(1) { animation-delay: 0ms; }
.step-card:nth-child(2) { animation-delay: 60ms; }
.step-card:nth-child(3) { animation-delay: 120ms; }
.step-card:nth-child(4) { animation-delay: 180ms; }

/* View Transitions API */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade-in var(--dur) var(--ease-out) reverse; }
::view-transition-new(root) { animation: fade-up var(--dur) var(--ease-out); }

/* Reduced motion: kill everything */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ambient-blob { animation: none; }
}