/* ==========================================================================
   Navigation — responsive radial feature wheel.

   The wheel keeps its original slice geometry while using the current design
   tokens, a stronger page backdrop, and motion that degrades cleanly.
   ========================================================================== */

.has-bottom-navigation {
  padding-bottom: 6rem;
}

.bottom-navigation {
  position: fixed;
  z-index: 50;
  inset: 0;
  pointer-events: none;
}

.bottom-nav-backdrop {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  border: 0;
  opacity: 0;
  visibility: hidden;
  background: rgba(5, 9, 18, 0.68);
  backdrop-filter: blur(8px) saturate(80%);
  -webkit-backdrop-filter: blur(8px) saturate(80%);
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.bottom-nav-panel {
  --wheel-width: clamp(20rem, 96vw, 36rem);
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: 0;
  width: var(--wheel-width);
  aspect-ratio: 2 / 1;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: center bottom;
  transform: translate(50%, calc(100% + 1rem));
  transition:
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms ease,
    visibility 240ms ease;
}

/* The dome is not painted here — the six petals tile it. If the panel drew its
   own fill, a lifted petal would slide off it and read as a second slice on top
   of an untouched dome, instead of the slice itself moving. All that is left is
   the drop shadow the assembled dome casts. */
.bottom-nav-panel::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  content: "";
  box-shadow: 0 18px 48px rgba(23, 35, 60, 0.16);
  pointer-events: none;
}

.bottom-nav-track {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
  padding: 0;
}

.bottom-nav-item {
  --slice-x: 50%;
  --slice-y: 50%;
  --lift-x: 0;
  --lift-y: 0;
  --item-delay: 80ms;
  position: absolute;
  z-index: 0;
  inset: 0;
  color: var(--muted);
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  /* the whole rectangle must not catch clicks or clip the label; only the petal and its content do */
  pointer-events: none;
  overflow: visible;
  transition: color 180ms ease;
}

/* The slice lives on the pseudo-element so lifting it never clips its icon or
   label. --petal-rim must stay sized to the dome's own ellipse (50% of the
   width by 100% of the height); any other size makes the highlight drift off
   the arc and pool wherever the two ellipses happen to meet. */
.bottom-nav-item::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    var(--petal-rim),
    var(--petal-edges),
    var(--petal-glass);
  clip-path: var(--slice-shape);
  backdrop-filter: blur(14px) saturate(155%);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
  content: "";
  opacity: 0;
  pointer-events: auto;
  transform-origin: center bottom;
  transition:
    background 180ms ease,
    opacity 220ms ease var(--item-delay),
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bottom-nav-item:nth-child(1) {
  --slice-x: 20%;
  --slice-y: 84%;
  --lift-x: -1.4rem;
  --lift-y: -0.4rem;
  --item-delay: 80ms;
  --slice-shape: polygon(50% 100%, 0.000% 100.000%, 0.008% 98.255%, 0.030% 96.510%, 0.069% 94.766%, 0.122% 93.024%, 0.190% 91.284%, 0.274% 89.547%, 0.373% 87.813%, 0.487% 86.083%, 0.616% 84.357%, 0.760% 82.635%, 0.919% 80.919%, 1.093% 79.209%, 1.281% 77.505%, 1.485% 75.808%, 1.704% 74.118%, 1.937% 72.436%, 2.185% 70.763%, 2.447% 69.098%, 2.724% 67.443%, 3.015% 65.798%, 3.321% 64.163%, 3.641% 62.539%, 3.975% 60.927%, 4.323% 59.326%, 4.685% 57.738%, 5.060% 56.163%, 5.450% 54.601%, 5.853% 53.053%, 6.269% 51.519%, 6.699% 50.000%);
}

