/* ═══════════════════════════════════════════
   KABA — Animation System (Craft Spec v1.0)
   ═══════════════════════════════════════════ */

/* ─── 1. KEYFRAMES ─── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes badgePop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* ─── 2. NAV LINK UNDERLINE ─── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ─── 3. HAMBURGER ANIMATION ─── */
.hamburger {
  transition: transform 0.3s ease;
}
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}
.close-menu { display: none; }
.mobile-menu.open .close-menu { display: block; }

/* ─── 4. MOBILE MENU ─── */
.mobile-menu {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease;
}
.mobile-menu.open {
  transform: translateX(0);
  opacity: 1;
}

/* ─── 5. BUTTON HOVER ─── */
.btn-primary,
.btn-outline,
.btn-outline-dark,
.btn-wa {
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.btn-primary:hover,
.btn-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.btn-primary:active,
.btn-wa:active {
  transform: translateY(0);
  opacity: 0.85;
}
.btn-outline:hover,
.btn-outline-dark:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ─── 6. SERVICE CARDS HOVER ─── */
.service-card {
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.4s ease;
  will-change: transform;
}
.service-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}
.service-icon {
  transition: transform 0.3s ease, background 0.3s ease;
}
.service-card:hover .service-icon {
  transform: scale(1.1);
  background: var(--gold);
}

/* ─── 7. GALLERY HOVER ─── */
.gallery-item img {
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-overlay {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gallery-item:hover .gallery-overlay {
  opacity: 1;
}
.gallery-item.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ─── 8. TIMELINE STEP ─── */
.timeline-step {
  transition: transform 0.3s ease, background 0.3s ease;
}
.timeline-step:hover {
  transform: translateY(-4px);
  background: var(--blush);
}

/* ─── 9. CONTACT ITEMS ─── */
.contact-item {
  transition: transform 0.3s ease, color 0.3s ease;
}
.contact-item:hover {
  transform: translateX(4px);
  color: var(--gold);
}

/* ─── 10. REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in, .fade-in-up, .fade-in-left, .fade-in-right, .scale-in,
  .stagger-item {
    opacity: 1 !important;
    transform: none !important;
  }
  .service-card:hover { transform: none !important; box-shadow: none !important; }
  .wa-float { animation: none !important; }
  .nav-links a::after { transform: scaleX(1) !important; }
}

/* ─── 11. RESPONSIVE OVERRIDES ─── */
@media (max-width: 768px) {
  .wa-float { animation-duration: 6s; }
}
@media (hover: none) {
  .gallery-item .gallery-overlay { opacity: 0; }
}