/* =====================================================================
   J.Hub — Liquid Glass
   Material de vidro reutilizável para botões, navbar e menu.

   Classes genéricas: .glass-button, .glass-button-primary,
   .glass-button-secondary, .glass-button-media, .glass-chip,
   .glass-navbar, .glass-indicator, .glass-rim, .glass-label.
   As classes existentes do site (.btn-solid, .btn-ghost, .btn-light,
   .burger, .hdr) usam o mesmo material pelos seletores abaixo.

   Camadas de cada peça de vidro:
   1. background-color translúcido + backdrop-filter (fundo desfocado)
   2. ::before — especular superior, cáustica inferior, luz do cursor,
      lente (espessura) e reflexo ambiente direcional
   3. .glass-rim — borda iluminada com máscara, reage à luz
   4. box-shadow interno — espessura e profundidade

   Variáveis controladas pelo JS (liquid-glass.js):
   --glass-light-x / --glass-light-y  posição da luz (%), com inércia
   --mouse-x / --mouse-y              mesma posição em px
   --glass-hover                      0 → 1, intensidade da luz
   --glass-sheen                      ângulo do reflexo pela direção do cursor
   ===================================================================== */

:root {
  --glass-ease: cubic-bezier(.22, 1, .36, 1);
  --glass-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ---------- 1. Material base ---------- */
.glass,
.glass-button, .btn,
.glass-chip, .burger,
.glass-navbar, .hdr-nav, .hdr .menu {
  --glass-light-x: 50%;
  --glass-light-y: 0%;
  --mouse-x: 50%;
  --mouse-y: 0%;
  --glass-hover: 0;
  --glass-sheen: 115deg;

  isolation: isolate;
  border: 1px solid transparent;
  border-radius: var(--glass-radius);
  background-color: var(--glass-bg);
  background-image: linear-gradient(180deg, rgb(255 255 255 / .16) 0%, rgb(255 255 255 / .04) 42%, rgb(0 0 0 / .03) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) brightness(var(--glass-brightness));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) brightness(var(--glass-brightness));
  box-shadow:
    var(--glass-outline),
    var(--glass-shadow),
    inset 0 1px 0 rgb(255 255 255 / calc(var(--glass-specular) * .9)),
    inset 0 -1px 0 rgb(255 255 255 / .08),
    inset 0 -10px 18px -14px rgb(0 0 0 / var(--glass-edge)),
    inset 0 10px 16px -14px rgb(255 255 255 / calc(var(--glass-specular) * .6));
  transition:
    background-color .3s ease,
    box-shadow .3s ease,
    color .3s ease,
    -webkit-backdrop-filter .5s ease,
    backdrop-filter .5s ease,
    scale .45s var(--glass-spring);
}

/* ---------- 2. Luz, lente e reflexos ---------- */
.glass::before,
.glass-button::before, .btn::before,
.glass-chip::before, .burger::before,
.glass-navbar::before, .hdr-nav::before, .hdr .menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    /* luz do cursor: ampla e difusa, nunca um círculo definido */
    radial-gradient(130% 180% at var(--glass-light-x) var(--glass-light-y),
      rgb(255 255 255 / calc(var(--glass-glow) * var(--glass-hover))) 0%,
      rgb(255 255 255 / calc(var(--glass-glow) * var(--glass-hover) * .35)) 32%,
      transparent 62%),
    /* lente: anel levemente mais denso ao redor da luz, sugere espessura */
    radial-gradient(55% 95% at var(--glass-light-x) var(--glass-light-y),
      transparent 58%,
      rgb(0 0 0 / calc(var(--glass-edge) * .35 * var(--glass-hover))) 82%,
      transparent 100%),
    /* reflexo ambiente: o ângulo acompanha a direção do movimento */
    linear-gradient(var(--glass-sheen),
      transparent 28%,
      rgb(255 255 255 / calc(.1 * var(--glass-hover))) 46%,
      transparent 64%),
    /* especular superior: desliza para o lado de onde vem a luz */
    radial-gradient(75% 55% at calc(25% + var(--glass-light-x) * .5) -12%,
      rgb(255 255 255 / var(--glass-specular)) 0%,
      rgb(255 255 255 / calc(var(--glass-specular) * .22)) 45%,
      transparent 72%),
    /* cáustica inferior: luz que atravessa o vidro e volta pela borda oposta */
    radial-gradient(60% 45% at calc(75% - var(--glass-light-x) * .5) 118%,
      rgb(255 255 255 / calc(var(--glass-specular) * .45)) 0%,
      transparent 70%);
  transition: opacity .25s ease;
}

