/* ==========================================================================
   VoiceRAG — Master Design System & Visual Rhythm (#RAGInGoa)
   Theme: Hacker House Goa × Voice AI × RAG Research Lab
   Includes Creative Cyber-Hologram Splash Loading Screen, Swaying Palms,
   Ocean Waves, Page Transition Loader & Micro-Animations
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700;800&display=swap');

:root {
  /* Design Tokens */
  --forest-green: #062414;
  --deep-green: #082e1a;
  --dark-surface: #041a0d;
  --lime-green: #a3ff3b;
  --light-green-surface: #e2f7d8;
  --emerald-green: #00d66c;
  --cream-surface: #fbf8ee;
  --cream-card: #f5f0e1;
  --yellow-accent: #ffd83b;
  --yellow-hover: #ffb703;
  --orange-emphasis: #ff8c3b;
  --pink-accent: #ff3b7c;
  --coral-warning: #ff5252;
  --text-dark: #041a0d;
  --text-muted: #8ba895;

  --shadow-brutalist: 5px 5px 0px #000000;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-pink-glow: 0 0 25px rgba(255, 59, 124, 0.4);

  --font-headline: 'Libre Caslon Text', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 9999px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--forest-green);
  color: #ffffff;
  font-family: var(--font-body);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--dark-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--lime-green);
  border-radius: var(--radius-full);
}

/* Material Symbols Icon Alignment */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Visual Rhythm Section Backgrounds */
.section-dark-green {
  background: radial-gradient(circle at 50% 30%, #0a3d22 0%, var(--forest-green) 80%);
  color: #ffffff;
}

.section-light-green {
  background-color: var(--light-green-surface);
  color: var(--text-dark);
}

.section-cream {
  background-color: var(--cream-surface);
  color: var(--text-dark);
}

/* Reusable Card Surfaces */
.card-cream {
  background-color: var(--cream-card);
  border: 3px solid #000000;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-brutalist);
  color: var(--text-dark);
}

.card-dark-green {
  background-color: var(--deep-green);
  border: 2px solid var(--lime-green);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* Reusable Badges */
.badge-lime {
  background-color: var(--lime-green);
  color: #000000;
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: var(--radius-full);
  border: 1px solid #000000;
}

.badge-yellow {
  background-color: var(--yellow-accent);
  color: #000000;
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: var(--radius-full);
  border: 1px solid #000000;
}

.badge-pink {
  background-color: var(--pink-accent);
  color: #ffffff;
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: var(--radius-full);
  border: 1px solid #000000;
}

/* Reusable Buttons */
.btn-yellow-cta {
  background-color: var(--yellow-accent);
  color: #000000;
  font-family: var(--font-body);
  font-weight: 800;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  border: 2px solid #000000;
  box-shadow: var(--shadow-brutalist);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-flex;
  items: center;
  gap: 8px;
}

.btn-yellow-cta:hover {
  background-color: var(--yellow-hover);
  transform: translateY(-2px);
  box-shadow: 7px 7px 0px #000000;
}

.btn-outline-lime {
  background-color: transparent;
  color: var(--lime-green);
  border: 2px solid var(--lime-green);
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
  display: inline-flex;
  items: center;
  gap: 8px;
}

.btn-outline-lime:hover {
  background-color: var(--lime-green);
  color: #000000;
  transform: translateY(-2px);
}

/* ==========================================================================
   ANIMATIONS & TROPICAL EFFECTS
   ========================================================================== */

/* 1. Page Enter Fade & Slide Transition */
.master-view-page {
  animation: pageEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pageEnter {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 2. Swaying Palm Tree SVG Animations */
.palm-sway-left {
  transform-origin: bottom center;
  animation: palmSwayLeft 5s ease-in-out infinite alternate;
}

.palm-sway-right {
  transform-origin: bottom center;
  animation: palmSwayRight 6s ease-in-out infinite alternate;
}

@keyframes palmSwayLeft {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(4deg) skewX(2deg); }
  100% { transform: rotate(-3deg); }
}

@keyframes palmSwayRight {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg) skewX(-2deg); }
  100% { transform: rotate(3deg); }
}

/* 3. Glowing Sun Spinning & Aura Pulse */
.sun-aura {
  animation: sunSpin 25s linear infinite, sunPulse 3s ease-in-out infinite alternate;
}

@keyframes sunSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes sunPulse {
  0% { filter: drop-shadow(0 0 12px rgba(255, 216, 59, 0.6)); }
  100% { filter: drop-shadow(0 0 28px rgba(255, 216, 59, 0.95)); }
}

/* Floating Bob & Floating Drift Animations */
.float-bob {
  animation: floatBob 3.5s ease-in-out infinite alternate;
}

.float-drift-1 {
  animation: floatDrift1 4.5s ease-in-out infinite alternate;
}

.float-drift-2 {
  animation: floatDrift2 5.2s ease-in-out infinite alternate;
}

.bird-glide {
  animation: birdGlide 16s linear infinite;
}

@keyframes floatBob {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
  100% { transform: translateY(6px) rotate(-1deg); }
}

@keyframes floatDrift1 {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-16px) translateX(10px); }
}

