/* =====================================================================================================
   EFEITOS ATRIAON — biblioteca própria de efeitos visuais (v1.0, 24/10/2026)
   Escrita do zero a partir do mapeamento de técnicas em referencia/ (freefrontend.com, só como índice de ideias).
   Prefixo ef- em tudo, para usar em qualquer site sem colidir. Cores por variáveis (--ef-*), que cada site ajusta.
   Regras da casa:
     · só transform, opacity, filter e clip-path animam (nada de width/top/left);
     · "reduzir movimento" desliga tudo que anda; "reduzir transparência" troca vidro por fundo sólido;
     · html.ef-pausado pausa o que é ambiente (luzes, bordas vivas, letreiro, grade) — o site dá o botão;
     · nada de pulsar para chamar atenção; o efeito acompanha a ação da pessoa ou fica quase imperceptível.
   ===================================================================================================== */
@property --ef-giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root {
  --ef-marinho: #0F2D57; --ef-verde: #0A9C44; --ef-azul: #0C4A91; --ef-ciano: #55C4E6;
  --ef-vidro: rgba(255, 255, 255, .56);
  --ef-vidro-escuro: rgba(12, 30, 60, .66);
  --ef-desfoque: blur(18px) saturate(1.8);
  --ef-sombra: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(15, 45, 87, .05), 0 22px 50px -26px rgba(15, 45, 87, .38), 0 2px 6px rgba(15, 45, 87, .04);
  --ef-saida: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 1. VIDRO: fosco, líquido, escuro ---------- */
.ef-vidro { position: relative; isolation: isolate; background: var(--ef-vidro); -webkit-backdrop-filter: var(--ef-desfoque); backdrop-filter: var(--ef-desfoque); border-color: transparent !important; box-shadow: var(--ef-sombra); }
:where(.ef-vidro) > * { position: relative; z-index: 1; } /* peso zero: filho com posição própria continua com ela */
.ef-vidro::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 38%, rgba(15, 45, 87, .10) 62%, color-mix(in srgb, var(--ef-verde) 40%, transparent));
  -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 exclude, linear-gradient(#000 0 0); }
.ef-vidro::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--ef-mx, 30%) var(--ef-my, -20%), rgba(255, 255, 255, .55), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 32%);
  opacity: .7; transition: opacity .4s var(--ef-saida); }
