/* fx.css — camada de efeitos visuais ("firulas") do app.
   Carregado automaticamente pelo js/auth.js em toda página logada (e à mão
   no login). Nada aqui muda layout nem dado — só brilho, movimento e luz.
   Quem tiver "reduzir movimento" ligado no sistema não vê as animações
   (ver bloco prefers-reduced-motion no final). */

/* ── 2. Fundo aurora — manchas de luz se mexendo atrás de tudo ───────── */
#fx-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
#fx-aurora span{position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(120px);opacity:.17;will-change:transform;}
#fx-aurora .fx-a1{background:#3b82f6;top:-160px;left:-120px;animation:fxAur1 22s ease-in-out infinite;}
#fx-aurora .fx-a2{background:#22c55e;bottom:-200px;right:-140px;animation:fxAur2 26s ease-in-out infinite;}
#fx-aurora .fx-a3{background:#a855f7;top:35%;left:40%;width:420px;height:420px;opacity:.11;animation:fxAur3 30s ease-in-out infinite;}
@keyframes fxAur1{0%,100%{transform:translate(0,0);}50%{transform:translate(380px,220px);}}
@keyframes fxAur2{0%,100%{transform:translate(0,0);}50%{transform:translate(-420px,-180px);}}
@keyframes fxAur3{0%,100%{transform:translate(0,0);}50%{transform:translate(-260px,160px);}}
html[data-theme="light"] #fx-aurora span{opacity:.09;}

/* ── 3. Luz que segue o mouse dentro dos cards ───────────────────────── */
.card::after,.metric-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--fx-x,50%) var(--fx-y,50%),rgba(59,130,246,.13),transparent 65%);opacity:0;transition:opacity .3s ease;z-index:0;}
.card:hover::after,.metric-card:hover::after{opacity:1;}

/* ── 4. Card 3D que inclina com o mouse (metric cards + Meus Sites) ──── */
.metric-card,.site-card{transition:transform .18s ease-out,border-color var(--transition-fast),box-shadow var(--transition-fast);transform-style:preserve-3d;will-change:transform;}

/* ── 1. Borda neon girando ───────────────────────────────────────────── */
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg;}
.fx-neon{position:relative;}
.fx-neon::before{content:'';position:absolute;inset:0;top:0;height:auto;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--fx-a),transparent 0 62%,#3b82f6 78%,#4ade80 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fxSpin 4s linear infinite;pointer-events:none;z-index:2;}
@keyframes fxSpin{to{--fx-a:360deg;}}

/* ── 5. Botão com reflexo passando + pulso ───────────────────────────── */
.btn-primary,.gr-wa-cta{position:relative;overflow:hidden;}
.btn-primary::after,.gr-wa-cta::after{content:'';position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);animation:fxSweep 3.6s ease-in-out infinite;pointer-events:none;}
@keyframes fxSweep{0%{left:-80%;}55%,100%{left:140%;}}
.fx-pulse{animation:fxPulse 2.2s infinite;}
.gr-wa-cta.fx-pulse{animation:fxPulseGreen 2.2s infinite;}
@keyframes fxPulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.55);}70%{box-shadow:0 0 0 14px rgba(59,130,246,0);}100%{box-shadow:0 0 0 0 rgba(59,130,246,0);}}
@keyframes fxPulseGreen{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55);}70%{box-shadow:0 0 0 16px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}

