.reveal {
  /* Shared entrance animation used by most cards and sections. */
  opacity: 0;
  transform: translateY(18px);
  animation: fade-up 700ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.stagger-1 { animation-delay: 60ms; }
.stagger-2 { animation-delay: 120ms; }
.stagger-3 { animation-delay: 180ms; }
.stagger-4 { animation-delay: 240ms; }
.stagger-5 { animation-delay: 300ms; }
.stagger-6 { animation-delay: 360ms; }
.stagger-7 { animation-delay: 420ms; }
.stagger-8 { animation-delay: 480ms; }
.stagger-9 { animation-delay: 540ms; }

.pulse-dot {
  /* The glowing status/first-blood dot uses a looping pulse animation. */
  animation: pulse-dot 2s ease-in-out infinite;
}

.sparkline-path {
  /* Dashboard sparkline appears to draw itself on load. */
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: draw-line 900ms ease-out 280ms forwards;
}

.feed-row.feed-row--incoming {
  animation: feed-in 350ms ease-out forwards;
}

.bar-fill.is-animating {
  /* Width animation reads the target from the --bar-target custom property. */
  animation: bar-grow 720ms cubic-bezier(0.22, 1.15, 0.2, 1) forwards;
}

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

@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
    box-shadow: 0 0 0 0 rgba(255, 180, 0, 0.48);
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
    box-shadow: 0 0 0 8px rgba(255, 180, 0, 0);
  }
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes feed-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bar-grow {
  0% {
    width: 0;
  }

  72% {
    width: calc(var(--bar-target) + 3%);
  }

  100% {
    width: var(--bar-target);
  }
}