/* ─────────────────────────────────────────
   assets/css/animations.css
───────────────────────────────────────── */

/* Page fade-in */
body {
  opacity: 0;
  transition: opacity 0.4s ease;
}
body.page-ready {
  opacity: 1;
}

/* Base hidden state for all animated elements */
.anim-section,
.anim-card,
.anim-image {
  opacity: 0;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: opacity, transform;
  will-change: opacity, transform;
}

/* Sections and footer: slide up from bottom */
.anim-section {
  transform: translateY(40px);
  transition-duration: 0.6s;
}

/* Cards: slide in from the right */
.anim-card {
  transform: translateX(40px);
  transition-duration: 0.5s;
}

/* Images: slide in from the right, slightly subtler */
.anim-image {
  transform: translateX(30px);
  transition-duration: 0.55s;
}

/* Visible state for all */
.anim-section.in-view,
.anim-card.in-view,
.anim-image.in-view {
  opacity: 1;
  transform: translate(0);
}

/* Stagger delay helpers for cards in a row */
.anim-card:nth-child(1) { transition-delay: 0s;    }
.anim-card:nth-child(2) { transition-delay: 0.08s; }
.anim-card:nth-child(3) { transition-delay: 0.16s; }
.anim-card:nth-child(4) { transition-delay: 0.24s; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  body,
  .anim-section,
  .anim-card,
  .anim-image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}