/* ============================================================
   lucaspiamolini.com — GLOW GLASS LAYER
   Porte vanilla dos 4 efeitos react-bits pedidos:
     · DarkVeil      → véu WebGL animado atrás de tudo (glow-glass.js)
     · GlassSurface  → superfícies de vidro translúcido + specular
     · BorderGlow    → anel cônico girando na borda (sempre ligado)
     · SpecularButton→ brilho especular que segue o cursor + halo vivo
   Usa só as cores já definidas: --blue, --blue-hi, --violet, --lime,
   --ink, --line, --paper. Carregar SEMPRE depois de styles.css.
   Regra de ouro herdada do projeto: nada some se o JS falhar.
   ============================================================ */

@property --gg-angle{syntax:'<angle>';inherits:false;initial-value:0turn;}

:root{
  /* vidro */
  --gg-tint-a:rgba(255,255,255,.062);
  --gg-tint-b:rgba(255,255,255,.016);
  --gg-brd:rgba(255,255,255,.10);
  --gg-brd-hi:rgba(255,255,255,.20);
  --gg-blur:16px;
  --gg-sat:1.35;
  /* luz */
  --gg-blue-soft:rgba(0,112,243,.28);
  --gg-blue-faint:rgba(0,112,243,.13);
  --gg-violet-soft:rgba(139,92,246,.24);
  --gg-lime-soft:rgba(132,204,22,.26);
  --gg-inner-hi:inset 0 1px 0 rgba(255,255,255,.14);
  --gg-halo:0 24px 70px -34px rgba(0,112,243,.55),0 10px 40px -28px rgba(139,92,246,.45);
  --gg-ring-speed:14s;
}

/* ── DarkVeil: o canvas vive atrás de todo o conteúdo ──────── */
html{background:var(--ink);}
body{background:transparent;}
.gg-veil{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;display:block;
  /* enquanto o WebGL não pinta o primeiro frame, o fundo é o ink */
  background:var(--ink);
}
/* Sem WebGL: véu estático em CSS, mesma paleta */
.gg-no-webgl body::before{
  content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48vw 42vw at 78% 8%,rgba(0,112,243,.16),transparent 62%),
    radial-gradient(44vw 40vw at 12% 82%,rgba(139,92,246,.14),transparent 64%),
    radial-gradient(60vw 50vw at 50% 50%,rgba(0,112,243,.05),transparent 70%);
  filter:blur(40px);
  animation:gg-veil-drift 26s ease-in-out infinite alternate;
}
@keyframes gg-veil-drift{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(-4%,3%,0) scale(1.12);}
}

/* ═══════════════════════════════════════════════════════════
   1) GLASS SURFACE
   ═══════════════════════════════════════════════════════════ */
.gg-glass{
  position:relative;
  background:linear-gradient(158deg,var(--gg-tint-a),var(--gg-tint-b)) !important;
  -webkit-backdrop-filter:blur(var(--gg-blur)) saturate(var(--gg-sat));
  backdrop-filter:blur(var(--gg-blur)) saturate(var(--gg-sat));
  border-color:var(--gg-brd);
  box-shadow:var(--gg-inner-hi),0 1px 0 rgba(255,255,255,.03),var(--gg-halo);
}
/* variante mais discreta (linhas, células pequenas, badges) */
.gg-glass-soft{
  background:linear-gradient(158deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
  border-color:rgba(255,255,255,.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 16px 44px -32px rgba(0,112,243,.5);
}

/* Specular estático: reflexo de luz no topo-esquerdo do vidro.
   Fica no ::after quando ele está livre (ver whitelist abaixo). */
.gg-sheen::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.10) 46%,rgba(255,255,255,.02) 54%,transparent 66%);
  background-size:260% 100%;background-position:150% 0;
  animation:gg-sweep 11s var(--ease) infinite;
  mix-blend-mode:screen;opacity:.9;
}
@keyframes gg-sweep{
  0%{background-position:150% 0;}
  55%,100%{background-position:-150% 0;}
}

/* ═══════════════════════════════════════════════════════════
   2) BORDER GLOW — anel cônico sempre girando (não é hover)
   ═══════════════════════════════════════════════════════════ */
