.kanu-map-wrapper {
position: relative;
width: 100%;
height: auto;
}
.kanu-map-container {
position: relative;
width: 100%;
background: center/contain no-repeat #000000;
}
.kanu-marker {
position: absolute;
width: 48px; height: 48px;
cursor: pointer;
transform: translate(-50%, -50%);
z-index: 10;
animation: none;
will-change: transform; backface-visibility: hidden;
transform-style: preserve-3d;
}
.kanu-marker::after {
content: '';
position: absolute;
left: 8px; top: 8px;
width: 32px;
height: 32px;
background: radial-gradient(circle at 50% 50%, #ffcc00 0%, transparent 70%);
border: 3px solid orange;
border-radius: 50%;
box-shadow: 0 0 15px #ffcc00;
animation: none;
pointer-events: none; transform-origin: center center;
will-change: transform;
backface-visibility: hidden;
transform: translateZ(0); }
.kanu-marker:hover::after {
animation: kanuPulse 2.2s infinite ease-in-out;
}
@keyframes kanuPulse {
0% {
transform: scale(0.7) translateZ(0);
opacity: 1;
}
50% {
transform: scale(2.0) translateZ(0);
opacity: 0.4;
}
100% {
transform: scale(0.7) translateZ(0);
opacity: 1;
}
} .kanu-marker:hover {
transform: translate(-50%, -50%) translateZ(0);
}