/* ============================================================
   ACC INSULATIONS — MOBILE HERO RECOMPOSITION
   New file: include/mobile-hero-fixes.css

   Add ONE line to every page, right before </head>:
     <link href="include/mobile-hero-fixes.css" rel="stylesheet">

   This covers all three hero systems currently on the site
   (index.php's canvas/hex/orb hero, products.php's hero-shapes,
   about.php's hero-3d/ring-deco) with ONE shared file, instead
   of fixing each page's inline <style> separately.

   Principle: on mobile, decorative layers are REDUCED and
   RECOMPOSED (smaller, lighter, fewer), not simply display:none'd
   — so mobile still feels premium instead of looking stripped.
   ============================================================ */

@media screen and (max-width: 991px) {

  /* ---------- Canvas / WebGL hero background ----------
     Full opacity + full particle count is unnecessary weight on
     a phone GPU. Keep it, but dim it so it reads as texture
     rather than competing with the text on top of it. */
  #hero-canvas {
    opacity: 0.35 !important;
  }

  /* ---------- Hex grid pattern ----------
     Was rendering at full desktop density; scale down so the
     pattern doesn't look like noise on a narrow screen. */
  .hex-field svg {
    opacity: 0.025 !important;
  }

  /* ---------- Glowing orbs ----------
     Previously: 500px/400px/300px orbs with 80px blur, unchanged
     on mobile — heavy for phone GPUs and visually overwhelming
     on a narrow viewport. Scaled down and reduced in number
     rather than left at desktop size or removed entirely. */
  .orb {
    filter: blur(40px);
  }

  .orb-1 {
    width: 260px;
    height: 260px;
    top: -80px;
    left: -60px;
  }

  .orb-2 {
    width: 220px;
    height: 220px;
  }

  /* Third orb adds little on a small screen already carrying two
     — drop it rather than shrinking it into irrelevance */
  .orb-3 {
    display: none;
  }

  /* ---------- Scan line sweep ----------
     A 60%-wide diagonal sweep reads fine on a wide desktop hero;
     on mobile it's proportionally huge and distracting. Narrow it. */
  .scan-line {
    width: 100%;
  }

  /* ---------- Hero rings / shapes (products.php, about.php) ----------
     Previously: display:none — deleted outright on mobile.
     Recomposed instead: smaller, repositioned so they still
     frame the hero content rather than vanishing completely. */
  .hero-shapes,
  .ring-deco {
    display: block !important;
    transform: scale(0.55);
    opacity: 0.5;
  }

  .hero-ring.r1,
  .hero-ring.r2,
  .hero-ring.r3 {
    transform: scale(0.6);
  }
}


@media screen and (max-width: 767px) {

  /* ---------- Homepage 3D schematic card (hero-right) ----------
     Previously: .hero-right { display: none; } — the entire
     animated "spec card" that's the visual centerpiece of the
     desktop hero simply disappeared on mobile, leaving text-only.
     Recomposed instead: shown below the hero text, scaled down,
     with the 3D tilt disabled (tilt-on-hover doesn't apply to
     touch anyway, so keep the object but drop the transform). */
  .hero-right {
    display: block !important;
    margin-top: 32px;
    transform: scale(0.85);
    transform-origin: top center;
  }

  .schematic-card {
    transform: none !important;
    /* disable the rotateX/rotateY 3D tilt — no mouse to trigger it,
       and a static presentation avoids clipping inside a narrow
       viewport */
  }

  .float-badge {
    display: none;
    /* the two floating corner badges are positioned with negative
       offsets (-20px, -16px) that bleed outside the card on a
       narrow screen; simplest safe fix is to drop them at this
       size rather than let them clip or overlap the next section */
  }

  /* ---------- Reduce animation load on mobile ----------
     Multiple concurrent CSS animations (orb pulse, scan sweep,
     hex rotate, blink, floatY) are cheap individually but add up
     on lower-powered mobile GPUs. Pause the purely decorative
     ones on small screens; keep the meaningful ones (badge blink,
     button interactions). */
  .hex-field svg,
  .scan-line,
  .orb {
    animation-duration: 12s;
    /* slow down rather than stop, so it still feels alive without
       constant repaints */
  }
}


/* ---------- Respect reduced-motion preference at any size ---------- */
@media (prefers-reduced-motion: reduce) {

  .hex-field svg,
  .scan-line,
  .orb,
  .float-badge,
  .hero-badge-dot {
    animation: none !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }
}