/* Menu · Firebird kit · components/chrome/menu
   The full-screen menu, always at night: the cockpit fills the stage, the links and the three base clocks
   run along the bottom. It sits below the header (which stays usable on top) and above everything else.
   While it opens or closes, a circle with a soft edge masks it (--ox, --oy, --reveal, set per frame by
   menu.js); clip-path follows the same circle so hit-testing matches what is visible. Tokens only. */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--surface);
  color: var(--ink);
  visibility: hidden;
}
.menu.is-open {
  visibility: visible;
}
.menu:focus {
  outline: none; /* it holds focus only until the cockpit's buttons exist */
}
.menu.is-revealing {
  -webkit-mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 calc(var(--reveal, 0px) - 120px), transparent var(--reveal, 0px));
  mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 calc(var(--reveal, 0px) - 120px), transparent var(--reveal, 0px));
  clip-path: circle(var(--reveal, 0px) at var(--ox) var(--oy));
}
/* While it closes, nothing inside reacts; the overlay itself stays hit-testable for the header's theme. */
.menu.is-closing > * {
  pointer-events: none;
}

/* The cockpit fills the whole overlay; its floor runs under the bottom row. */
.menu .menu__stage {
  position: absolute;
  inset: 0;
}

.menu__label {
  position: absolute;
  top: var(--space-9);
  left: var(--space-page);
  margin: 0;
  color: var(--ink-muted);
  pointer-events: none;
}

.menu__bottom {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-7);
  padding: var(--space-9) var(--space-page) var(--space-5);
  background: linear-gradient(0deg, var(--surface) 30%, color-mix(in srgb, var(--surface) 70%, transparent) 60%, transparent);
  pointer-events: none; /* drags and wheel over the floor still reach the cockpit */
}

.menu__links ul,
.menu__clocks {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu__links ul {
  gap: 0 var(--space-6);
}
.menu__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  pointer-events: auto;
}
.menu__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.menu__links a:hover::after,
.menu__links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* The bases with their local time: a gold dot while the sun is up there, an empty ring at night. */
.menu__clocks {
  gap: var(--space-2) var(--space-6);
  min-height: 44px;
  align-items: center;
  color: var(--ink-muted);
}
.menu__clocks li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.menu__clocks time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.menu__clocks time::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink-faint);
  border-radius: 50%;
  transition: background var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
}
.menu__clocks time[data-daylight='day']::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* Label, links and clocks blur in behind the circle, staggered. */
.menu.is-open [data-reveal] {
  animation: menu-in var(--dur-slow) var(--ease-out-expo) both;
  animation-delay: calc(var(--dur-base) * 0.75 + var(--i, 0) * 90ms);
}
.menu.is-closing [data-reveal] {
  animation: none;
}
@keyframes menu-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(10px); }
}

/* ── Phones: links and clocks stack; each clock puts its city over its time ── */

@media (max-width: 599.98px) {
  .menu__label {
    top: calc(var(--space-9) - var(--space-3));
  }
  .menu__bottom {
    display: grid;
    justify-content: stretch;
    gap: var(--space-3);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
  /* Left-aligned rows with one gap, so links that wrap onto a second row keep the rhythm of the first. */
  .menu__links ul {
    justify-content: flex-start;
    gap: 0 var(--space-5);
  }
  .menu__clocks {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--hairline);
  }
  .menu__clocks li {
    display: grid;
    gap: var(--space-1);
  }
}

/* Reduced motion: menu.js fades the overlay instead of the circle; nothing else moves. base.css turns every
   change into a 0.01 ms transition there, visibility included, so the menu and its content would only become
   visible on the next frame: too late to take focus as it opens, or to let the header see the page again as
   it closes. The menu's changes apply at once instead. */
@media (prefers-reduced-motion: reduce) {
  .menu.is-open [data-reveal] {
    animation: none;
  }
  .menu,
  .menu * {
    transition: none !important;
  }
  .menu.is-revealing {
    -webkit-mask-image: none;
    mask-image: none;
    clip-path: none;
  }
}