/* Growthway Capital — FX cluster "vidro-vivo" (3/6)
   Dispersão de borda no aro do dock + lupa de diligência.
   Tudo atrás de html.gw-fx-vv (classe adicionada por assets/fx/vidro-vivo.js):
   sem JS este arquivo é 100% inerte e o conteúdo fica intacto. */

/* ============================================================
   2 · Dispersão de borda — anel de 2px no aro do .liquid-dock
   que refrata o fundo separando R/G/B (filtro #gwGlassChroma,
   injetado pelo JS; dx animado pela energia do scroll).
   ::before está livre — o ::after é o foilShine do styles.css.
   ============================================================ */
html.gw-fx-vv .liquid-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  -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;
  /* Safari ignora o url() e mantém só o brilho saturado do anel */
  -webkit-backdrop-filter: blur(4px) saturate(220%);
  backdrop-filter: url(#gwGlassChroma) blur(4px) saturate(220%) brightness(1.05);
}

/* ============================================================
   3 · Lupa de diligência — lente de vidro de raio 90px.
   Fica na camada da foto (z-index 1 < .container z-index 2):
   nunca cobre texto, .scene-legal nem o banner CVM; o
   overflow:hidden da .scene a recorta nas bordas.
   ============================================================ */
.gw-lens {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2; /* acima do gradiente da cena; o .container (z2, depois no DOM) pinta por cima */
  opacity: 0;
  pointer-events: none;
  filter: url(#gwLensWarp);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 12px 20px -18px rgba(255, 255, 255, 0.25),
    inset 0 -12px 20px -18px rgba(11, 11, 12, 0.45),
    0 18px 44px -18px rgba(11, 11, 12, 0.55);
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* nas cenas claras o aro ganha um fio escuro p/ ler sobre fachadas pálidas */
.scene-photo-light .gw-lens {
  box-shadow:
    inset 0 0 0 1px rgba(11, 11, 12, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -12px 20px -18px rgba(11, 11, 12, 0.3),
    0 18px 44px -18px rgba(11, 11, 12, 0.4);
}

.gw-lens > img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}

/* aro com dispersão cromática: franja quente de um lado, fria do outro */
.gw-lens::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  padding: 2px;
  -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;
  background: linear-gradient(105deg,
    rgba(232, 98, 42, 0.68),
    rgba(255, 255, 255, 0.18) 35%,
    rgba(255, 255, 255, 0.1) 62%,
    rgba(122, 158, 255, 0.62));
  mix-blend-mode: screen;
  pointer-events: none;
}

/* brilho especular de vidro */
.gw-lens::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(110% 110% at 30% 14%,
    rgba(255, 255, 255, 0.24),
    rgba(255, 255, 255, 0.04) 26%,
    rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
}

/* dentro da lente a foto chega mais "verdadeira" que o fundo tratado:
   a diligência revela o ativo — um passo mais clara que o ambiente,
   nunca um holofote (o véu escuro da cena não entra na lente) */
.scene-photo .gw-lens > img {
  filter: saturate(0.75) contrast(1.1) brightness(0.62);
}
.scene-photo-light .gw-lens > img {
  filter: saturate(0.5) contrast(1.04) brightness(1.06);
}

/* ============================================================
   Guard-rails
   ============================================================ */

/* efeitos pesados desligam no mobile */
@media (max-width: 940px) {
  html.gw-fx-vv .liquid-dock::before { display: none; }
  .gw-lens { display: none; }
}

/* reduced motion / transparency: nada de vidro vivo */
@media (prefers-reduced-motion: reduce) {
  html.gw-fx-vv .liquid-dock::before { display: none; }
  .gw-lens { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  html.gw-fx-vv .liquid-dock::before { display: none; }
}

/* sem backdrop-filter: o aro some limpo (o dock já tem fallback opaco) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.gw-fx-vv .liquid-dock::before { display: none; }
}