/* EKG Wave Animation for REDLINE INDEX Navigation Tab */

/* Add EKG wave to the REDLINE INDEX tab when active */
nav ul li a.redline-index-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* EKG Wave Container */
.ekg-wave {
    display: inline-block;
    width: 40px;
    height: 20px;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}

/* EKG Wave SVG Path */
.ekg-wave svg {
    width: 100%;
    height: 100%;
}

.ekg-wave path {
    stroke: #8b0000;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Animate the wave when tab is active */
nav ul li a.redline-index-tab.active .ekg-wave path {
    animation: ekg-pulse 2s ease-in-out infinite;
}

/* EKG pulse animation */
@keyframes ekg-pulse {
    0% {
        stroke-dasharray: 0 100;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 100 0;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 0 100;
        stroke-dashoffset: -100;
    }
}

/* Alternative: Moving wave animation */
.ekg-wave-animated {
    display: inline-block;
    width: 40px;
    height: 20px;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}

.ekg-wave-animated::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent 0%,
        transparent 45%,
        #8b0000 45%,
        #8b0000 47%,
        transparent 47%,
        transparent 48%,
        #8b0000 48%,
        #8b0000 50%,
        transparent 50%,
        transparent 52%,
        #8b0000 52%,
        #8b0000 53%,
        transparent 53%,
        transparent 100%
    );
    animation: wave-move 3s linear infinite;
}

@keyframes wave-move {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* Canvas-based EKG animation */
.ekg-canvas {
    display: inline-block;
    width: 40px;
    height: 20px;
    vertical-align: middle;
}

/* Hide EKG when tab is not active */
nav ul li a.redline-index-tab:not(.active) .ekg-wave,
nav ul li a.redline-index-tab:not(.active) .ekg-wave-animated,
nav ul li a.redline-index-tab:not(.active) .ekg-canvas {
    opacity: 0.3;
}

/* Show full opacity when active */
nav ul li a.redline-index-tab.active .ekg-wave,
nav ul li a.redline-index-tab.active .ekg-wave-animated,
nav ul li a.redline-index-tab.active .ekg-canvas {
    opacity: 1;
}

/* Responsive: Hide EKG on mobile */
@media (max-width: 768px) {
    .ekg-wave,
    .ekg-wave-animated,
    .ekg-canvas {
        display: none;
    }
}