html {
  background-color: #96D8C1;
  color: white;
  text-align: center;
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  margin-bottom: 10px;
  margin-top: 10px;
}

h1 {
  font-size: 3em;
}

/* Outer shell: goo filter + placement. Inner: uniform scale on small viewports. */

.menu {
  filter: url("#goo");
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 0;
  transform: translate(-50%, -50%);
  padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  --home-menu-h-gutter: 1.5rem;
  width: min(380px, calc(100vw - var(--home-menu-h-gutter)));
  max-width: calc(100vw - var(--home-menu-h-gutter));
  height: 250px;
  box-sizing: border-box;
  font-size: 20px;
  text-align: left;
  --menu-ui-scale: 1;
  /* 80px base hit target; shrink scale when viewport is narrower than default art */
  --home-hub-scale: min(
    4.8,
    calc(
      (
        100vw
        - var(--home-menu-h-gutter)
        - env(safe-area-inset-left, 0px)
        - env(safe-area-inset-right, 0px)
      ) / 80px
    )
  );
  --home-hub-scale-open: calc(var(--home-hub-scale) * 0.5);
  --home-hub-scale-hover: calc(var(--home-hub-scale) * 1.02083333);
}

.menu-inner {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  transform: scale(var(--menu-ui-scale));
  transform-origin: center center;
}

.menu-item {
  background: transparent;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  color: white;
  text-align: center;
  line-height: 80px;
  transform: translate(-50%, -50%);
  transition: transform ease-out 200ms;
  touch-action: manipulation;
}

.menu-open-button {
  background: transparent;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  color: white;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: transform ease-out 200ms;
  touch-action: manipulation;
}

.menu-open {
  display: none;
}

.menu img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hamburger {
  width: 25px;
  height: 3px;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  transition: transform 200ms;
}

.hamburger-1 {
  transform: translate3d(0, -8px, 0);
}

.hamburger-2 {
  transform: translate3d(0, 0, 0);
}

