/* lareiras.pedroganco.ai: fogo atrás, vidro à frente.
   Tema único e escuro: o fundo é sempre o vídeo da lareira, por isso não há tema claro.
   Receita de vidro seguindo o skill liquid-glass-web (lente na borda, matéria nítida,
   brilho especular, sombra funda, véu leve só debaixo do texto). */

:root {
  color-scheme: dark;
  --bg: #0f0d0b;
  --ink: #f6f1ea;
  --ink-2: #ddd5c9;
  --ink-3: #a79e91;
  --line: rgb(255 255 255 / .14);
  --line-2: rgb(255 255 255 / .28);
  --accent: #f08a5b;
  --accent-soft: rgb(240 138 91 / .22);
  --focus: #8cc1ff;

  /* vidro */
  --glass-fill: rgb(255 255 255 / .06);
  --glass-blur: 10px;       /* recurso sem lente (Safari, Firefox) */
  --lens-blur: 1.5px;       /* Chromium, com lente */
  --glass-saturate: 125%;
  --glass-brightness: .96;
  --glass-edge: rgb(255 255 255 / .30);
  --glass-inset: inset 0 1px 0 rgb(255 255 255 / .50),
                 inset 0 -1px 0 rgb(0 0 0 / .30),
                 inset 0 0 0 1px rgb(255 255 255 / .07);
  --glass-lift: 0 30px 80px rgb(0 0 0 / .55), 0 4px 12px rgb(0 0 0 / .30);
  --bevel: 1.25rem;
  --veil: rgb(12 10 8 / .52);
  --veil-strong: rgb(12 10 8 / .68);
  --veil-blur: 6px;
  --radius: 18px;
  --radius-sm: 12px;
  --surface: var(--veil);   /* compatibilidade com estilos antigos */
}

/* ---------- o fogo ---------- */
.fire {
  position: fixed; inset: -6%; z-index: -1; overflow: hidden; background: var(--bg);
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0); will-change: transform;
}
.fire video, .fire .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fire .poster { background: url("/assets/lareira-poster.jpg?v=1") center / cover no-repeat; display: none; }
.fire::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(10 8 6 / .42) 0%, rgb(10 8 6 / .22) 40%, rgb(10 8 6 / .40) 100%);
}
body { background: var(--bg); }

/* ---------- o vidro ---------- */
.glass {
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-inset), var(--glass-lift);
  border-radius: var(--radius);
  contain: paint;
}
/* brilho especular só no anel do bisel, luz de cima à esquerda */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--bevel); pointer-events: none; z-index: 0;
  background: linear-gradient(135deg,
    rgb(255 255 255 / .45) 0%, rgb(255 255 255 / .12) 28%,
    transparent 52%, rgb(255 255 255 / .04) 80%, rgb(255 255 255 / .18) 100%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor;
}
.glass > * { position: relative; z-index: 1; }
html.refract .glass, html.refract .pill {
  backdrop-filter: url(#lg-refract) blur(var(--lens-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
}

/* placa de texto: frost leve, aninhada dentro do vidro, o bisel continua lente à volta */
.veil {
  background: var(--veil); backdrop-filter: blur(var(--veil-blur)); -webkit-backdrop-filter: blur(var(--veil-blur));
  border-radius: var(--radius-sm);
}
.veil.strong { background: var(--veil-strong); }

/* vidro interactivo: clareia ao ponteiro, assenta ao clique */
.pill {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-fill); border: 1px solid var(--glass-edge); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -1px 0 rgb(0 0 0 / .25), 0 6px 18px rgb(0 0 0 / .30);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  color: var(--ink); text-decoration: none; cursor: pointer; font: inherit;
  transition: background 160ms, border-color 160ms, transform 120ms;
}
.pill:hover { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .45); }
.pill:active { transform: translateY(1px); }
.pill[aria-pressed="true"], .pill[aria-current="page"] { background: rgb(255 255 255 / .22); border-color: rgb(255 255 255 / .55); }
.pill.accent { background: color-mix(in oklab, var(--accent) 82%, transparent); border-color: rgb(255 255 255 / .40); color: #1b120c; font-weight: 600; }
.pill.accent:hover { background: var(--accent); }

/* ---------- navegação ---------- */
.navwrap { position: sticky; top: 0; z-index: 20; padding: 14px 24px 0; }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1240px; margin: 0 auto; padding: 8px 10px 8px 16px;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; font-size: 14px;
  border-radius: 999px; --bevel: .85rem;
}
.nav .brand {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink);
  font-family: "Bricolage Grotesque", "IBM Plex Sans", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
}
.nav .brand .ember { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 14px var(--accent); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.nav a.link { padding: 7px 14px; font-weight: 500; color: var(--ink-2); }
.nav a.link:hover, .nav a.link[aria-current="page"] { color: var(--ink); }
.nav a:focus-visible, .pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- acessibilidade e recurso ---------- */
@media (prefers-reduced-motion: reduce) {
  .fire video { display: none; } .fire .poster { display: block; }
  .fire { transform: none; will-change: auto; }
  .pill, .glass { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .pill { background: rgb(22 18 15 / .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .veil { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .fire video, .fire .poster { display: none; }
}