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

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

/* Reading Progress Bar */
@keyframes transform-animation {
   from {
      transform: scaleX(0);
   }
   to {
      transform: scaleX(1);
   }
}

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

/* Card Entrance */
.card {
   animation-name: card-spawn;
   animation-timeline: view();
   animation-range: entry 0% entry 50%;
   animation-fill-mode: both;
}

@keyframes card-spawn {
   from {
      opacity: 0;
      transform: translateY(1.5rem);
   } to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Feature Section Left */
@keyframes section-animation-left {
   from  {
      opacity: 0;
      transform: translateX(-3rem);
   } to {
      opacity: 1;
      transform: translateX(0);
   }
}

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

/* Feature Section Right */
@keyframes section-animation-right {
   from  {
      opacity: 0;
      transform: translateX(3rem);
   } to {
      opacity: 1;
      transform: translateX(0);
   }
}

.feature-section--right {
   animation-range: entry 0% entry 50%;
   animation-name: section-animation-right;
   animation-timeline: view();
   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;
   }
}