.preloaded.heart-rate-container {
    background-image: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.preloaded:before {
    content: attr(data-loading);
    /* вот так берем текст из атрибута */
}
.heart-rate-container svg {
    width: 200px;
}



.heart-rate-line {
    animation-iteration-count: infinite;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
    will-change: stroke-dashoffset, transform, stroke-opacity, stroke-width;
}

.simple .heart-rate-line {
    animation: pulse-simple var(--pulse-duration) linear infinite;
}

@keyframes pulse-simple {
    0% {
        stroke-dashoffset: var(--pulse-dashoffset-start, 0);
    }

    100% {
        stroke-dashoffset: var(--pulse-dashoffset-end, -300);
    }
}

.trail .heart-rate-line {
    animation: pulse-trail var(--pulse-duration) linear infinite;
}

@keyframes pulse-trail {
    0% {
        stroke-dashoffset: var(--pulse-dashoffset-start, 0);
        stroke-opacity: 1;
    }

    70% {
        stroke-dashoffset: var(--pulse-dashoffset-end, -300);
        stroke-opacity: 1;
    }

    100% {
        stroke-dashoffset: var(--pulse-dashoffset-end, -300);
        stroke-opacity: 0;
    }
}

.ecg .heart-rate-line {
    animation: pulse-ecg var(--pulse-duration) steps(1) infinite;
}

@keyframes pulse-ecg {
    0% {
        stroke-dashoffset: 0;
    }

    10% {
        stroke-dashoffset: -30;
    }

    15% {
        stroke-dashoffset: -35;
    }

    20% {
        stroke-dashoffset: -60;
    }

    25% {
        stroke-dashoffset: -65;
    }

    30% {
        stroke-dashoffset: -90;
    }

    35% {
        stroke-dashoffset: -95;
    }

    40% {
        stroke-dashoffset: -120;
    }

    45% {
        stroke-dashoffset: -125;
    }

    50% {
        stroke-dashoffset: -150;
    }

    55% {
        stroke-dashoffset: -155;
    }

    60% {
        stroke-dashoffset: -180;
    }

    70% {
        stroke-dashoffset: -210;
    }

    80% {
        stroke-dashoffset: -240;
    }

    90% {
        stroke-dashoffset: -270;
    }

    100% {
        stroke-dashoffset: -300;
    }
}

.glow .heart-rate-line {
    animation: pulse-glow var(--pulse-duration) linear infinite;
    filter: drop-shadow(0 0 4px var(--pulse-color));
}

@keyframes pulse-glow {
    0% {
        stroke-dashoffset: var(--pulse-dashoffset-start, 0);
        stroke-width: 3;
    }

    50% {
        stroke-width: 5;
    }

    100% {
        stroke-dashoffset: var(--pulse-dashoffset-end, -300);
        stroke-width: 3;
    }
}

.rainbow .heart-rate-line {
    animation: pulse-rainbow var(--pulse-duration) linear infinite;
    stroke: url(#rainbow);
}

@keyframes pulse-rainbow {
    0% {
        stroke-dashoffset: var(--pulse-dashoffset-start, 0);
    }

    100% {
        stroke-dashoffset: var(--pulse-dashoffset-end, -300);
    }
}

.bounce .heart-rate-line {
    animation: pulse-bounce var(--pulse-duration) ease-in-out infinite;
}

@keyframes pulse-bounce {
    0% {
        stroke-dashoffset: var(--pulse-dashoffset-start, 0);
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        stroke-dashoffset: var(--pulse-dashoffset-end, -300);
        transform: translateY(0);
    }
}

.glitch .heart-rate-line {
    animation: pulse-glitch calc(var(--pulse-duration) * 0.8) steps(2, end) infinite;
}


@keyframes pulse-glitch {
    0% {
        stroke-dashoffset: 0;
        transform: translate(0);
    }

    3% {
        stroke-dashoffset: -9;
        transform: translate(1px, -2px);
    }

    6% {
        stroke-dashoffset: -18;
        transform: translate(-2px, 1px);
    }

    9% {
        stroke-dashoffset: -27;
        transform: translate(2px, 3px);
    }

    12% {
        stroke-dashoffset: -36;
        transform: translate(-3px, -1px);
    }

    15% {
        stroke-dashoffset: -45;
        transform: translate(0, 2px);
    }

    18% {
        stroke-dashoffset: -54;
        transform: translate(3px, -3px);
    }

    21% {
        stroke-dashoffset: -63;
        transform: translate(-1px, 0);
    }

    24% {
        stroke-dashoffset: -72;
        transform: translate(2px, -1px);
    }

    27% {
        stroke-dashoffset: -81;
        transform: translate(-3px, 2px);
    }

    30% {
        stroke-dashoffset: -90;
        transform: translate(1px, 3px);
    }

    33% {
        stroke-dashoffset: -99;
        transform: translate(-2px, -2px);
    }

    36% {
        stroke-dashoffset: -108;
        transform: translate(3px, 1px);
    }

    39% {
        stroke-dashoffset: -117;
        transform: translate(0, -3px);
    }

    42% {
        stroke-dashoffset: -126;
        transform: translate(-1px, 2px);
    }

    45% {
        stroke-dashoffset: -135;
        transform: translate(2px, 0);
    }

    48% {
        stroke-dashoffset: -144;
        transform: translate(-3px, -3px);
    }

    51% {
        stroke-dashoffset: -153;
        transform: translate(1px, 1px);
    }

    54% {
        stroke-dashoffset: -162;
        transform: translate(0, -1px);
    }

    57% {
        stroke-dashoffset: -171;
        transform: translate(3px, 2px);
    }

    60% {
        stroke-dashoffset: -180;
        transform: translate(-2px, -1px);
    }

    63% {
        stroke-dashoffset: -189;
        transform: translate(1px, 0);
    }

    66% {
        stroke-dashoffset: -198;
        transform: translate(-3px, 3px);
    }

    69% {
        stroke-dashoffset: -207;
        transform: translate(2px, -2px);
    }

    72% {
        stroke-dashoffset: -216;
        transform: translate(0, 1px);
    }

    75% {
        stroke-dashoffset: -225;
        transform: translate(-1px, -3px);
    }

    78% {
        stroke-dashoffset: -234;
        transform: translate(3px, 0);
    }

    81% {
        stroke-dashoffset: -243;
        transform: translate(-2px, 2px);
    }

    84% {
        stroke-dashoffset: -252;
        transform: translate(1px, -1px);
    }

    87% {
        stroke-dashoffset: -261;
        transform: translate(-3px, 0);
    }

    90% {
        stroke-dashoffset: -270;
        transform: translate(2px, 3px);
    }

    93% {
        stroke-dashoffset: -279;
        transform: translate(0, -2px);
    }

    96% {
        stroke-dashoffset: -288;
        transform: translate(-1px, 1px);
    }

    100% {
        stroke-dashoffset: -300;
        transform: translate(0);
    }
}

.real-ecg .heart-rate-line {
    animation: pulse-real-ecg var(--pulse-duration) linear infinite;
    stroke-dasharray: var(--pulse-dasharray-start, 300);
    stroke-dashoffset: var(--pulse-dashoffset-start, var(--pulse-dasharray-start, 300));
}

@keyframes pulse-real-ecg {
    0% {
        stroke-dashoffset: var(--pulse-dashoffset-start, var(--pulse-dasharray-start, 300));
    }

    100% {
        stroke-dashoffset: var(--pulse-dashoffset-end, 0);
    }
}

.neon .heart-rate-line {
    animation: pulse-neon var(--pulse-duration) linear infinite;
    filter: drop-shadow(0 0 2px var(--pulse-color)) drop-shadow(0 0 6px var(--pulse-color));
}

@keyframes pulse-neon {
    0% {
        stroke-dashoffset: var(--pulse-dashoffset-start, 0);
        stroke-opacity: 0.6;
    }

    50% {
        stroke-opacity: 1;
    }

    100% {
        stroke-dashoffset: var(--pulse-dashoffset-end, -300);
        stroke-opacity: 0.6;
    }
}

.wave .heart-rate-line {
    animation: pulse-wave var(--pulse-duration) ease-in-out infinite;
}

@keyframes pulse-wave {
    0% {
        stroke-dashoffset: var(--pulse-dashoffset-start, 0);
        transform: scaleY(1);
    }

    25% {
        transform: scaleY(1.1);
    }

    50% {
        transform: scaleY(0.9);
    }

    75% {
        transform: scaleY(1.05);
    }

    100% {
        stroke-dashoffset: var(--pulse-dashoffset-end, -300);
        transform: scaleY(1);
    }
}