/* menu-v3 — Fixed bottom-left navigation (from cms menu-v2.html fork; photo-site height tuned) */
:root {
  --menu-v2-width: 149px;
  /* 7 links × 36 + 2 dividers × 21 + trigger 36 + inner padding 12 ≈ 342, + ~18 top → 360 */
  --menu-v2-height: 360px;
  /* Collapsed pill width (matches blog fork base) */
  --menu-v2-collapsed-w: 82px;
  --menu-v2-collapsed-h: 48px;

  --menu-v2-spring-w: linear(
    0, 0.0238 4.43%, 0.0917 8.86%, 0.3441 17.71%, 0.6533 26.57%, 0.9054 35.43%,
    1.0638 41.51%, 1.1471 47.59%, 1.1629 50.92%, 1.1595 54.43%, 1.1389 60.69%,
    1.0914 67.69%, 1.0452 73.96%, 1.0135 80.22%, 0.9975 87.04%, 0.9953 93.85%, 1
  );
  --menu-v2-spring-w-retract: linear(
    0, 0.0238 4.43%, 0.0917 8.86%, 0.3441 17.71%, 0.6533 26.57%, 0.9054 35.43%,
    1.0240 41.51%, 1.0551 47.59%, 1.0611 50.92%, 1.0599 54.43%, 1.0521 60.69%,
    1.0343 67.69%, 1.0170 73.96%, 1.0051 80.22%, 0.9990 87.04%, 0.9983 93.85%, 1
  );
  --menu-v2-spring-h: linear(
    0, 0.0089 2.95%, 0.0349 5.91%, 0.1366 11.81%, 0.2941 17.72%, 0.4884 23.62%,
    0.685 29.53%, 0.8503 35.43%, 0.9683 41.34%, 1.0223 47.24%, 1.0402 53.15%,
    1.0428 59.05%, 1.0366 64.96%, 1.0269 70.86%, 1.0174 76.77%, 1.0097 82.67%,
    1.0046 88.58%, 1.0015 94.48%, 1
  );
  --menu-v2-spring-h-retract: linear(
    0, 0.0089 2.95%, 0.0349 5.91%, 0.1366 11.81%, 0.2941 17.72%, 0.4884 23.62%,
    0.685 29.53%, 0.8503 35.43%, 0.9683 41.34%, 1.0167 47.24%, 1.0302 53.15%,
    1.0321 59.05%, 1.0275 64.96%, 1.0202 70.86%, 1.0131 76.77%, 1.0073 82.67%,
    1.0035 88.58%, 1.0011 94.48%, 1
  );

  --menu-v2-dur-h: 655ms;
  --menu-v2-dur-v: 475ms;
  --menu-v2-dur-h-expand: 590ms;
  --menu-v2-dur-v-expand: 428ms;
}

.menu-v2 {
  position: fixed;
  bottom: 32px;
  left: 32px;
  z-index: 9999;

  width: var(--menu-v2-collapsed-w);
  height: var(--menu-v2-collapsed-h);
  /* Paired with .menu-v2-inner translateX; sum 0 in expanded state. Slightly less than ±4px to even out L/R padding around “Menu” when collapsed */
  transform: translateX(3px);

  background: rgba(244, 244, 244, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 25px;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);

  overflow: hidden;
  contain: layout paint;
  will-change: width, height, transform, bottom;

  --menu-v2-spring-w-active: var(--menu-v2-spring-w-retract);
  --menu-v2-spring-h-active: var(--menu-v2-spring-h-retract);
  --menu-v2-dur-h-active: var(--menu-v2-dur-h);
  --menu-v2-dur-v-active: var(--menu-v2-dur-v);
  transition:
    width var(--menu-v2-dur-h-active) var(--menu-v2-spring-w-active),
    height var(--menu-v2-dur-v-active) var(--menu-v2-spring-h-active),
    bottom var(--menu-v2-dur-v-active) var(--menu-v2-spring-h-active),
    transform var(--menu-v2-dur-h-active) var(--menu-v2-spring-w-active),
    border-radius 216ms cubic-bezier(0.2, 0, 0, 1),
    background 132ms ease,
    border-color 132ms ease,
    box-shadow 216ms ease;
}

.menu-v2:hover:not(.is-dismissed),
.menu-v2:focus-within:not(.is-dismissed),
.menu-v2.is-open {
  --menu-v2-spring-w-active: var(--menu-v2-spring-w);
  --menu-v2-spring-h-active: var(--menu-v2-spring-h);
  --menu-v2-dur-h-active: var(--menu-v2-dur-h-expand);
  --menu-v2-dur-v-active: var(--menu-v2-dur-v-expand);
  width: var(--menu-v2-width);
  height: var(--menu-v2-height);
  bottom: 24px;
  transform: translateX(0);
  border-radius: 26px;
  background: rgba(244, 244, 244, 0.78);
  box-shadow: 0 14px 60px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.menu-v2-inner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--menu-v2-width);
  transform: translateX(-3px);
  display: flex;
  flex-direction: column;
  padding: 6px 22px;
  box-sizing: border-box;
  transition:
    transform var(--menu-v2-dur-h-active) var(--menu-v2-spring-w-active),
    bottom var(--menu-v2-dur-v-active) var(--menu-v2-spring-h-active);
}

