/**
 * Category Visual Effects
 * Effets visuels pour chaque catégorie de zones
 */

/* ==================== ILLEGAL ZONES (Rouge + Pulse Shadow) ==================== */
.category-illegal polygon,
.category-illegal path {
    animation: pulse-shadow-red 2s ease-in-out infinite;
}

@keyframes pulse-shadow-red {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(231, 76, 60, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(231, 76, 60, 1)) drop-shadow(0 0 25px rgba(231, 76, 60, 0.8));
    }
}

/* ==================== BUSINESS ZONES (Vert + Pulse Gentle) ==================== */
.category-business polygon,
.category-business path {
    animation: pulse-gentle 3s ease-in-out infinite;
}

@keyframes pulse-gentle {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(46, 204, 113, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(46, 204, 113, 0.8));
    }
}

/* ==================== GOVERNMENT ZONES (Jaune + Golden Glow) ==================== */
.category-government polygon,
.category-government path {
    animation: glow-gold 2.5s ease-in-out infinite;
}

@keyframes glow-gold {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.5)) brightness(1);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(241, 196, 15, 1)) drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)) brightness(1.2);
    }
}

/* ==================== POLICE ZONES (Bleu foncé + Stripes) ==================== */
.category-police polygon,
.category-police path {
    fill-opacity: 0.4 !important;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.1) 10px,
        rgba(255, 255, 255, 0.1) 20px
    );
    animation: stripe-blue-white 1s linear infinite;
}

@keyframes stripe-blue-white {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 20px 20px;
    }
}

/* Alternative pour police avec filter */
.category-police[data-use-filter="true"] polygon,
.category-police[data-use-filter="true"] path {
    animation: stripe-pulse 2s ease-in-out infinite;
}

@keyframes stripe-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(44, 62, 80, 0.6));
        opacity: 0.85;
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(44, 62, 80, 1));
        opacity: 1;
    }
}

/* ==================== FEDERAL ZONES (Noir + Grid Pattern) ==================== */
.category-federal polygon,
.category-federal path {
    animation: grid-pattern 4s linear infinite;
}

@keyframes grid-pattern {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(42, 42, 42, 0.8)) contrast(1.1);
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(42, 42, 42, 1)) contrast(1.3);
    }
}

/* ==================== MEDICAL ZONES (Rose + Pulse Pink) ==================== */
.category-medical polygon,
.category-medical path {
    animation: pulse-pink-white 1.5s ease-in-out infinite;
}

@keyframes pulse-pink-white {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(233, 30, 99, 0.6));
    }
    25% {
        filter: drop-shadow(0 0 15px rgba(233, 30, 99, 1));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)) brightness(1.2);
    }
    75% {
        filter: drop-shadow(0 0 15px rgba(233, 30, 99, 1));
    }
}

/* ==================== PUBLIC ZONES (Bleu clair + None) ==================== */
.category-public polygon,
.category-public path {
    /* Pas d'effet spécial pour les zones publiques */
    opacity: 0.6;
}

/* ==================== SECURED ZONES (Orange + Pulse) ==================== */
.category-secured polygon,
.category-secured path {
    animation: pulse-orange 2s ease-in-out infinite;
}

@keyframes pulse-orange {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(230, 126, 34, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(230, 126, 34, 1)) drop-shadow(0 0 25px rgba(255, 140, 0, 0.8));
    }
}

/* ==================== RESTRICTED ZONES (Rouge foncé + Blink Intense) ==================== */
.category-restricted polygon,
.category-restricted path {
    animation: blink-red-intense 0.8s ease-in-out infinite;
}

@keyframes blink-red-intense {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(192, 57, 43, 1)) brightness(1);
        opacity: 1;
    }
    25% {
        filter: drop-shadow(0 0 20px rgba(192, 57, 43, 1)) drop-shadow(0 0 30px rgba(255, 0, 0, 1)) brightness(1.5);
        opacity: 0.8;
    }
    50% {
        filter: drop-shadow(0 0 5px rgba(192, 57, 43, 0.8)) brightness(0.9);
        opacity: 0.6;
    }
    75% {
        filter: drop-shadow(0 0 20px rgba(192, 57, 43, 1)) drop-shadow(0 0 30px rgba(255, 0, 0, 1)) brightness(1.5);
        opacity: 0.8;
    }
}

/* ==================== REFERENCE ZONE (Invisible) ==================== */
.reference-zone polygon,
.reference-zone path {
    opacity: 0 !important;
    pointer-events: none;
}

/* ==================== HOVER EFFECTS ==================== */
/* Désactiver les animations au survol pour meilleure lisibilité */
.category-illegal:hover polygon,
.category-business:hover polygon,
.category-government:hover polygon,
.category-police:hover polygon,
.category-federal:hover polygon,
.category-medical:hover polygon,
.category-secured:hover polygon,
.category-restricted:hover polygon,
.category-illegal:hover path,
.category-business:hover path,
.category-government:hover path,
.category-police:hover path,
.category-federal:hover path,
.category-medical:hover path,
.category-secured:hover path,
.category-restricted:hover path {
    animation-play-state: paused;
    filter: brightness(1.2) !important;
}

/* ==================== CATEGORY BADGES (pour les labels) ==================== */
.category-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 8px;
}

.category-badge.illegal { background: #e74c3c; color: white; }
.category-badge.business { background: #2ecc71; color: white; }
.category-badge.government { background: #f1c40f; color: #333; }
.category-badge.police { background: #2c3e50; color: white; }
.category-badge.federal { background: #2a2a2a; color: white; }
.category-badge.medical { background: #e91e63; color: white; }
.category-badge.public { background: #3498db; color: white; }
.category-badge.secured { background: #e67e22; color: white; }
.category-badge.restricted { background: #c0392b; color: white; }

/* ==================== PERFORMANCE OPTIMIZATION ==================== */
/* Utiliser will-change pour optimiser les performances des animations */
.category-illegal polygon, .category-illegal path,
.category-business polygon, .category-business path,
.category-government polygon, .category-government path,
.category-police polygon, .category-police path,
.category-federal polygon, .category-federal path,
.category-medical polygon, .category-medical path,
.category-secured polygon, .category-secured path,
.category-restricted polygon, .category-restricted path {
    will-change: filter, opacity;
}

/* Réduire les animations sur les appareils avec motion réduite */
@media (prefers-reduced-motion: reduce) {
    .category-illegal polygon, .category-illegal path,
    .category-business polygon, .category-business path,
    .category-government polygon, .category-government path,
    .category-police polygon, .category-police path,
    .category-federal polygon, .category-federal path,
    .category-medical polygon, .category-medical path,
    .category-secured polygon, .category-secured path,
    .category-restricted polygon, .category-restricted path {
        animation: none !important;
    }
}