/* =========================  HOME PAGE STARTS ========================= */
/* =========================
   BASE ANIMATIONS
========================= */

/* Hidden state */
.animate {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

/* Visible */
.animate.show {
  opacity: 1;
  transform: translateY(0);
}

/* Left animation */
.animate-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.8s ease;
}

.animate-left.show {
  opacity: 1;
  transform: translateX(0);
}

/* Right animation */
.animate-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.8s ease;
}

.animate-right.show {
  opacity: 1;
  transform: translateX(0);
}

/* Zoom animation */
.animate-zoom {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.8s ease;
}

.animate-zoom.show {
  opacity: 1;
  transform: scale(1);
}

/* =========================
   HERO ANIMATION
========================= */

.hero-content h1,
.hero-content h3,
.hero-content h4,
.hero-content p,
.hero-buttons {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFade 1s ease forwards;
}

.hero-content h1 { animation-delay: 0.2s; }
.hero-content h4 { animation-delay: 0.4s; }
.hero-content h3 { animation-delay: 0.6s; }
.hero-content p { animation-delay: 0.8s; }
.hero-buttons { animation-delay: 1s; }

@keyframes heroFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   SERVICE CARD STAGGER
========================= */

.service-card {
  opacity: 0;
  transform: translateY(30px);
}

/* when active */
.service-card.show {
  opacity: 1;
  transform: translateY(0);
  transition: 0.6s ease;
}

/* =========================
   PROJECT ZOOM HOVER ENHANCE
========================= */

.project-card img {
  transition: transform 0.6s ease;
}

.project-card:hover img {
  transform: scale(1.12);
}

/* =========================
   BUTTON MICRO ANIMATION
========================= */

.btn-primary,
.btn-outline {
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-outline:hover {
  transform: translateY(-2px);
}

/* =========================
   IMAGE FLOAT EFFECT
========================= */

.about-image img {
  transition: transform 0.5s ease;
}

.about-image:hover img {
  transform: scale(1.05);
}

/* =========================
   BADGE POP
========================= */

.about-badge {
  animation: floatBadge 3s ease-in-out infinite;
}

@keyframes floatBadge {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
/* =========================  HOME PAGE Ends ========================= */