@import url('https://fonts.googleapis.com/css?family=Audiowide&display=swap');

*,
*:after,
*:before {
    box-sizing: border-box;
}

:root {
    --logo-blue: #003366; /* A representative dark navy blue */
    --logo-yellow: #e6c300; /* A strong gold/yellow */
    --logo-highlight-yellow: #e6c300; /* A brighter yellow for glow */
    --logo-text-blue: #001f3f; /* Darker blue for text when not glowing */
    --logo-bg-blue: #002244; /* Slightly different blue for background elements */
    --bg: var(--logo-bg-blue); /* Button background */
    --glow: radial-gradient( 50% 50% at center, var(--logo-highlight-yellow), var(--logo-yellow), transparent ) calc((var(--x) * 1px) - (var(--size) * 0.5)) calc((var(--y) * 1px) - (var(--size) * 0.5)) / var(--size) var(--size) no-repeat fixed;
    --x: 0;
    --y: 0;
    --xp: 0;
    --yp: 0;
    /* --hue: calc(0 + (var(--xp) * 600)); */
    /* --bg: hsl(0 0% 10%); */
    --size: 100px;
    /* --glow: radial-gradient( 50% 50% at center, hsl(var(--hue) 80% 85%), hsl(var(--hue) 80% 70%), transparent ) calc((var(--x) * 1px) - (var(--size) * 0.5)) calc((var(--y) * 1px) - (var(--size) * 0.5)) / var(--size) var(--size) no-repeat fixed; */
}
html, body {
    margin: 0px;
    overflow: hidden;
}

div {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    margin: 0px;
    background: radial-gradient(circle, #001f3f 0%, #001f3f 100%);
    overflow: hidden;
}

.wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 150px;
    font-size: 52px;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    display: block;
    color: var(--logo-dark-text);
    font-weight: 300;
    font-family: Audiowide;
    text-shadow: 0px 0px 4px var(--logo-dark-text);
    animation: fadeInText 1s ease-in 3.5s forwards, flicker4 5s linear 7.5s infinite, hueRotate 6s ease-in-out 3s infinite;
}

#svgWrap_1,
#svgWrap_2 {
    position: absolute;
    height: auto;
    width: 100%;
    max-width: 100%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#svgWrap_1,
#svgWrap_2,
div {
    animation: hueRotate 6s ease-in-out 3s infinite;
}

#id1_1,
#id2_1,
#id3_1 {
    stroke: var(--logo-yellow);
    stroke-width: 3px;
    fill: transparent;
    filter: url(#glow);
}

#id1_2,
#id2_2,
#id3_2 {
    stroke: var(--logo-dark-text);
    stroke-width: 3px;
    fill: transparent;
    filter: url(#glow);
}

#id3_1 {
    stroke-dasharray: 940px;
    stroke-dashoffset: -940px;
    animation: drawLine3 2.5s ease-in-out 0s forwards, flicker3 4s linear 4s infinite;
}

#id2_1 {
    stroke-dasharray: 735px;
    stroke-dashoffset: -735px;
    animation: drawLine2 2.5s ease-in-out 0.5s forwards, flicker2 4s linear 4.5s infinite;
}

#id1_1 {
    stroke-dasharray: 940px;
    stroke-dashoffset: -940px;
    animation: drawLine1 2.5s ease-in-out 1s forwards, flicker1 4s linear 5s infinite;
}

button {
    position: relative;
    margin-top: 65vh;
    /* right: 25vw;
    left: -9vw; */
    /* translate: -50% -50%; */
    border-radius: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1ch;
    background: var(--bg);
    border: 4px solid transparent;
    box-shadow: 0 1px hsl(0 0% 100% / 0.15) inset;
    cursor: pointer;
    background: linear-gradient(var(--bg), var(--bg)) padding-box, /* Button face: logo-blue */
                var(--glow), /* Interactive glow: logo-yellow based */
                linear-gradient(var(--logo-dark-text), var(--logo-dark-text)) border-box;
    transition: background-size 0.24s;
    touch-action: none;
    padding: 1rem 2rem;
    margin: 65vh auto;
    display: flex;
}

button::before {
    opacity: 0.75;
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: 0 1px hsl(0 0% 100% / 0.15) inset;
    background: var(--bg);
    z-index: 2;
    /*   border: 4px solid transparent; */
    border-radius: 1rem;
}