.gg-glow{position:relative;}
.gg-glow::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--gg-angle),
    transparent 0turn,
    var(--gg-blue-faint) .06turn,
    var(--blue-hi) .13turn,
    var(--violet) .19turn,
    var(--gg-violet-soft) .25turn,
    transparent .38turn,
    transparent 1turn);
  -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;
  animation:gg-spin var(--gg-ring-speed) linear infinite;
  opacity:.85;
}
/* O JS pausa o que está fora da tela. Sem JS, tudo gira: nunca fica apagado. */
.gg-glow.gg-idle::before{animation-play-state:paused;}
@keyframes gg-spin{to{--gg-angle:1turn;}}
/* defasagem: os anéis nunca giram em uníssono */
.gg-glow:nth-child(2n)::before{animation-delay:-3.5s;}
.gg-glow:nth-child(3n)::before{animation-delay:-7s;}
.gg-glow:nth-child(4n)::before{animation-delay:-10.5s;}
/* anel lime para blocos de conversão/whatsapp */
.gg-glow-lime::before{
  background:conic-gradient(from var(--gg-angle),
    transparent 0turn,
    rgba(132,204,22,.18) .06turn,
    var(--lime) .14turn,
    var(--gg-lime-soft) .22turn,
    transparent .36turn,
    transparent 1turn);
}

/* ═══════════════════════════════════════════════════════════
   3) SPECULAR BUTTON — gloss vivo + realce que segue o cursor
   ═══════════════════════════════════════════════════════════ */
.btn{position:relative;isolation:isolate;}
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(120px circle at var(--sx,50%) var(--sy,0%),rgba(255,255,255,.34),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 52%);
  opacity:.55;transition:opacity .3s var(--ease);
  mix-blend-mode:overlay;
}
.btn:hover::before{opacity:1;}

/* halo ambiente — respira mesmo sem cursor por perto */
.btn-primary{
  box-shadow:var(--gg-inner-hi),0 0 0 1px rgba(255,255,255,.12),0 14px 40px -20px rgba(0,112,243,.55);
  animation:gg-breathe-blue 6.5s ease-in-out infinite;
}
.btn-ghost{
  background:linear-gradient(158deg,rgba(255,255,255,.06),rgba(255,255,255,.015)) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  backdrop-filter:blur(12px) saturate(1.3);
  border-color:var(--gg-brd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 40px -26px rgba(139,92,246,.5);
  animation:gg-breathe-violet 8s ease-in-out infinite;
}
.btn-ghost:hover{border-color:var(--gg-brd-hi);}
.btn-wa{
  background:linear-gradient(158deg,rgba(132,204,22,.10),rgba(132,204,22,.02)) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 40px -24px rgba(132,204,22,.55);
  animation:gg-breathe-lime 7.2s ease-in-out infinite;
}
.btn-wa:hover{background:linear-gradient(158deg,rgba(132,204,22,.16),rgba(132,204,22,.05)) !important;}
@keyframes gg-breathe-blue{
  0%,100%{box-shadow:var(--gg-inner-hi),0 0 0 1px rgba(255,255,255,.12),0 14px 40px -22px rgba(0,112,243,.45);}
  50%{box-shadow:var(--gg-inner-hi),0 0 0 1px rgba(255,255,255,.2),0 18px 54px -18px rgba(0,112,243,.8);}
}
@keyframes gg-breathe-violet{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 40px -28px rgba(139,92,246,.45);}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 52px -22px rgba(139,92,246,.7);}
}
@keyframes gg-breathe-lime{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 40px -26px rgba(132,204,22,.45);}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 50px -20px rgba(132,204,22,.7);}
}
/* o sheen de varredura do primário continua no ::after original */
.btn-primary::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);}

/* ═══════════════════════════════════════════════════════════
   4) APLICAÇÃO — todas as páginas
   ═══════════════════════════════════════════════════════════ */

/* Nav: vidro permanente, mais denso no scroll + fio de luz embaixo */
.nav{
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  backdrop-filter:blur(6px) saturate(1.1);
}
.nav.scrolled{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(10,10,10,.66)) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  border-bottom-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 50px -34px rgba(0,112,243,.7);
}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gg-blue-soft) 22%,var(--gg-violet-soft) 58%,transparent);
  opacity:0;transition:opacity .35s var(--ease);
}
.nav.scrolled::after{opacity:1;}

/* Hairlines de seção viram fio de luz (blue → violet) */
.border-t,.foot,.hero{
  border-top-color:transparent;
  background-image:linear-gradient(90deg,transparent,rgba(0,112,243,.34) 26%,rgba(139,92,246,.26) 62%,transparent);
  background-repeat:no-repeat;
  background-size:100% 1px;
  background-position:top left;
}
.hero{
  border-bottom-color:transparent;
  background-image:
    linear-gradient(90deg,transparent,rgba(0,112,243,.34) 26%,rgba(139,92,246,.26) 62%,transparent),
    linear-gradient(90deg,transparent,rgba(0,112,243,.34) 26%,rgba(139,92,246,.26) 62%,transparent);
  background-size:100% 1px,100% 1px;
  background-position:top left,bottom left;
}
.proof{border-block-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(255,255,255,.07);}
.hero .proof{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
}
/* as bordas de fade do marquee deixam de ser ink chapado */
.proof::before{background:linear-gradient(90deg,var(--ink),rgba(10,10,10,.6) 55%,transparent);}
.proof::after{background:linear-gradient(270deg,var(--ink),rgba(10,10,10,.6) 55%,transparent);}
.logo-item img{filter:drop-shadow(0 0 14px rgba(0,112,243,.18));}

