/* * cursor.css — Phase 3, custom cursor (Commit 1 + Commit 2). * * Архитектура «outer + inner»: * - .cursor-dot / .cursor-ring — outer = position:fixed pivot 0×0, * JS пишет transform: translate3d(x,y,0). * - .cursor-dot__inner / __inner — visible box (border, размер), * CSS управляет scale на hover/click через * transition. Не конфликтует с rAF из JS. * * Инвариант: outer transform — только translate3d из JS; * inner transform — только translate(-50%,-50%) scale(...) из CSS. * * Состояния (классы на , ставит cursor.js): * .cursor-ready → opacity 0 → 1 (после первого rAF-тика) * .cursor-hover → ring scale 2× (28→56), dot scale 0.66× (визуальное * уменьшение, контраст с расширенным ring), * label opacity 0 → 1 (если есть data-cursor-label) * .cursor-pressed → ring scale 0.8 (за 100ms, click feedback) * .cursor-input-active → display:none на оба (нативный caret в text-input) * * Feature gates: * - @media (pointer: coarse) → display:none (страховка к JS-гарду) * - prefers-reduced-motion: reduce → hover/click без transition; * click pulse полностью отключён. */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; opacity: 0; will-change: transform; /* outer = 0×0 pivot, без размера — он выставлен на inner */ } body.cursor-ready .cursor-dot, body.cursor-ready .cursor-ring { opacity: 1; } /* ========== Inner = visible boxes ========== */ .cursor-dot__inner { position: absolute; top: 0; left: 0; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 200ms var(--ease-brand); } .cursor-ring__inner { position: absolute; top: 0; left: 0; width: 28px; height: 28px; border: 1.5px solid var(--accent-ring); border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%) scale(1); transition: transform 200ms var(--ease-brand); } .cursor-label { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink); mix-blend-mode: difference; opacity: 0; white-space: nowrap; pointer-events: none; transition: opacity 150ms var(--ease-brand); /* Контр-scale: ring при hover увеличен ×2, текст оставляем нормального размера */ transform: scale(0.5); transform-origin: center; } /* ========== Hover state ========== */ body.cursor-hover .cursor-ring__inner { transform: translate(-50%, -50%) scale(2); } body.cursor-hover .cursor-dot__inner { transform: translate(-50%, -50%) scale(0.66); } body.cursor-hover .cursor-label.is-shown { opacity: 1; } /* ========== Click pulse ========== */ body.cursor-pressed .cursor-ring__inner { transform: translate(-50%, -50%) scale(0.8); transition-duration: 100ms; } /* hover + pressed одновременно: ring 2 × 0.8 = 1.6 */ body.cursor-pressed.cursor-hover .cursor-ring__inner { transform: translate(-50%, -50%) scale(1.6); } /* ========== Скрытие в text-input / textarea / contenteditable ========== */ body.cursor-input-active .cursor-dot, body.cursor-input-active .cursor-ring { display: none; } /* ========== Touch / coarse pointer — нативный курсор ========== */ @media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important; } } /* ========== Reduce motion: без transitions, без click-pulse ========== */ @media (prefers-reduced-motion: reduce) { .cursor-dot__inner, .cursor-ring__inner, .cursor-label { transition: none !important; } body.cursor-pressed .cursor-ring__inner, body.cursor-pressed.cursor-hover .cursor-ring__inner { /* Полностью отключаем click-feedback — оставляем только hover-state */ transform: translate(-50%, -50%) scale(1); } body.cursor-pressed.cursor-hover .cursor-ring__inner { transform: translate(-50%, -50%) scale(2); } }