@keyframes floatDrift2 {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(14px) translateX(-12px); }
}

@keyframes birdGlide {
  0% { transform: translateX(-100px) translateY(0); }
  50% { transform: translateX(500px) translateY(-15px); }
  100% { transform: translateX(1200px) translateY(5px); }
}

/* Background Animated Clouds, Ships, Wind & Fireflies */
.cloud-drift-1 {
  animation: cloudDrift1 28s linear infinite;
}

.cloud-drift-2 {
  animation: cloudDrift2 36s linear infinite;
}

.ship-sail {
  animation: shipSail 32s linear infinite;
}

.wind-breeze {
  animation: windBreeze 5s ease-in-out infinite alternate;
}

.firefly-rise-1 {
  animation: fireflyRise 6s ease-in-out infinite alternate;
}

.firefly-rise-2 {
  animation: fireflyRise 8s ease-in-out infinite alternate 2s;
}

@keyframes cloudDrift1 {
  0% { transform: translateX(-150px); opacity: 0.7; }
  50% { opacity: 0.9; }
  100% { transform: translateX(1300px); opacity: 0.7; }
}

@keyframes cloudDrift2 {
  0% { transform: translateX(-200px); opacity: 0.5; }
  50% { opacity: 0.8; }
  100% { transform: translateX(1400px); opacity: 0.5; }
}

@keyframes shipSail {
  0% { transform: translateX(1200px) translateY(0deg); }
  50% { transform: translateX(500px) translateY(-3px); }
  100% { transform: translateX(-150px) translateY(2px); }
}

@keyframes windBreeze {
  0% { transform: translateX(0) scaleX(1); opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { transform: translateX(40px) scaleX(1.1); opacity: 0.3; }
}

@keyframes fireflyRise {
  0% { transform: translateY(0) scale(0.8); opacity: 0.3; }
  50% { transform: translateY(-25px) scale(1.3); opacity: 1; }
  100% { transform: translateY(-50px) scale(0.8); opacity: 0.3; }
}

/* 4. Tropical Ocean Waves Wave-Float Animation */
.wave-float-1 {
  animation: waveFloat1 6s ease-in-out infinite alternate;
}
.wave-float-2 {
  animation: waveFloat2 8s ease-in-out infinite alternate;
}

@keyframes waveFloat1 {
  0% { transform: translateX(0) translateY(0); }
  100% { transform: translateX(-20px) translateY(4px); }
}

@keyframes waveFloat2 {
  0% { transform: translateX(0) translateY(0); }
  100% { transform: translateX(25px) translateY(-6px); }
}

/* 5. Floating Equalizer Soundwave Bars */
.eq-bar-1 { animation: eqBounce 1.2s ease-in-out infinite alternate; }
.eq-bar-2 { animation: eqBounce 0.9s ease-in-out infinite alternate 0.2s; }
.eq-bar-3 { animation: eqBounce 1.4s ease-in-out infinite alternate 0.4s; }
.eq-bar-4 { animation: eqBounce 1.0s ease-in-out infinite alternate 0.1s; }

@keyframes eqBounce {
  0% { height: 15%; opacity: 0.5; }
  100% { height: 95%; opacity: 1; }
}

/* 6. Pulse Indicator */
.pulse-indicator {
  animation: pulseGlow 1.5s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

/* 7. Scroll Reveal Animation Classes */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 8. Creative Hologram Cyber-Orb Splash Loader */
#appLoadingScreen {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #0a4023 0%, #03140a 85%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
}

#appLoadingScreen.hide-loader {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.08);
  pointer-events: none;
}

