/* ============================================================ HS Merkaba Cursor — visual layer (3D wireframe stella octangula) ------------------------------------------------------------ Activated when . JS lives in /assets/js/hs-merkaba-cursor.js — it injects the #hs-merkaba-cursor element with two groups of 6 s each, and updates their endpoints every frame from a 3D projection. CSS owns: cursor-hiding, sizing, stroke, glow, click-burst animation, accessibility fallbacks. --heat is a 0..1 scalar set by JS each frame — drives glow. ============================================================ */ body.hs-merkaba-cursor-active, body.hs-merkaba-cursor-active * { cursor: none !important; } #hs-merkaba-cursor { position: fixed; top: 0; left: 0; width: 56px; height: 56px; pointer-events: none; z-index: 2147483646; will-change: transform, opacity; transition: opacity .25s ease; --heat: 0; } #hs-merkaba-cursor svg { width: 100%; height: 100%; overflow: visible; /* glow can spill past the box */ display: block; } /* Wireframe lines — thin, neon, glow scales with speed. Stroke width is in viewBox units (viewBox is 1.2 wide, so 0.025 ≈ 2% of cursor width — reads as ~1.4px on a 56px cursor). */ #hs-merkaba-cursor line { fill: none; stroke: currentColor; stroke-width: 0.025; vector-effect: non-scaling-stroke; /* keeps line weight constant */ } /* Override: vector-effect makes stroke-width interpret as px. */ #hs-merkaba-cursor line { stroke-width: 1.4; } /* Two-glyph color split: fire (up, pink) + water (down, cyan). Filter applied per-group so each tetra has its own colored glow. */ #hs-merkaba-cursor .hs-merkaba-tetra-up { color: #ff3aa6; filter: drop-shadow(0 0 calc(3px + var(--heat) * 9px) #ff3aa6); } #hs-merkaba-cursor .hs-merkaba-tetra-down { color: #00eaff; filter: drop-shadow(0 0 calc(3px + var(--heat) * 9px) #00eaff); } /* At full heat, both tetras get a white-hot inner core via a second shadow layer — gives the "charged" feeling at high speed without losing the brand color pair. */ #hs-merkaba-cursor[style*="--heat"] .hs-merkaba-tetra-up, #hs-merkaba-cursor[style*="--heat"] .hs-merkaba-tetra-down { filter: drop-shadow(0 0 calc(3px + var(--heat) * 10px) currentColor) drop-shadow(0 0 calc(0px + var(--heat) * 4px) rgba(255, 255, 255, var(--heat))); } /* ---------- click burst (Star of Solomon ring) ---------- */ .hs-merkaba-burst { position: fixed; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; pointer-events: none; z-index: 2147483645; color: #00eaff; animation: hs-merkaba-burst-anim 650ms cubic-bezier(.18,.66,.34,1) forwards; } .hs-merkaba-burst svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 18px rgba(255, 58, 166, .55)); } @keyframes hs-merkaba-burst-anim { 0% { transform: scale(0.25) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 60% { transform: scale(1.6) rotate(40deg); } 100% { transform: scale(2.6) rotate(72deg); opacity: 0; } } /* ---------- accessibility / device fallbacks ---------- */ @media (prefers-reduced-motion: reduce) { body.hs-merkaba-cursor-active, body.hs-merkaba-cursor-active * { cursor: auto !important; } #hs-merkaba-cursor, .hs-merkaba-burst { display: none !important; } } @media (hover: none), (pointer: coarse) { body.hs-merkaba-cursor-active, body.hs-merkaba-cursor-active * { cursor: auto !important; } #hs-merkaba-cursor, .hs-merkaba-burst { display: none !important; } }