/**
 * SVG Animations — Animated components for IRVE diagrams
 * Caly-Quiz IRVE — Modules Borne IEC 61851
 *
 * Animation classes:
 *   a) .svg-draw-line        — Stroke-dasharray line drawing
 *   b) .svg-current-flow     — Electrical current flowing through wires
 *   c) .svg-highlight        — Component pulse glow
 *   d) .svg-reveal-1..10     — Sequential reveal with staggered delays
 *   e) .svg-ac-wave          — AC sine wave flowing
 *   f) .svg-dc-steady        — DC steady glow
 *   g) .svg-fault            — Fault spark / red flash
 *   h) .svg-charging         — Battery filling animation
 *   i) .svg-signal-propagate — CP/PP pilot signal propagation
 *
 * Color palette:
 *   #22c55e  active / charging (green)
 *   #3b82f6  communication (blue)
 *   #ef4444  fault (red)
 *   #eab308  warning (yellow)
 */

/* ═══════════════════════════════════════════════════
   a) LINE DRAWING — stroke-dasharray technique
   ═══════════════════════════════════════════════════ */

.svg-draw-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw-line 2s ease-in-out forwards;
}

.svg-draw-line-slow {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw-line 4s ease-in-out forwards;
}

.svg-draw-line-fast {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw-line 1s ease-in-out forwards;
}

@keyframes draw-line {
    to {
        stroke-dashoffset: 0;
    }
}

/* ═══════════════════════════════════════════════════
   b) ELECTRICAL CURRENT FLOW — dashed line animation
   ═══════════════════════════════════════════════════ */

.svg-current-flow {
    stroke-dasharray: 10 5;
    animation: current-flow 1s linear infinite;
}

.svg-current-flow-fast {
    stroke-dasharray: 8 4;
    animation: current-flow 0.5s linear infinite;
}

.svg-current-flow-slow {
    stroke-dasharray: 15 8;
    animation: current-flow 2s linear infinite;
}

/* Reverse direction variant */
.svg-current-flow-reverse {
    stroke-dasharray: 10 5;
    animation: current-flow-reverse 1s linear infinite;
}

@keyframes current-flow {
    to {
        stroke-dashoffset: -30;
    }
}

@keyframes current-flow-reverse {
    to {
        stroke-dashoffset: 30;
    }
}

/* ═══════════════════════════════════════════════════
   c) COMPONENT HIGHLIGHT — pulse glow effect
   ═══════════════════════════════════════════════════ */

.svg-highlight {
    animation: component-glow 2s ease-in-out infinite;
}

.svg-highlight-green {
    animation: component-glow-green 2s ease-in-out infinite;
}

.svg-highlight-blue {
    animation: component-glow-blue 2s ease-in-out infinite;
}

.svg-highlight-red {
    animation: component-glow-red 2s ease-in-out infinite;
}

.svg-highlight-yellow {
    animation: component-glow-yellow 2s ease-in-out infinite;
}

@keyframes component-glow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); opacity: 1; }
    50%      { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7)); opacity: 0.9; }
}

@keyframes component-glow-green {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.3)); }
    50%      { filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.8)); }
}

@keyframes component-glow-blue {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.3)); }
    50%      { filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.8)); }
}

@keyframes component-glow-red {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.3)); }
    50%      { filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.8)); }
}

@keyframes component-glow-yellow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(234, 179, 8, 0.3)); }
    50%      { filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.8)); }
}

/* ═══════════════════════════════════════════════════
   d) SEQUENTIAL REVEAL — parts appear one by one
   ═══════════════════════════════════════════════════ */

.svg-reveal-1,
.svg-reveal-2,
.svg-reveal-3,
.svg-reveal-4,
.svg-reveal-5,
.svg-reveal-6,
.svg-reveal-7,
.svg-reveal-8,
.svg-reveal-9,
.svg-reveal-10 {
    opacity: 0;
    transform: translateY(8px);
    animation: reveal-fade-in 0.6s ease-out forwards;
}

.svg-reveal-1  { animation-delay: 0.2s; }
.svg-reveal-2  { animation-delay: 0.5s; }
.svg-reveal-3  { animation-delay: 0.8s; }
.svg-reveal-4  { animation-delay: 1.1s; }
.svg-reveal-5  { animation-delay: 1.4s; }
.svg-reveal-6  { animation-delay: 1.7s; }
.svg-reveal-7  { animation-delay: 2.0s; }
.svg-reveal-8  { animation-delay: 2.3s; }
.svg-reveal-9  { animation-delay: 2.6s; }
.svg-reveal-10 { animation-delay: 2.9s; }

@keyframes reveal-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Paused state — waits for .svg-anim-active to start */
.svg-reveal-paused .svg-reveal-1,
.svg-reveal-paused .svg-reveal-2,
.svg-reveal-paused .svg-reveal-3,
.svg-reveal-paused .svg-reveal-4,
.svg-reveal-paused .svg-reveal-5,
.svg-reveal-paused .svg-reveal-6,
.svg-reveal-paused .svg-reveal-7,
.svg-reveal-paused .svg-reveal-8,
.svg-reveal-paused .svg-reveal-9,
.svg-reveal-paused .svg-reveal-10 {
    animation-play-state: paused;
}

