/* ICRAM-2027 & Gujarat Heritage Explorer Custom Styles */

:root {
  --primary-navy: #0b132b;
  --secondary-navy: #1c2541;
  --accent-gold: #e09f3e;
  --accent-amber: #f48c06;
  --accent-teal: #3a86ff;
  --gujarat-saffron: #f77f00;
  --gujarat-maroon: #9e2a2b;
  --gujarat-emerald: #06d6a0;
  --card-bg: rgba(255, 255, 255, 0.85);
  --card-border: rgba(255, 255, 255, 0.4);
  --glass-blur: 16px;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f77f00, #3a86ff);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d97706, #2563eb);
}

/* Subtle Gujarati Jali Latticework Motif */
.jali-bg {
  background-color: #0b132b;
  background-image: radial-gradient(rgba(244, 140, 6, 0.12) 1px, transparent 0),
                    radial-gradient(rgba(58, 134, 255, 0.12) 1px, #0b132b 0);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
}

.jali-pattern-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 30-30 30L0 30zM30 10L10 30l20 20 20-20z' fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-panel-light {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

.glass-nav {
  background: rgba(11, 19, 43, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Hero Gradient & Animations */
.hero-glow-1 {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(247, 127, 0, 0.25) 0%, rgba(247, 127, 0, 0) 70%);
  top: -100px;
  left: 10%;
  filter: blur(50px);
  animation: floatOrb 12s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero-glow-2 {
  position: absolute;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(58, 134, 255, 0.22) 0%, rgba(58, 134, 255, 0) 70%);
  top: 15%;
  right: 5%;
  filter: blur(60px);
  animation: floatOrb2 15s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 60px) scale(1.15); }
}

@keyframes floatOrb2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-50px, -40px) scale(1.2); }
}

/* Keyframe animations */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(247, 127, 0, 0.4); }
  50% { box-shadow: 0 0 30px rgba(247, 127, 0, 0.8); }
}

.pulse-accent {
  animation: pulseGlow 3s infinite;
}

/* Marquee / Infinite Slider */
@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: scrollMarquee 35s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Cultural Card Hover & Zoom */
.culture-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.culture-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 25px 35px -5px rgba(0, 0, 0, 0.2), 0 15px 15px -7px rgba(0, 0, 0, 0.1);
}

.culture-card .img-zoom {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.culture-card:hover .img-zoom {
  transform: scale(1.08);
}

/* Floating Badges */
@keyframes bobble {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
.animate-bobble {
  animation: bobble 4s ease-in-out infinite;
}

/* Reveal on Scroll */
.reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Interactive Map Marker Pulse */
.custom-pin {
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}

/* Tab Active Highlights */
.filter-btn.active, .schedule-tab.active {
  background: linear-gradient(135deg, #f77f00 0%, #d97706 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(247, 127, 0, 0.35);
}

/* Heritage Heading Styling */
.heritage-font {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
}

/* Countdown Box */
.countdown-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(247, 127, 0, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.countdown-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f77f00, transparent);
}

/* Leaflet Map Height & Radius */
#ahmedabad-map {
  width: 100%;
  height: 520px;
  border-radius: 16px;
  z-index: 10;
}

/* Modal Backdrop */
.modal-backdrop {
  background-color: rgba(11, 19, 43, 0.88);
  backdrop-filter: blur(10px);
}

/* Sound Equalizer Waves & Floating Audio Controller */
.sound-bar {
  display: inline-block;
  width: 3px;
  background: linear-gradient(180deg, #f77f00, #f48c06);
  border-radius: 2px;
  animation: soundBounce 1.2s ease-in-out infinite alternate;
}
.sound-bar:nth-child(1) { height: 8px; animation-delay: 0.1s; }
.sound-bar:nth-child(2) { height: 16px; animation-delay: 0.3s; }
.sound-bar:nth-child(3) { height: 11px; animation-delay: 0.15s; }
.sound-bar:nth-child(4) { height: 18px; animation-delay: 0.45s; }

@keyframes soundBounce {
  0% { transform: scaleY(0.25); }
  100% { transform: scaleY(1); }
}

.floating-audio-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 45;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}

/* ========================================================
   1. PRELOADER / SPLASH SCREEN
   ======================================================== */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(circle at center, #1c2541 0%, #0b132b 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.preloader-gear {
  animation: rotateGear 6s linear infinite;
}

@keyframes rotateGear {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========================================================
   2. DARK THEME TRANSITIONS & STYLING
   ======================================================== */
html.dark body {
  background-color: #070c18;
  color: #f1f5f9;
}

html.dark .bg-white {
  background-color: #0d1527 !important;
  color: #f1f5f9 !important;
}

html.dark .bg-slate-50 {
  background-color: #080e1b !important;
}

html.dark .bg-slate-100 {
  background-color: #141f36 !important;
}

html.dark .text-slate-900 {
  color: #f8fafc !important;
}

html.dark .text-slate-800 {
  color: #e2e8f0 !important;
}

html.dark .text-slate-700 {
  color: #cbd5e1 !important;
}

html.dark .text-slate-600 {
  color: #94a3b8 !important;
}

html.dark .text-slate-500 {
  color: #94a3b8 !important;
}

html.dark .border-slate-200,
html.dark .border-slate-100 {
  border-color: #1e293b !important;
}

html.dark .glass-nav {
  background: rgba(7, 12, 24, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

html.dark .glass-panel-light {
  background: rgba(13, 21, 39, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ========================================================
   3. PHOTO GALLERY LIGHTBOX MODAL
   ======================================================== */
#lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(5, 9, 18, 0.95);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#lightbox-modal.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-img-container {
  max-width: 90vw;
  max-height: 85vh;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========================================================
   4. BACK TO TOP FLOATING BUTTON
   ======================================================== */
#back-to-top {
  position: fixed;
  bottom: 86px;
  right: 24px;
  z-index: 44;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.35);
}

#back-to-top.hidden-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
}

/* ========================================================
   5. FAQ ACCORDION TRANSITIONS
   ======================================================== */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}

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

.faq-icon {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ========================================================
   6. FLOATING SOCIAL SHARE BAR
   ======================================================== */
.social-share-dock {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 43;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 768px) {
  .social-share-dock {
    display: none;
  }
}

/* ========================================================
   7. TOAST NOTIFICATION
   ======================================================== */
#toast-notification {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  z-index: 999999;
  pointer-events: none;
}

#toast-notification.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ========================================================
   8. PRINT OPTIMIZATION
   ======================================================== */
@media print {
  #preloader,
  #floating-audio-widget,
  #back-to-top,
  .social-share-dock,
  .glass-nav,
  header,
  footer,
  #hero-canvas,
  .hero-glow-1,
  .hero-glow-2,
  button,
  .modal-backdrop,
  #lightbox-modal {
    display: none !important;
  }

  body, html {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .faq-answer {
    max-height: none !important;
    opacity: 1 !important;
    display: block !important;
  }

  .schedule-panel {
    display: block !important;
  }
}