/* ===================================================================== cursor-mascot.css — shared custom cursor styles. Used on every page. To add the cursor effect to a NEW page, just add this line inside that page's : ...and load cursor-mascot.js before (see that file's header comment). No copying CSS by hand — one shared file, every page stays in sync automatically. ===================================================================== */ body.custom-cursor-active, body.custom-cursor-active a, body.custom-cursor-active button{ cursor:none !important; } #cursor-mascot{ position:fixed; top:0; left:0; width:38px; height:38px; pointer-events:none; z-index:9999; opacity:0; transition:opacity .2s ease; will-change:transform; } #cursor-mascot.active{opacity:1;} #cursor-mascot svg{width:100%; height:100%; display:block;} #cursor-mascot .bubble{ position:absolute; bottom:calc(100% + 8px); left:50%; background:var(--primary); color:var(--paper); font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.03em; padding:5px 11px; border-radius:999px; white-space:nowrap; transform:translateX(-50%) scale(0); transform-origin:bottom center; transition:transform .3s cubic-bezier(.34,1.7,.64,1); } #cursor-mascot .bubble::after{ content:''; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); border-width:5px 5px 0; border-style:solid; border-color:var(--primary) transparent transparent; } #cursor-mascot.picking .bubble{transform:translateX(-50%) scale(1);} #cursor-mascot .face-idle{ opacity:1; transition:opacity .12s ease; } #cursor-mascot .face-surprised{ opacity:0; transition:opacity .12s ease; } #cursor-mascot.moving .face-idle{ opacity:0; } #cursor-mascot.moving .face-surprised{ opacity:1; } #cursor-mascot .face-idle .c-eye{ animation:cursor-blink 4.2s ease-in-out infinite; transform-origin:center; } @keyframes cursor-blink{ 0%,92%,100%{ transform:scaleY(1); } 96%{ transform:scaleY(0.1); } } #cursor-tip{ position:fixed; top:0; left:0; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--primary); border:2px solid var(--paper); box-shadow:0 0 0 1px var(--primary); pointer-events:none; z-index:10001; opacity:0; transition:opacity .2s ease, transform .15s cubic-bezier(.34,1.56,.64,1); } #cursor-tip.active{opacity:1;} #cursor-tip.picking{ background:var(--accent); animation:tip-pulse-ring 0.7s ease-out infinite; } @keyframes tip-pulse-ring{ 0%{ box-shadow:0 0 0 1px var(--primary), 0 0 0 0 rgba(222,138,61,0.65); } 100%{ box-shadow:0 0 0 1px var(--primary), 0 0 0 16px rgba(222,138,61,0); } }