/* ============================================================================= * twiqor.com — Aurora Shader · CSS complementario * Aplica solo cuando aurora-shader.js confirmó WebGL2 OK y añadió la clase * 'has-shader' al . Si el JS falla o el usuario no tiene WebGL2, esta * clase nunca se añade y la landing conserva sus aurora-orb originales. * ============================================================================= */ /* Canvas del shader: capa de fondo, sin captar eventos. Mix-blend "screen" * empareja el look luminoso de las orbs sobre #0A0A0F. */ canvas#aurora-shader{ position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; mix-blend-mode: screen; /* Fade-in suave al arrancar */ opacity: 0; animation: auroraShaderFadeIn 900ms ease-out 80ms forwards; will-change: opacity; } @keyframes auroraShaderFadeIn{ from{ opacity: 0; } to { opacity: 1; } } /* Cuando el shader está activo: ocultamos las orbs CSS (fallback) y * atenuamos el mesh radial para no superponer dos capas naranjas. */ html.has-shader .aurora{ display: none; } html.has-shader .mesh { opacity: 0.30; } /* Reduce-motion: belt-and-suspenders. El JS ya hace early-return, pero si * por cualquier razón quedó montado, lo escondemos. */ @media (prefers-reduced-motion: reduce){ canvas#aurora-shader{ display: none !important; animation: none !important; } html.has-shader .aurora{ display: block; } html.has-shader .mesh { opacity: 0.50; } } /* Light theme: el JS tampoco arranca (la landing ya oculta aurora/mesh en * light mediante reglas existentes), pero por seguridad ocultamos el canvas. */ html[data-theme="light"] canvas#aurora-shader{ display: none; } html[data-theme="light"].has-shader .aurora{ display: none; } html[data-theme="light"].has-shader .mesh { display: none; }