/* =========================================================== */

/* Soft slide-UP entrance  (bottom → top) */

/* =========================================================== */

/* 1 ─ global rise-up for .animate-fade ---------------------- */

@keyframes slideSoftDown {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  80% {
    opacity: 0.8;
    transform: translateY(-3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* starting state now below the viewport */

.animate-fade {
  opacity: 0;
  transform: translateY(24px);
}

.animate-fade.run {
  animation: slideSoftDown 4s var(--d,0s) cubic-bezier(.19,1,.22,1) forwards;
}

/* 2 ─ project-card tilt (LEFT) ------------------------------ */

@keyframes tiltSoftLeft {
  0% {
    opacity: 0;
    transform: translateY(24px) rotate(-8deg);
  }
  85% {
    opacity: 0.8;
    transform: translateY(-3px) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

.card-tilt-left {
  transform-origin: bottom left;
  opacity: 0;
  transform: translateY(24px) rotate(-8deg);
}

.card-tilt-left.run {
  animation: tiltSoftLeft 3s var(--d,0s) cubic-bezier(.19,1,.22,1) forwards;
}

/* 3 ─ project-card tilt (RIGHT) ----------------------------- */

@keyframes tiltSoftRight {
  0% {
    opacity: 0;
    transform: translateY(24px) rotate(8deg);
  }
  85% {
    opacity: 0.8;
    transform: translateY(-3px) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

.card-tilt-right {
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(24px) rotate(8deg);
}

.card-tilt-right.run {
  animation: tiltSoftRight 3s var(--d,0s) cubic-bezier(.19,1,.22,1) forwards;
}

/* reduced-motion users still skip animations ---------------- */

@media (prefers-reduced-motion: reduce) {
  .animate-fade, .animate-fade.run, .card-tilt-left, .card-tilt-right {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* 1. Keyframes */

/* simple slide in from left */

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  80% {
    opacity: 0.8;
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* bounce for the last card */

@keyframes slideInLeftBounce {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  60% {
    opacity: 0.6;
    transform: translateX(0);
  }
  80% {
    opacity: 0.8;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 2. Base state for cards */

.animate-on-load-left {
  opacity: 0;
  transform: translateX(-100%);
}

/* 3. Triggered state */

.animate-on-load-left.run {
  animation: slideInLeft 0.7s var(--d, 0s) cubic-bezier(.19,1,.22,1) forwards;
}

/* 4. Bounce for the last direct child */

.step-cards > .animate-on-load-left.run:last-child {
  animation-name: slideInLeftBounce;
}

/* 5. Reduced-motion fallback */

@media (prefers-reduced-motion: reduce) {
  .animate-on-load-left, .animate-on-load-left.run {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── 1. Keyframes ─────────────────────────────────────────── */

/* Simple slide in from left */

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  80% {
    opacity: 0.8;
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Bounce for the last card */

@keyframes slideInLeftBounce {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  60% {
    opacity: 0.4;
    transform: translateX(0);
  }
  80% {
    opacity: 0.7;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── 2. Base state ───────────────────────────────────────── */

.animate-on-load-left {
  opacity: 0;
  transform: translateX(-100%);
}

/* ── 3. Triggered (when .run is added) ──────────────────── */

.animate-on-load-left.run {
  animation: slideInLeftBounce 0.9s var(--d) ease-out forwards;
}

/* ── 4. Bounce override for the very last card ──────────── */

.step-cards > .animate-on-load-left.run:last-child {
  animation-name: slideInLeftBounce;
}

/* ── 5. Respect reduced-motion ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .animate-on-load-left, .animate-on-load-left.run {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Base state — cards sit off-screen left */

.animate-on-scroll-left {
  opacity: 0;
  transform: translateX(-100%);
}

/* When .run is added, slide in */

.animate-on-scroll-left.run {
  animation: slideInLeft 0.7s var(--d) cubic-bezier(.19,1,.22,1) forwards;
}

/* Last card bounce override */

.step-cards > .animate-on-scroll-left.run:last-child {
  animation-name: slideInLeftBounce;
}

/* Reduced-motion fallback */

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll-left, .animate-on-scroll-left.run {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}