/* .fade-up sekarang cuma menyembunyikan elemen sebelum animasinya
   dipicu (mencegah elemen di atas layar "kedip" muncul sekilas sebelum
   JS sempat jalan). Begitu elemen masuk viewport, initAnimations() di
   app.js menambahkan class Animate.css (animate__animated dst.), dan
   Animate.css sendiri yang mengambil alih opacity + transform-nya
   (dipertahankan lewat animation-fill-mode: both bawaan library-nya). */
.fade-up {
  opacity: 0;
}
.hover-lift {
  transition:
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

/* Gentle floating decorative shapes — used sparingly behind hero/section
   ornaments (blurred circles, geometric marks). Slow, small drift only;
   never draws attention away from the content. */
@keyframes hcFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -14px);
  }
}
.float-shape {
  animation: hcFloat 7s ease-in-out infinite;
}
.float-shape-slow {
  animation: hcFloat 11s ease-in-out infinite;
}

/* Soft, static glow for primary CTAs — a gentle halo, not a pulsing effect */
.btn-glow {
  box-shadow:
    0 0 0 6px rgba(201, 168, 106, 0.12),
    0 12px 24px -12px rgba(94, 143, 115, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .float-shape,
  .float-shape-slow {
    animation: none;
  }
}