Skip to main content
}
}
/* Ojal que reemplaza al cursor */
#hx-eyelet-cursor {
position: fixed;
left: 0;
top: 0;
width: 42px;
height: 42px;
z-index: 2147483647;
pointer-events: none;
background-image: var(--hx-eyelet);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transform: translate(-50%, -50%);
transition:
width 160ms ease,
height 160ms ease,
filter 160ms ease;
filter:
drop-shadow(0 3px 5px rgba(0, 0, 0, 0.42))
drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
}
/* Al colocarse sobre algo seleccionable */
#hx-eyelet-cursor.is-link {
width: 54px;
height: 54px;
filter:
drop-shadow(0 4px 7px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 9px #ff6159);
}
/* Al oprimir */
#hx-eyelet-cursor.is-clicking {
width: 31px;
height: 31px;
}
/* Capa universal de efectos */
#hx-global-effects {
position: fixed;
inset: 0;
z-index: 2147483646;
pointer-events: none;
overflow: hidden;
}
/* Ojales de la explosión */
.hx-burst-eyelet {
position: fixed;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
pointer-events: none;
background-image: var(--hx-eyelet);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transform: translate(-50%, -50%) scale(0.35);
filter:
drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6))
drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
animation: hxEyeletExplosion 680ms
cubic-bezier(0.13, 0.82, 0.2, 1) forwards;
}
/* Chispas coral para que la explosión se note */
.hx-coral-spark {
position: fixed;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
border-radius: 50%;
pointer-events: none;
background: #ff6159;
box-shadow:
0 0 8px #ff6159,
0 0 15px rgba(255, 97, 89, 0.8);
transform: translate(-50%, -50%) scale(0.2);
animation: hxSparkExplosion 590ms ease-out forwards;
}
/* Destello contenido dentro del header o menú */
.hx-area-flash {
position: fixed;
pointer-events: none;
border: 1px solid rgba(255, 255, 255, 0.75);
box-shadow:
inset 0 0 25px rgba(255, 97, 89, 0.8),
inset 0 0 50px rgba(255, 255, 255, 0.25);
animation: hxAreaFlash 660ms ease-out forwards;
}
/* Palabra del enlace seleccionado */
.hx-click-word {
position: fixed;
left: var(--x);
top: var(--y);
color: #ff6159;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
transform: translate(-50%, -50%);
animation: hxWordReveal 700ms ease-out forwards;
}
/* Rastro sutil únicamente dentro del hero */
.hx-hero-trail {
position: fixed;
width: 15px;
height: 15px;
pointer-events: none;
background-image: var(--hx-eyelet);
background-size: contain;
background-repeat: no-repeat;
transform: translate(-50%, -50%);
animation: hxTrailFade 650ms ease-out forwards;
}
@keyframes hxEyeletExplosion {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
}
72% {
opacity: 1;
}
100% {
opacity: 0;
transform:
translate(
calc(-50% + var(--move-x)),
calc(-50% + var(--move-y))
)
scale(1.15)
rotate(var(--rotation));
}
}
@keyframes hxSparkExplosion {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.2);
}
100% {
opacity: 0;
transform:
translate(
calc(-50% + var(--move-x)),
calc(-50% + var(--move-y))
)
scale(1.7);
}
}
@keyframes hxAreaFlash {
0% {
opacity: 0;
background: rgba(255, 97, 89, 0);
}
25% {
opacity: 1;
background: rgba(255, 97, 89, 0.17);
}
100% {
opacity: 0;
background: rgba(255, 97, 89, 0);
}
}
@keyframes hxWordReveal {
0% {
opacity: 0;
transform: translate(-50%, -30%) scale(0.8);
}
30% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-50%, -135%) scale(1.08);
}
}
@keyframes hxTrailFade {
0% {
opacity: 0.75;
transform: translate(-50%, -50%) scale(0.75);
}
100% {
opacity: 0;
transform: translate(-50%, -75%) scale(0.15) rotate(130deg);
}
}
@media (hover: none), (pointer: coarse) {
#hx-eyelet-cursor {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.hx-burst-eyelet,
.hx-coral-spark,
.hx-area-flash,
.hx-click-word,
.hx-hero-trail {
animation-duration: 250ms !important;
}
}
