/* ========================================================
   CUSTOM STYLES & ANIMATIONS FOR KREATIVA STUDIO
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  --primary: #4F46E5;
  --primary-dark: #4338CA;
  --secondary: #06B6D4;
  --accent: #F43F5E;
  --wa-green: #25D366;
  --wa-green-dark: #128C7E;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Outfit', sans-serif;
}

/* Glassmorphism Navigation */
.glass-nav {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Card Glow Effect */
.card-glow {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-glow:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -10px rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.4);
}

/* WhatsApp Floating Pulse Button */
.wa-float-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  padding: 14px 20px;
  border-radius: 9999px;
  font-weight: 600;
  box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.5);
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.wa-float-btn:hover {
  transform: scale(1.05) translateY(-3px);
  box-shadow: 0 16px 30px -5px rgba(37, 211, 102, 0.6);
}

.wa-pulse-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 9999px;
  border: 2px solid #25D366;
  opacity: 0.8;
  animation: waPulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  pointer-events: none;
}

@keyframes waPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.15);
    opacity: 0;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0b0f19;
}

::-webkit-scrollbar-thumb {
  background: #1f293d;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #374151;
}

/* Portfolio Item Transitions */
.portfolio-card {
  transition: all 0.4s ease;
  overflow: hidden;
}

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

.portfolio-card img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle Gradient Glow in Hero */
.hero-glow {
  background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.15) 0%, rgba(14, 165, 233, 0.05) 45%, transparent 70%);
}

/* Accordion Animation */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}

.faq-item.active .faq-answer {
  max-height: 500px;
  opacity: 1;
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
}

/* Lightbox Modal */
#portfolio-modal {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}