.svg-reveal-paused.svg-anim-active .svg-reveal-1,
.svg-reveal-paused.svg-anim-active .svg-reveal-2,
.svg-reveal-paused.svg-anim-active .svg-reveal-3,
.svg-reveal-paused.svg-anim-active .svg-reveal-4,
.svg-reveal-paused.svg-anim-active .svg-reveal-5,
.svg-reveal-paused.svg-anim-active .svg-reveal-6,
.svg-reveal-paused.svg-anim-active .svg-reveal-7,
.svg-reveal-paused.svg-anim-active .svg-reveal-8,
.svg-reveal-paused.svg-anim-active .svg-reveal-9,
.svg-reveal-paused.svg-anim-active .svg-reveal-10 {
    animation-play-state: running;
}

/* ═══════════════════════════════════════════════════
   e) AC WAVEFORM — sine wave flowing animation
   ═══════════════════════════════════════════════════ */

.svg-ac-wave path {
    stroke-dasharray: 20 10;
    animation: wave-flow 2s linear infinite;
}

.svg-ac-wave-fast path {
    stroke-dasharray: 15 8;
    animation: wave-flow 1s linear infinite;
}

@keyframes wave-flow {
    to {
        stroke-dashoffset: -60;
    }
}

/* ═══════════════════════════════════════════════════
   f) DC STEADY — steady glow pulse
   ═══════════════════════════════════════════════════ */

.svg-dc-steady {
    animation: dc-pulse 3s ease-in-out infinite;
}

.svg-dc-steady-fast {
    animation: dc-pulse 1.5s ease-in-out infinite;
}

@keyframes dc-pulse {
    0%, 100% {
        opacity: 0.7;
        filter: drop-shadow(0 0 2px currentColor);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 8px currentColor);
    }
}

/* ═══════════════════════════════════════════════════
   g) FAULT — red sparks / flash animation
   ═══════════════════════════════════════════════════ */

.svg-fault {
    animation: fault-flash 0.5s ease-in-out infinite;
}

.svg-fault-slow {
    animation: fault-flash 1s ease-in-out infinite;
}

@keyframes fault-flash {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.5));
    }
    25% {
        opacity: 0.3;
        filter: drop-shadow(0 0 15px rgba(239, 68, 68, 1));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.8));
    }
    75% {
        opacity: 0.5;
        filter: drop-shadow(0 0 20px rgba(239, 68, 68, 1));
    }
}

/* Spark particles (for SVG circle/line elements) */
.svg-fault-spark {
    animation: spark-fly 0.8s ease-out infinite;
    transform-origin: center center;
}

@keyframes spark-fly {
    0%   { opacity: 1; transform: scale(1) translate(0, 0); }
    50%  { opacity: 0.8; transform: scale(1.5) translate(3px, -5px); }
    100% { opacity: 0; transform: scale(0.3) translate(8px, -12px); }
}

/* ═══════════════════════════════════════════════════
   h) CHARGING — battery fill animation
   ═══════════════════════════════════════════════════ */

.svg-charging rect.fill {
    animation: battery-fill 3s ease-in-out forwards;
}

.svg-charging rect.fill-slow {
    animation: battery-fill 6s ease-in-out forwards;
}

@keyframes battery-fill {
    from {
        height: 0;
        y: 100%;
    }
    to {
        height: 100%;
        y: 0%;
    }
}

/* Battery percentage counter */
.svg-charging-percent {
    animation: charge-count 3s ease-in-out forwards;
}

/* Charging indicator blink */
.svg-charging-indicator {
    animation: charge-blink 1s ease-in-out infinite;
}

@keyframes charge-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* ═══════════════════════════════════════════════════
   i) SIGNAL PROPAGATION — CP/PP pilot signal
   ═══════════════════════════════════════════════════ */

.svg-signal-propagate {
    stroke-dasharray: 6 12;
    animation: signal-move 1.5s linear infinite;
}

.svg-signal-propagate-fast {
    stroke-dasharray: 4 8;
    animation: signal-move 0.8s linear infinite;
}

.svg-signal-propagate-reverse {
    stroke-dasharray: 6 12;
    animation: signal-move-reverse 1.5s linear infinite;
}

@keyframes signal-move {
    to {
        stroke-dashoffset: -36;
    }
}

@keyframes signal-move-reverse {
    to {
        stroke-dashoffset: 36;
    }
}

/* ═══════════════════════════════════════════════════
   UTILITY — global paused state / viewport trigger
   ═══════════════════════════════════════════════════ */

/* Pause all animations until SVG enters viewport */
.svg-anim-paused * {
    animation-play-state: paused !important;
}

.svg-anim-paused.svg-anim-active * {
    animation-play-state: running !important;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .svg-draw-line,
    .svg-draw-line-slow,
    .svg-draw-line-fast,
    .svg-current-flow,
    .svg-current-flow-fast,
    .svg-current-flow-slow,
    .svg-current-flow-reverse,
    .svg-highlight,
    .svg-highlight-green,
    .svg-highlight-blue,
    .svg-highlight-red,
    .svg-highlight-yellow,
    .svg-reveal-1, .svg-reveal-2, .svg-reveal-3,
    .svg-reveal-4, .svg-reveal-5, .svg-reveal-6,
    .svg-reveal-7, .svg-reveal-8, .svg-reveal-9,
    .svg-reveal-10,
    .svg-ac-wave path,
    .svg-ac-wave-fast path,
    .svg-dc-steady,
    .svg-dc-steady-fast,
    .svg-fault,
    .svg-fault-slow,
    .svg-fault-spark,
    .svg-charging rect.fill,
    .svg-charging rect.fill-slow,
    .svg-charging-indicator,
    .svg-signal-propagate,
    .svg-signal-propagate-fast,
    .svg-signal-propagate-reverse {
        animation: none !important;
        opacity: 1 !important;
        stroke-dashoffset: 0 !important;
        transform: none !important;
    }
}