/* ---------- 3. Borda de vidro ---------- */
.glass-rim {
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(70% 130% at var(--glass-light-x) var(--glass-light-y),
      rgb(255 255 255 / calc(var(--glass-rim-rest, .2) + .6 * var(--glass-hover))) 0%,
      transparent 60%),
    linear-gradient(180deg,
      var(--glass-border-highlight) 0%,
      var(--glass-border) 38%,
      var(--glass-border-dim) 72%,
      var(--glass-border) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* ---------- 4. Botões ---------- */
.glass-button, .btn {
  --glass-radius: 999px;
  --glass-blur: 18px;
  --glass-saturation: 175%;
  --glass-brightness: 1.05;
  --glass-specular: .5;
  --glass-glow: .26;
  --glass-edge: .12;
  --glass-outline: 0 0 0 0 transparent;
  --glass-shadow: 0 12px 28px -14px rgb(20 20 18 / .38), 0 2px 6px -3px rgb(20 20 18 / .16);
  position: relative;
  padding-inline: 1.375rem;
}
.hdr-cta { padding-inline: 1.125rem; }

.glass-label {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  transition: transform .25s var(--glass-ease);
}

/* Primário: vidro fumê sobre fundo claro */
.glass-button-primary, .btn-solid {
  --glass-bg: rgb(26 26 24 / .66);
  --glass-bg-hover: color-mix(in srgb, var(--accent) 80%, rgb(26 26 24 / .5));
  --glass-bg-press: rgb(26 26 24 / .8);
  --glass-border: rgb(255 255 255 / .14);
  --glass-border-highlight: rgb(255 255 255 / .55);
  --glass-border-dim: rgb(255 255 255 / .04);
  --glass-specular: .3;
  --glass-glow: .2;
  --glass-edge: .35;
  color: var(--paper);
}

/* Secundário: vidro claro sobre fundo claro, com contorno fino para não sumir */
.glass-button-secondary, .btn-ghost {
  --glass-bg: rgb(255 255 255 / .42);
  --glass-bg-hover: rgb(255 255 255 / .6);
  --glass-bg-press: rgb(255 255 255 / .72);
  --glass-border: rgb(255 255 255 / .7);
  --glass-border-highlight: #fff;
  --glass-border-dim: rgb(255 255 255 / .25);
  --glass-outline: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
  --glass-shadow: 0 10px 24px -14px rgb(20 20 18 / .3), 0 1px 3px -1px rgb(20 20 18 / .12);
  --glass-specular: .9;
  --glass-glow: .55;
  --glass-edge: .1;
  color: var(--ink);
}

/* Sobre fotografia: vidro transparente que escurece levemente o fundo para o texto */
.glass-button-media, .btn-light {
  --glass-bg: rgb(30 30 28 / .14);
  --glass-bg-hover: rgb(30 30 28 / .22);
  --glass-bg-press: rgb(30 30 28 / .32);
  --glass-brightness: .88;
  --glass-saturation: 190%;
  --glass-border: rgb(255 255 255 / .26);
  --glass-border-highlight: rgb(255 255 255 / .45);
  --glass-border-dim: rgb(255 255 255 / .1);
  --glass-rim-rest: .06;
  --glass-shadow: 0 14px 34px -16px rgb(0 0 0 / .5), 0 2px 8px -4px rgb(0 0 0 / .25);
  --glass-specular: .16;
  --glass-glow: .3;
  --glass-edge: .22;
  color: #fff;
  text-shadow: 0 1px 1px rgb(0 0 0 / .28);
}

@media (hover: hover) {
  .glass-button:hover, .btn:hover { background-color: var(--glass-bg-hover); scale: 1.01; }
}

/* Clique: o vidro comprime, fica mais denso e perde brilho */
.glass-button:active, .btn:active {
  scale: .978;
  background-color: var(--glass-bg-press);
  transition-duration: .12s;
  box-shadow:
    var(--glass-outline),
    0 6px 14px -10px rgb(20 20 18 / .4),
    inset 0 1px 0 rgb(255 255 255 / calc(var(--glass-specular) * .45)),
    inset 0 -1px 0 rgb(255 255 255 / .05),
    inset 0 -6px 14px -10px rgb(0 0 0 / calc(var(--glass-edge) * 1.6)),
    inset 0 3px 10px -6px rgb(0 0 0 / .14);
}
.glass-button:active::before, .btn:active::before { opacity: .55; }
.glass-button:active .glass-label, .btn:active .glass-label { transform: translateY(1px); }

.glass-button:focus-visible, .btn:focus-visible,
.glass-chip:focus-visible, .burger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 75%, #fff);
  outline-offset: 3px;
}
.btn-light:focus-visible { outline-color: rgb(255 255 255 / .92); }

/* ---------- 5. Chip de vidro (botão do menu mobile) ---------- */
.glass-chip, .burger {
  --glass-radius: 50%;
  --glass-blur: 14px;
  --glass-saturation: 170%;
  --glass-brightness: 1.04;
  --glass-bg: rgb(255 255 255 / .4);
  --glass-bg-hover: rgb(255 255 255 / .6);
  --glass-bg-press: rgb(255 255 255 / .75);
  --glass-border: rgb(255 255 255 / .7);
  --glass-border-highlight: #fff;
  --glass-border-dim: rgb(255 255 255 / .3);
  --glass-outline: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
  --glass-shadow: 0 6px 16px -10px rgb(20 20 18 / .35);
  --glass-specular: .9;
  --glass-glow: 0;
  --glass-edge: .08;
}
.burger span { left: calc(50% - .75rem); }
.burger:active { scale: .94; background-color: var(--glass-bg-press); transition-duration: .12s; }

/* ---------- 6. Navbar: logo livre + peças de vidro flutuantes ----------
   [ LOGO ]        [ cápsula com os links ]        ( tema ) [ CTA ]
   .hdr é só o posicionamento; o vidro fica em .hdr-nav, nos chips e no CTA.
   .is-on-media (main.js) = navbar sobre a foto do hero: texto branco e vidro fumê. */
.hdr {
  position: fixed;
  top: calc(var(--frame) + .75rem);
  left: var(--frame);
  right: var(--frame);
  z-index: 50;
}
.hdr .hdr-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: 3.25rem;
  padding-inline: var(--gutter);
}
.hdr .logo { grid-column: 1; justify-self: start; }
.hdr .hdr-nav { grid-column: 2; }
.hdr .logo, .hdr .logo small { transition: color .4s ease; }
.hdr-actions { grid-column: 3; justify-self: end; }

