html,
body {
   margin: 0;
   height: 100%;
}
#map {
    width: 100%;
    height: 100%;
}

.vessel-marker-wrapper {
    background: transparent;
    border: 0;
}

.vessel-marker {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transition: transform 250ms ease-out;
}

.vessel-marker--requesting {
    animation: resupply-request-pulse 1.4s ease-in-out infinite;
}

.vessel-marker--responding {
    animation: supply-response-pulse 1.4s ease-in-out infinite;
}

@keyframes resupply-request-pulse {
    0%,
    100% {
        filter:
            drop-shadow(0 0 0 rgba(255, 255, 255, 0))
            drop-shadow(0 0 2px rgba(239, 68, 68, 0.65));
    }
    50% {
        filter:
            drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
            drop-shadow(0 0 9px rgba(239, 68, 68, 1));
    }
}

@keyframes supply-response-pulse {
    0%,
    100% {
        filter:
            drop-shadow(0 0 0 rgba(255, 255, 255, 0))
            drop-shadow(0 0 2px rgba(245, 158, 11, 0.65));
    }
    50% {
        filter:
            drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
            drop-shadow(0 0 9px rgba(245, 158, 11, 1));
    }
}

@media (prefers-reduced-motion: reduce) {
    .vessel-marker--requesting {
        animation: none;
        filter: drop-shadow(0 0 5px rgba(239, 68, 68, 1));
    }

    .vessel-marker--responding {
        animation: none;
        filter: drop-shadow(0 0 5px rgba(245, 158, 11, 1));
    }
}