/* RodeAqui — fundos do hero (v0.1, 22/09/2026). Aplique .hbg + uma classe g-* no elemento do hero,
   com <span class="fx" aria-hidden="true"><i></i><i></i><i></i></span> como primeiro filho.
   Opções claras levam também .light (e o hero deixa de ser .dark). Catálogo: hero-gradientes.html */
.hbg{position:relative;overflow:hidden;isolation:isolate}
.hbg>.fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hbg>.fx i{position:absolute;display:block}
.hbg::before,.hbg::after{content:"";position:absolute;pointer-events:none;z-index:-1}
.hbg.light{color:var(--ink)}
/* ---------- ESTÁTICOS ---------- */
/* E1 brilho no topo — linear.app */
.g-e1{background:radial-gradient(60% 55% at 50% 0%,rgba(63,224,230,.20),rgba(63,224,230,0) 72%),var(--night)}
/* E2 horizonte — attio.com, "Universal Context" */
.g-e2{background:var(--night)}
.g-e2::before{left:-35%;width:170%;top:min(74%,72svh);height:220%;border-radius:50%;border-top:1px solid rgba(63,224,230,.75);box-shadow:0 -30px 90px rgba(63,224,230,.28),inset 0 30px 80px rgba(63,224,230,.10)}
.g-e2::after{left:0;right:0;top:0;height:min(100%,100svh);background:radial-gradient(70% 45% at 50% 100%,rgba(17,99,107,.55),rgba(17,99,107,0) 70%)}
/* E3 diagonal fria → quente — retool.com */
.g-e3{background:linear-gradient(115deg,#0B3437 0%,#0A1214 48%,#2A1A10 100%)}
/* E4 tom de seção — shopify.com */
.g-e4{background:linear-gradient(180deg,#0A1214 0%,#0A1214 35%,#06282A 100%)}
/* E5 malha — mesh */
.g-e5{background:radial-gradient(40% 50% at 12% 18%,rgba(17,99,107,.60),rgba(17,99,107,0) 70%),radial-gradient(35% 45% at 88% 26%,rgba(63,224,230,.20),rgba(63,224,230,0) 70%),radial-gradient(55% 55% at 50% 105%,rgba(9,74,81,.75),rgba(9,74,81,0) 70%),var(--night)}
/* E6 grade de pontos — linear.app */
.g-e6{background:radial-gradient(55% 50% at 50% 0%,rgba(63,224,230,.16),rgba(63,224,230,0) 70%),var(--night)}
.g-e6::before{inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%)}
/* E7 malha com grão */
.g-e7{background:radial-gradient(45% 55% at 20% 10%,rgba(17,99,107,.55),rgba(17,99,107,0) 70%),radial-gradient(50% 60% at 80% 100%,rgba(63,224,230,.18),rgba(63,224,230,0) 70%),var(--night)}
.g-e7::before{inset:0;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* E8 luz atrás do produto */
.g-e8{background:radial-gradient(45% 40% at 50% 92%,rgba(63,224,230,.30),rgba(63,224,230,0) 70%),radial-gradient(80% 60% at 50% 100%,rgba(17,99,107,.45),rgba(17,99,107,0) 70%),var(--night)}

/* ---------- ANIMADOS ---------- */
/* A1 aurora em 3 camadas — shopify.com/plus (períodos diferentes: nunca repete) */
.g-a1{background:var(--night)}
.g-a1 .fx i{width:60%;height:70%;border-radius:50%;filter:blur(60px);opacity:.55}
.g-a1 .fx i:nth-child(1){left:-10%;top:-20%;background:#11636B;animation:drift1 14s ease-in-out infinite alternate}
.g-a1 .fx i:nth-child(2){right:-15%;top:-10%;background:#0E8C96;opacity:.35;animation:drift2 17s ease-in-out infinite alternate}
.g-a1 .fx i:nth-child(3){left:20%;bottom:-40%;background:#094A51;animation:drift3 20s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18%,14%) scale(1.15)}}
@keyframes drift2{to{transform:translate(-20%,18%) scale(.9)}}
@keyframes drift3{to{transform:translate(-12%,-16%) scale(1.2)}}
/* A2 cone girando — attio.com (30 s) */
.g-a2{background:var(--night)}
.g-a2::before{left:50%;top:38%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;background:conic-gradient(from 0deg,rgba(63,224,230,0) 0deg,rgba(63,224,230,.22) 60deg,rgba(17,99,107,0) 130deg,rgba(17,99,107,.35) 220deg,rgba(63,224,230,0) 300deg);filter:blur(70px);animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* A3 respiração — brilho do topo que pulsa */
.g-a3{background:var(--night)}
.g-a3::before{left:0;right:0;top:-30%;height:90%;background:radial-gradient(55% 60% at 50% 30%,rgba(63,224,230,.26),rgba(63,224,230,0) 70%);animation:breathe 7s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.45;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
/* A4 malha à deriva */
.g-a4{background:var(--night)}
.g-a4 .fx i{width:45%;height:55%;border-radius:50%;filter:blur(70px)}
.g-a4 .fx i:nth-child(1){left:5%;top:0;background:rgba(17,99,107,.7);animation:float1 24s ease-in-out infinite}
.g-a4 .fx i:nth-child(2){right:5%;top:10%;background:rgba(63,224,230,.22);animation:float2 28s ease-in-out infinite}
.g-a4 .fx i:nth-child(3){left:30%;bottom:-25%;background:rgba(9,74,81,.8);animation:float3 32s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}33%{transform:translate(30%,20%)}66%{transform:translate(-10%,30%)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-35%,25%)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(20%,-30%)}}
/* A5 feixe que atravessa */
.g-a5{background:radial-gradient(60% 50% at 50% 0%,rgba(63,224,230,.12),rgba(63,224,230,0) 70%),var(--night)}
.g-a5::before{top:-50%;bottom:-50%;width:30%;left:-40%;background:linear-gradient(90deg,rgba(63,224,230,0),rgba(63,224,230,.14),rgba(63,224,230,0));transform:rotate(18deg);animation:sweep 9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes sweep{0%{left:-40%}60%,100%{left:120%}}
/* A6 pontos acendendo — linear.app (grade que cintila) */
.g-a6{background:var(--night)}
.g-a6::before{inset:0;background-image:radial-gradient(rgba(63,224,230,.55) 1px,transparent 1.5px);background-size:22px 22px;-webkit-mask-image:radial-gradient(28% 30% at var(--mx,30%) 30%,#000,transparent 75%);mask-image:radial-gradient(28% 30% at var(--mx,30%) 30%,#000,transparent 75%);animation:scan 10s ease-in-out infinite alternate}
.g-a6::after{inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:22px 22px}
@property --mx{syntax:'<percentage>';inherits:false;initial-value:30%}
@keyframes scan{to{--mx:70%}}

/* ---------- CLAROS ---------- */
/* C1 papel com brisa — attio.com (hero claro com lavanda embaixo, aqui em teal) */
.g-c1{background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 45%,#EAF4F4 100%)}
.g-c1::before{left:10%;right:10%;bottom:-30%;height:70%;background:radial-gradient(50% 50% at 50% 50%,rgba(63,224,230,.22),rgba(63,224,230,0) 70%);filter:blur(20px)}
/* C2 céu — revolut.com */
.g-c2{background:linear-gradient(180deg,#CFE9EA 0%,#E8F4F4 45%,#FFFFFF 100%)}
/* C3 papel com aurora lenta */
.g-c3{background:var(--paper)}
.g-c3 .fx i{width:55%;height:60%;border-radius:50%;filter:blur(70px);opacity:.5}
.g-c3 .fx i:nth-child(1){left:-5%;bottom:-25%;background:#BFE8EA;animation:drift1 16s ease-in-out infinite alternate}
.g-c3 .fx i:nth-child(2){right:-10%;bottom:-30%;background:#D6EFE6;animation:drift2 19s ease-in-out infinite alternate}
.g-c3 .fx i:nth-child(3){display:none}

/* H1 horizonte animado — attio.com, "Universal Context": o arco se define, a luz sobe, a grade corre para você */
.g-h1{background:var(--night)}
.g-h1::before{left:-40%;width:180%;top:min(70%,66svh);height:200%;border-radius:50%;border-top:1.5px solid rgba(63,224,230,.85);box-shadow:0 -24px 80px rgba(63,224,230,.32),inset 0 24px 70px rgba(63,224,230,.14);animation:hz-define 2.8s cubic-bezier(.22,1,.36,1) .3s both,hz-breathe 8s ease-in-out 3.2s infinite}
.g-h1::after{left:0;right:0;top:0;height:100%;background:radial-gradient(ellipse min(60vw,900px) 36svh at 50% min(100svh,100%),rgba(17,99,107,.62),rgba(17,99,107,0) 70%),radial-gradient(40% 30svh at 50% 0%,rgba(63,224,230,.08),rgba(63,224,230,0) 70%);transform-origin:50% 0;animation:hz-abre 2.8s cubic-bezier(.22,1,.36,1) .2s both}
.g-h1 .fx i:nth-child(1){left:-60%;right:-60%;top:min(71%,67svh);height:70%;background-image:linear-gradient(rgba(63,224,230,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(63,224,230,.16) 1px,transparent 1px);background-size:64px 64px;transform:perspective(520px) rotateX(64deg);transform-origin:top center;-webkit-mask-image:linear-gradient(#000,transparent 65%);mask-image:linear-gradient(#000,transparent 65%);animation:hz-grid 5s linear infinite,hz-fade 2.4s ease-out 1s both}
.g-h1 .fx i:nth-child(2){left:30%;width:40%;top:calc(min(70%,66svh) - 1px);height:2px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff,rgba(255,255,255,0));filter:blur(1px);opacity:0;animation:hz-sheen 7s cubic-bezier(.65,0,.35,1) 3.4s infinite}
.g-h1 .fx i:nth-child(3){display:none}
@keyframes hz-define{from{opacity:0;transform:scaleX(.3) translateY(60px)}to{opacity:1;transform:none}}
@keyframes hz-breathe{50%{box-shadow:0 -34px 110px rgba(63,224,230,.45),inset 0 30px 90px rgba(63,224,230,.2)}}
/* a luz do topo abre do meio para os lados, como o arco (a caixa agora tem a altura toda da seção e subir 10% dela cortava a luz de cima) */
@keyframes hz-abre{from{opacity:0;transform:scaleX(.3)}}
@keyframes hz-rise{from{opacity:0;transform:translateY(10%)}}
@keyframes hz-grid{to{background-position:0 64px,0 0}}
@keyframes hz-fade{from{opacity:0}}
@keyframes hz-sheen{0%{opacity:0;transform:translateX(-90%)}20%{opacity:.9}55%,100%{opacity:0;transform:translateX(90%)}}

@media (prefers-reduced-motion:reduce){.hbg *,.hbg::before,.hbg::after,.hbg .fx i{animation:none!important}}


/* ---------- H2–H5 horizontes redondos (SVG injetado pelo site em .hz-svg) ---------- */
.g-h2,.g-h3,.g-h4,.g-h5,.g-h6{background:var(--night)}
.g-h6{background:radial-gradient(70% 45% at 50% 0%,rgba(63,224,230,.12),rgba(63,224,230,0) 70%),radial-gradient(60% 40% at 15% 20%,rgba(17,99,107,.35),rgba(17,99,107,0) 70%),var(--night)}
.g-h2::after,.g-h3::after,.g-h4::after,.g-h5::after,.g-h6::after{inset:0;background:radial-gradient(70% 38% at 50% 78%,rgba(17,99,107,.55),rgba(17,99,107,0) 72%),radial-gradient(90% 30% at 50% 100%,rgba(9,74,81,.45),rgba(9,74,81,0) 70%);animation:hz-rise 3s cubic-bezier(.22,1,.36,1) .2s both}
.hz-svg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
.hz-svg .arco{fill:none;stroke:rgba(63,224,230,.9);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;animation:hz-desenha 2.6s cubic-bezier(.22,1,.36,1) .3s forwards}
.hz-svg .atmos{fill:none;stroke:rgba(63,224,230,.22);stroke-width:70;filter:blur(18px);opacity:0;animation:hz-fade2 2.4s ease-out 1.2s forwards,hz-pulsa 9s ease-in-out 3.6s infinite}
.hz-svg .orb{fill:none;stroke:rgba(63,224,230,.16);stroke-width:1;opacity:0;animation:hz-fade2 2s ease-out 1.6s forwards}
.hz-svg .lua{fill:#BFFBFD;filter:drop-shadow(0 0 6px rgba(63,224,230,.9))}
.hz-svg .onda{fill:none;stroke:rgba(63,224,230,.35);stroke-width:1.2}
.hz-svg .conta{fill:none;stroke:#EFFFFF;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(63,224,230,1))}
@keyframes hz-desenha{to{stroke-dashoffset:0}}
@keyframes hz-fade2{to{opacity:1}}
@keyframes hz-pulsa{50%{stroke:rgba(63,224,230,.34)}}
@media (prefers-reduced-motion:reduce){.hz-svg *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}.hz-svg animate,.hz-svg animateMotion{display:none}}

/* o brilho de baixo tem tamanho próprio (não o da caixa), para sumir antes de qualquer borda: com a janela do hero abaixo, a caixa de 100svh cortava o brilho em linha reta */
/* ---------- H7 e H8: o arco e a entrada do H1, com a luz do H5 (h7) ou as órbitas do H6 (h8) ---------- */
.g-h7,.g-h8,.g-h9{background:var(--night)}
.g-h7::before,.g-h8::before,.g-h9::before{left:-40%;width:180%;top:min(70%,66svh);height:200%;border-radius:50%;border-top:1.5px solid rgba(63,224,230,.85);box-shadow:0 -24px 80px rgba(63,224,230,.32),inset 0 24px 70px rgba(63,224,230,.14);animation:hz-define 2.8s cubic-bezier(.22,1,.36,1) .3s both,hz-breathe 8s ease-in-out 3.2s infinite}
.g-h7::after,.g-h8::after,.g-h9::after{left:0;right:0;top:0;height:100%;background:radial-gradient(ellipse min(60vw,900px) 36svh at 50% min(100svh,100%),rgba(17,99,107,.62),rgba(17,99,107,0) 70%),radial-gradient(40% 30svh at 50% 0%,rgba(63,224,230,.08),rgba(63,224,230,0) 70%);transform-origin:50% 0;animation:hz-abre 2.8s cubic-bezier(.22,1,.36,1) .2s both}
.g-h7 .fx i,.g-h8 .fx i,.g-h9 .fx i{display:none}
.hz-78{opacity:0;animation:hz-fade2 1.4s ease-out 2.8s forwards}
.hz-78 .orb{stroke:rgba(63,224,230,.18)}
@media (prefers-reduced-motion:reduce){.hz-78{opacity:1;animation:none}}