/* ── DESKTOP STAGE ─────────────────────────────
   On a tablet or laptop the phone sits on a stage: a blue glow behind it and
   the current menu's word in giant outline; from 1000px also the menu as a
   list on the left. Phones never see any of this. */
.stage, .stage-nav { display: none; }

/* tablet and up: glow and the giant word; the side menu needs a laptop's width */
@media (min-width: 700px) {
  body {
    background:
      radial-gradient(42vw 42vw at 50% 50%, rgba(0, 160, 229, .22), transparent 70%),
      radial-gradient(60vw 40vw at 100% 0%, rgba(0, 160, 229, .12), transparent 70%),
      var(--desk);
  }
  .device { z-index: 1; }

  .stage { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .stage-word {
    position: absolute; left: 50%; top: 50%;
    font-size: clamp(180px, 24vw, 420px); font-weight: 800; line-height: .8; letter-spacing: -.04em;
    color: transparent; -webkit-text-stroke: 2px rgba(0, 160, 229, .22);
    white-space: nowrap; transform: translate(-50%, -50%);
  }
  .stage-word.is-in { animation: stage-word-in .9s var(--ease) both; }
  @keyframes stage-word-in { from { opacity: 0; transform: translate(-46%, -50%); } }
}

@media (min-width: 1000px) {
  .stage-nav {
    display: flex; flex-direction: column; gap: 26px;
    position: fixed; z-index: 2; left: max(40px, 6vw); top: 50%; transform: translateY(-50%);
  }
  .stage-brand { align-self: flex-start; padding: 6px 0; font-size: 15px; font-weight: 800; letter-spacing: .18em; color: var(--navy); }
  .stage-brand:hover span { text-decoration: underline; }
  .stage-about { margin-top: 10px; padding-top: 10px; border-top: 1.5px solid rgba(26, 74, 94, .12); }
  .stage-brand span { color: var(--blue); }
  .stage-nav ol { display: grid; gap: 4px; }
  .stage-nav button {
    position: relative; display: flex; align-items: baseline; gap: 14px;
    padding: 8px 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: rgba(26, 74, 94, .45);
    transition: color .3s var(--ease), transform .4s var(--ease);
  }
  .stage-nav button i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
  .stage-nav button::after {
    content: ""; position: absolute; left: 30px; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
    background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
  }
  .stage-nav button:hover { color: var(--navy); transform: translateX(4px); }
  .stage-nav button[aria-current="true"] { color: var(--navy); }
  .stage-nav button[aria-current="true"] i { color: var(--blue); }
  .stage-nav button[aria-current="true"]::after { transform: scaleX(1); }
  .stage-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: rgba(26, 74, 94, .55); }
  .stage-hint kbd {
    display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px;
    background: var(--white); color: var(--navy); font: 800 12px var(--font);
    box-shadow: 0 2px 0 rgba(26, 74, 94, .15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-word.is-in { animation: none; }
}