.bottom-nav-item:nth-child(2) {
  --slice-x: 28%;
  --slice-y: 56%;
  --lift-x: -1.1rem;
  --lift-y: -1.1rem;
  --item-delay: 115ms;
  --slice-shape: polygon(50% 100%, 6.699% 50.000%, 7.142% 48.496%, 7.598% 47.008%, 8.066% 45.536%, 8.548% 44.081%, 9.042% 42.642%, 9.549% 41.221%, 10.068% 39.818%, 10.599% 38.434%, 11.143% 37.068%, 11.698% 35.721%, 12.265% 34.394%, 12.843% 33.087%, 13.432% 31.800%, 14.033% 30.534%, 14.645% 29.289%, 15.267% 28.066%, 15.900% 26.865%, 16.543% 25.686%, 17.197% 24.529%, 17.861% 23.396%, 18.534% 22.285%, 19.217% 21.199%, 19.909% 20.136%, 20.611% 19.098%, 21.321% 18.085%, 22.040% 17.096%, 22.768% 16.133%, 23.504% 15.195%, 24.248% 14.283%, 25.000% 13.397%);
}

.bottom-nav-item:nth-child(3) {
  --slice-x: 42%;
  --slice-y: 40%;
  --lift-x: -0.4rem;
  --lift-y: -1.5rem;
  --item-delay: 150ms;
  --slice-shape: polygon(50% 100%, 25.000% 13.397%, 25.760% 12.538%, 26.526% 11.705%, 27.300% 10.899%, 28.081% 10.121%, 28.869% 9.369%, 29.663% 8.645%, 30.463% 7.950%, 31.270% 7.282%, 32.082% 6.642%, 32.899% 6.031%, 33.722% 5.448%, 34.549% 4.894%, 35.381% 4.370%, 36.218% 3.874%, 37.059% 3.407%, 37.904% 2.970%, 38.752% 2.563%, 39.604% 2.185%, 40.460% 1.837%, 41.318% 1.519%, 42.178% 1.231%, 43.041% 0.973%, 43.907% 0.745%, 44.774% 0.548%, 45.642% 0.381%, 46.512% 0.244%, 47.383% 0.137%, 48.255% 0.061%, 49.127% 0.015%, 50.000% 0.000%);
}

.bottom-nav-item:nth-child(4) {
  --slice-x: 58%;
  --slice-y: 40%;
  --lift-x: 0.4rem;
  --lift-y: -1.5rem;
  --item-delay: 185ms;
  --slice-shape: polygon(50% 100%, 50.000% 0.000%, 50.873% 0.015%, 51.745% 0.061%, 52.617% 0.137%, 53.488% 0.244%, 54.358% 0.381%, 55.226% 0.548%, 56.093% 0.745%, 56.959% 0.973%, 57.822% 1.231%, 58.682% 1.519%, 59.540% 1.837%, 60.396% 2.185%, 61.248% 2.563%, 62.096% 2.970%, 62.941% 3.407%, 63.782% 3.874%, 64.619% 4.370%, 65.451% 4.894%, 66.278% 5.448%, 67.101% 6.031%, 67.918% 6.642%, 68.730% 7.282%, 69.537% 7.950%, 70.337% 8.645%, 71.131% 9.369%, 71.919% 10.121%, 72.700% 10.899%, 73.474% 11.705%, 74.240% 12.538%, 75.000% 13.397%);
}

.bottom-nav-item:nth-child(5) {
  --slice-x: 72%;
  --slice-y: 56%;
  --lift-x: 1.1rem;
  --lift-y: -1.1rem;
  --item-delay: 220ms;
  --slice-shape: polygon(50% 100%, 75.000% 13.397%, 75.752% 14.283%, 76.496% 15.195%, 77.232% 16.133%, 77.960% 17.096%, 78.679% 18.085%, 79.389% 19.098%, 80.091% 20.136%, 80.783% 21.199%, 81.466% 22.285%, 82.139% 23.396%, 82.803% 24.529%, 83.457% 25.686%, 84.100% 26.865%, 84.733% 28.066%, 85.355% 29.289%, 85.967% 30.534%, 86.568% 31.800%, 87.157% 33.087%, 87.735% 34.394%, 88.302% 35.721%, 88.857% 37.068%, 89.401% 38.434%, 89.932% 39.818%, 90.451% 41.221%, 90.958% 42.642%, 91.452% 44.081%, 91.934% 45.536%, 92.402% 47.008%, 92.858% 48.496%, 93.301% 50.000%);
}

