/**
 * SPEC-11 §5.1, material "liquid glass" (repo visie/doctor-woo, portado).
 * Fora do original: .glass-field e o GlassPointer (JS), que a landing não usa.
 *
 * Material "liquid glass". Toda cor vem dos tokens
 * (tokens.css); aqui só existe a construção do material.
 *
 * Anatomia, de baixo para cima:
 *   1. fill translúcido + backdrop-filter  → o corpo do vidro
 *   2. box-shadow externa                  → o objeto descola do fundo
 *   3. box-shadow inset                    → fio de luz no topo, rebote embaixo
 *   4. ::before, anel com gradiente        → o rim especular (e a borda §8.2)
 *   5. ::after, radial que segue o cursor  → o reflexo
 *
 * O rim é feito com mask-composite em vez de `border`: uma borda só aceita
 * cor sólida, e o que dá a leitura de vidro é justamente o gradiente ao longo
 * do anel. O alfa do gradiente nunca desce de 0.42 (3.9:1 sobre preto), então
 * ele cumpre também o papel de contorno obrigatório do controle (§8.2).
 *
 * --glass-x/--glass-y ficam no default (topo, centro): a luz vem de cima e o
 * botão continua íntegro. O rastreamento do cursor é opcional (JS) e a landing
 * pode ou não setar essas duas variáveis.
 */

/* Padding padrão da pílula, em @layer components de propósito.
   Quando ele vivia como utility no BASE do CtaPill (`px-[17px] py-[10px]`), o
   `className` de quem chamava NÃO conseguia sobrescrever: utility contra
   utility, quem vence é a ordem interna do Tailwind, não a ordem da string.
   Um `px-3` no call site simplesmente não fazia nada, mesma armadilha que a
   dos papéis tipográficos (§4.1). Aqui o padrão é padrão e a utility do call
   site é o ajuste, que é a intenção de quem escreve. */
@layer components {
  .glass {
    padding: 10px 17px;
  }
}

.glass {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--glass-fill);
  color: var(--text-primary);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.25s ease;
}

/* Só onde o navegador realmente compõe o desfoque: em quem não suporta, o
   fill sozinho já sustenta o contraste, e nada é perdido além do borrão. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  }
}

/* 4. rim especular, anel de 1px com gradiente */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: var(--glass-rim);
  -webkit-mask:
    linear-gradient(var(--mask-opaque) 0 0) content-box,
    linear-gradient(var(--mask-opaque) 0 0);
  mask:
    linear-gradient(var(--mask-opaque) 0 0) content-box,
    linear-gradient(var(--mask-opaque) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 5. reflexo, segue o cursor via --glass-x/--glass-y (GlassPointer) */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--glass-x, 50%) var(--glass-y, 0%),
    var(--glass-specular) 0%,
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.glass:hover {
  background-color: var(--glass-fill-hover);
  transform: scale(1.03);
}
.glass:hover::after,
.glass:focus-visible::after {
  opacity: 1;
}
.glass:active {
  transform: scale(0.98);
}

/* Estado desabilitado: sem reação, sem reflexo. */
.glass:disabled,
.glass[aria-disabled='true'] {
  opacity: 0.5;
  transform: none;
}
.glass:disabled::after,
.glass[aria-disabled='true']::after {
  opacity: 0;
}

/* ── prominent: o vidro claro do CTA principal ──────────────────────────── */

.glass-prominent {
  background-color: var(--glass-prominent-fill);
  color: var(--text-inverse);
  box-shadow: var(--glass-prominent-shadow), var(--glass-prominent-inner);
}
.glass-prominent::before {
  background: var(--glass-prominent-rim);
}
.glass-prominent::after {
  background: radial-gradient(
    circle at var(--glass-x, 50%) var(--glass-y, 0%),
    var(--glass-prominent-specular) 0%,
    transparent 58%
  );
  /* mix-blend evita que o reflexo branco "apague" o texto preto por cima de
     um fill já quase branco: ele clareia onde há sombra, não onde há letra. */
  mix-blend-mode: soft-light;
}
.glass-prominent:hover {
  background-color: var(--glass-prominent-fill-hover);
}

/* ── whatsapp: o CTA de contato, no verde da marca ───────────────────────
   Escuro como o `ghost`, com o contorno e o texto em verde. O fill chapado da
   marca foi tentado e descartado: numa página inteiramente preta a pílula
   verde sólida rouba a cena de tudo em volta, e ainda colide com a escala de
   cor por score (§3.2), onde verde já quer dizer "bom".

   O rim continua acumulando os dois papéis do §8.2, brilho especular e
   contorno obrigatório do controle translúcido, só que agora é ele que
   carrega a marca. Texto em `--whatsapp-ink`: 10,6:1 sobre preto. */

.glass-whatsapp {
  background-color: var(--whatsapp-fill);
  color: var(--whatsapp-ink);
}
.glass-whatsapp::before {
  background: var(--whatsapp-rim);
}
.glass-whatsapp::after {
  background: radial-gradient(
    circle at var(--glass-x, 50%) var(--glass-y, 0%),
    var(--whatsapp-specular) 0%,
    transparent 62%
  );
}
.glass-whatsapp:hover {
  background-color: var(--whatsapp-fill-hover);
}

/* ── panel: o mesmo material numa superfície de leitura ──────────────────
   O `.glass` nasce pílula (border-radius de --radius-pill) e essa declaração
   está FORA de @layer, então um `rounded-card` do Tailwind no call site
   perde para ela, mesma armadilha do padding descrita no topo do arquivo.
   Por isso o raio de painel é um modificador aqui, e não uma utility lá.

   E um painel não é um controle: o `scale` de hover/active do `.glass` existe
   para dar resposta ao toque num botão. Num bloco de texto ele só faria a
   citação pular quando o ponteiro passasse por cima dela. */

.glass-panel {
  border-radius: var(--radius-card);
}
.glass-panel:hover,
.glass-panel:active {
  transform: none;
  background-color: var(--glass-fill);
}

/* §6.3, sem movimento: o material continua, a reação some. */
@media (prefers-reduced-motion: reduce) {
  .glass,
  .glass::after {
    transition: none;
  }
  .glass:hover,
  .glass:active {
    transform: none;
  }
}

/* ── chrome-bar: a barra fixa do topo ───────────────────────────────────
   Preto translúcido com desfoque do que passa por trás. Sobre a primeira
   dobra, o que passa por trás é o fundo líquido em movimento (§5.10): sem o
   desfoque, as bolhas cruzariam o menu e o texto ficaria ilegível em alguns
   quadros.

   Progressivo de propósito. O padrão é o preto quase opaco; a translucidez de
   70% só entra QUANDO o backdrop-filter existe para sustentar o contraste.
   Invertido, o navegador sem suporte ficaria com o pior dos dois. */

.chrome-bar {
  background-color: color-mix(in srgb, var(--surface-base) var(--chrome-opacity-fallback), transparent);
  border-bottom: 1px solid var(--chrome-border);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .chrome-bar {
    background-color: color-mix(in srgb, var(--surface-base) var(--chrome-opacity), transparent);
    -webkit-backdrop-filter: blur(var(--chrome-blur));
    backdrop-filter: blur(var(--chrome-blur));
  }
}