/* ============================================
   LIQUID GLASS — camada de fidelidade iOS/macOS 26
   Variáveis e primitivas compartilhadas por todos os
   componentes de navegação/controle. Cada componente
   opta explicitamente via classes utilitárias abaixo.
   ============================================ */

:root {
  --lg-blur: 30px;
  --lg-saturate: 1.9;

  --lg-border-width: 0.5px;
  --lg-highlight: rgba(255, 255, 255, 0.55);
  --lg-highlight-soft: rgba(255, 255, 255, 0.10);

  /* Spring com leve "overshoot", aproxima a elasticidade nativa */
  --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lg-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --lg-hover-scale: 1.02;
  --lg-squish-scale: 0.96;
  --lg-squish-duration: 0.22s;

  /* Specular em duas camadas: halo suave e maior atrás do
     brilho principal (usado pelo ::after do header) */
  --lg-specular-soft-size: 320px;

  /* Squash-and-stretch do nav-indicator: estica no eixo do
     movimento e comprime na vertical durante o deslize */
  --lg-stretch-x: 1.07;
  --lg-stretch-y: 0.94;

  /* Condensação do header no scroll (large-title collapse) */
  --lg-header-height: 54px;
  --lg-header-height-condensed: 47px;
  --lg-condense-blur: 59px;

  /* Grão de vidro fosco: ruído SVG monocromático em opacidade
     baixíssima, aplicado como camada de background do header.
     url(data:) declarado em arquivo .css é regido por img-src
     (que permite data:), não por style-src — CSP ok. */
  --lg-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  --lg-highlight: rgba(255, 255, 255, 0.16);
  --lg-highlight-soft: rgba(255, 255, 255, 0.04);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lg-spring: linear;
    --lg-ease: linear;
  }
}

/* ============================================
   FALLBACK — sem backdrop-filter (ex.: Firefox antigo)
   Sem o blur, o fundo translúcido derruba o contraste
   do texto. Tornamos os fundos de vidro sólidos o
   bastante para garantir legibilidade (WCAG).
   ============================================ */

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --glass-bg: var(--glass-bg-solid);
    --glass-bg-hover: var(--glass-bg-solid);
  }

  .header-inner,
  [data-theme="dark"] .header-inner,
  .nav-indicator,
  [data-theme="dark"] .nav-indicator {
    background: var(--glass-bg-solid);
    border-color: var(--glass-border);
  }
}

/* ============================================
   ACESSIBILIDADE — prefers-reduced-transparency /
   prefers-contrast: o vidro vira quase sólido para
   garantir legibilidade, preservando forma e layout.
   ============================================ */

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .header-inner,
  [data-theme="dark"] .header-inner,
  .site-header.is-condensed .header-inner,
  [data-theme="dark"] .site-header.is-condensed .header-inner {
    background: var(--glass-bg-solid);
    border-color: var(--glass-border);
    backdrop-filter: blur(var(--lg-blur)) saturate(1);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1);
  }

  .nav-indicator,
  [data-theme="dark"] .nav-indicator {
    background: var(--glass-bg-hover);
  }

  .header-inner::after,
  [data-theme="dark"] .header-inner::after {
    opacity: 0;
  }
}

/* ============================================
   SVG defs container — sem inline style (CSP:
   style-src 'self'), some via classe utilitária
   ============================================ */

.lg-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ============================================
   LENSING — refração via SVG feDisplacementMap.
   Progressive enhancement por cascata: se o motor
   não entender "url(...) blur() saturate()" na mesma
   declaração de backdrop-filter, a regra inteira é
   invalidada e o navegador mantém a regra anterior
   (blur/saturate simples). Hoje só Chromium aplica a
   distorção; Safari/Firefox caem no blur plano.
   ============================================ */

.lg-lens {
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
}

.lg-lens {
  backdrop-filter: url(#lg-lens-filter) blur(var(--lg-blur)) saturate(var(--lg-saturate));
}

/* ============================================
   SPECULAR HIGHLIGHT — brilho que acompanha o
   cursor. JS (liquid-glass.js) atualiza --lg-mx/--lg-my
   em pointermove. Sem JS ou com reduced-motion, o
   brilho simplesmente não aparece (opacity 0).
   ============================================ */

.lg-specular {
  position: relative;
  isolation: isolate;
}

/* ::after do utilitário — apenas para elementos cujo
   ::after esteja livre. Elementos com pseudo ocupado
   (ex.: .header-inner) usam só [data-lg-specular] e
   leem --lg-mx/--lg-my no próprio pseudo. */
.lg-specular::after {
  content: "";
  position: absolute;
  inset: 0;
  /* isolation: isolate no elemento fixa o glow acima do
     fundo de vidro e ABAIXO do texto (evita lavar o
     conteúdo). Requer que o elemento tenha fundo próprio. */
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    var(--lg-specular-size, 180px) circle at var(--lg-mx, 50%) var(--lg-my, 0%),
    var(--lg-highlight),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.lg-specular:hover::after,
.lg-specular:focus-within::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lg-specular::after {
    display: none;
  }
}

/* ============================================
   REVEAL ON SCROLL — seções e cards entram subindo
   com stagger, no ritmo das páginas da Apple.
   As classes são adicionadas por liquid-glass.js
   (progressive enhancement: sem JS ou com
   reduced-motion, nada é escondido). Ao terminar,
   o JS remove as classes para devolver as transições
   originais de hover ao elemento.
   ============================================ */

.lg-reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity 0.7s var(--lg-ease),
              transform 0.7s var(--lg-ease);
  transition-delay: var(--lg-reveal-delay, 0s);
}

.lg-reveal.lg-reveal-in {
  opacity: 1;
  transform: none;
}

/* ============================================
   SQUISH — feedback elástico ao clicar, simula a
   compressão do material no toque/clique.
   ============================================ */

.lg-squish {
  transition: transform var(--lg-squish-duration) var(--lg-spring),
              box-shadow var(--transition-normal);
}

.lg-squish:active {
  transform: scale(var(--lg-squish-scale));
  transition-duration: 0.1s;
}

/* ============================================
   SQUIRCLE — continuous corner radius aproximado.
   clip-path/mask recortariam a box-shadow (matando a
   sombra "flutuante") e distorcem os cantos em
   elementos largos. A aproximação robusta e shadow-safe
   é raio fixo generoso — o mesmo caminho que a Apple usa
   na web. Só se aplica a formas retangulares; pill/stadium
   (--radius-pill) já é a forma correta e não usa isto.
   --lg-corner é o token único de canto contínuo, para
   ajustar todos os cantos retangulares de uma vez.
   ============================================ */

:root {
  --lg-corner: 24px;
  --lg-corner-lg: 30px;
}

.lg-squircle {
  border-radius: var(--lg-corner);
}

.lg-squircle-lg {
  border-radius: var(--lg-corner-lg);
}