/**
 * SMG Centerplan Wayfinding Styles
 * 
 * Animierte Routen und Wayfinding-Visualisierung
 * 
 * @version 1.0.0
 */

/* ============================================
   Wayfinding Route Animation
   ============================================ */

/* Laufende Dash-Animation (smooth & subtil) */
@keyframes wayfinding-dash {
    to {
        stroke-dashoffset: -20; /* Negative = vorwärts laufen */
    }
}

/* Subtile Pulsing Animation */
@keyframes wayfinding-pulse {
    0%, 100% {
        opacity: 1;
        r: 8;
    }
    50% {
        opacity: 0.8;
        r: 10;
    }
}

/* Fade-In beim Zeichnen */
@keyframes wayfinding-fade-in {
    from {
        opacity: 0;
        stroke-width: 0;
    }
    to {
        opacity: 1;
        stroke-width: 6;
    }
}

/* ============================================
   Wayfinding Elements
   ============================================ */

/* Aktive Route-Linien */
.wayfinding-active.wayfinding-path {
    stroke: #FF6B35 !important;
    stroke-width: 6 !important;
    stroke-linecap: round !important;
    stroke-dasharray: 12 8;
    opacity: 1 !important;
    animation: 
        wayfinding-dash 2s linear infinite,
        wayfinding-fade-in 0.5s ease-out;
    transition: stroke-width 0.2s ease;
}

/* Connector-Linien (Eingang/Shop) */
.wayfinding-connector {
    stroke: #FF6B35 !important;
    stroke-width: 6 !important;
    stroke-linecap: round !important;
    stroke-dasharray: 12 8;
    opacity: 1 !important;
    animation: 
        wayfinding-dash 2s linear infinite,
        wayfinding-fade-in 0.5s ease-out;
    pointer-events: none;
}

/* Start-Waypoint (Eingang) */
.wayfinding-active.wayfinding-start {
    fill: #4CAF50 !important;
    stroke: #2E7D32 !important;
    stroke-width: 3 !important;
    opacity: 1 !important;
    animation: wayfinding-pulse 2s ease-in-out infinite;
}

/* End-Waypoint (Ziel) */
.wayfinding-active.wayfinding-end {
    fill: #FF6B35 !important;
    stroke: #E65100 !important;
    stroke-width: 3 !important;
    opacity: 1 !important;
    animation: wayfinding-pulse 2s ease-in-out infinite;
}

/* Zwischen-Waypoints */
.wayfinding-active.wayfinding-waypoint {
    fill: #FFC107 !important;
    stroke: #F57C00 !important;
    stroke-width: 2 !important;
    opacity: 1 !important;
}

/* Level-Change Icons */
.wayfinding-icon {
    fill: #2196F3;
    font-size: 24px;
    animation: wayfinding-pulse 2s ease-in-out infinite;
}

/* ============================================
   Hover Effects
   ============================================ */

.wayfinding-active.wayfinding-path:hover {
    stroke-width: 8 !important;
    opacity: 1 !important;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    .wayfinding-active.wayfinding-path,
    .wayfinding-connector {
        stroke-width: 4 !important;
    }
    
    .wayfinding-active.wayfinding-start,
    .wayfinding-active.wayfinding-end {
        stroke-width: 2 !important;
    }
}