/* ============================================================ ELIOGPT · SISTEMA DE FONDO ANIMADO (nativo, por capas) Capa 1 base · Capa 2 atmósfera · Capa 3 grid perspectiva · Capa 4/5 red de nodos (canvas, dibujado en js/elio-bg.js). Decorativo: pointer-events:none, detrás de todo el contenido. ============================================================ */ .elio-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--elio-bg-deep); } /* Capa 1 — Base: gradientes profundos, sin bloques planos */ .elio-bg__base { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% -10%, rgba(19, 12, 38, 0.9) 0%, rgba(7, 7, 11, 0) 55%), linear-gradient(180deg, #08060F 0%, #050409 45%, #030208 100%); } /* Capa 2 — Atmósfera: halos violetas de baja opacidad */ .elio-bg__glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; will-change: transform; } .elio-bg__glow--1 { width: 620px; height: 620px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(124, 58, 237, 0.5) 0%, rgba(124, 58, 237, 0) 70%); animation: elio-float-a 26s var(--ease) infinite alternate; } .elio-bg__glow--2 { width: 520px; height: 520px; bottom: -160px; left: -140px; background: radial-gradient(circle, rgba(192, 38, 211, 0.32) 0%, rgba(192, 38, 211, 0) 70%); animation: elio-float-b 32s var(--ease) infinite alternate; } .elio-bg__glow--3 { width: 460px; height: 460px; top: 40%; left: 45%; background: radial-gradient(circle, rgba(102, 51, 153, 0.26) 0%, rgba(102, 51, 153, 0) 70%); animation: elio-float-a 30s var(--ease) infinite alternate-reverse; } @keyframes elio-float-a { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-40px, 40px, 0) scale(1.08); } } @keyframes elio-float-b { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(50px, -30px, 0) scale(1.1); } } /* Capa 3 — Grid en perspectiva (profundidad), muy sutil */ .elio-bg__grid { position: absolute; left: 50%; bottom: -10%; width: 200%; height: 70%; transform: translateX(-50%) perspective(520px) rotateX(64deg); transform-origin: 50% 100%; background-image: linear-gradient(rgba(139, 92, 246, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, 0.10) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 78%); opacity: 0.5; animation: elio-grid-scroll 22s linear infinite; } @keyframes elio-grid-scroll { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 46px, 46px 0; } } /* Capa 4/5 — Red de nodos + partículas (Canvas dibujado por JS) */ .elio-bg__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; } /* Fade de bordes para integrar con el contenido */ .elio-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,2,8,0) 60%, rgba(3,2,8,0.55) 100%); } /* Intensidades por página (data-atmos en ) */ body[data-atmos="calm"] .elio-bg__glow { opacity: 0.32; } body[data-atmos="calm"] .elio-bg__grid { opacity: 0.28; } /* Asegura que el contenido quede por encima del fondo */ .site-header, main, .site-footer { position: relative; z-index: var(--z-base); } /* Móvil: menos capas, menos blur, mejor batería/legibilidad */ @media (max-width: 767px) { .elio-bg__glow { filter: blur(50px); opacity: 0.4; } .elio-bg__glow--3 { display: none; } .elio-bg__grid { height: 55%; opacity: 0.32; animation: none; } } @media (prefers-reduced-motion: reduce) { .elio-bg__glow, .elio-bg__grid { animation: none !important; } }