/* --- Base animation (fade + slide) --- */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* FROM BELOW */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-20px); /* FROM ABOVE */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadesIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- Animate from below --- */
.from-bottom {
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out forwards;
}

/* --- Animate from above --- */
.from-top {
  opacity: 0;
  animation: fadeSlideDown 0.8s ease-out forwards;
}

.fade {
  opacity: 0;
  animation: fadesIn 0.8s ease-out forwards;
}

/* --- Staggered delays --- */
.delay-0   { animation-delay: 0s; }
.delay-1   { animation-delay: 0.05s; }
.delay-2   { animation-delay: 0.10s; }
.delay-3   { animation-delay: 0.15s; }
.delay-4   { animation-delay: 0.20s; }
.delay-5   { animation-delay: 0.25s; }
.delay-6   { animation-delay: 0.30s; }
.delay-7   { animation-delay: 0.35s; }
.delay-8   { animation-delay: 0.40s; }
.delay-9   { animation-delay: 0.45s; }
.delay-10   { animation-delay: 0.50s; }
.delay-11   { animation-delay: 0.55s; }
.delay-12   { animation-delay: 0.60s; }


/* header */

/* Scroll-change animations ONLY for title switch */
@keyframes titleChangeFromBottom {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes titleChangeFromTop {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.title-animate-bottom {
  animation: titleChangeFromBottom 0.35s ease-out forwards;
}

.title-animate-top {
  animation: titleChangeFromTop 0.35s ease-out forwards;
}