/* animations.css — Your work goes here. */

/* ============================================================
   SCROLL-DRIVEN ANIMATIONS
   ============================================================ */

/* reading progress bar */
@keyframes progressFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.progress-bar {
  animation: progressFill;
  animation-timeline: scroll(root block);
  animation-fill-mode: both;
}

/* cards fade in as they enter */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeUp;
  animation-timeline: view();
  animation-range: entry 0% entry 50%;
  animation-fill-mode: both;
}

/* feature section from left */
@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-3rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.feature-section--left {
  animation: slideLeft;
  animation-timeline: view();
  animation-range: entry 0% entry 50%;
  animation-fill-mode: both;
}

/* feature section from right */
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(3rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.feature-section--right {
  animation: slideRight;
  animation-timeline: view();
  animation-range: entry 0% entry 50%;
  animation-fill-mode: both;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .progress-bar,
  .card,
  .feature-section--left,
  .feature-section--right {
    animation: none;
    opacity: 1;
    transform: none;
  }
}