/*
global
*/
*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #000;
    overflow: hidden;
    background: linear-gradient(
        to bottom,
        #1f4972 0%,
        #1f446a 20%,
        #2c5777 40%,
        #284259 60%,
        #182939 80%
    );
}

/*
rheinturm
*/
.scene {
    position: relative;
    width: min(100vw, calc(100svh * 320 / 433));
    aspect-ratio: 320 / 433;
}

.scene:after {
    content: '';
    width: 100vw;
    height: 1000%;
    position: absolute;
    background-color: #000;
    top: 99.9%;
    left: 50%;
    transform: translateX(-50%);
}

.rheinturm {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(
            to right,
            transparent 0%,
            transparent 40%,
            rgba(255, 255, 255, 0.09) 49%,
            transparent 58%,
            transparent 100%
        ),
        linear-gradient( 
            to bottom, 
            #000 0%, 
            #000 7%, 
            #535a6d 9.5%, 
            #8b9ea5 13%, 
            #000 14%, 
            #000 16%, 
            #9f9d90 17.5%, 
            #d6d0b0 20.5%,
            #9c9a74 24.1%,
            #7b7569 24.8%,
            #413c29 25.3%,
            #190f43 25.3%,
            #000 28.6%,
            #190f43 28.6%,
            #000 31.6%,
            #121211 31.6%,
            #000 33.5%,
            #000 36%,
            #121211 36.7%,
            #000 42%,
            #000 100%
        );

    clip-path: shape(
        from 51.547% 25.393%,
        line to 50.703% 25.393%,
        line to 50.266% 16.651%,
        curve to 49.484% 15.208% with 50.062% 15.866%,
        line to 49.484% 6.109%,
        curve to 48.906% 5.762% with 49.406% 5.797%,
        curve to 48.328% 6.109% with 48.401% 5.798%,
        line to 48.328% 15.208%,
        curve to 47.547% 16.651% with 47.752% 15.871%,
        line to 47.109% 25.393%,
        line to 46.266% 25.393%,
        curve to 41.453% 26.282% with 42.748% 25.48%,
        curve to 46.312% 27.182% with 42.76% 27.091%,
        line to 46.219% 28.476%,
        curve to 40.078% 29.365% with 41.605% 28.43%,
        curve to 43.797% 30.208% with 41.159% 30.037%,
        line to 43.797% 30.242%,
        curve to 43.719% 31.316% with 43.756% 30.783%,
        line to 43.703% 31.513%,
        curve to 38.656% 32.748% with 40.177% 31.799%,
        line to 41.734% 36.524%,
        line to 42.391% 36.628%,
        line to 42.391% 37.333%,
        line to 45.234% 40.82%,
        curve to 45.906% 42.125% with 45.685% 41.447%,
        curve to 46.172% 43.499% with 46.148% 42.792%,
        curve to 46.172% 43.984% with 46.193% 43.74%,
        curve to 46.172% 44.192% with 46.18% 44.087%,
        line to 43.281% 99.873%,
        line to 54.531% 99.873%,
        line to 51.641% 44.192%,
        curve to 51.625% 43.949% with 51.631% 44.071%,
        line to 51.625% 43.753%,
        curve to 51.859% 42.24% with 51.624% 42.972%,
        curve to 52.578% 40.82% with 52.089% 41.5%,
        line to 55.422% 37.333%,
        line to 55.422% 36.628%,
        line to 56.078% 36.524%,
        line to 59.156% 32.748%,
        curve to 54.109% 31.513% with 57.635% 31.8%,
        line to 54.094% 31.316%,
        curve to 54.016% 30.242% with 54.056% 30.783%,
        line to 54.016% 30.208%,
        curve to 57.734% 29.365% with 56.653% 30.037%,
        curve to 51.594% 28.476% with 56.208% 28.43%,
        line to 51.578% 28.279%,
        curve to 51.5% 27.206% with 51.54% 27.746%,
        line to 51.5% 27.182%,
        curve to 56.359% 26.282% with 55.053% 27.091%,
        curve to 51.547% 25.393% with 55.068% 25.484%,
        close
    );
}

.rheinturm__antenna {
    position: absolute;
    width: .3%;
    height: 3%;
    background-color: #0a2045;
}
.rheinturm__antenna[data-antenna="1"] {
    height: 3%;
    left: 42.4%;
    top: 26%;
}
.rheinturm__antenna[data-antenna="2"] {
    height: 3%;
    left: 44%;
    top: 26%;
}
.rheinturm__antenna[data-antenna="3"] {
    height: 1%;
    left: 52.3%;
    top: 27.8%;
}
.rheinturm__antenna[data-antenna="4"] {
    height: 1%;
    left: 53.3%;
    top: 27.7%;
}
.rheinturm__antenna[data-antenna="5"] {
    height: 1%;
    left: 54.3%;
    top: 27.9%;
}
.rheinturm__antenna[data-antenna="6"] {
    height: 1.6%;
    left: 56%;
    top: 27.3%;
}
.rheinturm__antenna[data-antenna="7"] {
    height: 3%;
    left: 44%;
    top: 22.5%;
}
.rheinturm__antenna[data-antenna="8"] {
    height: 1.5%;
    left: 43%;
    top: 24.5%;
}
.rheinturm__antenna[data-antenna="9"] {
    height: 1.1%;
    left: 42%;
    top: 24.9%;
}
.rheinturm__antenna[data-antenna="10"] {
    height: 1.1%;
    left: 55%;
    top: 24.9%;
}
.rheinturm__antenna[data-antenna="11"] {
    height: 1.4%;
    left: 54.3%;
    top: 24.2%;
}