.glass-navbar, .hdr-nav, .hdr .menu {
  --glass-radius: 999px;
  --glass-blur: 20px;
  --glass-saturation: 170%;
  --glass-brightness: 1.03;
  --glass-bg: rgb(250 249 245 / .55);
  --glass-bg-hover: rgb(250 249 245 / .7);
  --glass-bg-press: rgb(250 249 245 / .8);
  --glass-border: rgb(255 255 255 / .6);
  --glass-border-highlight: rgb(255 255 255 / .95);
  --glass-border-dim: rgb(255 255 255 / .2);
  --glass-outline: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  --glass-shadow: 0 10px 30px -18px rgb(20 20 18 / .3);
  --glass-specular: .7;
  --glass-glow: .18;
  --glass-edge: .05;
  position: relative;
}
.hdr-nav { padding: .3rem; }

.hdr.is-scrolled .hdr-nav,
.hdr.is-scrolled .glass-chip,
.hdr.is-scrolled .burger {
  --glass-bg: rgb(250 249 245 / .72);
  --glass-blur: 26px;
  --glass-outline: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
  --glass-shadow: 0 16px 40px -18px rgb(20 20 18 / .38), 0 2px 8px -4px rgb(20 20 18 / .08);
}

/* Sobre a fotografia */
.hdr.is-on-media .logo { color: #fff; }
.hdr.is-on-media .logo small { color: rgb(255 255 255 / .78); }
.hdr.is-on-media .hdr-nav,
.hdr.is-on-media .glass-chip,
.hdr.is-on-media .burger {
  --glass-bg: rgb(255 255 255 / .12);
  --glass-bg-hover: rgb(255 255 255 / .2);
  --glass-bg-press: rgb(255 255 255 / .28);
  --glass-brightness: .9;
  --glass-saturation: 180%;
  --glass-border: rgb(255 255 255 / .3);
  --glass-border-highlight: rgb(255 255 255 / .85);
  --glass-border-dim: rgb(255 255 255 / .08);
  --glass-outline: 0 0 0 0 transparent;
  --glass-shadow: 0 10px 30px -16px rgb(0 0 0 / .45);
  --glass-specular: .4;
  --glass-glow: .22;
  --glass-edge: .2;
  color: #fff;
}
.hdr.is-on-media .burger span { background: #fff; }
.hdr.is-on-media .glass-indicator {
  background: linear-gradient(180deg, rgb(255 255 255 / .32), rgb(255 255 255 / .12));
  box-shadow:
    0 0 0 1px rgb(255 255 255 / .18),
    0 4px 12px -6px rgb(0 0 0 / .3),
    inset 0 1px 0 rgb(255 255 255 / .55),
    inset 0 -1px 0 rgb(255 255 255 / .1);
}

/* Botão claro: cápsula branca de vidro, o CTA mais forte sobre a foto */
.glass-button-bright, .btn-bright, .hdr.is-on-media .hdr-cta {
  --glass-bg: rgb(255 255 255 / .86);
  --glass-bg-hover: rgb(255 255 255 / .95);
  --glass-bg-press: #fff;
  --glass-brightness: 1.1;
  --glass-border: rgb(255 255 255 / .9);
  --glass-border-highlight: #fff;
  --glass-border-dim: rgb(255 255 255 / .5);
  --glass-outline: 0 0 0 0 transparent;
  --glass-shadow: 0 14px 34px -16px rgb(0 0 0 / .45), 0 2px 8px -4px rgb(0 0 0 / .2);
  --glass-specular: 1;
  --glass-glow: .6;
  --glass-edge: .1;
  color: #181818;
  text-shadow: none;
}

/* Links com indicador de vidro que desliza entre os itens */
.hdr-nav ul { position: relative; gap: .15rem; }
.hdr-nav a { position: relative; z-index: 1; display: block; padding: .5rem 1rem; border-radius: 999px; }
.js .hdr-nav a.link-line { background-size: 0 1px; }

.glass-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w, 0);
  height: var(--h, 100%);
  transform: translate(var(--x, 0), var(--y, 0));
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .78), rgb(255 255 255 / .42));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent),
    0 6px 14px -8px rgb(20 20 18 / .28),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgb(255 255 255 / .35),
    inset 0 -6px 10px -8px rgb(0 0 0 / .08);
  transition:
    transform .55s var(--glass-ease),
    width .55s var(--glass-ease),
    opacity .35s ease;
}
.glass-indicator.is-visible { opacity: 1; }
.glass-indicator.is-instant { transition: none; }

