/* ─────────────────────────────────────────────────────────────
   Cube menu — a nav that unfolds like the thing it lives on.
   Drop-in: <link rel="stylesheet" href="menu.css"> + menu.js
   ───────────────────────────────────────────────────────────── */

@layer menu {
  :root {
    --menu-inset: var(--ui-inset, 2rem);
    --menu-trigger: 2rem;
    --menu-face: 8.25rem;
    --menu-gap: 0.5rem;
    --menu-reach: calc(var(--menu-face) + var(--menu-gap));
    --menu-z: 60;
    --menu-ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* ── Trigger ─────────────────────────────────────────────── */

  #menu_trigger {
    position: fixed;
    top: var(--menu-inset);
    left: var(--menu-inset);
    z-index: calc(var(--menu-z) + 2);
    min-height: var(--menu-trigger);
    padding: 0.375rem 0.6rem 0.375rem 0.375rem;
    border: none;
    background: none;
    cursor: pointer;
    perspective: 220px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 0.25rem;
  }

  #menu_trigger:focus-visible {
    outline: var(--hairline, 1px) solid var(--accent);
    outline-offset: 0.375rem;
  }

  .trigger-cube {
    flex: none;
    perspective: 220px;
  }

  .trigger-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.2s ease;
  }

  #menu_trigger:is(:hover, :focus-visible) .trigger-label {
    color: var(--accent);
  }

  [data-menu-open] .trigger-label {
    color: var(--accent);
  }

  .trigger-cube {
    --t: 0.875rem;
    width: var(--t);
    height: var(--t);
    position: relative;
    transform-style: preserve-3d;
    animation: trigger-idle 14s linear infinite;
    transition: scale 0.3s var(--menu-ease);
  }

  #menu_trigger:hover .trigger-cube {
    scale: 1.15;
  }

  .trigger-cube span {
    position: absolute;
    inset: 0;
    border: var(--hairline, 1px) solid var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }

  .trigger-cube span:nth-child(1) { transform: translateZ(calc(var(--t) / 2)); }
  .trigger-cube span:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
  .trigger-cube span:nth-child(3) { transform: rotateY(90deg)  translateZ(calc(var(--t) / 2)); }
  .trigger-cube span:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--t) / 2)); }
  .trigger-cube span:nth-child(5) { transform: rotateX(90deg)  translateZ(calc(var(--t) / 2)); }
  .trigger-cube span:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--t) / 2)); }

  @keyframes trigger-idle {
    from { transform: rotateX(-24deg) rotateY(0deg); }
    to   { transform: rotateX(-24deg) rotateY(360deg); }
  }

  /* Open: cube stops spinning and settles flat, reading as an X/close. */
  [data-menu-open] .trigger-cube {
    animation: none;
    transform: rotateX(-24deg) rotateY(45deg);
    scale: 0.72;
  }

  /* ── Scrim ───────────────────────────────────────────────── */

  #menu_scrim {
    position: fixed;
    inset: 0;
    z-index: var(--menu-z);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--menu-ease), visibility 0s linear 0.45s;
  }

  [data-menu-open] #menu_scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s var(--menu-ease), visibility 0s;
  }

  /* ── The net ─────────────────────────────────────────────── */

  #menu_nav {
    position: fixed;
    inset: 0;
    z-index: calc(var(--menu-z) + 1);
    display: grid;
    place-items: center;
    perspective: 1400px;
    pointer-events: none;
  }

  [data-menu-open] #menu_nav {
    pointer-events: auto;
  }

  .menu-net {
    position: relative;
    width: var(--menu-face);
    height: var(--menu-face);
    transform-style: preserve-3d;
    transform: rotateX(52deg) rotateZ(-38deg) scale(0.55);
    opacity: 0;
    transition:
      transform 0.75s var(--menu-ease),
      opacity 0.4s ease;
  }

  [data-menu-open] .menu-net {
    transform: rotateX(0deg) rotateZ(0deg) scale(1);
    opacity: 1;
  }

  /* Each panel is a face hinged to the centre, folded up 90deg when
     closed and laid flat into the plane when open. */
  .menu-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-decoration: none;
    background: var(--card-bg);
    border: var(--hairline, 1px) solid var(--card-border);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    transition:
      transform 0.7s var(--menu-ease) var(--fold-delay, 0s),
      background 0.25s ease,
      border-color 0.25s ease;
    will-change: transform;
  }

  .menu-face:focus-visible {
    outline: var(--hairline, 1px) solid var(--accent);
    outline-offset: 0.25rem;
  }

  .menu-face:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--accent) 12%, var(--card-bg));
    border-color: var(--accent);
  }

  .menu-face[aria-current="page"] {
    border-color: var(--accent);
  }

  .menu-face[aria-current="page"] .menu-num {
    opacity: 1;
  }

  .menu-num {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    color: var(--accent);
    opacity: 0.6;
    text-transform: uppercase;
  }

  .menu-word {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--fg);
    text-align: center;
  }

  .menu-face:is(:hover, :focus-visible) .menu-word {
    color: var(--accent);
  }

  /* ── The four hinges ─────────────────────────────────────── */
  /* Closed = folded up out of the plane. Open = flat (identity). */

  .menu-face[data-fold="up"] {
    transform-origin: center top;
    transform: translateY(calc(var(--menu-reach) * -1)) rotateX(-90deg);
  }
  .menu-face[data-fold="down"] {
    transform-origin: center bottom;
    transform: translateY(var(--menu-reach)) rotateX(90deg);
  }
  .menu-face[data-fold="left"] {
    transform-origin: right center;
    transform: translateX(calc(var(--menu-reach) * -1)) rotateY(90deg);
  }
  .menu-face[data-fold="right"] {
    transform-origin: left center;
    transform: translateX(var(--menu-reach)) rotateY(-90deg);
  }

  [data-menu-open] .menu-face[data-fold="up"] {
    transform: translateY(calc(var(--menu-reach) * -1)) rotateX(0deg);
  }
  [data-menu-open] .menu-face[data-fold="down"] {
    transform: translateY(var(--menu-reach)) rotateX(0deg);
  }
  [data-menu-open] .menu-face[data-fold="left"] {
    transform: translateX(calc(var(--menu-reach) * -1)) rotateY(0deg);
  }
  [data-menu-open] .menu-face[data-fold="right"] {
    transform: translateX(var(--menu-reach)) rotateY(0deg);
  }

  /* Stagger the unfold so it reads as a sequence, not a pop. */
  [data-menu-open] .menu-face[data-fold="up"]    { --fold-delay: 0.06s; }
  [data-menu-open] .menu-face[data-fold="right"] { --fold-delay: 0.12s; }
  [data-menu-open] .menu-face[data-fold="down"]  { --fold-delay: 0.18s; }
  [data-menu-open] .menu-face[data-fold="left"]  { --fold-delay: 0.24s; }

  /* ── Contact rail, at the foot of the net ────────────────── */

  #menu_contact {
    position: fixed;
    left: 50%;
    bottom: max(var(--menu-inset), env(safe-area-inset-bottom, 0px));
    translate: -50% 0;
    z-index: calc(var(--menu-z) + 1);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
    translate: -50% 0.5rem;
    transition:
      opacity 0.4s ease 0.3s,
      translate 0.5s var(--menu-ease) 0.3s,
      visibility 0s linear 0.7s;
  }

  [data-menu-open] #menu_contact {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
    transition:
      opacity 0.4s ease 0.34s,
      translate 0.5s var(--menu-ease) 0.34s,
      visibility 0s;
  }

  #menu_contact a {
    color: var(--muted);
    text-decoration: none;
    padding: 0.35rem 0;
    border-bottom: var(--hairline, 1px) solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  #menu_contact a:is(:hover, :focus-visible) {
    color: var(--accent);
    border-bottom-color: var(--accent);
    outline: none;
  }

  /* ── When the menu is open, mute the page chrome ─────────── */

  [data-menu-open] :is(#hud, #scene_strip, #face_caption, #credit, #theme_toggle) {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  :is(#hud, #scene_strip, #face_caption, #credit, #theme_toggle) {
    transition: opacity 0.3s ease 0.2s;
  }

  /* ── Mobile ──────────────────────────────────────────────── */

  @media (width <= 56.25em) {
    :root {
      --menu-inset: 1.25rem;
      --menu-gap: 0.375rem;
      --menu-face: min(7.5rem, calc((100vw - 3rem) / 3 - var(--menu-gap)));
    }

    #menu_trigger {
      top: max(1rem, env(safe-area-inset-top, 0px));
      left: 1.25rem;
      min-height: 2.75rem;
    }

    .menu-net {
      /* Nudge up so the cross clears the contact rail. */
      translate: 0 -6vh;
    }

    #menu_contact {
      gap: 1.25rem;
      font-size: 0.58rem;
    }

    #menu_contact a {
      padding: 0.6rem 0.25rem;
    }
  }

  /* Short/landscape phones: the cross is taller than it is wide. */
  @media (height <= 34rem) {
    :root {
      --menu-face: min(22vh, 6rem);
    }

    #menu_contact {
      display: none;
    }
  }

  /* ── Reduced motion: no fold, just a list that appears ───── */

  @media (prefers-reduced-motion: reduce) {
    .trigger-cube {
      animation: none;
    }

    .menu-net,
    .menu-face,
    #menu_scrim,
    #menu_contact {
      transition-duration: 0.01ms !important;
      transition-delay: 0s !important;
    }

    .menu-net {
      transform: none;
    }

    .menu-face,
    [data-menu-open] .menu-face {
      transform: none;
      position: static;
      inset: auto;
    }

    #menu_nav {
      perspective: none;
    }

    .menu-net {
      width: min(20rem, 80vw);
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      transform-style: flat;
    }

    .menu-face {
      min-height: 3.75rem;
    }
  }
}