/* Shared gear menu (index.html, web-development.html, ...). Markup is built by shared/menu.js. */
/* ---------- menu: a pill with a turning gear; opens into a turquoise-framed panel that spreads out from it ---------- */
.menu-toggle { position: fixed; top: 22px; right: 28px; z-index: 60; display: flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 22px; border: 0; border-radius: 999px; background: #fff; cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1); }
.menu-toggle .bars { position: relative; width: 22px; height: 12px; }
.menu-toggle .bars i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: #1d1c1a;
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1), top 0.45s cubic-bezier(0.7, 0, 0.2, 1); }
.menu-toggle .bars i:first-child { top: 1px; }
.menu-toggle .bars i:last-child { top: 9px; }
body.menu-open .menu-toggle .bars i:first-child { top: 5px; transform: rotate(45deg); }
body.menu-open .menu-toggle .bars i:last-child { top: 5px; transform: rotate(-45deg); }
.menu-toggle .gearball { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: #3fb0a9; color: #fff; transition: background 0.4s, color 0.4s; }
.menu-toggle .gearball svg { width: 26px; height: 26px; display: block; }
body.menu-open .menu-toggle .gearball { background: var(--yellow); color: #1d1c1a; }
.menu-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

#menu { position: fixed; inset: 0; z-index: 50; padding: 16px; background: #3fb0a9; visibility: hidden; }
#menu .panel { position: relative; height: 100%; overflow: hidden auto; border-radius: 22px; background: #f6f3ee; color: #1d1c1a;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; gap: 32px 48px; padding: clamp(32px, 5vw, 80px); }
#menu .bg-gear { position: absolute; width: 62vmin; left: -18vmin; bottom: -24vmin; fill: #3fb0a9; opacity: 0.08; pointer-events: none;
  animation: cogspin 60s linear infinite reverse; }
#menu .svc { list-style: none; align-self: start; margin-top: clamp(8px, 4vh, 48px); position: relative; }
#menu .svc a, #menu .svc .svc-soon { display: inline-flex; align-items: center; color: inherit; text-decoration: none; text-transform: uppercase;
  font: 800 clamp(30px, 5vw, 76px)/1.1 Inter, system-ui, sans-serif; letter-spacing: -0.02em; transition: color 0.3s; }
#menu .svc .tooth { display: inline-flex; width: 0; overflow: hidden; transition: width 0.4s cubic-bezier(0.7, 0, 0.2, 1); }
#menu .svc .tooth svg { width: 0.72em; height: 0.72em; flex: none; color: #3fb0a9; }
#menu .svc a:hover, #menu .svc a:focus-visible { color: #0f6e68; outline: none; }
#menu .svc a:hover .tooth, #menu .svc a:focus-visible .tooth { width: 0.95em; }
#menu .svc a:hover .tooth svg, #menu .svc a:focus-visible .tooth svg { animation: cogspin 2.4s linear infinite; }
/* the 3D logo, huge, on the right of the panel: its gear runs off the top, the right and the bottom.
   --R is the gear's radius; the 3D view is 3.75 R square with the gear centre 0.25 R above its middle. */
#menu .panel { --R: min(30vw, 48vh); }
#menu .logo-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; border-radius: inherit; }
#menu .logo-stage { position: absolute; width: calc(var(--R) * 3.75); aspect-ratio: 1;
  left: calc(85% - var(--R) * 1.875); top: calc(46% + var(--R) * 0.25 - var(--R) * 1.875); }
#menu .logo-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s; }
#menu .logo-stage .bulb { position: absolute; width: calc(var(--R) * 2.02); left: calc(50% - var(--R) * 1.01); top: calc(50% - var(--R) * 1.255);
  fill: #1d1c1a; opacity: 0.9; transition: opacity 0.4s; }       /* flat logo until the 3D one has loaded */
#menu .logo-stage.is-3d canvas { opacity: 1; }
#menu .logo-stage.is-3d .bulb { opacity: 0; }
#menu .svc, #menu .menu-foot { position: relative; z-index: 1; }
/* bottom left: the call to action, then the socials */
#menu .menu-foot { grid-column: 1; grid-row: 2; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
#menu .badge { text-decoration: none; }
#menu .badge .badge-label { display: inline-block; padding: 13px 20px; border-radius: 999px; background: #f2c14e; color: #1d1c1a;
  font: 700 12px/1 "JetBrains Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 10px 28px rgba(16, 53, 50, 0.22); transition: background 0.25s, transform 0.25s; }
#menu .badge:hover .badge-label { background: #ffd66e; transform: translateY(-2px); }
/* chips and icons sit over the gear: give them the panel colour so they stay readable */
#menu .socials a { background: #f6f3ee; }
#menu .socials { display: flex; gap: 12px; }
#menu .socials a { width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid #1d1c1a; border-radius: 50%;
  color: inherit; transition: background 0.25s, color 0.25s; }
#menu .socials a:hover, #menu .socials a:focus-visible { background: #1d1c1a; color: #f6f3ee; outline: none; }
#menu .socials svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 820px) {
  .menu-toggle { top: 14px; right: 16px; padding: 5px 5px 5px 16px; gap: 10px; }
  .menu-toggle .gearball { width: 36px; height: 36px; }
  #menu { padding: 10px; }
  #menu .panel { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 26px; padding: 76px 24px 28px; border-radius: 18px; }
  #menu .svc { align-self: start; }
  #menu .svc a { font-size: clamp(26px, 8vw, 44px); }
  #menu .panel { --R: 44vw; }
  #menu .logo-stage { left: calc(82% - var(--R) * 1.875); top: calc(70% + var(--R) * 0.25 - var(--R) * 1.875); }
  #menu .menu-foot { grid-row: 2; align-self: end; }
}
@media (prefers-reduced-motion: reduce) { #menu .bg-gear { animation: none; } }

@keyframes cogspin { to { transform: rotate(360deg); } }
#menu .svc a[aria-current] { color: #0f6e68; }
#menu .svc a[aria-current] .tooth { width: 0.95em; }
#menu .svc .svc-soon { color: rgba(29, 28, 26, 0.32); }
#menu .svc .svc-soon small { display: inline-block; margin-left: 14px; white-space: nowrap; padding: 4px 8px; border-radius: 999px; background: rgba(29, 28, 26, 0.12); color: #1d1c1a;
  font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; }
/* six services: a little tighter */
#menu .svc a, #menu .svc .svc-soon { font-size: clamp(24px, 3.5vw, 56px); }
#menu .panel { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 820px) { #menu .svc a, #menu .svc .svc-soon { font-size: clamp(22px, 6.6vw, 36px); } }
@media (min-width: 821px) { #menu .svc a, #menu .svc .svc-soon { white-space: nowrap; } }
/* desktop: everything fits, so the panel doesn't scroll (phones keep scrolling for short screens) */
@media (min-width: 821px) { #menu .panel { overflow: hidden; } }