/* Mobile Quiet Mode — No animations, no distractions on small screens and when lite mode is enabled */
/* Triggered by: html[data-lite-mode="1"] (automatic on mobile/low-end/reduced-motion via js/performance-mode.js) */

/* Global resets for quiet mode */
html[data-lite-mode="1"],
:root[data-lite-mode="1"] {
  scroll-behavior: auto !important;
}

/* Prevent horizontal scrolling on mobile */
html[data-lite-mode="1"] body { overflow-x: hidden !important; }

html[data-lite-mode="1"] *,
html[data-lite-mode="1"] *::before,
html[data-lite-mode="1"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Disable common utility animations (Tailwind animate-*, floating, pulse, spin, etc.) */
html[data-lite-mode="1"] .floating,
html[data-lite-mode="1"] [class*="animate-"],
html[data-lite-mode="1"] .vedika-rotate-slow,
html[data-lite-mode="1"] .vedika-rotate-reverse,
html[data-lite-mode="1"] .vedika-pulse,
html[data-lite-mode="1"] .vedika-node-pulse,
html[data-lite-mode="1"] .vedika-eye-blink {
  animation: none !important;
}

/* Neutralize transforms applied by scripts for a stable layout */
html[data-lite-mode="1"] .content-section,
html[data-lite-mode="1"] .glass-card,
html[data-lite-mode="1"] .liquid-glass-card,
html[data-lite-mode="1"] .blog-card,
html[data-lite-mode="1"] .animated-solar-system,
html[data-lite-mode="1"] .parallax *,
html[data-lite-mode="1"] svg *,
html[data-lite-mode="1"] [style*="transform"] {
  /* Let essential content scale naturally; decorative transforms are already hidden */
  transform: none !important;
}

/* Hide purely decorative/heavy layers */
html[data-lite-mode="1"] #aurora,
html[data-lite-mode="1"] #zodiac_lines,
html[data-lite-mode="1"] #zodiac_icons,
html[data-lite-mode="1"] #meteor_layer,
html[data-lite-mode="1"] #comet_group,
html[data-lite-mode="1"] #fireflies,
html[data-lite-mode="1"] #constellation_lines,
html[data-lite-mode="1"] .liquid-glass-bg,
html[data-lite-mode="1"] .particle {
  display: none !important;
}

/* Tone down glassmorphism and heavy filters for mobile */
html[data-lite-mode="1"] .glass-card,
html[data-lite-mode="1"] .liquid-glass-card,
html[data-lite-mode="1"] .modal-content,
html[data-lite-mode="1"] .nav-bar,
html[data-lite-mode="1"] .nav-glass {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Calm hover effects on touch devices */
@media (hover: none) {
  html[data-lite-mode="1"] .glass-card:hover,
  html[data-lite-mode="1"] .liquid-glass-card:hover,
  html[data-lite-mode="1"] .blog-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Improve readability and tap targets on small screens */
@media (max-width: 768px) {
  html[data-lite-mode="1"] body { line-height: 1.6; }
  html[data-lite-mode="1"] button,
  html[data-lite-mode="1"] a,
  html[data-lite-mode="1"] .btn,
  html[data-lite-mode="1"] .btn-cosmic {
    min-height: 44px;
    min-width: 44px;
    line-height: 1.2;
  }
  html[data-lite-mode="1"] .container,
  html[data-lite-mode="1"] .max-w-7xl,
  html[data-lite-mode="1"] .max-w-5xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Keep nav fixed; we will handle spacing with padding-top to avoid overlap */
  html[data-lite-mode="1"] .nav-bar { position: fixed !important; top: 0 !important; left: 0; right: 0; }
  html[data-lite-mode="1"] .scroll-element { padding-top: 64px !important; }
  /* Reduce huge headings in hero and sections */
  html[data-lite-mode="1"] .cosmic-title { font-size: 2rem !important; line-height: 1.1 !important; }
  html[data-lite-mode="1"] h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  html[data-lite-mode="1"] h2 { font-size: clamp(1.25rem, 5vw, 1.75rem) !important; }
}

/* Remove extra forced margins between sections for desktop consistency */
html[data-lite-mode="1"] #testimonials { margin-bottom: 0 !important; }
html[data-lite-mode="1"] #marketplace { margin-top: 0 !important; }

/* Media hygiene */
html[data-lite-mode="1"] img, html[data-lite-mode="1"] video { max-width: 100% !important; height: auto !important; }

/* Modals: ensure they fit viewport without fancy motion */
html[data-lite-mode="1"] .modal,
html[data-lite-mode="1"] #blogModal {
  transition: none !important;
}

/* Ensure blog teaser is visible without animations */
html[data-lite-mode="1"] #home-blogs { opacity: 1 !important; transform: none !important; }

/* SVG parallax background should remain static in quiet mode */
html[data-lite-mode="1"] .parallax-container { filter: none !important; } 
html[data-lite-mode="1"] .content-section { overflow: visible !important; } 
html[data-lite-mode="1"] html, html[data-lite-mode="1"] body { overflow-y: auto !important; }
/* Do not extend scroll track on mobile quiet */
html[data-lite-mode="1"] .scroll-element { height: auto !important; min-height: 100vh !important; }
/* Blog teaser must not clip on mobile */
html[data-lite-mode="1"] #home-blogs { overflow: visible !important; margin-left: auto !important; margin-right: auto !important; }
html[data-lite-mode="1"] #home-blogs::before { display: none !important; }
/* Ensure sections never visually overlap in stack */
html[data-lite-mode="1"] #testimonials { margin-bottom: 16px !important; }
html[data-lite-mode="1"] #marketplace { margin-top: 16px !important; }

/* Reduce any fixed-position debug overlays or references (if present) */
html[data-lite-mode="1"] video, html[data-lite-mode="1"] .debug, html[data-lite-mode="1"] [data-debug] { display: none !important; }