/* ── Custom cursor (Option F): gradient dot + lerped ring ──────────────────── Enabled only on precision-pointer desktops with no reduced-motion. Disabled on touch/coarse devices, ≤1024px, and reduced-motion users. Both layers are position:fixed + transform-only => compositor-friendly, pointer-events:none => never blocks interaction, idle = zero cost. */ #cursor { position: fixed; top: 0; left: 0; z-index: 2147483647; pointer-events: none; display: none; } #cursor .cursor-dot, #cursor .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; will-change: transform; /* JS composes the full transform (translate + center + scale) */ } .cursor-dot { width: 9px; height: 9px; background: var(--brand-gradient); box-shadow: 0 0 8px rgba(255, 195, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); } .cursor-ring { width: 38px; height: 38px; border: 1.5px solid var(--brand-gold); background: transparent; opacity: 0.9; } /* Hover over interactive elements -> ring expands (via transform), tint blue */ .cursor.cursor-is-hover .cursor-ring { border-color: var(--brand-blue); background: rgba(21, 70, 160, 0.12); opacity: 1; } /* Press feedback -> cascade handled by JS composing scale on both layers */ /* Enable + hide the native cursor ONLY when the custom cursor is active. JS toggles .has-custom-cursor on at init (fine pointer, desktop, reduced-motion off). */ html.has-custom-cursor #cursor { display: block; } html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; } /* Reduced motion on precision desktops -> native cursor only */ @media (prefers-reduced-motion: reduce) { #cursor { display: none !important; } body { cursor: auto; } a, button, .btn, select, textarea { cursor: pointer; } } /* Default cursor fallbacks everywhere else */ body { cursor: auto; } a, button, .btn, select, textarea { cursor: pointer; } .work-card, .service-card, .industry-card, .related-card, .feature-card, .delivery-card, .pillar-card, .problem-card, .why-card, .tech-card, .insight-card { cursor: pointer; } [data-fade] { opacity: 0; transform: translateY(30px); } [data-fade="left"] { opacity: 0; transform: translateX(-30px); } [data-fade="right"] { opacity: 0; transform: translateX(30px); } [data-fade="scale"] { opacity: 0; transform: scale(0.95); } /* ─── Global fade rescue — FAQ/CTA/breadcrumb [data-fade] visibility ─── */ [data-fade] { transition: opacity 0.7s ease, transform 0.7s ease; } [data-fade].fade-visible { opacity: 1; transform: translateY(0); } [data-fade="left"].fade-visible, [data-fade="right"].fade-visible, [data-fade="scale"].fade-visible { opacity: 1; transform: translate(0, 0) scale(1); } @media (prefers-reduced-motion: no-preference) { [data-fade]:not(.fade-visible) { animation: globalFadeFallback 0s ease 2s forwards; } @keyframes globalFadeFallback { to { opacity: 1; transform: translate(0, 0) scale(1); } } } @media (prefers-reduced-motion: reduce) { [data-fade] { opacity: 1 !important; transform: none !important; transition: none !important; } } .add-parallax { will-change: transform; } .service-card, .feature-card, .industry-card, .related-card { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .service-card:hover, .feature-card:hover, .industry-card:hover, .related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .btn { position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; inset: 0; background: var(--brand-gradient); opacity: 0; transition: opacity 0.35s; z-index: -1; }