/* ========================================================================= Ambient animated background for waxeem.com ------------------------------------------------------------------------- GLOWS sit behind the content (#orb-field, z-index -1). CIRCLES sit in front of the content (#lens-field, z-index 5, below the navbar) so they can act as glassy lenses over the text. Driven by /js/orbs.js. #content is a stacking context so both layers sit above the page's solid background but the glows stay below the sections (the theme paints an opaque background on every direct child of ). ========================================================================= */ #content { position: relative; isolation: isolate; } #orb-field, #ring-field, #lens-field { position: fixed; inset: 0; overflow: hidden; pointer-events: none; /* grabs are hit-tested in JS, never block clicks */ } #orb-field { z-index: -1; } /* glows: behind the content */ #ring-field { z-index: -1; } /* circles while drifting: behind the content */ #lens-field { z-index: 5; } /* a held circle: in front, as a magnifier */ #orb-field, #ring-field { opacity: 0; transition: opacity 0.7s ease; } #orb-field.is-ready, #ring-field.is-ready { opacity: 1; } .orb { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform; } .orb--glow { background: radial-gradient(circle at 50% 50%, var(--primary-color, #fbbf24), transparent 70%); filter: blur(55px); } /* a circle = thin amber ring. It drifts quietly behind the content; when held it moves to #lens-field (in front) and becomes a real magnifier. */ .orb--ring { border: 2px solid var(--primary-color, #fbbf24); background: transparent; overflow: hidden; pointer-events: none; } .orb--ring.is-held { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45); /* lift it off the page while held */ } /* the inner clip that holds the magnified clone while a circle is held */ .lens-view { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; } .orb--ring.is-held .lens-view { background: var(--background-color, #000); } .lens-clone { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; } /* ------------------------------------------------------------------------- Hero image is a transparent PNG. The theme wraps it in a dark box (a 3px var(--secondary-color) border + drop shadow) which hides the glow background behind it. Strip that so the logo floats cleanly on the backdrop. !important because the theme's index.css loads after this file. ------------------------------------------------------------------------- */ #hero .image img { background: transparent !important; border: none !important; box-shadow: none !important; }