@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-animated-headline{
    margin-top: 0;
    margin-bottom: 0;
    --animated-headline-delay: 20s;
    .dnetor-text-animated-inner{
        position: relative;
    }
    &.style-01{
        .dnetor-svg{
            bottom: -25px;
        }
    }
    &.style-02{
        .dnetor-svg{
            bottom: -15px;
            path{
                stroke-width: 20;
            }
        }
    }
    &.style-03{
        .dnetor-svg{
            bottom: -10px;
            path{
                stroke-width: 15;
            }
        }
    }
    &.style-04{
        .dnetor-svg{
            bottom: 17px;
            path{
                stroke-width: 25;
            }
        }
    }
    .dnetor-text-animated{
        position: relative;
        z-index: 1;
    }
    .dnetor-svg{
        position: absolute;
        top: auto;
        left: 50%;
        width: 100%;
        height: 100%;
        @include transform(translate(-50%));
        path {
            stroke: $accent_color;
            stroke-width: 10;
            fill: none;
            stroke-dasharray: 1500;
            animation: highlighted-line var(--animated-headline-delay) cubic-bezier(.3, 1.12, .75, 1.05) forwards;
            animation-play-state: paused;
        }
    }
}

@keyframes highlighted-line {
    0% {
        stroke-dasharray: 0 1500;
    }
    to {
        stroke-dasharray: 1500 1500;
    }
}