/* ArcheoMap — Petal Menu (radial FAB) v302
   DOM: #petalFab, #petalOverlay > #petalMenu > .petal-core + .petal*n
   Target: mobile-first, megalithic-archaeology enthusiasts
-------------------------------------------------------------- */

/* ===== FAB (bottom-center temple button) =================== */
#petalFab{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  width:64px;height:64px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffb44a 0%, #e6891a 55%, #a55b0a 100%);
  color:#fff;
  font-size:30px;
  line-height:64px;
  text-align:center;
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    0 6px 18px rgba(0,0,0,.35),
    0 2px 6px rgba(230,137,26,.55),
    inset 0 1px 0 rgba(255,255,255,.35);
  cursor:pointer;
  z-index:10050;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s ease;
}
#petalFab:active{transform:translateX(-50%) scale(.94)}
#petalFab.open{
  transform:translateX(-50%) rotate(45deg) scale(1.05);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    0 0 0 6px rgba(230,137,26,.18);
}

/* Soft animated glow ring around the FAB to attract the eye */
#petalFab .fab-glow{
  position:absolute;inset:-6px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,180,74,.45) 0%, rgba(255,180,74,0) 70%);
  animation:fabPulse 2.4s ease-in-out infinite;
  pointer-events:none;z-index:-1;
}
@keyframes fabPulse{
  0%,100%{transform:scale(1);opacity:.55}
  50%    {transform:scale(1.18);opacity:.15}
}
#petalFab.open .fab-glow{animation-play-state:paused;opacity:0}

/* Hide FAB glow on reduced motion */
@media (prefers-reduced-motion: reduce){
  #petalFab .fab-glow{animation:none;opacity:.25}
  #petalFab{transition:none}
}

/* ===== Overlay (click-outside-to-close) ==================== */
#petalOverlay{
  position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 85%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 75%);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  z-index:10040;
  transition:opacity .22s ease;
  display:flex;align-items:center;justify-content:center;
}
#petalOverlay.open{
  opacity:1;
  pointer-events:auto;
}

/* ===== Menu container ===================================== */
#petalMenu{
  position:relative;
  width:340px;height:340px;
  max-width:92vw;max-height:92vw;
}
@media (max-width:380px){
  #petalMenu{width:300px;height:300px}
}

/* ===== Central core (logo + label) ======================== */
.petal-core{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:108px;height:108px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, #fff5b8 0%, #f0c040 55%, #b8860b 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:
    0 8px 22px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 6px rgba(0,0,0,.18);
  pointer-events:none;
  z-index:2;
}
.petal-core-icon{
  font-size:36px;
  line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.petal-core-label{
  margin-top:4px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#4a2e05;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}

/* ===== Single petal ======================================= */
.petal{
  position:absolute;
  width:68px;height:68px;
  border-radius:50%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  color:#fff;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
  transform:scale(.2) translate(0,20px);
  transition:
    opacity .32s cubic-bezier(.2,.9,.3,1.4),
    transform .42s cubic-bezier(.2,.9,.3,1.4);
  box-shadow:
    0 4px 14px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  z-index:3;
}
@media (max-width:380px){
  .petal{width:58px;height:58px}
}
.petal.show{
  opacity:1;
  transform:scale(1) translate(0,0);
}
.petal:active{transform:scale(.92)}

.petal-icon{
  font-size:24px;
  line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.petal-label{
  margin-top:2px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.3px;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  max-width:62px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Accessibility: focus visible */
#petalFab:focus-visible,
.petal:focus-visible{
  outline:3px solid #fff5b8;
  outline-offset:2px;
}

/* Ensure the FAB sits above the map / topbar.
   IMPORTANT: do NOT force pointer-events:auto on #petalOverlay here —
   the overlay defaults to pointer-events:none (riga 64) e passa a auto
   solo quando ha la classe .open (riga 71). Se forzato auto, l'overlay
   invisibile (opacity:0, display:flex, inset:0, z:10040) intercetta
   TUTTI i click sulla pagina bloccando mappa, topbar e ogni UI. */
#petalFab{pointer-events:auto}