/* Grids de 1px: a "linha" vira vidro para o véu passar por baixo */
.router,.steps,.leak,.report-tiles{
  background:rgba(255,255,255,.075) !important;
  border-color:var(--gg-brd);
  box-shadow:var(--gg-halo);
}
.mvt,.sheet,.report,.frame,.anat{border-color:var(--gg-brd);}

/* Cartões — vidro + anel de luz permanente */
.rcard,.step,.tech,.node,.pstep,.zone,.ba-item,.arch,.sheet,.report,.mvt,
.leak-col,.chart,.recs,.frame,.ty-note,.faq details,.rtile,.arch-box,
.arch-core,.report-tiles,.tbadge,.form,.cta-final,.mobile-conversion{
  position:relative;
}
.rcard,.step,.tech,.node,.pstep,.zone,.ba-item,.arch,.sheet,.report,.mvt,
.leak-col,.chart,.recs,.frame,.ty-note{
  background:linear-gradient(158deg,var(--gg-tint-a),var(--gg-tint-b)) !important;
  -webkit-backdrop-filter:blur(var(--gg-blur)) saturate(var(--gg-sat));
  backdrop-filter:blur(var(--gg-blur)) saturate(var(--gg-sat));
  border-color:var(--gg-brd);
  box-shadow:var(--gg-inner-hi),var(--gg-halo);
}
/* o blueprint mantém a malha azul por cima do vidro */
.arch{
  background:
    linear-gradient(rgba(0,112,243,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,112,243,.06) 1px,transparent 1px),
    linear-gradient(158deg,var(--gg-tint-a),var(--gg-tint-b)) !important;
  background-size:28px 28px,28px 28px,100% 100% !important;
}
/* o núcleo do sistema fica azul, mas de vidro */
.arch-core{
  background:linear-gradient(158deg,rgba(0,112,243,.22),rgba(255,255,255,.02)) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-color:rgba(0,112,243,.55);
}
/* células e pílulas: vidro discreto.
   Sem backdrop-filter de propósito — são muitos elementos pequenos e o
   ganho visual não paga o custo de composição. O tint + a borda já leem
   como vidro porque o véu passa por baixo. */
.arch-box,.rtile,.tbadge,.faq details,.sy-spec-item,.tp-rail-item,
.field input,.field select,.field textarea,.ty-check,.mini,.report-bar,
.sheet-bar,.mvt-row.head,.sheet-grid .c.h,.sheet-grid .c.rownum{
  background:linear-gradient(158deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) !important;
  border-color:rgba(255,255,255,.085);
}
.tbadge,.field input,.field select,.field textarea,.rtile,.arch-box{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 38px -30px rgba(0,112,243,.55);
}
.field input:focus,.field select:focus,.field textarea:focus{
  background:linear-gradient(158deg,rgba(0,112,243,.10),rgba(255,255,255,.02)) !important;
  border-color:var(--blue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 3px rgba(0,112,243,.16),0 16px 44px -26px rgba(0,112,243,.75);
}
.tbadge{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 22px -8px rgba(132,204,22,.35);}
.tbadge .d{box-shadow:0 0 10px 1px rgba(132,204,22,.8);}
.ty-check{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 42px -6px rgba(132,204,22,.5);
  animation:gg-breathe-lime 5.5s ease-in-out infinite;
}
.case{border-bottom-color:rgba(255,255,255,.075);}
.case:hover{background:linear-gradient(158deg,rgba(255,255,255,.06),rgba(255,255,255,.015));}
.faq details{border-bottom-color:rgba(255,255,255,.085);border-radius:14px;margin-bottom:8px;padding-inline:18px;}
.mobile-conversion{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(10,10,10,.72)) !important;
  border-color:var(--gg-brd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 48px -18px rgba(0,112,243,.5);
}
.whatsapp-bubble{
  box-shadow:0 16px 38px -10px rgba(132,204,22,.55),0 0 0 1px rgba(255,255,255,.18) inset;
  animation:gg-breathe-lime 5s ease-in-out infinite;
}

/* Quem ganha o anel de luz girando.
   O anel mora sempre no ::before — nenhum destes elementos o usava antes
   (o ::after do .spot e do .btn-primary continua intacto). */
.rcard::before,.step::before,.tech::before,.node::before,.pstep::before,
.zone::before,.arch::before,.sheet::before,.report::before,.mvt::before,
.leak-col::before,.frame::before,.ty-note::before,.form::before,
.cta-final::before,.arch-core::before,.chart::before,.recs::before,
.ba-item::before,.mobile-conversion::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--gg-angle),
    transparent 0turn,
    var(--gg-blue-faint) .06turn,
    var(--blue-hi) .13turn,
    var(--violet) .19turn,
    var(--gg-violet-soft) .25turn,
    transparent .38turn,
    transparent 1turn);
  -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;
  animation:gg-spin var(--gg-ring-speed) linear infinite;
  opacity:.8;
}
/* fora da viewport o anel para (o JS marca .gg-idle) */
.gg-idle::before{animation-play-state:paused !important;}

