/* Mobile Optimizations */

/* Apply these styles when the .mobile-optimized class is present on html */
html.mobile-optimized {
  /* Disable certain animations */
  --reduced-motion: 1;
}

/* Optimize for slow connections */
html.slow-connection {
  /* Disable animations */
  --reduced-motion: 1;
  
  /* Simplify backgrounds but preserve hero section */
  .gradient-bg:not(.professional-bg) {
    background: #0f1729 !important;
  }
  
  /* Always preserve consulting hero background */
  .professional-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%) !important;
  }
  
  .noise-overlay,
  .geometric-shapes,
  .dashboard-glow {
    display: none !important;
  }
  
  /* Disable transitions */
  * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
  
  /* Simplify shadows */
  .shadow-lg, .shadow-xl, .shadow-2xl {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Disable backdrop filters */
  .backdrop-blur-lg, .backdrop-blur-xl {
    backdrop-filter: none !important;
  }
  
  /* Simplify gradients */
  .bg-gradient-to-br {
    background: #f8fafc !important;
  }
}

/* Optimize for reduced motion preference */
html.reduced-motion {
  * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
  
  .floating-dashboard {
    transform: none !important;
    animation: none !important;
  }
}

/* Optimize for mobile devices */
@media (max-width: 768px) {
  /* Fix hero section border issues */
  .hero-section {
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  .hero-content {
    padding: 1rem !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  .enterprise-ai-visualization {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
  }
  
  .platform-interface {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  
  
  /* Reduce motion and animations */
  .floating-dashboard {
    animation: none !important;
    transform: none !important;
  }
  
  .dashboard-glow {
    animation: none !important;
    opacity: 0.3 !important;
    filter: blur(10px) !important;
  }
  
  /* Improve touch targets */
  button, 
  a,
  .nav-link,
  .faq-button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Optimize typography */
  body {
    font-size: 16px;
    line-height: 1.5;
  }
  
  h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  
  h3 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  /* Hero section mobile optimizations - maintain original background */
  .hero-section {
    min-height: 100vh !important;
    padding-top: 100px !important;
    padding-bottom: 3rem !important;
  }
  
  /* Keep navbar consistent with desktop - match index.html */
  nav .h-20 {
    height: 80px !important;
  }
  
  /* Ensure Tailwind classes work for logo - remove all height overrides */
  .logo-container img {
    width: auto !important;
    /* Force Tailwind h-12 to work properly */
  }
  
  .logo-container img.h-12 {
    height: 3rem !important; /* h-12 = 48px = 3rem */
  }
  
  .hero-content {
    padding: 0 1rem !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  /* Fix Energy Intelligence badge spacing */
  .hero-content .inline-block {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
  
  .hero-content h1 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
    margin-bottom: 1rem !important;
  }
  
  .hero-content p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .enterprise-ai-visualization {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    position: relative !important;
    z-index: 20 !important;
  }
  
  /* Ensure clean frame edges */
  .hero-bg-image,
  .hero-overlay,
  .noise-overlay {
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  
  /* Fix any potential border bleeding */
  .geometric-shapes {
    display: none !important;
  }
  
  /* Ensure proper stacking */
  .hero-section > * {
    position: relative !important;
    z-index: 1 !important;
  }
  
  .hero-section .hero-content {
    z-index: 10 !important;
  }
  
  .hero-section .enterprise-ai-visualization {
    z-index: 20 !important;
  }
  
  /* Additional spacing fixes */
  .hero-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
  }
  
  /* Ensure proper spacing between elements */
  .hero-content > * {
    margin-bottom: 1.5rem !important;
  }
  
  .hero-content > *:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Fix any potential margin collapse */
  .hero-content,
  .enterprise-ai-visualization,

  
  /* Improve spacing */
  .py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .mb-16, .mb-20, .mb-24 {
    margin-bottom: 2rem !important;
  }
  
  .mt-16, .mt-20, .mt-24 {
    margin-top: 2rem !important;
  }
  
  /* Optimize grids */
  .grid {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Simplify complex layouts */
  
  /* Optimize images */
  img {
    max-width: 100%;
    height: auto !important;
  }
  
  /* Hide decorative elements */
  .geometric-shapes {
    display: none;
  }
  
  /* Optimize forms */
  input, textarea, select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
  
  /* Optimize fixed elements */
  .fixed {
    position: fixed !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  

  
  /* Optimize carousels */
  .logo-slide img {
    height: 40px !important;
    width: auto !important;
  }
  
  /* Optimize charts */
  canvas {
    height: 250px !important;
  }
  
  /* Optimize sections with heavy backgrounds */
  .security-section::before {
    opacity: 0.3 !important;
  }
  
  /* Optimize industry cards */
  .industry-card {
    margin-bottom: 1rem !important;
  }
  

  
  /* Optimize report cards */
  .report-card {
    margin-bottom: 1.5rem !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
  }
  
  /* Make report overlay always visible on mobile */
  .report-overlay {
    opacity: 1 !important;
    background: linear-gradient(to top, 
      rgba(0, 0, 0, 0.9) 0%, 
      rgba(0, 0, 0, 0.6) 40%, 
      rgba(0, 0, 0, 0.2) 70%,
      transparent 100%) !important;
  }
  
  /* Ensure report content is always visible */
  .report-card h3, 
  .report-card p {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  /* Optimize report buttons for mobile */
  .report-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  .report-btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }
  
  .report-btn i {
    margin-right: 6px !important;
  }
  
  /* Ensure PDF preview container has proper height */
  .pdf-preview-container {
    height: 200px !important;
  }
  
  /* Ensure images in report cards are properly sized */
  .report-card img {
    height: 200px !important;
    object-fit: cover !important;
  }
  
  /* Disable 3D effects on mobile */
  .report-card:hover .pdf-preview-container {
    transform: none !important;
    box-shadow: none !important;
  }
  
  .report-card:hover {
    transform: none !important;
  }
  
  /* Ensure buttons are properly sized and spaced */
  .report-btn.view,
  .report-btn.download {
    font-size: 14px !important;
    padding: 10px 8px !important;
    min-height: 44px !important;
  }
  
  /* Optimize partner cards */
  .partner-card {
    padding: 1rem !important;
  }
  
  /* Optimize footer */
  .footer {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Remove frame artifacts but keep original background */
  .hero-section {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  
  .hero-section::before,
  .hero-section::after {
    display: none !important;
  }
  
  .enterprise-ai-visualization {
    isolation: isolate !important;
    contain: layout style paint !important;
    will-change: auto !important;
  }
  
  .platform-interface {
    contain: layout style paint !important;
    will-change: auto !important;
  }
  
  /* Force clean frame rendering */
  .hero-section * {
    box-sizing: border-box !important;
  }
  
  .enterprise-ai-visualization * {
    box-sizing: border-box !important;
  }
  
  /* Prevent any frame bleeding */
  .hero-bg-image,
  .hero-overlay,
  .noise-overlay,
  .geometric-shapes {
    contain: layout style paint !important;
    will-change: auto !important;
  }
}

/* Optimize for touch devices */
@media (hover: none) {
  /* Make hover states visible by default */
  .play-button-overlay {
    opacity: 0.8 !important;
  }
  
  .industry-card .mt-6.p-4 {
    opacity: 1 !important;
  }
  
  /* Disable hover animations */
  .floating-dashboard:hover {
    transform: none !important;
  }
  
  .play-button:hover {
    transform: none !important;
  }
  
  /* Improve scrolling performance */
  .smooth-scroll {
    scroll-behavior: auto !important;
  }
  
  /* CRITICAL: Force spacing fixes to override any conflicts */
  .hero-section {
    padding-top: 120px !important;
    padding-bottom: 3rem !important;
  }
  
  .hero-content .inline-block {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
  

  
  .enterprise-ai-visualization {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
}