/* ---------- 7. Menu mobile: painel de vidro abaixo da barra ---------- */
.hdr .menu {
  --glass-radius: 24px;
  --glass-bg: rgb(250 249 245 / .9);
  position: absolute;
  top: calc(100% + .5rem);
  left: var(--gutter);
  right: var(--gutter);
  height: auto;
  max-height: calc(100svh - 6rem);
  overflow-y: auto;
  padding: .5rem 1.25rem 1.25rem;
  color: var(--ink);
}
.hdr .menu ul { border-block: 0; }
.hdr .menu li + li { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.hdr .menu li a {
  margin-inline: -.75rem;
  padding: 1rem .75rem;
  border-radius: 14px;
  transition: background-color .25s ease;
}
.hdr .menu li a:active { background-color: rgb(255 255 255 / .6); }
.hdr .menu .btn { margin-top: 1.25rem; }

/* ---------- 8. Fallbacks ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-solid { --glass-bg: rgb(26 26 24 / .94); --glass-bg-hover: var(--accent); }
  .btn-ghost { --glass-bg: rgb(255 255 255 / .88); --glass-bg-hover: #fff; }
  .btn-light { --glass-bg: rgb(24 24 24 / .55); --glass-bg-hover: rgb(24 24 24 / .68); }
  .hdr-nav, .hdr .menu { --glass-bg: rgb(247 246 242 / .97); }
  .burger { --glass-bg: rgb(255 255 255 / .9); }
}
@media (prefers-reduced-transparency: reduce) {
  .btn-solid { --glass-bg: rgb(26 26 24 / .94); }
  .btn-ghost { --glass-bg: rgb(255 255 255 / .9); }
  .btn-light { --glass-bg: rgb(24 24 24 / .6); }
  .hdr-nav, .hdr .menu { --glass-bg: rgb(247 246 242 / .97); }
}
@media (prefers-reduced-motion: reduce) {
  .glass-button, .btn, .glass-chip, .burger, .glass-navbar, .hdr-nav, .hdr .menu { transition: background-color .2s ease, box-shadow .2s ease; }
  .glass-indicator { transition: opacity .2s ease; }
}

/* ---------- 9. Botão de tema ---------- */
.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 1.05rem;
  height: 1.05rem;
  transition: transform .55s var(--glass-ease), opacity .3s ease;
}
.theme-toggle .i-sun { opacity: 0; transform: rotate(-70deg) scale(.6); }
[data-theme="dark"] .theme-toggle .i-sun { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle .i-moon { opacity: 0; transform: rotate(70deg) scale(.6); }
@media (hover: hover) { .theme-toggle:hover { background-color: var(--glass-bg-hover); } }
.theme-toggle:active { scale: .94; background-color: var(--glass-bg-press); transition-duration: .12s; }
.hdr-actions { gap: .5rem; }

/* ---------- 10. Vidro no tema escuro ---------- */
[data-theme="dark"] .glass-button-primary,
[data-theme="dark"] .btn-solid {
  --glass-bg: rgb(236 235 229 / .86);
  --glass-bg-hover: color-mix(in srgb, var(--accent) 88%, rgb(236 235 229 / .6));
  --glass-bg-press: rgb(236 235 229 / .95);
  --glass-border: rgb(255 255 255 / .4);
  --glass-border-highlight: #fff;
  --glass-border-dim: rgb(255 255 255 / .15);
  --glass-shadow: 0 12px 30px -14px rgb(0 0 0 / .7), 0 2px 6px -3px rgb(0 0 0 / .4);
  --glass-specular: .8;
  --glass-glow: .45;
  --glass-edge: .14;
  color: #1b1b19;
}
[data-theme="dark"] .glass-button-secondary,
[data-theme="dark"] .btn-ghost {
  --glass-bg: rgb(255 255 255 / .06);
  --glass-bg-hover: rgb(255 255 255 / .11);
  --glass-bg-press: rgb(255 255 255 / .16);
  --glass-border: rgb(255 255 255 / .16);
  --glass-border-highlight: rgb(255 255 255 / .5);
  --glass-border-dim: rgb(255 255 255 / .04);
  --glass-outline: 0 0 0 1px rgb(255 255 255 / .08);
  --glass-shadow: 0 10px 24px -14px rgb(0 0 0 / .6);
  --glass-specular: .28;
  --glass-glow: .22;
  --glass-edge: .3;
  color: var(--ink);
}
[data-theme="dark"] .glass-chip,
[data-theme="dark"] .burger {
  --glass-bg: rgb(255 255 255 / .07);
  --glass-bg-hover: rgb(255 255 255 / .12);
  --glass-bg-press: rgb(255 255 255 / .18);
  --glass-border: rgb(255 255 255 / .16);
  --glass-border-highlight: rgb(255 255 255 / .5);
  --glass-border-dim: rgb(255 255 255 / .04);
  --glass-outline: 0 0 0 1px rgb(255 255 255 / .06);
  --glass-shadow: 0 6px 16px -10px rgb(0 0 0 / .6);
  --glass-specular: .3;
  --glass-edge: .3;
}
[data-theme="dark"] .glass-navbar,
[data-theme="dark"] .hdr:not(.is-on-media) .hdr-nav,
[data-theme="dark"] .hdr .menu {
  --glass-bg: rgb(30 30 27 / .5);
  --glass-border: rgb(255 255 255 / .12);
  --glass-border-highlight: rgb(255 255 255 / .32);
  --glass-border-dim: rgb(255 255 255 / .03);
  --glass-outline: 0 0 0 1px rgb(0 0 0 / .35);
  --glass-shadow: 0 10px 30px -18px rgb(0 0 0 / .7);
  --glass-specular: .22;
  --glass-glow: .1;
  --glass-edge: .2;
}
[data-theme="dark"] .hdr.is-scrolled:not(.is-on-media) :is(.hdr-nav, .glass-chip, .burger) {
  --glass-bg: rgb(30 30 27 / .68);
  --glass-outline: 0 0 0 1px rgb(0 0 0 / .45);
  --glass-shadow: 0 16px 40px -18px rgb(0 0 0 / .8), 0 2px 8px -4px rgb(0 0 0 / .3);
}
[data-theme="dark"] .hdr .menu { --glass-bg: rgb(27 27 25 / .92); }
[data-theme="dark"] .glass-indicator {
  background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .06));
  box-shadow:
    0 0 0 1px rgb(255 255 255 / .08),
    0 6px 14px -8px rgb(0 0 0 / .6),
    inset 0 1px 0 rgb(255 255 255 / .28),
    inset 0 -1px 0 rgb(255 255 255 / .05);
}
[data-theme="dark"] .hdr .menu li a:active { background-color: rgb(255 255 255 / .08); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="dark"] .btn-solid { --glass-bg: #ecebe5; }
  [data-theme="dark"] .btn-ghost { --glass-bg: #2f2f2b; }
  [data-theme="dark"] .burger, [data-theme="dark"] .glass-chip { --glass-bg: #2f2f2b; }
  [data-theme="dark"] .hdr-nav, [data-theme="dark"] .hdr .menu { --glass-bg: rgb(27 27 25 / .97); }
}