@font-face {
  font-family: 'Cygnito Mono';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('./assets/cygnito-mono.woff2') format('woff2');
}

:root {
  --bg: #e3e3e3;
  --orange: #ff5b00;   /* the tube */
  --label: #bababa;    /* page names on the tube */
  --chip: #dfdfdf;     /* the filters' highlight */
  --h: 58.336px;       /* tube height = one circle */
  --ball: 47.62px;     /* the ball, in place of Figma's (S) badge */
  --scale: 1.5;        /* the whole thing, for viewing on a big screen */
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
}

.stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 48px 16px;
  box-sizing: border-box;
}

/* As wide as the widest item; the ball sits at the right end and the tube
   spreads out of it to the left. */
.menu {
  position: relative;
  width: 471.205px;
  height: var(--h);
  zoom: var(--scale);
  pointer-events: none; /* only the ball and the tube take the pointer */
}

.tube {
  position: absolute;
  inset: 0;
}
/* One circle of the tube (placed by main.js). */
.tube i {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--h);
  height: var(--h);
  border-radius: 50%;
  background: var(--orange);
  pointer-events: auto;
  cursor: pointer;
}

/* Figma: 29px in from the tube's full-width left end, line box 35px down
   (sits low in the tube). Positioned from the right so each item lines up
   with its own tube width (set by main.js). */
.label {
  position: absolute;
  top: 35px;
  font: 12px/normal 'Cygnito Mono', ui-monospace, monospace;
  text-transform: uppercase;
  color: var(--label);
  white-space: nowrap;
  text-decoration: none;
  pointer-events: none;
  visibility: hidden;
}
.label.is-current { visibility: visible; pointer-events: auto; }
a.label:hover { text-decoration: underline; }

/* Figma: the highlight bar 33px down, 18px between items. */
.chips {
  top: 33px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 2px 4px;
  background: var(--chip);
  color: var(--orange);
  line-height: 1.5;
}
.chip {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.chip:first-child { cursor: default; }
button.chip:hover,
button.chip[aria-pressed='true'] { text-decoration: underline; }

/* The ball sits where Figma's (S) badge was: 5.36px in from the right end. */
.ball {
  position: absolute;
  right: 5.36px;
  top: 5.36px;
  width: var(--ball);
  height: var(--ball);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  outline: none;
}
.ball.is-dragging { cursor: grabbing; }

/* The glass ball: cut the ball's shape out of the tube, so through the glass
   you see the page, not orange. The ball's centre is 29.17px in from the
   right and down from the top (5.36px inset + its 23.81px radius). */
.menu--glass .tube {
  --hole: calc(var(--ball) / 2 - 0.5px);
  -webkit-mask-image: radial-gradient(circle at calc(100% - 29.17px) 29.17px, transparent var(--hole), #000 calc(var(--hole) + 0.75px));
  mask-image: radial-gradient(circle at calc(100% - 29.17px) 29.17px, transparent var(--hole), #000 calc(var(--hole) + 0.75px));
}

/* Picked up: above the other menus, with a soft shadow under the ball. */
.menu.is-lifted { z-index: 10; }
.menu.is-lifted .ball { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.22)); }
.ball { transition: filter 200ms ease; }