button span {
    background-clip: text;
    font-weight: bold;
    height: 100%;
    width: 100%;
    z-index: 2;
    position: relative;
    inset: 0;
    font-family: Audiowide;
    color: var(--logo-dark-text);
    text-shadow: 0px 0px 4px var(--logo-dark-text);
    text-transform: uppercase;
    animation: fadeInText 1s ease-in 3.5s forwards, flicker4 5s linear 7.5s infinite, hueRotate 6s ease-in-out 3s infinite;
}

:root:has(button:active) {
    --size: 300px;
}

button::after {
    /* opacity: 0.75; */
    content: "";
    position: absolute;
    inset: -4px;
    filter: blur(20px);
    border: 4px solid transparent;
    background: var(--glow);
    border-radius: 1rem;
}

::selection {
    background-color: transparent;
    color: var(--logo-glow-yellow);
}

@keyframes drawLine1 {
    0% {
        stroke-dashoffset: -940px;
    }

    100% {
        stroke-dashoffset: 0px;
    }
}

@keyframes drawLine2 {
    0% {
        stroke-dashoffset: -735px;
    }

    100% {
        stroke-dashoffset: 0px;
    }
}

@keyframes drawLine3 {
    0% {
        stroke-dashoffset: -940px;
    }

    100% {
        stroke-dashoffset: 0px;
    }
}

@keyframes flicker1 {
    0% { stroke: var(--logo-yellow); }
    1% { stroke: transparent; } /* Or var(--logo-blue) for a less harsh flicker */
    3% { stroke: transparent; }
    4% { stroke: var(--logo-yellow); }
    6% { stroke: var(--logo-yellow); }
    7% { stroke: transparent; }
    13% { stroke: transparent; }
    14% { stroke: var(--logo-yellow); }
    100% { stroke: var(--logo-yellow); }
}

@keyframes flicker2 {
    0% { stroke: var(--logo-yellow); }
    50% { stroke: var(--logo-yellow); }
    51% { stroke: transparent; }
    61% { stroke: transparent; }
    62% { stroke: var(--logo-yellow); }
    100% { stroke: var(--logo-yellow); }
}

@keyframes flicker3 {
    0% { stroke: var(--logo-yellow); }
    1% { stroke: transparent; }
    10% { stroke: transparent; }
    11% { stroke: var(--logo-yellow); }
    40% { stroke: var(--logo-yellow); }
    41% { stroke: transparent; }
    45% { stroke: transparent; }
    46% { stroke: var(--logo-yellow); }
    100% { stroke: var(--logo-yellow); }
}

@keyframes flicker4 { /* For text */
    0% { color: var(--logo-yellow); text-shadow: 0px 0px 4px var(--logo-yellow); }
    30% { color: var(--logo-yellow); text-shadow: 0px 0px 4px var(--logo-yellow); }
    31% { color: var(--logo-dark-text); text-shadow: 0px 0px 4px var(--logo-dark-text); }
    32% { color: var(--logo-yellow); text-shadow: 0px 0px 4px var(--logo-yellow); }
    36% { color: var(--logo-yellow); text-shadow: 0px 0px 4px var(--logo-yellow); }
    37% { color: var(--logo-dark-text); text-shadow: 0px 0px 4px var(--logo-dark-text); }
    41% { color: var(--logo-dark-text); text-shadow: 0px 0px 4px var(--logo-dark-text); }
    42% { color: var(--logo-yellow); text-shadow: 0px 0px 4px var(--logo-yellow); }
    85% { color: var(--logo-yellow); text-shadow: 0px 0px 4px var(--logo-yellow); }
    86% { color: var(--logo-dark-text); text-shadow: 0px 0px 4px var(--logo-dark-text); }
    95% { color: var(--logo-dark-text); text-shadow: 0px 0px 4px var(--logo-dark-text); }
    96% { color: var(--logo-yellow); text-shadow: 0px 0px 4px var(--logo-yellow); }
    100% { color: var(--logo-yellow); text-shadow: 0px 0px 4px var(--logo-yellow); }
}

@keyframes fadeInText {
    1% { color: var(--logo-dark-text); text-shadow: 0px 0px 4px var(--logo-dark-text); }
    70% { color: var(--logo-yellow); text-shadow: 0px 0px 14px var(--logo-yellow); } /* Brighter shadow during fade */
    100% { color: var(--logo-yellow); text-shadow: 0px 0px 4px var(--logo-yellow); }
}

/* @keyframes hueRotate {
    0% {
        filter: hue-rotate(0deg);
    }

    50% {
        filter: hue-rotate(-120deg);
    }

    100% {
        filter: hue-rotate(0deg);
    }
} */