/* Vidro da OZATI: o Liquid Glass da Apple em preto e branco, para os controles (botões, botões de
   ícone, filtros e barras que flutuam sobre o conteúdo). Como na Apple: é uma lente transparente, as
   quinas pegam luz, uma sombra curta separa do conteúdo e, ao toque, o vidro acende a partir do dedo e
   cresce com mola (glass.js passa o ponto). Conteúdo nunca é vidro. Sem desfoque, com transparência
   reduzida ou contraste aumentado, vira superfície sólida. Fontes em docs/arquitetura/referencias/. */
@layer components {
  /* O material, em uma receita só: preenchimento, desfoque, lente (luz e sombra internas) e sombra */
  .glass, .button, .button-icon, .filter-bar {
    background-color: var(--vidro);
    border: 0;
    -webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao)) brightness(1.06);
    backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao)) brightness(1.06);
    box-shadow:
      inset 0 0 0 1px var(--vidro-contorno),
      inset 1.5px 2px 0 -1px var(--vidro-luz),
      inset -1.5px -2px 0 -1px var(--vidro-luz-suave),
      inset 0 -6px 10px -8px var(--vidro-sombra-interna),
      0 1px 3px var(--vidro-sombra),
      0 8px 24px -6px var(--vidro-sombra);
  }

  /* Botões: todos de vidro e em cápsula. .button é o vidro de destaque (prominentGlass), tingido de
     preto no claro e de branco no escuro; .button-secondary é o vidro neutro (glass). */
  .button, .button-icon {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--raio-controle);
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duracao-rapida) var(--curva-padrao), scale var(--duracao-media) var(--curva-mola);
  }
  .button { gap: var(--espaco-2); min-height: var(--alvo-toque); padding: 0.625rem 1.375rem; background-color: var(--vidro-acao); color: var(--cor-acao-texto); font-size: var(--texto-apoio); font-weight: var(--peso-semi); line-height: 1.2; text-align: center; text-decoration: none; }
  .button:hover { background-color: var(--vidro-acao-hover); }
  .button-secondary { background-color: var(--vidro); color: var(--cor-texto); }
  .button-secondary:hover { background-color: var(--vidro-hover); }

  /* Toque (isInteractive): o vidro acende a partir do ponto e cresce, em vez de afundar */
  .button::after, .button-icon::after, .filter-option::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(circle at var(--toque-x, 50%) var(--toque-y, 50%), var(--vidro-toque), transparent 70%); opacity: 0; transition: opacity var(--duracao-media) var(--curva-saida); pointer-events: none; }
  .button:active::after, .button-icon:active::after, .filter-option:active::after { opacity: 1; transition-duration: var(--duracao-rapida); }
  .button:active, .button-icon:active { scale: 1.05; }

  /* Compacto na barra: 44px, com 8px de folga em volta dentro da cápsula de 60px (concêntrico) */
  .button-compact { min-height: var(--alvo-toque); padding: 0.5rem var(--espaco-5); font-size: 0.875rem; }

  /* Filete de luz: um anel de 1px que acende no alto à esquerda (de onde vem a luz) e de leve embaixo à
     direita, como a quina do vidro da Apple. A máscara deixa só o anel. */
  .button::before, .button-icon::before, .glass-bar::before, .filter-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from 225deg, var(--vidro-luz), transparent 70deg, transparent 150deg, var(--vidro-luz-suave) 180deg, transparent 220deg, transparent 290deg, var(--vidro-luz));
    -webkit-mask: linear-gradient(var(--cor-texto) 0 0) content-box, linear-gradient(var(--cor-texto) 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(var(--cor-texto) 0 0) content-box exclude, linear-gradient(var(--cor-texto) 0 0);
    pointer-events: none;
  }
  .glass-bar .button-icon::before { display: none; }

  /* Botão só de ícone (anterior, próximo, fechar): círculo de 44px com nome no aria-label */
  .button-icon { width: var(--alvo-toque); height: var(--alvo-toque); padding: 0; color: var(--cor-texto); }
  .button-icon:hover { background-color: var(--vidro-hover); }
  .button-icon:disabled { opacity: 0.35; cursor: default; scale: 1; }

  /* Legenda sobre foto (cartão do portfólio): vidro forte, para o texto não depender da imagem */
  .glass-strong { background-color: var(--vidro-forte); -webkit-backdrop-filter: blur(calc(var(--vidro-desfoque) * 2.4)) saturate(var(--vidro-saturacao)); backdrop-filter: blur(calc(var(--vidro-desfoque) * 2.4)) saturate(var(--vidro-saturacao)); }

  /* Grupo de controles numa lente só (como o GlassEffectContainer): os botões de dentro não repetem
     o vidro, para não empilhar vidro sobre vidro */
  .glass-bar { position: relative; display: inline-flex; align-items: center; gap: var(--espaco-1); padding: var(--espaco-1); border-radius: var(--raio-controle); }
  .glass-bar .button-icon { background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass-bar .button-icon:hover:not(:disabled) { background-color: var(--vidro-hover); }

  /* Filtro (nichos do portfólio, categorias do blog): links numa lente; o escolhido leva
     aria-current="true" e vira o vidro de destaque. Funciona sem JS: cada opção é uma URL. */
  .filter-bar { position: relative; display: flex; flex-wrap: wrap; gap: var(--espaco-1); width: fit-content; max-width: 100%; padding: var(--espaco-1); border-radius: calc(var(--alvo-toque) / 2 + var(--espaco-1)); list-style: none; }
  .filter-option { position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: var(--alvo-toque); padding: 0 var(--espaco-4); overflow: hidden; border-radius: var(--raio-controle); color: var(--cor-texto-suave); font-size: var(--texto-apoio); font-weight: var(--peso-medio); text-decoration: none; transition: background-color var(--duracao-rapida) var(--curva-padrao), color var(--duracao-rapida) var(--curva-padrao); }
  .filter-option:hover { color: var(--cor-texto); background-color: var(--vidro-hover); }
  .filter-option[aria-current="true"] { background-color: var(--vidro-acao); color: var(--cor-acao-texto); box-shadow: inset 1.5px 2px 0 -1px var(--vidro-luz-suave); }

  /* Lente de verdade (Chrome e Edge, ligada pelo glass.js com a classe has-lente): o filtro SVG entorta
     o fundo perto da borda antes do desfoque, como a refração do Liquid Glass */
  .has-lente :is(.button, .button-icon, .glass:not(.glass-strong), .filter-bar) {
    /* Com lente, menos desfoque: o miolo fica limpo e a borda entortada aparece, como na Apple */
    -webkit-backdrop-filter: url(#vidro-lente) blur(calc(var(--vidro-desfoque) * 0.4)) saturate(var(--vidro-saturacao)) brightness(1.06);
    backdrop-filter: url(#vidro-lente) blur(calc(var(--vidro-desfoque) * 0.4)) saturate(var(--vidro-saturacao)) brightness(1.06);
  }
  .has-lente .glass-bar .button-icon { -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Sem desfoque no navegador: o vidro vira superfície opaca para o texto continuar legível */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .button-secondary, .button-icon, .filter-bar { background-color: var(--cor-fundo); box-shadow: inset 0 0 0 1px var(--cor-linha-forte); }
    .glass-strong { background-color: var(--cor-fundo); }
    .button, .filter-option[aria-current="true"] { background-color: var(--cor-acao); }
  }
  @media (prefers-reduced-transparency: reduce) {
    .button::before, .button-icon::before, .glass-bar::before, .filter-bar::before { display: none; }
    .glass, .button, .button-icon, .filter-bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .glass, .glass-strong, .button-secondary, .button-icon, .filter-bar { background-color: var(--cor-fundo); box-shadow: inset 0 0 0 1px var(--cor-linha-forte); }
    .button, .filter-option[aria-current="true"] { background-color: var(--cor-acao); box-shadow: none; }
  }
  @media (prefers-contrast: more) {
    .button::before, .button-icon::before, .glass-bar::before, .filter-bar::before { display: none; }
    .glass, .button, .button-icon, .filter-bar { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 2px currentColor; }
    .glass, .glass-strong, .button-secondary, .button-icon, .filter-bar { background-color: var(--cor-fundo); }
    .button, .filter-option[aria-current="true"] { background-color: var(--cor-acao); }
  }
  @media (forced-colors: active) {
    .button, .button-icon, .filter-option { border: 1px solid ButtonText; }
  }
}