.hologram-ring {
  box-shadow: 0 0 35px #a3ff3b, inset 0 0 35px #ff3b7c;
  animation: hologramRotate 8s linear infinite;
}

@keyframes hologramRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 9. Between-Page Sub-200ms Transition Loader Overlay */
#pageTransitionOverlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 26, 13, 0.75);
  backdrop-filter: blur(8px);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

#pageTransitionOverlay.show-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* INSIGHTS Dropdown Active Class for Mobile & Touch */
#insightsDropdownMenu.active-dropdown {
  display: flex !important;
}

/* ==========================================
   10. COMPREHENSIVE RESPONSIVE MEDIA QUERIES
   ========================================== */

/* Mobile Phones & Extra Small Displays (max-width: 639px) */
@media (max-width: 639px) {
  /* INSIGHTS Dropdown Fixed Center Popup on Mobile */
  #insightsDropdownMenu {
    position: fixed !important;
    top: 60px !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    max-width: calc(100vw - 1.5rem) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    z-index: 99999 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95), 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;
  }

  /* Header & Navigation */
  header {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  header .max-w-7xl {
    gap: 0.5rem !important;
  }

  /* Scrollable Nav Bar for Mobile */
  nav {
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }

  nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .main-nav-btn {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 11px !important;
  }

  /* Global Word Wrapping Fixes */
  .break-all {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  .break-words {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  pre, code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
  }

  /* Hero Section Typography Scaling */
  .font-headline {
    word-break: break-word;
  }

  /* Compact Hero Badges */
  .hero-badges-container {
    gap: 0.35rem !important;
  }

  /* Mic Button Scale on Small Phones */
  #micButton {
    width: 8.5rem !important;
    height: 8.5rem !important;
  }

  #micButton .w-24.h-24 {
    width: 5.5rem !important;
    height: 5.5rem !important;
  }

  /* Playground Controls */
  #clearQueryBtn, #stopVoiceBtn, #sendMicQueryBtn {
    font-size: 10px !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  /* Timings Breakdown Grid */
  .grid-cols-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Knowledge Stats Grid */
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Document Cards Grid */
  .grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Timeline Roadmap vertical stack */
  .timeline-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }

  /* Terminal Logs */
  #terminalLogs {
    height: 7.5rem !important;
  }

  /* Touch Scrollable Tables */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

/* Tablet & Medium Displays (640px to 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
  header {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  #micButton {
    width: 10.5rem !important;
    height: 10.5rem !important;
  }

  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .timeline-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Desktop & Laptops (1024px and above) */
@media (min-width: 1024px) {
  .timeline-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Ultra-Wide Monitors (1536px and above) */
@media (min-width: 1536px) {
  .max-w-7xl {
    max-width: 86rem !important;
  }
}

/* Touch Devices Accessibility */
@media (pointer: coarse) {
  button, select, input, textarea {
    min-height: 38px;
  }
}

/* High-Contrast / Print Support */
@media print {
  header, #pageTransitionOverlay, #appLoadingScreen {
    display: none !important;
  }
}