.portal {

    --L: 100vw;
    --ar: tan(atan2(100vh, 100vw));
    --E: calc(var(--L) * 1.5);

    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;

    background-color: #000;
    filter: brightness(1.5);
}

.portal-space {
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--L);
    height: var(--L);
    margin-top: calc(var(--L) / -2);
    transform: scaleY(var(--ar));
}

.portal-space > div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--E);
    height: var(--E);
    margin: calc(var(--E) / -2);
    overflow: hidden;
    transform: scaleY(-1) rotate(var(--a));
    mix-blend-mode: plus-lighter;
}

.portal-space > div::before {
    --tile: calc(var(--L) * var(--t));
    content: "";
    position: absolute;
    inset: calc(var(--tile) * -1);
    background-image: url("end_portal.png");
    background-repeat: repeat;
    background-size: var(--tile) var(--tile);
    background-position: calc(var(--L) * var(--x)) calc(var(--L) * var(--y));
    background-color: var(--c);
    background-blend-mode: multiply;
    image-rendering: pixelated;
    animation: portal-drift var(--dur) linear infinite;
}
@keyframes portal-drift {
    to {
        transform: translateY(calc(var(--tile) * -1));
    }
}

.l1  { --a: 114.5916deg;  --t: 0.235294; --x: 0.102941; --y: 0.220588; --dur: 1500.0s; --c: rgb(5.63 25.09 28.26); }
.l2  { --a: 229.1831deg;  --t: 0.250000; --x: 0.125000; --y: 0.187500; --dur: 1200.0s; --c: rgb(3.03 24.46 22.82); }
.l3  { --a: 343.7747deg;  --t: 0.266667; --x: 0.194444; --y: 0.150000; --dur: 1000.0s; --c: rgb(7.05 25.93 25.58); }
.l4  { --a: 458.3662deg;  --t: 0.285714; --x: 0.071429; --y: 0.107143; --dur:  857.1s; --c: rgb(11.87 28.02 29.28); }
.l5  { --a: 572.9578deg;  --t: 0.307692; --x: 0.150000; --y: 0.057692; --dur:  750.0s; --c: rgb(16.55 30.01 24.78); }
.l6  { --a: 687.5494deg;  --t: 0.333333; --x: 0.194444; --y: 0.000000; --dur:  666.7s; --c: rgb(16.26 22.16 31.53); }
.l7  { --a: 802.1409deg;  --t: 0.363636; --x: 0.217532; --y: 0.295455; --dur:  600.0s; --c: rgb(21.63 28.56 42.43); }
.l8  { --a: 916.7325deg;  --t: 0.400000; --x: 0.225000; --y: 0.250000; --dur:  545.5s; --c: rgb(24.86 39.3 23.22); }
.l9  { --a: 1031.3240deg; --t: 0.444444; --x: 0.219136; --y: 0.194444; --dur:  500.0s; --c: rgb(27.07 33.44 49.77); }
.l10 { --a: 1145.9156deg; --t: 0.500000; --x: 0.200000; --y: 0.125000; --dur:  461.5s; --c: rgb(24.92 28.1 47.74); }
.l11 { --a: 1260.5071deg; --t: 0.571429; --x: 0.165584; --y: 0.035714; --dur:  428.6s; --c: rgb(34.05 35.26 37.89); }
.l12 { --a: 1375.0987deg; --t: 0.666667; --x: 0.111111; --y: 0.583333; --dur:  400.0s; --c: rgb(17.85 62.05 60.13); }
.l13 { --a: 1489.6903deg; --t: 0.800000; --x: 0.026923; --y: 0.550000; --dur:  375.0s; --c: rgb(50.18 36.44 54.75); }
.l14 { --a: 1604.2818deg; --t: 1.000000; --x: 0.892857; --y: 0.500000; --dur:  352.9s; --c: rgb(12.06 80.41 82.1); }
.l15 { --a: 1718.8734deg; --t: 1.333333; --x: 0.994444; --y: 0.416667; --dur:  333.3s; --c: rgb(52.19 99.45 77.03); }


@supports not (width: tan(atan2(1px, 1px))) {
    .portal {
        --L: 100vmax;
        --ar: 1;
    }
}
@supports not (mix-blend-mode: plus-lighter) {
    .portal-space {
        display: none;
    }

    .portal {
        background-color: #16233c;
        background-image: url("end_portal.png");
        background-repeat: repeat;
        background-size: 12vmax 12vmax;
        background-blend-mode: screen;
        image-rendering: pixelated;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-space > div::before {
        animation: none;
    }
}