/* ============================================================ MARINOX GROUP — Custom Cursor System cursor.css · v1.0 Cursor layers: 1. .mx-cursor-dot — 6px hard teal dot (true pointer) 2. .mx-cursor-ring — 32px ring, lags with lerp (aura) 3. .mx-cursor-trail — 8 fading echo dots States driven by data-cursor-state on : default | hover | magnetic | drag | text | hidden ============================================================ */ /* Hide native cursor everywhere */ *, *::before, *::after { cursor: none !important; } /* ─── Root layer ─────────────────────────────────────────── */ .mx-cursor-dot, .mx-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; will-change: transform; /* GPU layer */ transform: translate(-50%, -50%); border-radius: 50%; transition: opacity 0.3s ease; } /* ─── Dot ────────────────────────────────────────────────── */ .mx-cursor-dot { width: 6px; height: 6px; background: #3ecfcf; mix-blend-mode: normal; transition: opacity 0.25s ease, transform 0.08s ease, width 0.3s cubic-bezier(0.34,1.56,0.64,1), height 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease; } /* ─── Ring ───────────────────────────────────────────────── */ .mx-cursor-ring { width: 36px; height: 36px; border: 1px solid rgba(62, 207, 207, 0.55); background: transparent; /* lerpTransition handled by JS, but CSS handles state morphs */ transition: opacity 0.3s ease, border-color 0.4s ease, width 0.55s cubic-bezier(0.34,1.56,0.64,1), height 0.55s cubic-bezier(0.34,1.56,0.64,1), background 0.4s ease, border-width 0.4s ease; } /* Inner shimmer on ring */ .mx-cursor-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient( circle at 35% 35%, rgba(62, 207, 207, 0.08) 0%, transparent 70% ); opacity: 0; transition: opacity 0.4s ease; } /* ─── Trail dots ─────────────────────────────────────────── */ .mx-trail-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99998; border-radius: 50%; transform: translate(-50%, -50%); background: #3ecfcf; width: 4px; height: 4px; will-change: transform, opacity; transition: opacity 0.1s linear; } /* ─── STATE: hover (links, buttons, cards) ───────────────── */ body[data-cursor-state="hover"] .mx-cursor-dot { width: 8px; height: 8px; background: #3ecfcf; } body[data-cursor-state="hover"] .mx-cursor-ring { width: 52px; height: 52px; border-color: rgba(62, 207, 207, 0.75); border-width: 1.5px; } body[data-cursor-state="hover"] .mx-cursor-ring::after { opacity: 1; } /* ─── STATE: magnetic (CTA buttons) ─────────────────────── */ body[data-cursor-state="magnetic"] .mx-cursor-dot { width: 0; height: 0; opacity: 0; } body[data-cursor-state="magnetic"] .mx-cursor-ring { width: 64px; height: 64px; border-color: rgba(62, 207, 207, 0.9); border-width: 1px; background: rgba(62, 207, 207, 0.06); } body[data-cursor-state="magnetic"] .mx-cursor-ring::after { opacity: 1; } /* ─── STATE: text (paragraphs, readable content) ────────── */ body[data-cursor-state="text"] .mx-cursor-dot { width: 3px; height: 22px; border-radius: 2px; background: rgba(62, 207, 207, 0.9); } body[data-cursor-state="text"] .mx-cursor-ring { opacity: 0; } /* ─── STATE: drag (sliders, scroll areas) ───────────────── */ body[data-cursor-state="drag"] .mx-cursor-dot { width: 10px; height: 10px; background: rgba(62, 207, 207, 0.5); } body[data-cursor-state="drag"] .mx-cursor-ring { width: 44px; height: 44px; border-color: rgba(62, 207, 207, 0.4); border-style: dashed; } /* ─── STATE: hidden (outside window / loader) ───────────── */ body[data-cursor-state="hidden"] .mx-cursor-dot, body[data-cursor-state="hidden"] .mx-cursor-ring { opacity: 0; } /* ─── Interaction labels (e.g. "View", "Explore") ───────── */ .mx-cursor-label { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #3ecfcf; white-space: nowrap; opacity: 0; transition: opacity 0.25s ease; will-change: transform; } body[data-cursor-label] .mx-cursor-label { opacity: 1; } /* ─── Ripple on click ────────────────────────────────────── */ .mx-cursor-ripple { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99997; border-radius: 50%; transform: translate(-50%, -50%) scale(0); border: 1px solid rgba(62, 207, 207, 0.6); width: 10px; height: 10px; animation: mxRippleOut 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes mxRippleOut { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0.8; } 100% { transform: translate(-50%,-50%) scale(8); opacity: 0; } } /* ─── Reduced motion ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .mx-cursor-dot, .mx-cursor-ring, .mx-trail-dot, .mx-cursor-label { transition: none !important; } } /* ─── No touch override — cursor runs on all devices (per project decision: desktop-first site, cursor forced on everywhere) */