/* Main Stylesheet - Homepage */
@import './variables.css';
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

/* ── Bhuj-style navbar font ── */
nav .font-sora,
nav span.text-sm,
nav a span,
.nav-desktop a span,
.nav-desktop a {
  font-family: 'Oswald', Arial Narrow, Arial, sans-serif !important;
  letter-spacing: 0.03em;
  font-weight: 500 !important;
}

/* Brand/hero title font (if used in nav) */
nav .brand-title, nav .bhuj-hero-title {
  font-family: 'EB Garamond', serif !important;
}

body {
  background: radial-gradient(circle at 20% 15%, rgba(28, 29, 33, 0.92) 0%, rgba(11, 12, 16, 0.98) 42%, #050505 100%), var(--kutch-bg);
  color: var(--kutch-text);
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23f3ede2' stroke-width='0.8' stroke-opacity='0.42'%3E%3Cpath d='M15 45c18-12 42-12 60 0s42 12 60 0 42-12 60 0'/%3E%3Cpath d='M-15 90c18-12 42-12 60 0s42 12 60 0 42-12 60 0 42 12 60 0'/%3E%3Cpath d='M15 135c18-12 42-12 60 0s42 12 60 0 42-12 60 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
}

main {
  position: relative;
  z-index: 1;
}

/* Home Section */
#home {
  background-color: var(--kutch-bg) !important;
  background-image: linear-gradient(180deg, rgba(8, 8, 10, 0.34) 0%, rgba(8, 8, 10, 0.58) 20%, rgba(8, 8, 10, 0.88) 100%), radial-gradient(circle at 18% 16%, rgba(214, 167, 86, 0.18), transparent 28%), radial-gradient(circle at 82% 18%, rgba(43, 58, 103, 0.24), transparent 30%), radial-gradient(circle at 54% 76%, rgba(44, 110, 106, 0.16), transparent 26%), url('images/gallery/white-rann-hero.webp') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  min-height: clamp(860px, 96vh, 1080px) !important;
}

#home::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 14% 20%, rgba(168, 92, 58, 0.12), transparent 24%), radial-gradient(circle at 80% 18%, rgba(43, 58, 103, 0.18), transparent 26%), radial-gradient(circle at 50% 78%, rgba(44, 110, 106, 0.14), transparent 22%);
  filter: blur(6px);
  animation: kutchAtmosphere 18s ease-in-out infinite alternate;
}

#home nav {
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.68), rgba(10, 10, 11, 0.22)) !important;
  border-bottom: 1px solid rgba(243, 237, 226, 0.08);
  backdrop-filter: blur(16px);
}

#home .nav-desktop a,
#home .nav-mobile-trigger button {
  color: var(--kutch-text-soft) !important;
}

#home .nav-desktop a:hover,
#home .nav-mobile-trigger button:hover {
  color: var(--kutch-text) !important;
  background: rgba(243, 237, 226, 0.08) !important;
}

#home h1 strong:first-child {
  color: var(--kutch-gold-soft) !important;
  background: linear-gradient(135deg, #e7c98a 0%, #d6a756 42%, #b68a78 100%) !important;
  filter: drop-shadow(0 10px 35px rgba(0, 0, 0, 0.38)) !important;
}

#home h1 strong:last-child {
  color: var(--kutch-text-soft) !important;
  background: linear-gradient(90deg, #c9c1b6 0%, #f3ede2 45%, #9bb7ab 100%) !important;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3)) !important;
}

#home p span:first-child {
  color: var(--kutch-text) !important;
  text-shadow: 0 14px 40px rgba(0, 0, 0, 0.45) !important;
}

#home p span:last-child {
  color: var(--kutch-text-soft) !important;
}

