50 lines
956 B
CSS
50 lines
956 B
CSS
:host {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.background-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.particle-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.custom-cursor {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 26px;
|
|
height: 26px;
|
|
border: 1px solid rgba(147, 197, 253, 0.9);
|
|
border-radius: 50%;
|
|
transform: translate3d(-9999px, -9999px, 0);
|
|
margin-left: -13px;
|
|
margin-top: -13px;
|
|
box-shadow: 0 0 24px rgba(56, 189, 248, 0.28);
|
|
background: radial-gradient(circle, rgba(96, 165, 250, 0.25) 0%, rgba(96, 165, 250, 0) 70%);
|
|
transition: width 130ms ease, height 130ms ease, margin 130ms ease, border-color 130ms ease;
|
|
}
|
|
|
|
.custom-cursor.pointer-down {
|
|
width: 38px;
|
|
height: 38px;
|
|
margin-left: -19px;
|
|
margin-top: -19px;
|
|
border-color: rgba(196, 181, 253, 0.95);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.custom-cursor {
|
|
transition: none;
|
|
}
|
|
}
|
|
|