/* ============================================================ EXELIX MOTION SYSTEM Adds living, glowing motion (animated aurora, particle network, cursor spotlight, hover glow) on top of the existing design system and fade-up reveal — same colors, same content, more life. Loaded on every page via in . ============================================================ */ /* ---------- 1. Animated aurora blobs (upgrades existing static blobs) ---------- */ @keyframes exlxAurora1{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(-34px,28px) scale(1.09); } 66%{ transform:translate(24px,-22px) scale(0.95); } } @keyframes exlxAurora2{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(28px,-18px) scale(0.94); } 66%{ transform:translate(-22px,26px) scale(1.07); } } .hero-blob{ animation:exlxAurora1 17s ease-in-out infinite; will-change:transform; } .hero-blob2{ animation:exlxAurora2 21s ease-in-out infinite; will-change:transform; } /* ---------- 2. Particle network canvas (injected into .hero by motion.js) ---------- */ .hero-particles{ position:absolute; inset:0; z-index:1; pointer-events:none; } /* ---------- 3. Cursor spotlight (injected into .hero by motion.js) ---------- */ .hero{ --mx:50%; --my:32%; } .hero-spotlight{ position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(480px circle at var(--mx) var(--my), rgba(0,168,96,0.11), transparent 72%); opacity:0; transition:opacity .4s ease; } .hero:hover .hero-spotlight{ opacity:1; } /* ---------- 4. Hover glow for cards site-wide ---------- */ /* Applied broadly via [class*="-card"], but the hero "device mockup" panel (.hero-dashboard and its contents) is intentionally excluded — see motion.js */ [class*="-card"]{ transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1); } .exlx-glowable:hover{ transform:translateY(-7px); box-shadow:0 22px 48px rgba(0,132,77,0.16), 0 4px 14px rgba(0,132,77,0.08); } /* ---------- 5. Button feedback: press, not sheen ---------- A sweeping light gimmick fires every hover with no purpose beyond "looks cool" — cut per the animation decision framework. Press feedback (scale down, ease-out, <300ms) is functional: it confirms the interface heard the click. */ .btn-secondary:hover{ box-shadow:0 10px 28px rgba(0,119,197,0.18); } /* ---------- 6. Hero emphasis: a static italic serif in the accent color does the job. An infinite sheen loop animates 100+ times a session for a single word — that's the "never animate constant, high-frequency, purely decorative UI" case. */ /* ---------- 7. Region dropdown menu: subtle entrance polish ---------- */ .nav-dropdown-menu{ transform-origin:top center; } .nav-dropdown.open .nav-dropdown-menu{ animation:exlxMenuPop .22s cubic-bezier(.16,1,.3,1); } @keyframes exlxMenuPop{ 0%{ opacity:0; transform:translateX(-50%) translateY(-6px) scale(.97); } 100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); } } /* ---------- 8. Respect reduced-motion preferences ---------- */ @media (prefers-reduced-motion: reduce){ .hero-blob, .hero-blob2{ animation:none !important; } .hero-particles{ display:none !important; } .hero-spotlight{ display:none !important; } .exlx-glowable:hover{ transform:none; } } /* ---------- 9. Small screens: skip the heaviest effects for performance ---------- */ @media (max-width:700px){ .hero-particles{ display:none; } }