/* ── 6. Constelação — canvas atrás do conteúdo do container ──────────── */
.fx-const-host{position:relative;}
.fx-const-host > canvas.fx-const{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.fx-const-host > :not(canvas){position:relative;z-index:1;}

/* ── 7. Número de caça-níquel — cada dígito rola ─────────────────────── */
.fx-roll{display:inline-flex !important;align-items:flex-start;font-variant-numeric:tabular-nums;overflow:hidden;height:var(--fx-lh,1.15em);line-height:var(--fx-lh,1.15em);vertical-align:bottom;}
/* Rola via margin-top — sem transform e sem position de propósito: o
   número do Lucro usa gradiente recortado no texto (background-clip:text),
   e o Chrome NÃO pinta esse gradiente em descendente transformado ou
   posicionado (os dígitos sumiam, só sobrava "R$", ponto e vírgula). */
.fx-roll-col{display:flex;flex-direction:column;margin-top:0;transition:margin-top 1.3s cubic-bezier(.2,.9,.2,1);}
.fx-roll-col > span,.fx-roll-static{display:block;height:var(--fx-lh,1.15em);}
.fx-roll-static{white-space:pre;}

/* ── 8. Dock estilo Mac — glow no ícone ampliado ─────────────────────── */
.dock-item{transition:margin .15s ease;}
.dock-icon-box.fx-hot{box-shadow:0 0 22px rgba(255,255,255,.18),0 6px 18px rgba(0,0,0,.4);}

/* ── 9. Título com reflexo passando ──────────────────────────────────── */
.page-title,.dash-hero-title,.gr-fullstep-title{background:linear-gradient(100deg,var(--text) 42%,#ffffff 48%,#60a5fa 52%,var(--text) 58%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxTitle 5s linear infinite;}
@keyframes fxTitle{from{background-position:130% 0;}to{background-position:-130% 0;}}
html[data-theme="light"] .page-title,html[data-theme="light"] .dash-hero-title,html[data-theme="light"] .gr-fullstep-title{background-image:linear-gradient(100deg,var(--text) 42%,#3b82f6 50%,var(--text) 58%);}

/* ── 10. Chão neon (synthwave) ───────────────────────────────────────── */
.fx-floor-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.fx-floor{position:absolute;bottom:-45%;left:-50%;width:200%;height:110%;background-image:linear-gradient(rgba(59,130,246,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.45) 1px,transparent 1px);background-size:44px 44px;transform:perspective(320px) rotateX(70deg);animation:fxFloor 1.8s linear infinite;-webkit-mask-image:linear-gradient(to top,#000 25%,transparent 85%);mask-image:linear-gradient(to top,#000 25%,transparent 85%);}
@keyframes fxFloor{to{background-position:0 44px;}}
.fx-sun{position:absolute;left:50%;bottom:34%;transform:translateX(-50%);width:130px;height:130px;border-radius:50%;background:linear-gradient(#4ade80,#3b82f6);opacity:.55;filter:drop-shadow(0 0 40px rgba(59,130,246,.7));-webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 9px,transparent 9px 13px);mask-image:repeating-linear-gradient(to bottom,#000 0 9px,transparent 9px 13px);}

/* ── 11. Entrada em cascata ──────────────────────────────────────────── */
/* fill-mode "backwards" (e não "both") de propósito: depois que a animação
   termina ela solta o transform — senão o tilt 3D dos cards (que também usa
   transform) ficava travado pra sempre no "transform:none" do último frame. */
.fx-cascade > *{animation:fxIn .6s cubic-bezier(.2,.9,.2,1) backwards;animation-delay:calc(var(--fx-i,0) * 55ms);}
@keyframes fxIn{from{opacity:0;transform:translateY(14px) scale(.98);filter:blur(6px);}to{opacity:1;transform:none;filter:none;}}

/* ── 12. Rastro de luz no cursor ─────────────────────────────────────── */
.fx-trail{position:fixed;width:7px;height:7px;border-radius:50%;background:rgba(96,165,250,.35);box-shadow:0 0 8px rgba(59,130,246,.25);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);}

/* Acessibilidade — quem pediu menos movimento no sistema operacional não
   recebe nenhuma animação contínua (efeitos de hover/estáticos ficam). */
@media (prefers-reduced-motion: reduce){
  #fx-aurora span,.fx-neon::before,.btn-primary::after,.gr-wa-cta::after,.fx-pulse,.page-title,.dash-hero-title,.gr-fullstep-title,.fx-floor,.fx-cascade > *{animation:none !important;}
  .fx-roll-col{transition:none;}
}