/*neon*/
@font-face {
    font-family: beon;
    src: url(../font/Beon/Beon-Regular.otf);
}

.hero-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content {
    position: relative;
    width: 500px;
    /* Desktop */
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.neon-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.line-one,
.line-two,
.line-three {
    position: relative;
    z-index: 2;
    text-align: center;
}

.neon-path {
    fill: none;
    stroke: #c60aff;
    stroke-width: 3;
    stroke-dasharray: 500 120;
    stroke-linecap: round;
    filter: url(#glow);
    transform: rotate(20deg);
    transform-origin: center;
}

.pulse-animation {
    animation: neon-flicker 2s infinite alternate ease-in-out;
}

@keyframes neon-flicker {
    0% {
        opacity: 0.9;
        stroke-width: 2.5;
        filter: drop-shadow(0 0 5px #c60aff) drop-shadow(0 0 8px #c60aff);
    }

    100% {
        opacity: 1;
        stroke-width: 3.5;
        filter: drop-shadow(0 0 15px #c60aff) drop-shadow(0 0 8px #c60aff);
    }
}

.line-one {
    font-family: beon;
    color: #ffffff;
    font-size: 100px;
    line-height: 120px;
    margin-top: -15px;
    margin-left: 0px;

    transform: rotate(0deg) translateZ(0);
    -webkit-font-smoothing: antialiased;
}

.line-two {
    font-family: beon;
    color: #c60aff;
    font-size: 150px;
    line-height: 120px;
    margin-left: 0px;
    transform: rotate(6deg) translateZ(0) translateY(5px);
    transform-origin: center;
    -webkit-font-smoothing: antialiased;    
}

.line-three {
    font-family: beon;
    color: #ffffff;
    font-size: 100px;
    line-height: 120px;
    margin-left: 0px;

    transform: rotate(-1deg) translateZ(0);
    -webkit-font-smoothing: antialiased;
}

@keyframes neon-pulse {
    0%,
    100% {
        text-shadow:
            0 0 7px #000000,
            0 0 10px currentColor,
            0 0 21px currentColor,
            0 0 42px currentColor,
            0 0 82px currentColor;
    }

    50% {
        text-shadow:
            0 0 4px #000000,
            0 0 7px currentColor,
            0 0 18px currentColor,
            0 0 35px currentColor,
            0 0 70px currentColor;
    }
}

@keyframes broken-flicker {    
    0%, 15%, 25%, 75%, 100% {
        text-shadow:
            0 0 7px #000,
            0 0 10px currentColor,
            0 0 21px currentColor,
            0 0 42px currentColor;
        opacity: 1;
    } 
    16%, 24%, 26% {
        text-shadow: none;
        opacity: 0.3;
    }    
    18%, 27%, 70% {
        text-shadow: none;        
        opacity: 0.2; 
    }    
    71%, 73% {
        text-shadow: 0 0 10px currentColor;
        opacity: 0.6;
    }
    72% {
        text-shadow: none;
        opacity: 0.2;
    }
}



/*
@keyframes broken-flicker {

    0%,
    85% {
        text-shadow: none;
        opacity: 0.5;
        color: #222;
        transform: rotate(0deg);
    }

    86% {
        text-shadow: 0 0 10px currentColor;
        opacity: 1;
        color: currentColor;
    }

    87%,
    88% {
        text-shadow: none;
        opacity: 0.15;
    }

    89% {
        text-shadow: 0 0 15px currentColor, 0 0 30px currentColor;
        opacity: 1;
        transform: translateX(1px);
    }

    90%,
    94% {
        text-shadow: none;
        opacity: 0.15;
    }

    95% {
        text-shadow: 0 0 20px currentColor;
        opacity: 0.8;
    }

    100% {
        text-shadow: none;
        opacity: 0.15;
    }
}
*/


.line-one,
.line-two,
.line-three {
    font-family: 'beon', sans-serif;
    text-transform: uppercase;
    animation: neon-pulse 2s infinite ease-in-out;
}

.line-two span {
    animation: broken-flicker 8s infinite;
    display: inline-block;
}


.neon-icon svg {
    fill: currentColor;
    height: 100px;
    width: auto;
    overflow: visible;

    position: absolute;
    margin-top: -390px;
    margin-left: 150px;
    transform: rotate(40deg);    
    /*animation: neon-pulse-svg 2s infinite ease-in-out;*/
}

.neon-icon svg path:not(.malfunctioning) {
    animation: neon-pulse-svg 2s infinite ease-in-out;
}

@keyframes neon-pulse-svg {

    0%,
    100% {
        filter:
            drop-shadow(0 0 1.5px black) drop-shadow(0 0 3px currentColor)
    }

    50% {
        filter:
            drop-shadow(0 0 1.5px black) drop-shadow(0 0 3.5px currentColor) 
    }
}

.malfunctioning {
    fill: currentColor;    
    animation: flicker-path-aggressive 3s linear infinite;
}

@keyframes flicker-path-aggressive {    
    0%, 10%, 12%, 25%, 38%, 40%, 41%, 44%, 60%, 68%, 72.2%, 80%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px currentColor);
    }
    
    11%, 39%, 42%, 43%, 69%, 71%, 72% {
        opacity: 0.1; 
        filter: none;
    }

    10.5%, 70% {
        opacity: 0.5;
        filter: drop-shadow(0 0 1px currentColor);
    }
}



@media (max-width: 768px) {
    .content {
        width: 85vw;
        height: 85vw;
        max-width: 320px;
        max-height: 320px;
    }

    .line-one {
        font-size: 65px;
        line-height: 80px;
    }

    .line-two {
        font-size: 95px;
        line-height: 80px;
    }

    .line-three {
        font-size: 65px;
        line-height: 80px;
    }

    .neon-icon svg {
    fill: currentColor;
    height: 56px;
    width: auto;
    overflow: visible;

    position: absolute;
    margin-top: -245px;
    margin-left: 95px;
    transform: rotate(40deg); 
}    

    .subtitle {
        font-size: 1rem;
        margin-top: 20px;
    }
}