#home a.group.relative.inline-flex {
  background: linear-gradient(135deg, var(--kutch-gold-soft) 0%, var(--kutch-gold) 52%, #b88438 100%) !important;
  color: var(--kutch-bg) !important;
  box-shadow: 0 20px 55px rgba(214, 167, 86, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

#home a.group.relative.inline-flex:hover {
  box-shadow: 0 24px 65px rgba(214, 167, 86, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

#home a[href="#destinations"] {
  background: linear-gradient(180deg, rgba(27, 31, 36, 0.74), rgba(21, 23, 27, 0.9)) !important;
  color: var(--kutch-text) !important;
  border: 1px solid rgba(214, 167, 86, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 45px rgba(0, 0, 0, 0.18) !important;
}

#home a[href="#destinations"]:hover {
  border-color: rgba(214, 167, 86, 0.34) !important;
  background: linear-gradient(180deg, rgba(32, 37, 43, 0.82), rgba(18, 21, 26, 0.96)) !important;
}

#home .pointer-events-none.absolute.inset-x-0.bottom-12 .h-px {
  background: linear-gradient(90deg, transparent, rgba(214, 167, 86, 0.85), transparent) !important;
}

#home .text-center.relative.max-w-5xl.mx-auto {
  background: linear-gradient(180deg, rgba(21, 23, 27, 0.26), rgba(21, 23, 27, 0.14));
  border: 1px solid rgba(243, 237, 226, 0.08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border-radius: 32px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

#home .text-center.relative.max-w-5xl.mx-auto::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(214, 167, 86, 0.28), rgba(44, 110, 106, 0.14), rgba(243, 237, 226, 0.04));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

#home .text-center.relative.max-w-5xl.mx-auto > * {
  position: relative;
  z-index: 1;
}

/* Destinations Section */
#destinations .bg-gradient-to-r.from-gray-900.via-cyan-950\/50.to-blue-950\/50 {
  background: linear-gradient(135deg, rgba(27, 31, 36, 0.94), rgba(21, 23, 27, 0.98)) !important;
  border: 1px solid rgba(214, 167, 86, 0.16) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24) !important;
}

#destinations .bg-gradient-to-r.from-cyan-600.via-sky-600.to-blue-600 {
  background: linear-gradient(135deg, var(--kutch-gold-soft), var(--kutch-gold)) !important;
  color: var(--kutch-bg) !important;
}

/* Gradient Text Effect */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #home h1 strong:first-child,
  #home h1 strong:last-child,
  [style*="BF953F"],
  [style*="bf953f"],
  [style*="94a3b8"] {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: shine 12s linear infinite !important;
  }
}

/* Animations */
@keyframes kutchAtmosphere {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate3d(0, -1.5%, 0) scale(1.04);
    opacity: 1;
  }
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  body {
    background: radial-gradient(circle at 22% 14%, rgba(20, 22, 28, 0.78) 0%, rgba(6, 7, 10, 0.98) 40%, #020202 100%), #050505;
  }

  body::before {
    opacity: 0.022;
  }

  #home {
    background-image: linear-gradient(180deg, rgba(4, 5, 7, 0.3) 0%, rgba(4, 5, 7, 0.56) 20%, rgba(4, 5, 7, 0.9) 100%), radial-gradient(circle at 18% 16%, rgba(214, 167, 86, 0.12), transparent 26%), radial-gradient(circle at 82% 18%, rgba(43, 58, 103, 0.18), transparent 28%), radial-gradient(circle at 54% 76%, rgba(44, 110, 106, 0.11), transparent 24%), url('images/gallery/white-rann-hero.webp') !important;
  }

  #home::before {
    opacity: 0.82;
    filter: blur(10px);
  }

  #home nav {
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.82), rgba(5, 5, 5, 0.28)) !important;
    border-bottom: 1px solid rgba(243, 237, 226, 0.06);
  }

  #home .text-center.relative.max-w-5xl.mx-auto {
    background: linear-gradient(180deg, rgba(10, 10, 11, 0.36), rgba(10, 10, 11, 0.18));
    border-color: rgba(243, 237, 226, 0.06);
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  #home p span:first-child {
    color: #f5efe5 !important;
    text-shadow: 0 16px 42px rgba(0, 0, 0, 0.56) !important;
  }

  #home p span:last-child {
    color: #d8d0c4 !important;
  }

  #home a.group.relative.inline-flex {
    box-shadow: 0 18px 48px rgba(214, 167, 86, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  }

  #home a[href="#destinations"] {
    background: linear-gradient(180deg, rgba(16, 18, 22, 0.78), rgba(10, 10, 11, 0.94)) !important;
    border-color: rgba(214, 167, 86, 0.16) !important;
  }
}

/* Nav Animations */
nav[style*="translateY(-100px)"] {
  transform: translateY(0) !important;
  transition: none !important;
}