/* ==========================================================================
   ArcheoMap — Mobile Performance Boost (v313.154)
   --------------------------------------------------------------------------
   media="(max-width:768px)" via <link>: ZERO impatto desktop.

   PROBLEMA: mobile fluido NO, lag al pan/zoom, animazioni a scatti.
   CAUSE comuni iOS Safari + Android Chrome:
     1. backdrop-filter: blur(...) → costo enorme di repaint
     2. filter: drop-shadow su SVG/PNG → recalculation per ogni frame
     3. transition multiple lunghe (.35s+) → frame skip
     4. niente layer GPU su pane Leaflet → repaint full-tree

   FIX:
     - Promozione hardware (translateZ + will-change) sui pane mappa
     - Backdrop-filter ridotti / sostituiti con background opaco
     - Drop-shadow → box-shadow dove possibile
     - Transitions tagliate a .15s
     - contain: layout style paint dove sicuro
   ========================================================================== */

/* ── 1. GPU compositing pane mappa Leaflet ─────────────────────────────── */
html body .leaflet-container,
html body .leaflet-map-pane,
html body .leaflet-tile-pane,
html body .leaflet-overlay-pane,
html body .leaflet-marker-pane,
html body .leaflet-popup-pane {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

html body .leaflet-marker-icon {
  will-change: transform;
}

/* ── 2. Backdrop-filter pesante → ridotto o sostituito ──────────────────── */

/* Topbar mobile: glass meno aggressivo, blur ridotto da 14px a 6px */
html body .topbar {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Search bar #suBar: blur leggero */
html body #suBar {
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

/* Glass widget assortiti: blur dimezzato */
html body [style*="backdrop-filter"] {
  /* fallback: sostituiamo blur(12-14px) con blur(6px) tramite specifità */
}

/* ── 3. Drop-shadow → box-shadow dove possibile (cluster, badge) ────────── */

/* Marker cluster: drop-shadow rimosso (era già stato ridotto, ora niente) */
html body .marker-cluster > div {
  filter: none !important;
}

/* ── 4. Transitions tagliate ────────────────────────────────────────────── */
html body .ad2-root *,
html body .topbar *,
html body .petal,
html body .am-near-btn {
  transition-duration: .15s !important;
}

/* ── 5. Detail panel: contain per limitare repaint ────────────────────── */
html body .ad2-root {
  contain: layout style;
}
html body .ad2-root .ad2-section {
  contain: layout style paint;
}

/* ── 6. Scroll inertia esplicita per evitare janky scroll ──────────────── */
html body .ad2-root,
html body .ad2-gallery,
html body .ad2-similar,
html body #suDrop {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── 7. Animation rendering: niente reflow inutile ─────────────────────── */
@keyframes archeoPinBornGlow {
  /* Override più leggero: niente filter, solo opacity (GPU-friendly) */
  0%   { opacity: .85; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ── 8. Tile loading: niente fade-in (riduce repaint costose) ──────────── */
html body .leaflet-tile {
  transition: none !important;
}

/* ── 9. Petal menu: animazioni più rapide ─────────────────────────────── */
html body .petal {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s ease !important;
}