/* =====================================================
   PUSPAGA — Animation Stylesheet
   ===================================================== */

/* Smooth transitions for scroll-triggered animations */
.animate-fadein {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-fadein.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-fadein-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.animate-fadein-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Delay modifiers */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* Card hover lift */
.card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

/* Button hover effects */
.btn {
  transition: background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease,
              transform 0.15s ease,
              box-shadow 0.2s ease;
}

.btn:active { transform: scale(0.97) !important; }

/* Nav link underline slide */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active::after { transform: scaleX(1); }

/* Topic chip hover */
.topic-chip {
  transition: transform 0.2s ease,
              background 0.2s ease,
              border-color 0.2s ease;
}

/* Flow step active indicator */
.flow-step-num {
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Social hover bounce */
.social-link, .footer-social-link {
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-link:hover, .footer-social-link:hover {
  transform: translateY(-2px);
}

/* Hero float card animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.hero-float-card {
  animation: float 4s ease-in-out infinite;
  will-change: transform;
}

.hero-float-card.card-tl { animation-delay: 0s; }
.hero-float-card.card-br { animation-delay: 2s; }

/* Pulse for live indicator */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* WA button pulse ring */
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Cursor blink */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Fade in up keyframe */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header scroll shadow */
.site-header {
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Mobile nav slide */
.mobile-nav {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* FAQ accordion */
.faq-answer {
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-icon {
  transition: transform 0.3s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Back to top */
.back-to-top {
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Filter chip */
.filter-chip {
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.filter-chip:hover { transform: translateY(-1px); }
.filter-chip.active { transform: translateY(-1px); }

/* Card img zoom */
.card .card-img {
  transition: transform 0.4s ease;
  overflow: hidden;
}

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

/* Stagger cards */
.grid-stagger > *:nth-child(1) { animation-delay: 0.0s; }
.grid-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.grid-stagger > *:nth-child(3) { animation-delay: 0.2s; }
.grid-stagger > *:nth-child(4) { animation-delay: 0.3s; }
.grid-stagger > *:nth-child(5) { animation-delay: 0.4s; }
.grid-stagger > *:nth-child(6) { animation-delay: 0.5s; }

/* Hero entrance */
.hero-content-enter {
  animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-image-enter {
  animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-fadein,
  .animate-fadein-left,
  .animate-fadein-right {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-float-card { animation: none !important; }
  .typewriter-cursor { animation: none !important; opacity: 1; }
  .wa-btn::before { animation: none !important; }
}