/* ============================================
   VERITA PERFORMANCE OPTIMIZATIONS
   Fixes scroll lag and jank
   ============================================ */

/* --- 1. Reduce backdrop-filter on mobile (major perf hit) --- */
@media (max-width: 1023px) {
  /* Strip glass-effect utility — single reliable selector */
  .glass-effect,
  .navbar.scrolled,
  .nav-links,
  .services-card,
  .solution-card,
  .glass-card,
  .glass-badge,
  .client-cell {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Simplify backgrounds instead of blur */
  .navbar.scrolled {
    background-color: rgba(11, 61, 74, 0.95);
  }
  .services-card,
  .solution-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
}

/* --- 2. Reduce animations on mobile --- */
@media (max-width: 767px) {
  /* Disable decorative orbs completely (they use expensive blur(80px)) */
  .hero-orb {
    display: none !important;
  }

  /* Disable mesh gradient animation — use static gradient */
  .mesh-gradient {
    animation: none !important;
    background: linear-gradient(135deg, #0B3D4A 0%, #1A7A6D 40%, #2a9aae 70%, #145E54 100%) !important;
  }

  /* Disable logo glow animation */
  .logo-glow {
    animation: none !important;
    text-shadow: none !important;
  }

  /* Simplify scroll-reveal */
  .scroll-reveal {
    transition-duration: 0.4s !important;
    transition-timing-function: ease-out !important;
  }

  /* Remove will-change from elements */
  .card-3d,
  .cta-glow {
    will-change: auto !important;
  }

  /* Disable particle canvas entirely on mobile */
  #verita-particles,
  #hero-kinetic-grid-canvas {
    display: none !important;
  }
}

/* --- 3. GPU isolation for Hero section (eliminates scroll stutter) --- */
.hero-section {
  contain: layout paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}

.hero-bg-container {
  contain: strict;
  transform: translateZ(0);
}

#phone-frame {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* --- 4. Optimize scroll performance --- */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Hardware-accelerated scroll container */
.scroll-reveal {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* --- 5. Reduce paint complexity --- */
.services-section,
.features-section,
.solutions-section,
.clients-section {
  contain: layout style;
}

/* Isolate heavy visual sections */
.dashboard {
  contain: layout paint;
}

/* --- 6. Optimize images --- */
img {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* Hero and feature images need full render */
.hero-section img,
.feature-img,
.detail-img {
  content-visibility: visible;
}

/* --- 7. Reduce composite layers --- */
.glass-card,
.glass-badge {
  transform: translateZ(0);
}

/* --- 8. Optimize transitions --- */
.pill-btn,
.cta-glow,
.navbar {
  transition-property: opacity, transform;
  transition-timing-function: ease-out;
}

/* --- 9. Mobile-specific performance --- */
@media (max-width: 767px) {
  /* Reduce DOM complexity impact */
  .dashboard-sidebar {
    display: none !important;
    contain: strict;
  }

  /* Simplify hover states (no hover on touch) */
  @media (hover: none) {
    .cta-glow:hover,
    .pill-btn:hover {
      transform: none !important;
      box-shadow: none !important;
    }
  }

  /* Reduce motion for battery saving */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* --- 10. Content visibility for below-fold sections --- */
#solutions,
.register-section,
footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

#features {
  content-visibility: visible !important;
  contain: none !important;
}