.menu-v2:hover:not(.is-dismissed) .menu-v2-inner,
.menu-v2:focus-within:not(.is-dismissed) .menu-v2-inner,
.menu-v2.is-open .menu-v2-inner {
  transform: translateX(0);
  bottom: 8px;
}

.menu-v2-inner > a,
.menu-v2-trigger {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.40);
  text-decoration: none;
  padding: 4px 0;
  margin: 0;
  text-align: left;
  white-space: nowrap;
  transition: color 264ms ease;
}

.menu-v2-trigger {
  background: transparent;
  border: none;
  cursor: pointer;
  font-style: normal;
  -webkit-tap-highlight-color: transparent;
}

.menu-v2-inner > a:hover {
  color: rgba(0, 0, 0, 0.78);
}

.menu-v2-inner > a.active {
  color: rgba(0, 0, 0, 0.95);
}

.menu-v2-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 14px;
  line-height: 1;
  vertical-align: 0;
  opacity: 0.85;
}

.menu-v2-divider {
  display: block;
  height: 1px;
  margin: 10px 0;
  background: rgba(0, 0, 0, 0.10);
}

.menu-v2-external {
  letter-spacing: 0.001em;
}

.menu-v2:not(:hover):not(:focus-within):not(.is-open) .menu-v2-trigger,
.menu-v2.is-dismissed .menu-v2-trigger {
  color: rgba(0, 0, 0, 0.85);
}

.menu-v2:not(:hover):not(:focus-within):not(.is-open) .menu-v2-inner > a,
.menu-v2:not(:hover):not(:focus-within):not(.is-open) .menu-v2-divider,
.menu-v2.is-dismissed .menu-v2-inner > a,
.menu-v2.is-dismissed .menu-v2-divider {
  pointer-events: none;
}

.menu-v2-inner > *:nth-last-child(2)  { --menu-v2-stagger-i: 0; }
.menu-v2-inner > *:nth-last-child(3)  { --menu-v2-stagger-i: 1; }
.menu-v2-inner > *:nth-last-child(4)  { --menu-v2-stagger-i: 2; }
.menu-v2-inner > *:nth-last-child(5)  { --menu-v2-stagger-i: 3; }
.menu-v2-inner > *:nth-last-child(6)  { --menu-v2-stagger-i: 4; }
.menu-v2-inner > *:nth-last-child(7)  { --menu-v2-stagger-i: 5; }
.menu-v2-inner > *:nth-last-child(8)  { --menu-v2-stagger-i: 6; }
.menu-v2-inner > *:nth-last-child(9)  { --menu-v2-stagger-i: 7; }
.menu-v2-inner > *:nth-last-child(10) { --menu-v2-stagger-i: 8; }

.menu-v2-inner > *:not(.menu-v2-trigger) {
  opacity: 0;
  transition:
    opacity 200ms ease calc((8 - var(--menu-v2-stagger-i, 0)) * 25ms),
    color 264ms ease;
}

.menu-v2:hover:not(.is-dismissed) .menu-v2-inner > *:not(.menu-v2-trigger),
.menu-v2:focus-within:not(.is-dismissed) .menu-v2-inner > *:not(.menu-v2-trigger),
.menu-v2.is-open .menu-v2-inner > *:not(.menu-v2-trigger) {
  opacity: 1;
  transition:
    opacity 200ms ease calc(var(--menu-v2-stagger-i, 0) * 25ms),
    color 264ms ease;
}

@media (prefers-color-scheme: dark) {
  .menu-v2 {
    background: rgba(28, 28, 28, 0.62);
    border: 1px solid rgba(180, 180, 180, 0.10);
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  }
  .menu-v2:hover:not(.is-dismissed),
  .menu-v2:focus-within:not(.is-dismissed),
  .menu-v2.is-open {
    background: rgba(28, 28, 28, 0.78);
    box-shadow: 0 14px 60px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.30);
  }
  .menu-v2-inner > a,
  .menu-v2-trigger {
    color: rgba(255, 255, 255, 0.42);
  }
  .menu-v2:not(:hover):not(:focus-within):not(.is-open) .menu-v2-trigger,
  .menu-v2.is-dismissed .menu-v2-trigger {
    color: rgba(255, 255, 255, 0.85);
  }
  .menu-v2-inner > a:hover {
    color: rgba(255, 255, 255, 0.92);
  }
  .menu-v2-inner > a.active {
    color: #ffffff;
  }
  .menu-v2-divider {
    background: rgba(255, 255, 255, 0.10);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-v2 {
    transition:
      width 216ms ease,
      height 216ms ease,
      border-radius 216ms ease,
      background 216ms ease;
  }
  .menu-v2-inner > *:not(.menu-v2-trigger) {
    transition: opacity 150ms ease, color 150ms ease;
  }
  .menu-v2:hover:not(.is-dismissed) .menu-v2-inner > *:not(.menu-v2-trigger),
  .menu-v2:focus-within:not(.is-dismissed) .menu-v2-inner > *:not(.menu-v2-trigger),
  .menu-v2.is-open .menu-v2-inner > *:not(.menu-v2-trigger) {
    transition: opacity 150ms ease, color 150ms ease;
  }
}

@media screen and (max-width: 720px) {
  .menu-v2 {
    bottom: 20px;
    left: 20px;
  }
  .menu-v2:hover:not(.is-dismissed),
  .menu-v2:focus-within:not(.is-dismissed),
  .menu-v2.is-open {
    bottom: 12px;
  }
}