/* * C/MORAN Heart Cursor 1.6.1 * Autor: Diego Gacitúa * Escritorio: cursor + estela original. * Móvil: Scroll Hearts durante scroll e inercia. */ /* ponytail: 'cursor' es una propiedad heredada, así que basta con marcar el * elemento con imagen. La versión anterior también ponía la clase * .cm-heart-cursor-active en con un selector universal, y eso * invalidaba el estilo del documento entero cada vez que el ratón entraba o * salía de cualquier imagen. */ .cm-heart-image-hover, .cm-heart-image-hover * { cursor: none !important; } .cm-heart-cursor, .cm-heart-trail, .cm-heart-touch-main, .cm-heart-touch-burst, .cm-heart-touch-scroll { position: fixed !important; left: 0; top: 0; z-index: 2147483646 !important; display: block; pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; /* El resplandor viene horneado dentro del SVG. Antes eran dos * filter: drop-shadow() apilados, recalculados por partícula y por frame. */ background-image: url("../img/cursor-heart.svg") !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; transform-origin: center center !important; /* Sin will-change: element.animate() ya promueve la capa mientras dura la * animación. Declararlo aquí forzaba una capa de composición permanente * por cada partícula viva. */ } /* ponytail: las cajas van a 1.35x porque el SVG reserva ese margen para el * glow. El corazón visible mide exactamente el tamaño configurado. */ .cm-heart-cursor { width: calc(var(--cm-heart-cursor-size, 32px) * 1.35) !important; height: calc(var(--cm-heart-cursor-size, 32px) * 1.35) !important; opacity: 0; /* -66.3% equivale al -72% anterior una vez descontado el margen del SVG. */ transform: translate3d(-50%, -66.3%, 0); transition: opacity 80ms linear; } .cm-heart-cursor.is-visible { opacity: 1; } .cm-heart-trail { width: calc(var(--cm-heart-size, 12px) * 1.35) !important; height: calc(var(--cm-heart-size, 12px) * 1.35) !important; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.8); transition-property: transform, opacity; transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); } .cm-heart-touch-main { width: calc(var(--cm-heart-touch-size, 36px) * 1.35) !important; height: calc(var(--cm-heart-touch-size, 36px) * 1.35) !important; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.45); } .cm-heart-touch-burst { width: calc(var(--cm-heart-touch-particle-size, 16px) * 1.35) !important; height: calc(var(--cm-heart-touch-particle-size, 16px) * 1.35) !important; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.3); } .cm-heart-touch-scroll { width: calc(var(--cm-heart-touch-scroll-size, 18px) * 1.35) !important; height: calc(var(--cm-heart-touch-scroll-size, 18px) * 1.35) !important; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.34); } /* El cursor de escritorio nunca debe mostrarse en pantallas táctiles. */ @media (hover: none), (pointer: coarse) { .cm-heart-cursor, .cm-heart-trail { display: none !important; } .cm-heart-image-hover, .cm-heart-image-hover * { cursor: auto !important; } } /* Cinturón de seguridad: en un desktop real se ocultan los efectos táctiles. * La clase cm-heart-mobile-active prevalece en teléfonos cuyos media queries * puedan reportar un puntero fino de forma ambigua. */ @media (hover: hover) and (pointer: fine) { html:not(.cm-heart-mobile-active) .cm-heart-touch-main, html:not(.cm-heart-mobile-active) .cm-heart-touch-burst, html:not(.cm-heart-mobile-active) .cm-heart-touch-scroll { display: none !important; } }