/* ═══════════════════════════════════════════
   MOBILE PERFORMANCE OPTIMIZATIONS
   Specifieke optimalisaties voor mobiele telefoons
   - Snellere laadtijd
   - Vloeiendere animaties
   - Minder batterijverbruik
═══════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── REDUCE ANIMATION COMPLEXITY ────────── */
  * {
    /* Gebruik transform en opacity (GPU-accelerated) */
    /* Vermijd: width, height, top, left (trigger reflow) */
  }

  /* Disable expensive animations on low-end devices */
  @media (prefers-reduced-motion: no-preference) {
    /* Simplify hero animations */
    .hero-bg-grid {
      animation-duration: 60s !important; /* Slower = less CPU */
    }

    .hero-glow-1,
    .hero-glow-2 {
      animation: none !important; /* Remove on mobile */
      opacity: 0.4 !important;
    }
  }

  /* ── TOUCH OPTIMIZATIONS ────────── */
  /* Larger touch targets */
  .btn,
  .nav-cta,
  .mobile-nav-link,
  .mobile-info-link {
    min-height: 44px; /* iOS guideline */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  /* Remove hover states (no hover on touch) */
  .treat-card:hover,
  .team-card:hover,
  .gallery-item:hover,
  .btn:hover,
  .info-block:hover {
    transform: none !important;
  }

  /* Active states for touch feedback */
  .btn:active,
  .nav-cta:active,
  .treat-card:active,
  .team-card:active {
    transform: scale(0.98) !important;
    transition-duration: 0.1s !important;
  }

  /* ── SCROLL PERFORMANCE ────────── */
  /* Reduce scroll jank */
  * {
    -webkit-overflow-scrolling: touch; /* Momentum scrolling iOS */
  }

  /* Simplify parallax (expensive on mobile) */
  [data-parallax] {
    transform: none !important;
  }

  /* ── IMAGE OPTIMIZATIONS ────────── */
  img {
    /* Prevent layout shift */
    height: auto;
    max-width: 100%;
  }

  /* Reduce image animation complexity */
  .team-avatar img,
  .gallery-item img,
  .hero-img-wrap img {
    transition: transform 0.3s ease !important;
    will-change: auto !important;
  }

  /* ── FONT LOADING ────────── */
  /* Reduce font weight variations loaded */
  body {
    font-display: swap; /* Show fallback font immediately */
  }

  /* ── REDUCE REPAINTS ────────── */
  /* Fixed elements can cause repaints on scroll */
  #nav {
    /* Keep fixed but simplify */
    will-change: transform;
  }

  .scroll-progress {
    will-change: width;
  }

  /* ── INTERSECTION OBSERVER OPTIMIZATIONS ────────── */
  /* Load content only when visible */
  .reveal,
  .reveal-l,
  .reveal-r,
  .reveal-s,
  .reveal-scale {
    /* Simpler reveal animation */
    transition-duration: 0.4s !important;
  }

  /* ── MARQUEE OPTIMIZATION ────────── */
  .marquee-track {
    /* Reduce complexity */
    animation-duration: 30s !important; /* Slower on mobile */
  }

  /* ── BUTTON RIPPLE DISABLED ON MOBILE ────────── */
  .btn::before,
  .nav-cta::before {
    display: none !important;
  }

  /* ── LIGHTBOX OPTIMIZATIONS ────────── */
  #lb {
    /* Simpler backdrop */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(7, 14, 28, 0.96) !important;
  }

  #lb-img {
    /* Faster transition */
    transition: transform 0.3s ease !important;
  }

  /* ── CARD GRID OPTIMIZATIONS ────────── */
  /* Reduce gap on mobile for more content */
  .team-grid,
  .info-grid-3 {
    gap: 0.75rem !important;
  }

  /* ── REDUCE SHADOW COMPLEXITY ────────── */
  /* Shadows are expensive, simplify on mobile */
  .treat-card,
  .team-card,
  .gallery-item {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }

  .treat-card:hover,
  .team-card:hover,
  .gallery-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  }

  /* ── NAVIGATION OPTIMIZATIONS ────────── */
  /* Faster mobile menu */
  .mobile-panel {
    transition-duration: 0.35s !important;
  }

  /* ── FLOATING CALL BUTTON ────────── */
  #bb-call-btn {
    /* Onder de loader (8999) en transitie-paneel (9999), zodat de bel
       niet door het laadscherm/de paginatransitie heen prikt */
    z-index: 700;
    /* Reduce animation */
    animation-duration: 4s !important;
  }

  /* ── TEXT RENDERING ────────── */
  body {
    text-rendering: optimizeSpeed; /* Faster than optimizeLegibility */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ── DISABLE GPU LAYERS WHEN NOT NEEDED ────────── */
  .reveal.visible,
  .reveal-l.visible,
  .reveal-r.visible,
  .reveal-s.visible,
  .reveal-scale.visible,
  .reveal-blur.visible {
    will-change: auto !important;
    transform: translateZ(0); /* Force GPU but don't keep layer */
  }

  /* ── OPTIMIZE HERO SECTION ────────── */
  #hero {
    /* Reduce min-height on mobile */
    min-height: auto !important;
  }

  .hero-title {
    /* Simplify text animations */
    animation-duration: 0.6s !important;
  }

  /* ── TREATMENT CARDS SCROLL ────────── */
  #treat-track {
    /* Optimize horizontal scroll */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; /* Snap to cards */
  }

  .treat-card {
    scroll-snap-align: start;
  }

  /* ── REDUCE BORDER RADIUS (SLIGHT PERF GAIN) ────────── */
  /* Border radius can be expensive on large elements */
  /* Keep it but be aware */

  /* ── CRITICAL CONTENT FIRST ────────── */
  /* Ensure above-the-fold content loads first */
  /* (Handled in HTML structure)

  /* ── NETWORK OPTIMIZATION HINTS ────────── */
  /* Preload critical assets */
  /* <link rel="preload" href="css/main.css" as="style">
  /* <link rel="preload" href="js/main.js" as="script">
  /* (Add to HTML) */

  /* ── EMERGENCY CONTACT OPTIMIZATION ────────── */
  /* Make contact info easily accessible */
  .emergency {
    /* Sticky on mobile? */
    position: sticky;
    top: 70px;
    z-index: 100;
  }

  /* ── FORM OPTIMIZATIONS (if forms exist) ────────── */
  input,
  textarea,
  select {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }

  /* ── REDUCE LAYOUT SHIFTS ────────── */
  /* Add explicit dimensions where possible */
  .hero-img-wrap,
  .team-avatar,
  .gallery-item {
    /* aspect-ratio already set, good! */
  }

  /* ── MEMORY MANAGEMENT ────────── */
  /* Remove unused elements from DOM flow */
  .hero-scroll-hint {
    display: none !important; /* Not needed on mobile */
  }

  /* ── BATTERY SAVING MODE ────────── */
  @media (prefers-reduced-motion: reduce) {
    /* User has enabled battery saver / reduce motion */
    * {
      animation: none !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ── CONNECTION AWARE (Future) ────────── */
  @media (prefers-reduced-data: reduce) {
    /* User on slow connection */
    .hero-bg-grid,
    .hero-glow-1,
    .hero-glow-2 {
      display: none !important;
    }
  }
}

/* ── EXTRA SMALL DEVICES (< 375px) ────────── */
@media (max-width: 374px) {
  /* Even more aggressive optimizations for very small phones */

  .treat-card,
  .team-card,
  .info-block {
    padding: 1rem !important;
  }

  .hero-title {
    font-size: 2rem !important;
  }

  /* Reduce all animations further */
  .reveal,
  .reveal-l,
  .reveal-r {
    transition-duration: 0.3s !important;
  }
}

/* ── PERFORMANCE MONITORING HINTS ────────── */
/* Use these to check performance:
   - Chrome DevTools > Performance
   - Lighthouse Mobile Score
   - WebPageTest.org
   - Core Web Vitals (LCP, FID, CLS)

   Target scores:
   - Lighthouse Performance: > 90
   - LCP (Largest Contentful Paint): < 2.5s
   - FID (First Input Delay): < 100ms
   - CLS (Cumulative Layout Shift): < 0.1
*/