/* ============================================================
   Click Guincho — CAMADA FX (moderno / futurista / tech)
   Animações sutis, glow neon, reveal on-scroll, grid animado.
   Respeita prefers-reduced-motion.
   ============================================================ */

/* ---------- Barra de progresso de scroll ---------- */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--brand) 0%,#7a2bff 35%,var(--green) 70%,var(--orange) 100%);
  box-shadow:0 0 12px rgba(122,43,255,.6);transition:width .08s linear}

/* ---------- Reveal on-scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- HERO tech background ---------- */
.lp-hero .bg{z-index:0}
.lp-hero::after{z-index:1}
.fx-grid{position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask:radial-gradient(circle at 50% 38%, #000 0%, transparent 72%);
          mask:radial-gradient(circle at 50% 38%, #000 0%, transparent 72%);
  animation:fxGrid 20s linear infinite}
@keyframes fxGrid{to{background-position:56px 56px}}
.fx-orbs{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fx-orbs span{position:absolute;border-radius:50%;filter:blur(70px)}
.fx-orbs span:nth-child(1){width:380px;height:380px;background:#7a2bff;opacity:.22;left:-140px;top:-120px;animation:fxFloatA 13s ease-in-out infinite}
.fx-orbs span:nth-child(2){width:300px;height:300px;background:var(--green);opacity:.16;right:-110px;bottom:-70px;animation:fxFloatB 16s ease-in-out infinite}
.fx-orbs span:nth-child(3){width:220px;height:220px;background:var(--orange);opacity:.12;right:-40px;top:6%;animation:fxFloatA 18s ease-in-out infinite reverse}
@keyframes fxFloatA{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes fxFloatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-36px,-26px)}}
.lp-hero .wrap{z-index:3}
/* linha de varredura sutil */
.lp-hero .wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(63,230,128,.7),transparent);
  filter:blur(.5px);opacity:.5;animation:fxScan 7s ease-in-out infinite}
@keyframes fxScan{0%{transform:translateY(40px);opacity:0}50%{opacity:.6}100%{transform:translateY(460px);opacity:0}}

/* pílula verde com glow pulsante */
.lp-hero .eyebrow2{animation:fxPulse 2.6s ease-in-out infinite}
@keyframes fxPulse{0%,100%{box-shadow:0 0 16px -2px rgba(33,194,78,.5)}50%{box-shadow:0 0 30px 2px rgba(33,194,78,.8)}}

/* destaque laranja com brilho deslizante */
.lp-hero h1 .hl{background:linear-gradient(90deg,#FFB070,#F26B0A,#FFC861,#F26B0A);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fxSheen 6s linear infinite}
@keyframes fxSheen{to{background-position:220% 0}}

/* telefone do hero com leve glow */
.lp-hero .phone{text-shadow:0 0 22px rgba(255,154,77,.35)}

/* ---------- Brilho deslizante nos botões ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);pointer-events:none}
.btn:hover::after{animation:fxShine .85s ease}
@keyframes fxShine{to{left:150%}}

/* ---------- Cards com glow no hover ---------- */
.featc,.towc,#cats a,.lp-rl,.cchip,.emerg-card,.faq{transition:transform .25s, box-shadow .25s, border-color .25s, background .25s}
.featc:hover{box-shadow:0 26px 50px -24px rgba(74,7,179,.5), 0 0 0 1px rgba(74,7,179,.18)}
.towc:hover{box-shadow:0 22px 44px -22px rgba(74,7,179,.5), 0 0 0 1px rgba(242,107,10,.2)}
#cats a:hover{box-shadow:0 18px 30px -16px rgba(74,7,179,.55), 0 0 0 1px rgba(74,7,179,.2)}
/* borda-topo neon que surge nos cards de serviço */
.featc{position:relative}
.featc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,var(--brand),var(--green),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.featc:hover::before{transform:scaleX(1)}

/* ---------- Painel escuro "Confira serviços": grid + scan ---------- */
.srv-right{overflow:hidden}
.srv-right::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent);
  animation:fxGrid 24s linear infinite}
.srv-right > .in{position:relative;z-index:1}
.srv-item .ic{transition:transform .25s, filter .25s}
.srv-item:hover .ic{transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 6px 14px rgba(255,176,112,.5))}

/* ---------- Header: sombra ao rolar ---------- */
header{transition:box-shadow .25s, background .25s}
header.scrolled{box-shadow:0 10px 30px -16px rgba(74,7,179,.35)}

/* ---------- WhatsApp float: anel pulsante ---------- */
.wa-float{position:fixed}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(33,194,78,.55);animation:fxRing 2.1s ease-out infinite}
@keyframes fxRing{0%{box-shadow:0 0 0 0 rgba(33,194,78,.5)}100%{box-shadow:0 0 0 20px rgba(33,194,78,0)}}

/* ---------- "+10" badge: leve flutuação ---------- */
.lp-tabs .media .yrs{animation:fxBob 4.5s ease-in-out infinite}
@keyframes fxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- Botões CTA: glow constante sutil ---------- */
.lp-hero .lp-quick a.solid{box-shadow:0 10px 26px -10px rgba(33,194,78,.6), 0 0 22px -6px rgba(33,194,78,.5)}

/* ---------- Acessibilidade: reduz movimento ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none}
  .fx-grid,.fx-orbs span,.lp-hero .wrap::before,.lp-hero .eyebrow2,.lp-hero h1 .hl,
  .srv-right::after,.wa-float::before,.lp-tabs .media .yrs{animation:none}
  .fx-progress{display:none}
  .lp-hero h1 .hl{color:var(--orange)}
}