body {
    margin: 0;
    color: #333232;
    font-family: "Politik Bold", sans-serif;
    font-weight: 700;
}

.construction-panel {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    z-index: 1;
    animation: panel-open 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-shell {
    position: relative;
    overflow: hidden;
}

.background-text {
    position: absolute;
    left: 0;
    z-index: 0;
    color: aqua;
    font-size: 40px;
    opacity: 0.12;
    white-space: nowrap;
    pointer-events: none;
    display: block;
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.background-text::after {
    content: "   Under Construction   Under Construction   Under Construction   Under Construction";
}

.background-text-one {
    top: 12%;
    animation: background-scroll-one 32s linear infinite;
}

.background-text-two {
    top: 58%;
    animation: background-scroll-two 38s linear infinite;
}

.background-text-three {
    top: 30%;
    animation: background-scroll-three 35s linear infinite;
}

.background-text-four {
    top: 76%;
    animation: background-scroll-four 42s linear infinite;
}

.background-text-five {
    top: 44%;
    animation: background-scroll-five 36s linear infinite;
}

.background-text-six {
    top: 92%;
    animation: background-scroll-six 40s linear infinite;
}

.background-text-seven {
    top: 4%;
    animation: background-scroll-seven 34s linear infinite;
}

.background-text-eight {
    top: 20%;
    animation: background-scroll-eight 44s linear infinite;
}

.background-text-nine {
    top: 36%;
    animation: background-scroll-nine 37s linear infinite;
}

.background-text-ten {
    top: 52%;
    animation: background-scroll-ten 46s linear infinite;
}

.background-text-eleven {
    top: 68%;
    animation: background-scroll-eleven 33s linear infinite;
}

.background-text-twelve {
    top: 84%;
    animation: background-scroll-twelve 45s linear infinite;
}

.construction-message {
    position: relative;
    z-index: 1;
    animation: text-flicker 1s steps(1, end) 1.8s both;
}

@keyframes panel-open {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes text-flicker {
    0%,
    20%,
    35%,
    50% {
        opacity: 0;
    }

    10%,
    28%,
    42%,
    65%,
    100% {
        opacity: 1;
    }
}

@keyframes background-scroll-one {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

@keyframes background-scroll-two {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

@keyframes background-scroll-three {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

@keyframes background-scroll-four {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

@keyframes background-scroll-five {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

@keyframes background-scroll-six {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

@keyframes background-scroll-seven {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

@keyframes background-scroll-eight {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

@keyframes background-scroll-nine {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

@keyframes background-scroll-ten {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

@keyframes background-scroll-eleven {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

@keyframes background-scroll-twelve {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-25%, 0, 0);
    }
}

.construction-panel::before,
.construction-panel::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 12px;
    background: repeating-linear-gradient(90deg, #333232 0 24px, transparent 24px 48px);
    background-size: 48px 12px;
    opacity: 0.85;
    pointer-events: none;
    animation: flair-slide 3s linear infinite;
    animation-delay: 0s;
    animation-direction: normal;
    will-change: background-position;
}

.construction-panel::before {
    top: 6px;
}

.construction-panel::after {
    bottom: 6px;
}

@keyframes flair-slide {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 48px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .construction-panel {
        animation: none;
    }

    .construction-message {
        animation: none;
    }

    .background-text {
        animation: none;
    }

    .construction-panel::before,
    .construction-panel::after {
        animation: none;
    }
}

@font-face {
    font-family: "Politik Bold";
    font-weight: 700;
    src: url("Politik Bold.otf") format("opentype");
    font-display: swap;
}