/* =============================================================================
   Cloudyn — O MENU DO SITE
   A roda de opções atrás dos três traços, e a bolinha do "você está aqui".
   Ver assets/js/menu.js.

   Este arquivo é uma FATIA do antigo assets/css/loader.css, que guardava o site
   inteiro em 1511 linhas. A ordem de carga importa (ver o bloco de <link> no
   HTML): a cascata é a mesma de antes, arquivo a arquivo, na mesma sequência.
   ============================================================================= */

/* =============== MENU DO SITE — roda de opções (três traços) ==============
   As opções ficam numa curva; a que está no meio é a escolhida. Rola com a
   roda do mouse, arrasta, clica ou anda com as setas.                        */
.wheel {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12, 10, 7, 0.72);
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
.wheel.is-open { opacity: 1; visibility: visible; }
.wheel__list {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; user-select: none; touch-action: none; outline: none;
}
.wheel__item {
  position: absolute; top: 50%; left: clamp(28px, 9vw, 130px);
  white-space: nowrap;
  font-family: var(--brand-font);
  font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1; font-weight: 700;
  letter-spacing: -0.03em;
  transform-origin: left center;
  will-change: transform, opacity, filter;
  color: rgba(241, 235, 221, 0.45);
  transition: color 0.25s ease;
}
.wheel__item.is-selected { color: var(--accent); }

/* VOCÊ ESTÁ AQUI. A bolinha marca a seção que está na tela — é diferente de
   `is-selected`, que é só a opção no meio da roda no momento. Uma responde
   "onde estou", a outra "o que estou mirando", e as duas podem cair na mesma
   opção sem conflito. */
.wheel__item.is-here::before {
  content: "";
  position: absolute; top: 50%; left: -0.62em;
  width: 0.16em; height: 0.16em; border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}