.bottom-nav-item:nth-child(6) {
  --slice-x: 80%;
  --slice-y: 84%;
  --lift-x: 1.4rem;
  --lift-y: -0.4rem;
  --item-delay: 255ms;
  --slice-shape: polygon(50% 100%, 93.301% 50.000%, 93.731% 51.519%, 94.147% 53.053%, 94.550% 54.601%, 94.940% 56.163%, 95.315% 57.738%, 95.677% 59.326%, 96.025% 60.927%, 96.359% 62.539%, 96.679% 64.163%, 96.985% 65.798%, 97.276% 67.443%, 97.553% 69.098%, 97.815% 70.763%, 98.063% 72.436%, 98.296% 74.118%, 98.515% 75.808%, 98.719% 77.505%, 98.907% 79.209%, 99.081% 80.919%, 99.240% 82.635%, 99.384% 84.357%, 99.513% 86.083%, 99.627% 87.813%, 99.726% 89.547%, 99.810% 91.284%, 99.878% 93.024%, 99.931% 94.766%, 99.970% 96.510%, 99.992% 98.255%, 100.000% 100.000%);
}

.bottom-nav-item-content {
  position: absolute;
  z-index: 1;
  left: var(--slice-x);
  top: var(--slice-y);
  display: flex;
  gap: 0.3rem;
  align-items: center;
  opacity: 0;
  white-space: nowrap;
  transform: translate(-50%, calc(-50% + 0.75rem)) scale(0.92);
  flex-direction: column;
  /* Hit-testing belongs to the clipped petal below, so the label and icon —
     which spill past their own wedge — never trigger a neighbour's hover. */
  pointer-events: none;
  transition:
    color 180ms ease,
    opacity 220ms ease var(--item-delay),
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--item-delay);
}

.bottom-nav-item:hover,
.bottom-nav-item:focus-visible {
  z-index: 1;
  color: var(--navy);
}

.bottom-nav-item:hover,
.bottom-nav-item:focus-visible {
  --petal-glass:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)),
    linear-gradient(20deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(255, 255, 255, 0.12));
}

/* Pure translation, no scale: the slice slides straight out of the dome along
   its own radius and leaves a real gap behind it. */
.bottom-nav-item:hover::before,
.bottom-nav-item:focus-visible::before {
  transform: translate(var(--lift-x), var(--lift-y));
}

.bottom-navigation.is-open .bottom-nav-item::before,
.bottom-navigation.is-open .bottom-nav-item-content {
  opacity: 1;
}

.bottom-navigation.is-open .bottom-nav-item-content {
  transform: translate(-50%, -50%) scale(1);
}

.bottom-navigation.is-open :is(.bottom-nav-item:hover, .bottom-nav-item:focus-visible) .bottom-nav-item-content {
  transform: translate(-50%, -50%) translate(var(--lift-x), var(--lift-y)) scale(1.035);
}

.bottom-navigation:not(.is-open) .bottom-nav-item::before,
.bottom-navigation:not(.is-open) .bottom-nav-item-content {
  transition-delay: 0ms;
}

