/* ======================= */
/* GLOBAL ANIMATIONS (1–7) */
/* ======================= */

/* 1. Hover Card Animation */
.card-animate{
  transition: transform .28s ease, box-shadow .28s ease;
}
.card-animate:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
}

/* 2. Fade-in on Scroll */
.fade-up{
  opacity: 0;
  transform: translateY(22px);
  animation: fadeUp .7s ease-out forwards;
}
@keyframes fadeUp{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. Icon Pulse */
.icon-pulse{
  animation: pulseIcon 1.6s ease-in-out infinite;
}
@keyframes pulseIcon{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.15); }
  100%{ transform: scale(1); }
}

/* 4. Button Gradient Flow */
.btn-gradient-flow{
  background-size: 250% 250% !important;
  animation: gradientFlow 4s ease infinite;
}
@keyframes gradientFlow{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* 5. Smooth Page Entrance */
.page-fade{
  opacity: 0;
  animation: pageFade .6s ease-out forwards;
}
@keyframes pageFade{
  0%{ opacity: 0; transform: translateY(-8px); }
  100%{ opacity: 1; transform: translateY(0); }
}

/* 6. Pricing Badge Highlight */
.badge-highlight{
  animation: badgePop 1.2s ease-in-out infinite;
}
@keyframes badgePop{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.12); box-shadow: 0 0 12px rgba(255,0,80,.35); }
  100%{ transform: scale(1); }
}

/* 7. Animated Brand Gradient Background */
.brand-gradient-animate{
  background-size: 300% 300% !important;
  animation: brandShift 6s ease infinite;
}
@keyframes brandShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* ================================ */
/* CLASS MAPPING (pemasangan cepat) */
/* ================================ */

/* Terapkan ke card */
.feat-card, .impact-card, .team-card, .ops-card, .price-card{
  composes: card-animate;
}

/* Terapkan ke icon */
.feat-icon, .impact-icon, .team-icon, .ops-icon{
  composes: icon-pulse;
}

/* Terapkan gradient animation ke CTA brand */
.btn-brand{
  composes: btn-gradient-flow;
}

/* Terapkan fade-up pada semua item saat load */
.section-item{
  composes: fade-up;
}

/* Untuk badge popular */
.badge-popular{
  composes: badge-highlight;
}

/* Untuk section background gradient */
.section-gradient{
  composes: brand-gradient-animate;
}