/* EKA Natural - Premium Wellness Sanctuary Stylesheet */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #FAF6F0; /* Soft warm beige */
  color: #2D3748;
  overflow-x: hidden;
}

.font-serif-display {
  font-family: 'Playfair Display', serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #FAF6F0;
}
::-webkit-scrollbar-thumb {
  background: #8F9E8B; /* Sage */
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2D4B32; /* Forest */
}

/* Frosted glass utilities */
.glass-nav {
  background: rgba(250, 246, 240, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-card {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(45, 75, 50, 0.03);
}

/* Organic curved divider */
.curved-top {
  border-top-left-radius: 50% 4%;
  border-top-right-radius: 50% 4%;
}
.curved-bottom {
  border-bottom-left-radius: 50% 4%;
  border-bottom-right-radius: 50% 4%;
}

/* Pulsing audio equalizer effect for the soundscape toggle */
.bar {
  display: inline-block;
  width: 3px;
  height: 3px;
  background-color: currentColor;
  margin: 0 1px;
  border-radius: 1px;
  transition: height 0.2s ease;
}
.playing .bar:nth-child(1) { animation: equalise 0.8s ease-in-out infinite alternate; }
.playing .bar:nth-child(2) { animation: equalise 0.5s ease-in-out infinite alternate 0.2s; }
.playing .bar:nth-child(3) { animation: equalise 0.7s ease-in-out infinite alternate 0.1s; }
.playing .bar:nth-child(4) { animation: equalise 0.6s ease-in-out infinite alternate 0.3s; }

@keyframes equalise {
  0% { height: 3px; }
  100% { height: 16px; }
}

/* Leaf-like shape utilities */
.shape-leaf-1 {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.shape-leaf-2 {
  border-radius: 40% 60% 70% 30% / 30% 70% 40% 60%;
}

/* Pulsing WhatsApp button */
@keyframes pulse-whatsapp {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }
  70% {
    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}
.pulse-wa {
  animation: pulse-whatsapp 2.5s infinite;
}

/* Slow floating animation for decorative leaves */
@keyframes slow-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}
.animate-slow-float {
  animation: slow-float 6s ease-in-out infinite;
}

/* Button transitions */
.btn-forest {
  background-color: #2D4B32;
  color: #FAF6F0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-forest:hover {
  background-color: #606E50;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(45, 75, 50, 0.15);
}

.btn-rosegold {
  background: linear-gradient(135deg, #e0b0b0, #d4a5a5);
  color: #FAF6F0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-rosegold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(224, 176, 176, 0.25);
}

/* Scroll reveals */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

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

/* Image zoom transition */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-zoom:hover img {
  transform: scale(1.06);
}

/* Sound Toggle Hover Tooltip */
.audio-tooltip {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.audio-btn:hover .audio-tooltip {
  opacity: 1;
  transform: translateY(0);
}