.bottom-nav-feature-icon {
  display: grid;
  width: clamp(2.45rem, 8.5vw, 3.25rem);
  height: clamp(2.45rem, 8.5vw, 3.25rem);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 20px rgba(23, 35, 60, 0.09);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: clamp(1.2rem, 3.4vw, 1.45rem);
  font-weight: 900;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.bottom-nav-item:hover .bottom-nav-feature-icon,
.bottom-nav-item:focus-visible .bottom-nav-feature-icon {
  color: var(--navy);
  border-color: var(--green);
  background: var(--green);
  transform: scale(1.04);
}

.bottom-nav-item:focus-visible {
  outline: none;
}

.bottom-nav-item:focus-visible .bottom-nav-feature-icon,
.bottom-nav-toggle:focus-visible {
  border-radius: 0.6rem;
  outline: 3px solid var(--accent-glow);
  outline-offset: 3px;
}

.bottom-nav-toggle {
  position: absolute;
  z-index: 3;
  right: 50%;
  bottom: 0.85rem;
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  color: var(--white);
  background: linear-gradient(145deg, var(--accent-hover), var(--accent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 28px rgba(23, 35, 60, 0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  pointer-events: auto;
  transform: translateX(50%);
  transition:
    bottom 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms ease,
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bottom-nav-toggle span {
  position: relative;
  display: block;
  width: 1.55rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: background 0.2s ease;
}

.bottom-nav-toggle span::before,
.bottom-nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.2s ease, top 0.2s ease;
}

.bottom-nav-toggle span::before {
  top: -0.42rem;
}

.bottom-nav-toggle span::after {
  top: 0.42rem;
}

.bottom-navigation.is-open .bottom-nav-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bottom-navigation.is-open .bottom-nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(50%, 0);
}

.bottom-navigation.is-open .bottom-nav-toggle span {
  background: transparent;
}

.bottom-navigation.is-open .bottom-nav-toggle {
  bottom: 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 14px 34px rgba(0, 0, 0, 0.36);
  transform: translateX(50%) scale(1.06);
}

.bottom-navigation.is-open .bottom-nav-toggle span::before {
  top: 0;
  transform: rotate(45deg);
}

.bottom-navigation.is-open .bottom-nav-toggle span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ---------- Dark theme, from the previous commit's theme.css ------------- */

html[data-theme="dark"] .bottom-nav-panel::before {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .bottom-navigation {
  --petal-rim: radial-gradient(
    50% 100% at 50% 100%,
    transparent 0 99.4%,
    rgba(255, 255, 255, 0.24) 99.4%
  );
  --petal-edges: repeating-conic-gradient(
    from 270deg at 50% 100%,
    transparent 0deg 29.5deg,
    rgba(255, 255, 255, 0.28) 29.5deg 29.85deg,
    transparent 29.85deg 30deg
  );
  --petal-glass:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 88%, transparent),
      color-mix(in srgb, var(--bg) 80%, transparent)),
    linear-gradient(20deg, color-mix(in srgb, var(--accent) 14%, transparent), rgba(255, 255, 255, 0.03));
}

html[data-theme="dark"] :is(.bottom-nav-item:hover, .bottom-nav-item:focus-visible) {
  --petal-glass:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-hover) 94%, transparent),
      color-mix(in srgb, var(--surface) 88%, transparent)),
    linear-gradient(20deg, color-mix(in srgb, var(--accent) 22%, transparent), rgba(255, 255, 255, 0.06));
}

html[data-theme="dark"] :is(.bottom-nav-item:hover, .bottom-nav-item:focus-visible) {
  color: var(--text);
}

html[data-theme="dark"] .bottom-nav-feature-icon {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

html[data-theme="dark"] .bottom-nav-toggle {
  color: var(--text-on-accent);
}

/* ---------- Colour names this stylesheet was written against -------------

   The wheel predates the token layer. Rather than rewrite its rules, the
   four names it uses are pointed at the current tokens here, so the design
   picks up the blue accent and both themes without being touched.
   ------------------------------------------------------------------------ */

.bottom-navigation {
  --petal-rim: radial-gradient(
    50% 100% at 50% 100%,
    transparent 0 99.4%,
    rgba(255, 255, 255, 0.72) 99.4%
  );
  --petal-edges: repeating-conic-gradient(
    from 270deg at 50% 100%,
    transparent 0deg 29.5deg,
    rgba(255, 255, 255, 0.5) 29.5deg 29.85deg,
    transparent 29.85deg 30deg
  );
  --petal-glass:
    linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.16)),
    linear-gradient(20deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(255, 255, 255, 0.08));
  --navy: var(--text-strong);
  --muted: var(--text-muted);
  --green: var(--accent);
  --white: var(--text-on-accent);
}

@media (max-width: 23rem) {
  .bottom-nav-panel {
    --wheel-width: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav-backdrop,
  .bottom-nav-panel,
  .bottom-nav-item,
  .bottom-nav-item::before,
  .bottom-nav-item-content,
  .bottom-nav-feature-icon,
  .bottom-nav-toggle,
  .bottom-nav-toggle span,
  .bottom-nav-toggle span::before,
  .bottom-nav-toggle span::after {
    transition: none;
  }
}