@media (hover: hover) { .ef-vidro:hover::after { opacity: 1; } }
.ef-vidro--escuro { background: var(--ef-vidro-escuro); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 30px 70px -30px rgba(5, 15, 35, .7); }
.ef-vidro--escuro::before { background: linear-gradient(145deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .06) 40%, color-mix(in srgb, var(--ef-verde) 50%, transparent)); }
.ef-vidro--escuro::after { background: radial-gradient(520px circle at var(--ef-mx, 20%) var(--ef-my, -30%), rgba(120, 220, 170, .18), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 30%); }
/* liquid glass: lente por filtro SVG (#ef-lente, ver efeitos.js → EfeitosAtriaON.lente()); fora do Chromium fica fosco */
.ef-liquido { -webkit-backdrop-filter: blur(10px) saturate(1.9); backdrop-filter: blur(10px) saturate(1.9); }
@supports (backdrop-filter: url(#ef-lente)) { .ef-liquido { backdrop-filter: blur(3px) url(#ef-lente) saturate(1.9) brightness(1.04); } }

/* ---------- 2. BORDAS DE LUZ ---------- */
/* borda viva: luz girando em volta (cartão em destaque) */
.ef-borda-viva { position: relative; isolation: isolate; }
.ef-borda-viva::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  -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 exclude, linear-gradient(#000 0 0);
  padding: 1.5px; background: conic-gradient(from var(--ef-giro), var(--ef-verde), var(--ef-azul), #fff, var(--ef-verde)); animation: ef-giro 7s linear infinite; }
/* feixe: um traço de luz percorre a borda (para elementos sem ::before ocupado, use .ef-feixe) */
.ef-feixe { position: relative; isolation: isolate; }
.ef-feixe::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ef-giro), transparent 0 70%, color-mix(in srgb, var(--ef-verde) 85%, #fff) 86%, var(--ef-ciano) 92%, transparent 99%);
  -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 exclude, linear-gradient(#000 0 0);
  animation: ef-giro 4.5s linear infinite; }
@keyframes ef-giro { to { --ef-giro: 360deg; } }

/* ---------- 3. LUZ ---------- */
/* brilho que atravessa no hover (botões, cartões): um reflexo diagonal passa uma vez */
.ef-brilho { position: relative; overflow: hidden; isolation: isolate; }
.ef-brilho::after { content: ""; position: absolute; inset: -50% auto -50% -60%; width: 40%; transform: translateX(-120%) skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); }
@media (hover: hover) { .ef-brilho:hover::after { transform: translateX(520%) skewX(-20deg); transition: transform .9s var(--ef-saida); } }
/* texto com luz em gradiente que desliza devagar (títulos curtos) */
.ef-texto-luz { background: linear-gradient(100deg, var(--ef-marinho) 0%, var(--ef-marinho) 40%, var(--ef-verde) 50%, var(--ef-marinho) 60%, var(--ef-marinho) 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ef-texto-luz 6s var(--ef-saida) 1.2s 1 both; }
@keyframes ef-texto-luz { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- 4. FUNDOS ---------- */
/* camada genérica de fundo (fica atrás do conteúdo da seção) */
.ef-camada { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* grade de pontos que some nas bordas */
.ef-pontos { background-image: radial-gradient(rgba(15, 45, 87, .16) 1px, transparent 1.3px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); }
/* piso de grade em perspectiva (estilo "cyber"), andando devagar */
.ef-piso { perspective: 520px; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 70%); mask-image: linear-gradient(to top, #000 0%, transparent 70%); }
.ef-piso::before { content: ""; position: absolute; left: -50%; right: -50%; bottom: -10%; height: 85%; transform-origin: 50% 100%; transform: rotateX(68deg);
  background-image: linear-gradient(color-mix(in srgb, var(--ef-azul) 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ef-azul) 22%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; animation: ef-piso 6s linear infinite; }
@keyframes ef-piso { to { background-position: 0 56px, 0 0; } }
/* luzes de cor desfocadas que andam devagar (dão o que o vidro "mostrar") */
.ef-orbes i { position: absolute; width: 38vw; max-width: 560px; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .62; animation: ef-orbe 22s cubic-bezier(.77, 0, .175, 1) infinite alternate; }
.ef-orbes i:nth-child(1) { background: radial-gradient(circle, color-mix(in srgb, var(--ef-verde) 55%, transparent), transparent 65%); left: -6%; top: 10%; }
.ef-orbes i:nth-child(2) { background: radial-gradient(circle, color-mix(in srgb, var(--ef-azul) 45%, transparent), transparent 65%); right: -8%; top: 30%; animation-duration: 26s; animation-delay: -6s; }
.ef-orbes i:nth-child(3) { background: radial-gradient(circle, color-mix(in srgb, var(--ef-ciano) 45%, transparent), transparent 65%); left: 35%; bottom: -20%; animation-duration: 30s; animation-delay: -12s; }
@keyframes ef-orbe { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, -4vw, 0) scale(1.15); } }
/* aurora: faixas de luz que ondulam (fundos escuros) */
.ef-aurora::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 90deg at 50% 50%, transparent, color-mix(in srgb, var(--ef-verde) 35%, transparent), transparent 30%, color-mix(in srgb, var(--ef-ciano) 30%, transparent), transparent 60%);
  filter: blur(60px); animation: ef-aurora 18s linear infinite; mix-blend-mode: screen; }
@keyframes ef-aurora { to { transform: rotate(360deg); } }
/* granulado: textura fina por cima (tira a cara "plana" do digital) */
.ef-granulado::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
/* rede neural: <canvas class="ef-rede"> desenhado pelo efeitos.js (pontos e linhas que reagem ao cursor) */
.ef-rede { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- 5. MOVIMENTO LIGADO À PESSOA ---------- */
/* inclinação 3D no hover: efeitos.js põe --ef-rx/--ef-ry */
.ef-inclinar { transform: perspective(900px) rotateX(var(--ef-rx, 0deg)) rotateY(var(--ef-ry, 0deg)) translateZ(0); transition: transform .5s var(--ef-saida); will-change: transform; }
.ef-inclinar.ef-ativo { transition-duration: .12s; }
/* letreiro infinito (faixa de palavras) */
.ef-letreiro { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ef-letreiro__trilho { display: flex; width: max-content; animation: ef-letreiro var(--ef-letreiro-tempo, 40s) linear infinite; }
.ef-letreiro:hover .ef-letreiro__trilho { animation-play-state: paused; }
@keyframes ef-letreiro { to { transform: translateX(-50%); } }

/* ---------- pausa, reduzir movimento, reduzir transparência ---------- */
html.ef-pausado .ef-orbes i, html.ef-pausado .ef-borda-viva::before, html.ef-pausado .ef-feixe::after, html.ef-pausado .ef-piso::before,
html.ef-pausado .ef-aurora::before, html.ef-pausado .ef-letreiro__trilho { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ef-orbes i, .ef-borda-viva::before, .ef-feixe::after, .ef-piso::before, .ef-aurora::before, .ef-letreiro__trilho, .ef-texto-luz { animation: none; }
  .ef-texto-luz { background-position: 0 0; }
  .ef-inclinar { transform: none !important; transition: none; }
  .ef-brilho::after { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ef-vidro { background: rgba(255, 255, 255, .94); } .ef-vidro--escuro { background: var(--ef-marinho); } }
@media (prefers-reduced-transparency: reduce) {
  .ef-vidro, .ef-liquido { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
  .ef-vidro--escuro { background: var(--ef-marinho); }
  .ef-orbes, .ef-aurora::before, .ef-granulado::after { display: none; }
}