/* ================= Motion-only overrides =================
   Motion stays secondary to content and never changes layout,
   colors, header/footer styling, or existing hover color behavior.
========================================================== */

/*
  Motion hierarchy:
  - Home hero text: uses the original home.css animation unchanged.
  - Section headings/large blocks: short vertical reveal.
  - Repeated cards: fade in place only. No horizontal travel or scale.
*/

/*
  Existing home.css uses transition-based reveal styles.
  This layer switches reveal to animation so hover transitions stay separate.
*/
.scroll-reveal {
  opacity: 1;
  transform: none;
  transition: none;
  animation-name: sectionReveal;
  animation-duration: 0.82s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: var(--reveal-delay, 0ms);
}

.scroll-reveal.is-visible {
  animation-play-state: running;
}

/* Cards fade exactly where the existing grid placed them. */
.scroll-reveal.reveal-card {
  animation-name: cardReveal;
  animation-duration: 0.72s;
  animation-timing-function: ease-out;
}

/* Restore the original hover transitions for home cards. */
.approach-grid article.scroll-reveal.reveal-card {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.work-card.scroll-reveal.reveal-card,
.recent-card.scroll-reveal.reveal-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@keyframes sectionReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes cardReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1 !important;
    animation: none !important;
  }
}