/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes floatAmbient {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(3deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes pulseBorder {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 123, 62, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(15, 123, 62, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(15, 123, 62, 0);
  }
}


/* ==========================================================================
   MICRO-INTERACTIONS
   ========================================================================== */

/* 1. Navbar underline animation is declared inside navigation.css (nav-item-link::after) */

/* 2. Button Hover Lift & Arrow Shift */
.btn {
  position: relative;
  transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

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

.btn svg {
  transition: transform var(--transition-fast);
}

.btn:hover svg {
  transform: translateX(3px);
}

/* 3. Mega Menu Hover Fade & Scale (Done via CSS transition declarations on .mega-menu) */

/* 4. Logo Hover Micro-grow */
.logo-link:hover .logo-icon {
  transform: scale(1.1) rotate(-5deg);
  color: var(--color-secondary-green);
}

.logo-icon {
  transition: transform var(--transition-normal), color var(--transition-fast);
}

/* 5. Social Icon Hover Accent */
.social-icon-link {
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.social-icon-link:hover {
  transform: translateY(-2px);
  color: var(--color-primary-green);
}

/* 6. Footer Link Hover Left-Slide */
.footer-nav-links a {
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.footer-nav-links a:hover {
  transform: translateX(4px);
  color: var(--color-accent-green);
}

/* 7. Search input reveal is declared inside header.css (.search-wrapper.active .search-input-container) */

/* 8. Hamburger lines transition is defined in navigation.css (.hamburger-line) */

/* 9. Floating Ambient shapes */
.floating-shape {
  animation: floatAmbient 8s ease-in-out infinite;
}

.shape-2 {
  animation-delay: -3s;
  animation-duration: 10s;
}

/* WhatsApp pulse animation */
.whatsapp-btn {
  animation: pulseBorder 2s infinite;
}