/* ML_NAV2 v1 — overrides for the CURRENT MATCH.LIFE markup (#nav / .nav-button / #fab).
 * NOT INSTALLED. Planned location: assets/nav2/css/nav-fab-app.css (urls are relative to this file).
 * Load it AFTER the main <style> blocks of index.html (end of <head>), see INSTALL_PLAN.md.
 * Requires: <img src="assets/nav2/svg/<name>.svg"> inside .nav-button, and the #fab inner SVG
 * replaced with svg/fab.svg (layers #fab-glow … #fab-arcs).
 */

/* ---- nav buttons: orb comes from nav-orb.svg, glyph is the existing <img> ---- */
#nav{ gap: 14px; }
#nav .nav-item:not(:last-of-type)::after{ top: calc(100% + 1px); height: 12px; opacity: .7; }
#nav .nav-button{
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease;
}
#nav .nav-button::before{
  content: "";
  position: absolute;
  inset: -12.75%;                      /* sphere Ø51 inside the 64 canvas → sphere = button size */
  background: url("../svg/nav-orb.svg") center / contain no-repeat;
  pointer-events: none;
  transition: filter .25s ease;
}
#nav .nav-button.active{ box-shadow: none; }        /* old CSS halo (id+2 classes) would leak around the orb */
#nav .nav-button.active::before{ background-image: url("../svg/nav-orb-active.svg"); }
#nav .nav-button img{
  position: absolute;
  left: 50%; top: 50%;
  width: var(--nav2-g, 74%);
  height: var(--nav2-g, 74%);
  transform: translate(-50%, -49%);
  object-fit: contain;
  pointer-events: none;
  transition: filter .25s ease;
}
#nav .nav-button[data-target="profile"]{ --nav2-g: 80.2%; }
#nav .nav-button[data-target="matches"]{ --nav2-g: 79.4%; }
#nav .nav-button[data-target="home"],
#nav .nav-button[data-target="messages"]{ --nav2-g: 72.5%; }
#nav .nav-button:hover::before{ filter: brightness(1.18) saturate(1.1); }
#nav .nav-button:hover img{ filter: brightness(1.12) drop-shadow(0 0 4px rgba(255,63,200,.55)); }
#nav .nav-button:active{ transform: scale(.93); }

/* ---- FAB: the new SVG draws its own glass, rim and glow ---- */
#fab{
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
#fab::before{ display: none; }
#fab .fab-orb{ position: relative; filter: none; }
#fab .fab-svg{
  position: absolute;
  inset: -19.15%;                      /* sphere Ø56.4 inside the 78 canvas → sphere = FAB size */
  width: 138.3%;
  height: 138.3%;
  overflow: visible;
  transition: filter .25s ease;
}
#fab:hover .fab-svg{ filter: brightness(1.12) saturate(1.08); }
#fab[aria-expanded="true"]{ box-shadow: none; border: 0; }

/* neutralise the old ML_FAB_ALIVE layer animations that share class names */
#fab .fab-ring-outer,
#fab[aria-expanded="true"] .fab-ring-outer{ animation: none; transform: none; }

#fab .fab-glow{ animation: nav2-breathe 3.4s ease-in-out infinite; }
#fab .fab-heart,
#fab[aria-expanded="true"] .fab-heart{
  transform-box: fill-box;
  transform-origin: 50% 55%;
  animation: nav2-pulse 2.6s ease-in-out infinite;
}
#fab .fab-heart-turn{ transform-box: fill-box; transform-origin: 50% 50%; animation: nav2-turn 9s ease-in-out infinite; }
#fab .fab-orbit-back,
#fab .fab-orbit-front{ transform-box: view-box; transform-origin: 39.2px 43.4px; animation: nav2-rock 6s ease-in-out infinite; }
#fab .fab-orbit-spark{ animation: nav2-spark 3.2s linear infinite; }
#fab .fab-orbit-back .fab-orbit-spark{ animation-delay: -1.6s; }
#fab .fab-arcs{ opacity: 0; transform-box: view-box; transform-origin: 39px 39px; transform: scale(.9); transition: opacity .35s ease, transform .45s ease; }
#fab .fab-arcs > path{ transform-box: view-box; transform-origin: 39px 39px; animation: nav2-spin 8s linear infinite; }
#fab .fab-arcs > path:nth-child(even){ animation-duration: 11s; animation-direction: reverse; }
#fab[aria-expanded="true"] .fab-arcs{ opacity: 1; transform: none; }
#fab[aria-expanded="true"] .fab-orbit-spark{ animation-duration: 1.8s; }
#fab:active .fab-heart, #fab:active .fab-orbit-back, #fab:active .fab-orbit-front{ animation-play-state: paused; }

@keyframes nav2-breathe{ 0%,100%{ opacity: .82; } 50%{ opacity: 1; } }
@keyframes nav2-pulse{ 0%,100%{ transform: scale(1); } 12%{ transform: scale(1.07); } 24%{ transform: scale(.99); } 36%{ transform: scale(1.045); } 52%{ transform: scale(1); } }
@keyframes nav2-turn{ 0%,70%{ transform: scaleX(1); } 85%{ transform: scaleX(-1); } 100%{ transform: scaleX(1); } }
@keyframes nav2-rock{ 0%,100%{ transform: rotate(-3deg); } 50%{ transform: rotate(3deg); } }
@keyframes nav2-spark{ from{ stroke-dashoffset: 0; } to{ stroke-dashoffset: -64; } }
@keyframes nav2-spin{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  #nav *, #nav *::before, #fab, #fab *{ animation: none !important; transition: none !important; }
}