/* .form e .cta-final não têm caixa própria — ganham uma de vidro */
.form,.cta-final{
  border:1px solid var(--gg-brd);border-radius:22px;
  padding:clamp(24px,3vw,38px);
  background:linear-gradient(158deg,var(--gg-tint-a),var(--gg-tint-b));
  -webkit-backdrop-filter:blur(var(--gg-blur)) saturate(var(--gg-sat));
  backdrop-filter:blur(var(--gg-blur)) saturate(var(--gg-sat));
  box-shadow:var(--gg-inner-hi),var(--gg-halo);
}

/* Varredura especular — só onde o ::after está livre */
.step::after,.node::after,.pstep::after,.report::after,.sheet::after,
.frame::after,.ty-note::after,.arch-core::after,.zone::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.10) 46%,rgba(255,255,255,.02) 54%,transparent 66%);
  background-size:260% 100%;background-position:150% 0;
  animation:gg-sweep 11s var(--ease) infinite;
  mix-blend-mode:screen;
}
.node::after{animation-delay:-2s;}
.pstep::after{animation-delay:-4s;}
.step::after{animation-delay:-3s;}

/* Spotlight do cursor ganha as duas cores da marca */
.spot::after{
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(0,112,243,.16),rgba(139,92,246,.08) 42%,transparent 68%);
}

/* Glows do hero mais presentes (o véu vem por trás deles) */
.hero-glow{background:radial-gradient(circle,rgba(0,112,243,.20),transparent 62%);}
.hero-glow2{background:radial-gradient(circle,rgba(139,92,246,.16),transparent 62%);}

/* Números/índices com brilho */
.step .idx{text-shadow:0 0 28px rgba(0,112,243,.55);}
.eyebrow.blue{text-shadow:0 0 18px rgba(0,112,243,.5);}
.eyebrow.blue::before{box-shadow:0 0 10px 1px rgba(0,112,243,.7);}
/* a barra azul brilha, mas sem halo em volta da caixa inteira:
   box-shadow com blur contorna os 4 lados e vira "painel dentro do painel". */
.case .quote{border-left-color:transparent;box-shadow:inset 2px 0 0 var(--blue),inset 6px 0 14px -10px rgba(0,112,243,.9);}
.case .tag,.rec .tagr,.z-tag,.rcard .ext{box-shadow:0 0 20px -6px rgba(0,112,243,.6);}
.ilink{text-shadow:0 0 16px rgba(0,112,243,.45);}

/* Rodapé com respiro de luz no topo */
.foot{box-shadow:inset 0 24px 60px -60px rgba(0,112,243,.9);}

/* ── Mobile: menos blur, mesma estética ───────────────────── */
@media(max-width:760px){
  :root{--gg-blur:11px;--gg-ring-speed:18s;}
  .rcard,.step,.tech,.node,.pstep,.zone,.ba-item,.arch,.sheet,.report,.mvt,
  .leak-col,.chart,.recs,.frame,.ty-note,.form,.cta-final{
    -webkit-backdrop-filter:blur(11px) saturate(1.25);
    backdrop-filter:blur(11px) saturate(1.25);
  }
  .step::after,.node::after,.pstep::after,.report::after,.sheet::after,
  .frame::after,.ty-note::after,.arch-core::after,.zone::after{display:none;}
  .form,.cta-final{padding:22px 18px;border-radius:18px;}
}

/* ── Sem motion: tudo estático, nada pisca ────────────────── */
@media(prefers-reduced-motion:reduce){
  .gg-no-webgl body::before{animation:none;}
  .gg-glow::before,.gg-sheen::after,
  .rcard::before,.step::before,.tech::before,.node::before,.pstep::before,
  .zone::before,.arch::before,.sheet::before,.report::before,.mvt::before,
  .leak-col::before,.frame::before,.ty-note::before,.form::before,
  .cta-final::before,.arch-core::before,.chart::before,.recs::before,
  .ba-item::before,.mobile-conversion::before{animation:none;}
  .step::after,.node::after,.pstep::after,.report::after,.sheet::after,
  .frame::after,.ty-note::after,.arch-core::after,.zone::after{animation:none;opacity:.5;}
  .btn-primary,.btn-ghost,.btn-wa,.ty-check,.whatsapp-bubble{animation:none;}
}