.rheinturm__windows {
    --_window-core-size: 1.1px;
    --_window-glow-size: 2px;
    --_window-color-center: #4b403c;
    --_window-color-border: #332e2b;

    position: absolute;
    width: 20%;
    height: 5%;
    left: 39%;
    top: 31.5%;
    background:
        radial-gradient(circle at 39% 45%, var(--_window-color-center) 0 var(--_window-core-size), var(--_window-color-border) var(--_window-core-size) 2px, transparent var(--_window-glow-size)),
        radial-gradient(circle at 35% 47%, var(--_window-color-center) 0 var(--_window-core-size), var(--_window-color-border) var(--_window-core-size) 2px, transparent var(--_window-glow-size)),
        radial-gradient(circle at 32% 48%, var(--_window-color-center) 0 var(--_window-core-size), var(--_window-color-border) var(--_window-core-size) 2px, transparent var(--_window-glow-size)),
        radial-gradient(circle at 32% 58%, var(--_window-color-center) 0 var(--_window-core-size), var(--_window-color-border) var(--_window-core-size) 2px, transparent var(--_window-glow-size)),
        radial-gradient(circle at 28% 58%, var(--_window-color-center) 0 var(--_window-core-size), var(--_window-color-border) var(--_window-core-size) 2px, transparent var(--_window-glow-size)),
        radial-gradient(circle at 28% 67%, var(--_window-color-center) 0 var(--_window-core-size), var(--_window-color-border) var(--_window-core-size) 2px, transparent var(--_window-glow-size)),
        radial-gradient(circle at 24% 69%, var(--_window-color-center) 0 var(--_window-core-size), var(--_window-color-border) var(--_window-core-size) 2px, transparent var(--_window-glow-size)),
        radial-gradient(circle at 21% 69%, var(--_window-color-center) 0 var(--_window-core-size), var(--_window-color-border) var(--_window-core-size) 2px, transparent var(--_window-glow-size)),
        radial-gradient(circle at 50% 50%, var(--_window-color-center) 0 var(--_window-core-size), var(--_window-color-border) var(--_window-core-size) 2px, transparent var(--_window-glow-size)),
        radial-gradient(circle at 20% 60%, var(--_window-color-center) 0 var(--_window-core-size), var(--_window-color-border) var(--_window-core-size) 2px, transparent var(--_window-glow-size));
}

/*
lichtzeitpegel
*/
.lichtzeitpegel {
    --_lichtzeitpegel-light-size: 10%;
    --_lichtzeitpegel-light-gap: 1.15%;
    --_lichtzeitpegel-separator-small-height: 1.1%;
    --_lichtzeitpegel-separator-large-height: 4%;
    --_lichtzeitpegel-separator-light-size: 10%;

    position: absolute;
    left: 48.9%;
    top: 43.3%;
    width: 7%;
    height: 46.6%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--_lichtzeitpegel-light-gap);
    pointer-events: none;
}

.lichtzeitpegel__light {
    width: var(--_lichtzeitpegel-light-size);
    aspect-ratio: 1;
    flex: 0 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at center, #dfd2cf 0%, #80726f 50%, transparent 100%);
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.lichtzeitpegel__light.is-on {
    opacity: 1;
}

.lichtzeitpegel__separator {
    width: 100%;
    flex: 0 0 auto;
}

.lichtzeitpegel__separator--small {
    height: var(--_lichtzeitpegel-separator-small-height);
}

.lichtzeitpegel__separator--large {
    height: var(--_lichtzeitpegel-separator-large-height);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lichtzeitpegel__separator-light,
.lichtzeitpegel__separator-toplight {
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at center, #d36c73 0%, #72484a 50%, transparent 100%);
}

.lichtzeitpegel__separator-light {
    width: var(--_lichtzeitpegel-separator-light-size);
    flex: 0 0 auto;
}

.lichtzeitpegel__separator-toplight {
    width: 1.5%;
    position: absolute;
    left: 49%;
    transform: translateX(-50%);
    top: 5%;
    animation: rheinturm-top-light 4s linear infinite;
}

@keyframes rheinturm-top-light {
    0%,
    25% {
        opacity: 1;
        filter: brightness(1.25);
    }
    25.001%,
    37.5% {
        opacity: .25;
        filter: brightness(.65);
    }
    37.501%,
    62.5% {
        opacity: 1;
        filter: brightness(1.25);
    }
    62.501%,
    100% {
        opacity: .25;
        filter: brightness(.65);
    }
}