/* ===== HERO ENTRANCE ===== */
.animate-hero {
  animation: heroReveal 1.2s ease-out forwards;
  opacity: 0;
}

@keyframes heroReveal {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ===== PROBLEM / SOLUTION ENTRANCE ===== */
.animate-ps {
  opacity: 0;
  animation: psReveal 1.2s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes psReveal {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ===== HOW I WORK ENTRANCE ===== */
.animate-work {
  opacity: 0;
  animation: workReveal 1.2s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes workReveal {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ===== WHO IS IT FOR ENTRANCE ===== */
.animate-fit {
  opacity: 0;
  animation: fitReveal 1.2s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes fitReveal {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ===== WHAT'S INCLUDED ENTRANCE ===== */
.animate-inc {
  opacity: 0;
  animation: incReveal 1.2s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes incReveal {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ===== FINAL CTA ENTRANCE ===== */
.animate-cta {
  opacity: 0;
  animation: ctaReveal 1.2s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes ctaReveal {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}






/* ===== PORTFOLIO ENTRANCE ===== */
.animate-port {
  opacity: 0;
  animation: portReveal 1.2s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes portReveal {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}