/* Mobile-specific fixes for Android devices */

/* ─── ROOT SCROLL FIX ─────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
}

@media (max-width: 768px) {
  /* Prevent horizontal scroll only — do NOT restrict vertical scroll */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
    /* overscroll-behavior-y intentionally NOT set — it was trapping vertical scroll */
  }

  /* ─── CANVAS / WEBGL MOBILE FIX ─────────────────────────────────────────── */
  /* On mobile, all canvas elements are decorative — they must NOT intercept
     touch events. This is the root cause of scroll trapping on mobile.
     Desktop is unaffected — pointer events work normally on laptop/desktop. */
  canvas {
    pointer-events: none !important;
    touch-action: none !important;
  }

  /* Re-enable pointer events only for explicitly interactive canvases */
  canvas.interactive {
    pointer-events: auto !important;
  }

  /* Improve text rendering on Android */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Better touch targets — allow tap but pass scroll to parent */
  button, a, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Fix for Android Chrome address bar — only on the hero, not all min-h-screen elements */
  #home {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }

  /* Fix text size adjustment */
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  /* Better spacing for mobile content */
  .hero-mobile-spacing {
    padding-top: 5rem;
    padding-bottom: 2rem;
  }

  /* Improve button visibility */
  .mobile-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  /* Fix for Android viewport units */
  .full-height-mobile {
    height: 100vh;
    height: -webkit-fill-available;
  }

  /* Nested scroll containers — prevent them from trapping the main scroll */
  .overflow-y-auto:not(.fixed):not([class*="fixed"]) {
    overscroll-behavior-y: contain;
  }

  /* Three.js / R3F canvas wrappers */
  [class*="beams-container"],
  [class*="threads-container"],
  [class*="gridscan"],
  [class*="light-pillar-container"],
  [class*="darkveil"] {
    pointer-events: none !important;
    touch-action: none !important;
  }
}

/* Android-specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select, textarea, input {
    font-size: 16px; /* Prevent zoom on focus */
  }
}

/* Landscape orientation fixes */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-content {
    padding-top: 2rem;
    padding-bottom: 1rem;
  }

  .hero-title {
    font-size: 8vw;
  }
}