/* ================================================================ BHalf — fundos animados da identidade (CSS puro, só transform/opacity). Criados pela BHalf. Uso: como PRIMEIRO filho do . Fica atrás de todo o conteúdo. Contagem de por fundo: bh-funil 3 · bh-correnteza 2 · bh-orbita 4 · bh-malha 0 · bh-raios 2 · bh-aurora 3 · bh-radar 4 ================================================================ */ .appbg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none; --teal:#005159;--yellow:#E4E231;--green:#6A9941} .appbg i{position:absolute;inset:0;display:block} /* 1. FUNIL — paredes convergindo + luz descendo */ .bh-funil i:nth-child(1){background:linear-gradient(180deg,rgba(0,81,89,.55),rgba(0,81,89,0)); clip-path:polygon(0 0,36% 0,45% 100%,0 100%);animation:bh-funil-breathe 22s ease-in-out infinite alternate} .bh-funil i:nth-child(2){background:linear-gradient(180deg,rgba(106,153,65,.42),rgba(106,153,65,0)); clip-path:polygon(64% 0,100% 0,100% 100%,55% 100%);animation:bh-funil-breathe 22s ease-in-out infinite alternate-reverse} .bh-funil i:nth-child(3){background:linear-gradient(180deg,rgba(228,226,49,0),rgba(228,226,49,.16) 45%,rgba(228,226,49,0)); clip-path:polygon(36% 0,64% 0,55% 100%,45% 100%);animation:bh-funil-flow 11s linear infinite} @keyframes bh-funil-breathe{from{transform:translateX(0)}to{transform:translateX(2.5%)}} @keyframes bh-funil-flow{from{transform:translateY(-105%)}to{transform:translateY(105%)}} /* 1b. CORRENTEZA — pontos escorrendo */ .bh-correnteza{clip-path:polygon(4% 0,96% 0,60% 100%,40% 100%)} .bh-correnteza i{inset:-20% 0;background-image:radial-gradient(circle,#E4E231 1.6px,transparent 1.7px);background-size:34px 34px; opacity:.30;animation:bh-correnteza-fall 9s linear infinite; -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 62%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 62%,transparent)} .bh-correnteza i:nth-child(2){background-image:radial-gradient(circle,#6A9941 2.6px,transparent 2.7px);background-size:58px 58px;background-position:18px 0;opacity:.34;animation-duration:15s} @keyframes bh-correnteza-fall{from{background-position-y:0}to{background-position-y:34px}} /* 2. ÓRBITA — anéis concêntricos girando no canto */ .bh-orbita i{inset:auto;border-radius:50%;border:1px solid currentColor;top:50%;left:88%;transform-origin:center;animation:bh-orbita-spin var(--bh-t) linear infinite} .bh-orbita i:nth-child(1){color:rgba(228,226,49,.28);width:340px;height:340px;margin:-170px 0 0 -170px;--bh-t:70s} .bh-orbita i:nth-child(2){color:rgba(106,153,65,.30);width:560px;height:560px;margin:-280px 0 0 -280px;--bh-t:110s;animation-direction:reverse;border-style:dashed} .bh-orbita i:nth-child(3){color:rgba(240,240,235,.10);width:800px;height:800px;margin:-400px 0 0 -400px;--bh-t:150s} .bh-orbita i:nth-child(4){color:transparent;background:radial-gradient(circle,rgba(228,226,49,.16),transparent 68%);width:220px;height:220px;margin:-110px 0 0 -110px;border:0;animation:bh-orbita-pulse 9s ease-in-out infinite} @keyframes bh-orbita-spin{to{transform:rotate(360deg)}} @keyframes bh-orbita-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.25);opacity:.5}} /* 3. MALHA — grade de + com onda de luz */ .bh-malha{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M21 17h6v6h6v6h-6v6h-6v-6h-6v-6h6z' fill='%23E4E231'/%3E%3C/svg%3E"); background-size:48px 48px;opacity:.16;animation:bh-malha-drift 34s linear infinite; -webkit-mask-image:radial-gradient(circle at var(--mx,20%) var(--my,26%),#000 0%,rgba(0,0,0,.28) 42%,rgba(0,0,0,.10) 70%); mask-image:radial-gradient(circle at var(--mx,20%) var(--my,26%),#000 0%,rgba(0,0,0,.28) 42%,rgba(0,0,0,.10) 70%)} @keyframes bh-malha-drift{to{background-position:48px 48px}} /* 4. RAIOS — leque girando devagar no canto */ .bh-raios i{bottom:-40%;right:-14%;top:auto;left:auto;width:150%;height:150%; background:repeating-conic-gradient(from 0deg,rgba(228,226,49,.14) 0deg 5deg,transparent 5deg 13deg);border-radius:50%;animation:bh-raios-spin 190s linear infinite} .bh-raios i:nth-child(2){background:repeating-conic-gradient(from 6deg,rgba(106,153,65,.16) 0deg 3deg,transparent 3deg 15deg);animation-duration:130s;animation-direction:reverse} @keyframes bh-raios-spin{to{transform:rotate(360deg)}} /* 5. AURORA — manchas suaves respirando */ .bh-aurora i{inset:auto;border-radius:50%;filter:blur(70px);opacity:.5;animation:bh-aurora-float var(--bh-t) ease-in-out infinite alternate} .bh-aurora i:nth-child(1){background:var(--teal);width:52%;height:120%;top:-30%;left:-8%;--bh-t:19s} .bh-aurora i:nth-child(2){background:var(--green);width:44%;height:100%;top:-10%;left:38%;--bh-t:25s;animation-delay:-7s;opacity:.30} .bh-aurora i:nth-child(3){background:var(--yellow);width:30%;height:70%;top:36%;left:70%;--bh-t:31s;animation-delay:-13s;opacity:.16} @keyframes bh-aurora-float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6%,-8%,0) scale(1.22)}} /* 6. RADAR — anéis abrindo de um ponto */ .bh-radar i{inset:auto;top:78%;left:14%;width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid rgba(228,226,49,.5);border-radius:50%;animation:bh-radar-ping 8s cubic-bezier(.2,.6,.35,1) infinite} .bh-radar i:nth-child(2){animation-delay:-2.6s;border-color:rgba(106,153,65,.55)} .bh-radar i:nth-child(3){animation-delay:-5.3s;border-color:rgba(240,240,235,.28)} .bh-radar i:nth-child(4){animation:none;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:var(--yellow);border:0;opacity:.85} @keyframes bh-radar-ping{from{transform:scale(.3);opacity:0}12%{opacity:1}to{transform:scale(19);opacity:0}} /* tema claro: fundos mais discretos */ :root[data-theme="light"] .appbg{opacity:.6} @media (prefers-reduced-motion:reduce){ .appbg i,.bh-malha{animation:none!important} .bh-radar i:not(:nth-child(4)){opacity:.16;transform:scale(7)} }