/* -------------------------- */
/*      Kajotte Studio        */
/* -------------------------- */
/* Understanding Light SVG (GitHub Gallery) */
.svg-wave-container {
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
    border-radius: 6px;
    overflow: hidden;
}

.wave-svg {
    width: 100%;
    height: auto;
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.wave-svg .svg-bg { fill: #111111; }
.wave-svg .svg-grid-line { fill: none; stroke: #222222; stroke-width: 1; }
.wave-svg .svg-axis { stroke: #333333; stroke-width: 1.5; stroke-dasharray: 4,4; }
.wave-svg .svg-guide-line { stroke: #333333; stroke-width: 1; stroke-dasharray: 2,2; }

.wave-svg .svg-wave-path { fill: none; stroke: #4da6ff; stroke-width: 3; }
.wave-svg .svg-metric-line { stroke: #4da6ff; stroke-width: 1.5; }
.wave-svg .svg-arrow-head { fill: #4da6ff; }

.wave-svg .svg-label { font-size: 13px; font-weight: 500; }
.wave-svg .svg-label-primary { fill: #4da6ff; font-weight: 600; }
.wave-svg .svg-label-muted { fill: #888888; }

.wave-svg .svg-point-peak { fill: #ffffff; }
.wave-svg .svg-point-node { fill: #4da6ff; }

.light-theme .wave-svg .svg-bg { fill: #ffffff; }
.light-theme .wave-svg .svg-grid-line { stroke: #f0f0f0; }
.light-theme .wave-svg .svg-axis { stroke: #cccccc; }
.light-theme .wave-svg .svg-guide-line { stroke: #dddddd; }

.light-theme .wave-svg .svg-wave-path { stroke: #111111; }
.light-theme .wave-svg .svg-metric-line { stroke: #111111; }
.light-theme .wave-svg .svg-arrow-head { fill: #111111; }

.light-theme .wave-svg .svg-label-primary { fill: #111111; }
.light-theme .wave-svg .svg-label-muted { fill: #555555; }

.light-theme .wave-svg .svg-point-peak { fill: #111111; }
.light-theme .wave-svg .svg-point-node { fill: #111111; }

/* --- for SVG Wave --- */

@keyframes waveOscillate {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.85); 
    }
}

@keyframes peakOscillate {
    0%, 100% {
        transform: translateY(0px);
        opacity: 0.9;
    }
    50% {
        transform: translateY(4px); 
        opacity: 0.6;
    }
}

@keyframes troughOscillate {
    0%, 100% {
        transform: translateY(0px);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-4px); 
        opacity: 0.6;
    }
}

.wave-svg .svg-wave-path {
    transform-origin: 400px 150px; 
    animation: waveOscillate 3s ease-in-out infinite;
    stroke-dasharray: none; 
}

.wave-svg circle.svg-point-peak:nth-of-type(1) {
    animation: peakOscillate 3s ease-in-out infinite;
}

.wave-svg circle.svg-point-peak:nth-of-type(2) {
    animation: troughOscillate 3s ease-in-out infinite;
}

.wave-svg .svg-point-node {
    opacity: 0.8;
}