.hamburger-3 {
  transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .hamburger-1 {
  transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu-item:hover {
  background: transparent;
  color: #e91e63;
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}
.menu-inner > .menu-item:nth-child(3) {
  transition-duration: 180ms;
}
.menu-inner > .menu-item:nth-child(4) {
  transition-duration: 180ms;
}
.menu-inner > .menu-item:nth-child(5) {
  transition-duration: 180ms;
}
.menu-inner > .menu-item:nth-child(6) {
  transition-duration: 180ms;
}
.menu-inner > .menu-item:nth-child(7) {
  transition-duration: 180ms;
}
.menu-inner > .menu-item:nth-child(8) {
  transition-duration: 180ms;
}
.menu-inner > .menu-item:nth-child(9) {
  transition-duration: 180ms;
}

.menu-open-button {
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  transform: translate(-50%, -50%) scale(var(--home-hub-scale));
  cursor: pointer;
}

.menu-open-button:hover {
  transform: translate(-50%, -50%) scale(var(--home-hub-scale-hover));
}

.menu-open:checked + .menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  transform: translate(-50%, -50%) scale(var(--home-hub-scale-open));
}

.menu-open:checked ~ .menu-item {
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
  transition-duration: 180ms;
  transform: translate(-50%, -50%) scale(1.8, 1.8) translate3d(0.08361px, -104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
  transition-duration: 280ms;
  transform: translate(-50%, -50%) scale(1.8, 1.8) translate3d(90.9466px, -52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
  transition-duration: 380ms;
  transform: translate(-50%, -50%) scale(1.8, 1.8) translate3d(90.9466px, 52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
  transition-duration: 480ms;
  transform: translate(-50%, -50%) scale(1.8, 1.8) translate3d(0.08361px, 104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
  transition-duration: 580ms;
  transform: translate(-50%, -50%) scale(1.8, 1.8) translate3d(-90.86291px, 52.62064px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(8) {
  transition-duration: 680ms;
  transform: translate(-50%, -50%) scale(1.8, 1.8) translate3d(-91.03006px, -52.33095px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(9) {
  transition-duration: 780ms;
  transform: translate(-50%, -50%) scale(1.8, 1.8) translate3d(-0.25084px, -104.9997px, 0);
}

@media screen and (max-width: 736px) {
  .menu {
    --home-move-duration: 0.42s;
    --home-move-ease: cubic-bezier(0.33, 1, 0.68, 1);
    /* After hub reaches top, list reveals (accordion + slide down) */
    --home-reveal-base: var(--home-move-duration);
    position: fixed;
    left: 50%;
    bottom: auto;
    --home-menu-h-gutter: 1.25rem;
    /* Secondary row art: grows with viewport (narrower = smaller factor, less overflow) */
    --home-secondary-img-factor-min: 1.5;
    --home-secondary-img-factor-max: 1.8;
    /* Linear ramp 320px → factor-min … 736px → factor-max inside this breakpoint */
    --home-secondary-img-factor: clamp(
      var(--home-secondary-img-factor-min),
      calc(
        var(--home-secondary-img-factor-min) +
          (100vw - 320px) / 416px *
          (
            var(--home-secondary-img-factor-max) -
              var(--home-secondary-img-factor-min)
          )
      ),
      var(--home-secondary-img-factor-max)
    );
    --home-row-tile-target-px: 144;
    --home-row-max-screen-px: calc(
      var(--home-row-tile-target-px) * var(--home-secondary-img-factor)
    );
    /* Exposed on .menu so open-state paint bleed can use the same factor as .menu-inner */
    --menu-ui-scale: min(1, calc((100vw - 1.25rem) / 380));
    width: min(380px, calc(100vw - var(--home-menu-h-gutter)));
    max-width: calc(100vw - var(--home-menu-h-gutter));
    height: auto;
    box-sizing: border-box;
    transition:
      top var(--home-move-duration) var(--home-move-ease),
      transform var(--home-move-duration) var(--home-move-ease),
      padding-top 0.35s ease-out,
      max-height 0.35s ease-out;
  }

  /* Closed: centered on viewport (same idea as before the column layout) */
  .menu:not(:has(.menu-open:checked)) {
    top: 50%;
    transform: translate(-50%, -50%);
    padding-top: 0;
    max-height: none;
    overflow-x: visible;
    overflow-y: visible;
  }

  /* Open: full width, scrollbar at screen edge; keep left 50% + translateX(-50%) so
     only top / translateY animate (left:0 + transform:none made the shell move diagonally). */
  .menu:has(.menu-open:checked) {
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: none;
    top: 0;
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
    max-height: 100vh;
    max-height: 100dvh;
    /* clip: avoid horizontal scroll; do not pair with hidden+auto in a way that clips transformed children */
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Row tiles: 80×80 × this scale × --menu-ui-scale on .menu-inner; cap width ≤ --home-row-max-screen-px */
    --home-hub-at-top-scale: min(
      5.2,
      calc(var(--home-hub-scale) * 1.06),
      calc(var(--home-row-max-screen-px) * 1px / 80px / var(--menu-ui-scale))
    );
    /*
      Transforms paint outside 80×80 hubs/tiles; without extra inline padding,
      overflow-x: clip cuts off scaled paint. Include full --home-hub-scale so the hub
      is not clipped while it animates open/closed (open uses half scale; idle is larger).
      +12px for goo filter blur fringe (stdDeviation 10).
    */
    --home-open-paint-bleed: calc(
      max(
        0px,
        max(
          calc(500px * (var(--home-hub-scale) * var(--menu-ui-scale) - 1)),
          calc(
            500px *
              (var(--home-hub-scale-open) * var(--menu-ui-scale) - 1)
          ),
          calc(
            500px *
              (var(--home-hub-at-top-scale) * var(--menu-ui-scale) - 1)
          )
        )
      ) + 12px
    );
    padding-left: calc(
      max(0.75rem, env(safe-area-inset-left, 0px)) + var(--home-open-paint-bleed)
    );
    padding-right: calc(
      max(0.75rem, env(safe-area-inset-right, 0px)) + var(--home-open-paint-bleed)
    );
  }

  .menu-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    width: 100%;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }

  /* Scaled hub paints outside its 80×80 layout box; inset keeps it inside the scrollport */
  .menu:has(.menu-open:checked) .menu-inner {
    --home-hub-visual-inset: max(
      0px,
      calc(40px * (var(--home-hub-scale) * var(--menu-ui-scale) - 1))
    );
    padding-top: var(--home-hub-visual-inset);
    overflow: visible;
  }

  /* Principal control on top; links stack below (accordion), not radial */
  .menu-open-button {
    position: relative;
    left: auto;
    top: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    overflow: visible;
    transform: scale(var(--home-hub-scale));
    transform-origin: center center;
    margin-bottom: 0;
    transition:
      transform var(--home-move-duration) var(--home-move-ease),
      margin-bottom 0.3s ease-out,
      margin-top 0.3s ease-out;
  }

  .menu-open-button:hover {
    transform: scale(var(--home-hub-scale-hover));
  }

  /* At top: half the idle hub scale (÷2), same factor as --home-hub-scale-open */
  .menu-open:checked + .menu-open-button {
    transform: scale(var(--home-hub-scale-open));
    margin-top: 1.25rem;
    margin-bottom: calc(
      max(3.75rem, var(--home-hub-visual-inset, 0px)) + 1.5rem
    );
    transition-timing-function: var(--home-move-ease);
    transition-duration: var(--home-move-duration);
  }

  .menu-item {
    position: relative;
    left: auto;
    top: auto;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    transition:
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.26s ease-out,
      max-height 0.32s ease-out,
      margin 0.26s ease-out;
  }

  .menu-open:not(:checked) ~ .menu-item {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-0.5rem) scale(0.92);
    transition-delay: 0ms;
    transition-timing-function: ease-in;
  }

  .menu-open:checked ~ .menu-item {
    max-height: min(calc(168px * var(--home-secondary-img-factor)), 42vh);
    opacity: 1;
    margin-bottom: 3rem;
    overflow: visible;
    pointer-events: auto;
    transform: translateY(0) scale(var(--home-hub-at-top-scale, var(--home-hub-scale)));
  }

  .menu-open:checked ~ .menu-item:last-of-type {
    margin-bottom: 0;
  }

  /* Override desktop radial spread; reveal after hub reaches top */
  .menu-open:checked ~ .menu-item:nth-child(3) {
    transition-delay: calc(var(--home-reveal-base) + 0ms);
    transition-duration: 0.32s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(0) scale(var(--home-hub-at-top-scale, var(--home-hub-scale)));
    /* Nudges the whole secondary column down (items 3–9 follow in flex flow). */
    margin-top: 4.25rem;
  }
  .menu-open:checked ~ .menu-item:nth-child(4) {
    transition-delay: calc(var(--home-reveal-base) + 50ms);
    transition-duration: 0.32s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(0) scale(var(--home-hub-at-top-scale, var(--home-hub-scale)));
  }
  .menu-open:checked ~ .menu-item:nth-child(5) {
    transition-delay: calc(var(--home-reveal-base) + 100ms);
    transition-duration: 0.32s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(0) scale(var(--home-hub-at-top-scale, var(--home-hub-scale)));
  }
  .menu-open:checked ~ .menu-item:nth-child(6) {
    transition-delay: calc(var(--home-reveal-base) + 150ms);
    transition-duration: 0.32s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(0) scale(var(--home-hub-at-top-scale, var(--home-hub-scale)));
  }
  .menu-open:checked ~ .menu-item:nth-child(7) {
    transition-delay: calc(var(--home-reveal-base) + 200ms);
    transition-duration: 0.32s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(0) scale(var(--home-hub-at-top-scale, var(--home-hub-scale)));
  }
  .menu-open:checked ~ .menu-item:nth-child(8) {
    transition-delay: calc(var(--home-reveal-base) + 250ms);
    transition-duration: 0.32s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(0) scale(var(--home-hub-at-top-scale, var(--home-hub-scale)));
  }
  .menu-open:checked ~ .menu-item:nth-child(9) {
    transition-delay: calc(var(--home-reveal-base) + 300ms);
    transition-duration: 0.32s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(0) scale(var(--home-hub-at-top-scale, var(--home-hub-scale)));
  }

  /* Hub art inset unchanged; row imgs scale by --home-secondary-img-factor (viewport-based) */
  .menu-open-button img {
    width: 70%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .menu-item img {
    width: calc(144px * var(--home-secondary-img-factor));
    height: calc(144px * var(--home-secondary-img-factor));
    max-width: calc(80px * var(--home-secondary-img-factor));
    max-height: calc(80px * var(--home-secondary-img-factor));
    object-fit: contain;
    flex-shrink: 0;
  }
}

@media screen and (max-width: 480px) {
  .menu {
    --home-menu-h-gutter: 1rem;
    --menu-ui-scale: min(1, calc((100vw - 1rem) / 330));
    width: min(380px, calc(100vw - var(--home-menu-h-gutter)));
    max-width: calc(100vw - var(--home-menu-h-gutter));
  }
}

@media screen and (max-width: 360px) {
  .menu {
    --home-menu-h-gutter: 0.75rem;
    --menu-ui-scale: min(1, calc((100vw - 0.75rem) / 300));
    width: min(380px, calc(100vw - var(--home-menu-h-gutter)));
    max-width: calc(100vw - var(--home-menu-h-gutter));
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu {
    transition: none !important;
  }
  .menu-item,
  .menu-open-button,
  .menu-open-button *,
  .hamburger {
    transition-duration: 0.01ms !important;
    transition-timing-function: linear !important;
    transition-delay: 0ms !important;
  }
}