/**
 * CockpitOS Light Theme - Centerplan Routing Styles
 * 
 * Verantwortlichkeit: Route Visualization Styling
 * Active routes, animations
 * 
 * @package CockpitOS_Light_Theme
 * @version 1.0.0
 */

/* ========================================
   Route Styles
   ======================================== */

.centerplan-route {
    stroke: var(--color-info, #3b82f6);
    stroke-width: 3;
    fill: none;
    opacity: 0.4;
    pointer-events: none;
    transition: all var(--transition-base, 300ms ease-in-out);
}

.centerplan-route.is-active {
    opacity: 1;
    stroke-width: 4;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
    animation: routePulse 2s ease-in-out infinite;
}

.centerplan-route-auto {
    stroke-dasharray: 8, 4;
    stroke-linecap: round;
}

/* Route Start/End Points */
.centerplan-item.route-start {
    fill: var(--color-success, #10b981);
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.6));
    stroke-width: 3;
    animation: routeStartPulse 1.5s ease-in-out infinite;
}

.centerplan-item.route-end {
    fill: var(--color-info, #3b82f6);
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6));
    stroke-width: 3;
    animation: routeEndPulse 1.5s ease-in-out infinite;
}

/* ========================================
   Animations
   ======================================== */

@keyframes routePulse {
    0%, 100% {
        opacity: 1;
        stroke-width: 4;
    }
    50% {
        opacity: 0.7;
        stroke-width: 3.5;
    }
}

@keyframes routeStartPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.6));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.8));
    }
}

@keyframes routeEndPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8));
    }
}