/* Custom animal cursor + click paw-print trail (desktop pointers only) */ @media (hover: hover) and (pointer: fine) { /* * The cursor image is chosen via the data-cursor attribute on * (set by paw-cursor.js from the saved preference). Each cursor SVG is * pre-slanted 18deg to the left with a white outline + light drop shadow. * Default is the pup-and-kitty "Paw" cursor. */ /* Hotspots measured from images/Cursor/*.png (#00FF00 guide pixels on 35x35) */ :root { --app-cursor: url("images/Cursor/cursor_paw.svg") 14 7, auto; } :root[data-cursor="standard"] { --app-cursor: auto; } :root[data-cursor="paw"] { --app-cursor: url("images/Cursor/cursor_paw.svg") 14 7, auto; } :root[data-cursor="feather"] { --app-cursor: url("images/Cursor/cursor_feather.svg") 12 2, auto; } :root[data-cursor="hoof"] { --app-cursor: url("images/Cursor/cursor_hoof.svg") 14 5, auto; } :root[data-cursor="horseshoe"] { --app-cursor: url("images/Cursor/cursor_horseshoe.svg") 14 4, auto; } :root[data-cursor="bunny"] { --app-cursor: url("images/Cursor/cursor_bunny.svg") 13 2, auto; } body, body * { cursor: var(--app-cursor); } /* Keep a normal text caret in editable fields for usability */ body input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), body textarea { cursor: text; } /* * Prints left behind on click (anchored to the page, not the viewport). * These are elements whose src is the currently chosen cursor SVG, * so the trail always matches the user's cursor icon. The SVGs already * carry the white outline, drop shadow, and 18deg slant. */ .paw-trail { position: absolute; z-index: 9998; pointer-events: none; /* Match the cursor SVG intrinsic size so prints line up with it */ width: 35px; height: 35px; opacity: 1; will-change: opacity; transition: opacity 2s linear; } .paw-trail.paw-fade { opacity: 0; } /* * Feather prints gently fall along the hand-drawn trail from path.png. * The actual descending, zig-zagging path is set per-feather in JS as an * inline `offset-path` (scaled / mirrored / jittered), and the feather is * driven along it by animating `offset-distance`. `offset-rotate: 0deg` * keeps the feather from snapping to the path tangent so we can hold it * horizontal (--tilt) and add a gentle up/down curl (--rock) via transform. * Linear timing keeps the glide continuous and smooth. */ .paw-trail--feather { --tilt: 88deg; --rock: 10deg; offset-rotate: 0deg; /* Top-left follows the path; JS already offsets left/top by the hotspot */ offset-anchor: 0 0; transition: none; /* * Three parallel tracks, all linear so nothing eases to a stop: * - glide: constant-speed travel along the path * - rock: lerp to horizontal, then a continuous sine-like curl * - fade: stay solid, then fade out near the end */ animation: feather-glide var(--fall-duration, 11s) linear forwards, feather-rock var(--fall-duration, 11s) linear forwards, feather-fade var(--fall-duration, 11s) linear forwards; } } /* Constant-speed motion along the whole path (no easing = no pauses) */ @keyframes feather-glide { from { offset-distance: 0%; } to { offset-distance: 100%; } } /* * Start upright, lerp to horizontal, then rock with dense sine-like samples * so the curl never decelerates to a pause at its peaks (linear timing). */ @keyframes feather-rock { 0% { transform: rotate(0deg); } 10% { transform: rotate(var(--tilt)); } 20% { transform: rotate(calc(var(--tilt) + var(--rock) * 0.707)); } 25% { transform: rotate(calc(var(--tilt) + var(--rock))); } 30% { transform: rotate(calc(var(--tilt) + var(--rock) * 0.707)); } 35% { transform: rotate(var(--tilt)); } 40% { transform: rotate(calc(var(--tilt) - var(--rock) * 0.707)); } 45% { transform: rotate(calc(var(--tilt) - var(--rock))); } 50% { transform: rotate(calc(var(--tilt) - var(--rock) * 0.707)); } 55% { transform: rotate(var(--tilt)); } 60% { transform: rotate(calc(var(--tilt) + var(--rock) * 0.707)); } 65% { transform: rotate(calc(var(--tilt) + var(--rock))); } 70% { transform: rotate(calc(var(--tilt) + var(--rock) * 0.707)); } 75% { transform: rotate(var(--tilt)); } 80% { transform: rotate(calc(var(--tilt) - var(--rock) * 0.707)); } 85% { transform: rotate(calc(var(--tilt) - var(--rock))); } 90% { transform: rotate(calc(var(--tilt) - var(--rock) * 0.707)); } 100% { transform: rotate(var(--tilt)); } } @keyframes feather-fade { 0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } /* Cursor picker dropdown on the profile page: keep text black in all themes */ .cursor-picker-item, .cursor-picker-item span, .cursor-picker-item select, .cursor-picker-item select option { color: #000 !important; } /* The cursor picker on the profile page is desktop-only */ @media (hover: none), (pointer: coarse) { .cursor-picker-item { display: none !important; } }