/* Custom Icons & Animations for Disaster Map */

/* Icon container */
.custom-div-icon {
    background: transparent;
    border: none;
}
.icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 2;
}
.icon-wrapper svg {
    width: 20px;
    height: 20px;
}

/* Animations based on disaster type (Polygons & Markers) */

/* Banjir (Flood) - Blue wave/pulse */
.anim-Banjir {
    animation: pulse-banjir 1s infinite alternate;
}
@keyframes pulse-banjir {
    0% { filter: drop-shadow(0 0 5px rgba(59, 130, 246, 1)); transform: scale(0.9); }
    100% { filter: drop-shadow(0 0 20px rgba(59, 130, 246, 1)); transform: scale(1.1); }
}
.path-Banjir {
    animation: poly-banjir 1s infinite alternate;
}
@keyframes poly-banjir {
    0% { fill-opacity: 0.3; stroke: #fff; stroke-width: 2px; }
    100% { fill-opacity: 0.9; stroke: #3b82f6; stroke-width: 5px; }
}

/* Erupsi - Red heavy pulse */
.anim-Erupsi {
    animation: pulse-erupsi 0.8s infinite alternate;
}
@keyframes pulse-erupsi {
    0% { filter: drop-shadow(0 0 5px rgba(239, 68, 68, 1)); transform: scale(0.9); }
    100% { filter: drop-shadow(0 0 25px rgba(239, 68, 68, 1)); transform: scale(1.2); }
}
.path-Erupsi {
    animation: poly-erupsi 0.8s infinite alternate;
}
@keyframes poly-erupsi {
    0% { fill-opacity: 0.4; stroke: #fff; stroke-width: 2px; }
    100% { fill-opacity: 1; stroke: #ef4444; stroke-width: 5px; }
}

/* Longsor - Brown shake */
.anim-Longsor {
    animation: shake-longsor 0.5s infinite;
}
@keyframes shake-longsor {
    0%, 100% { transform: translateX(0) scale(1); filter: drop-shadow(0 0 5px rgba(120, 53, 15, 0.8)); }
    25% { transform: translateX(-4px) rotate(-5deg) scale(1.1); }
    75% { transform: translateX(4px) rotate(5deg) scale(1.1); }
}
.path-Longsor {
    animation: poly-longsor 0.5s infinite;
}
@keyframes poly-longsor {
    0%, 100% { stroke-dashoffset: 0; fill-opacity: 0.6; }
    50% { stroke-dashoffset: 20; stroke-dasharray: 10, 10; fill-opacity: 0.8; stroke: #fff; stroke-width: 4px; }
}

/* Angin Puting Beliung - Spin */
.anim-Angin {
    animation: spin-angin 1s linear infinite;
}
@keyframes spin-angin {
    from { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); }
    50% { transform: rotate(180deg) scale(1.2); filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)); }
    to { transform: rotate(360deg) scale(1); filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); }
}
.path-Angin {
    animation: poly-angin 1s linear infinite;
}
@keyframes poly-angin {
    0% { stroke-dashoffset: 0; stroke-dasharray: 5, 15; stroke-width: 2px; }
    100% { stroke-dashoffset: -40; stroke-dasharray: 5, 15; stroke-width: 4px; stroke: #fff; }
}

/* Kekeringan - Yellow slow pulse */
.anim-Kekeringan {
    animation: pulse-kering 1.5s infinite alternate;
}
@keyframes pulse-kering {
    0% { filter: drop-shadow(0 0 5px rgba(245, 158, 11, 1)); transform: scale(0.9); }
    100% { filter: drop-shadow(0 0 25px rgba(245, 158, 11, 1)); transform: scale(1.15); }
}
.path-Kekeringan {
    animation: poly-kering 1.5s infinite alternate;
}
@keyframes poly-kering {
    0% { fill-opacity: 0.3; stroke: #fff; }
    100% { fill-opacity: 0.9; stroke: #f59e0b; stroke-width: 4px; }
}

/* Default / Lainnya */
.anim-Lainnya {
    animation: pulse-lainnya 1s infinite alternate;
}
@keyframes pulse-lainnya {
    0% { filter: drop-shadow(0 0 5px rgba(107, 114, 128, 1)); transform: scale(0.9); }
    100% { filter: drop-shadow(0 0 20px rgba(107, 114, 128, 1)); transform: scale(1.1); }
}
.path-Lainnya {
    animation: poly-lainnya 1s infinite alternate;
}
@keyframes poly-lainnya {
    0% { fill-opacity: 0.4; }
    100% { fill-opacity: 0.8; stroke-width: 4px; }
}