@font-face {
    /* Confirmed actual Evangelion titlecard font. Archive: https://archive.org/details/NISFonts */
    font-family: 'EVA';
    src: url('fonts/NIS-JTC-Win-M9.woff2') format('woff2'),
         url('fonts/NIS-JTC-Win-M9.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    /* TODO: Figure out where in the actual fuck did I find this font. */
    font-family: 'GAS';
    src: url('fonts/GASBOA.woff2') format('woff2');
        /* Hmm... should I encode the fonts in base64? Haha no that's crazy. Unless...? */
    font-display: swap;
}

html {
    --full-height: 100vh;

    @supports (height: 100svh) { --full-height: 100svh; }

    box-sizing: border-box;
    height: var(--full-height);
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: black;

    &, & *, & *::before, & *::after {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
    }

    & body {
        position: fixed;
        z-index: 0;
        width: 100vw;
        height: var(--full-height);
        overflow: hidden;
        cursor: crosshair;
        user-select: none;
        background: radial-gradient(circle at 60% 35%, #2b446d 15%, #3d6195 40%, #7db1d6 70%, #e6e6e6 80%);
        opacity: 0;
        animation: fade-in 2s forwards 1s;
        display: flex;
        justify-content: center;
        align-items: center;

        & h1 {
            position: absolute;
            mix-blend-mode: lighten;
            font-family: 'GAS';
            font-size: 13vw;
            color: white;
            filter: url('#horizontal-blur');
            animation: jitter 0.1s infinite;

            &:hover {
                filter: none;
                animation: jiggle 0.1s forwards;
            }
        }

        & a, & a:visited {
            color: inherit;
            text-decoration: none;
            cursor: pointer;
        }

        #sun,
        #grass,
        #vignette {
            position: fixed;
            inset: 0;
            pointer-events: none;
        }

        #sun { background: radial-gradient(circle at left 20%, #ffffff 3%, #b5d2ff 6%, transparent 35%) no-repeat; }

        #grass {
            background: url('textures/grass.webp') center no-repeat;
            background-size: cover;
        }

        #vignette { background: radial-gradient(circle, transparent 80%, #14004f 120%) no-repeat; }

        #lens {
            position: fixed;
            width: 90vw;
            max-width: 300vh;
            height: 25vw;
            max-height: 60vh;
            pointer-events: none;
            --dot-bg: black;
            --dot-color: white;
            --dot-size: 0.2vh;
            --dot-space: 4vw;
            background:
                linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
                linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
                var(--dot-color);
            mix-blend-mode: lighten;
            --s: 4vh;
            --t: 0.5vh;
            padding: var(--t);
            outline: var(--t) solid white;
            outline-offset: calc(-1 * var(--t));
            mask: conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0 / calc(100% - var(--s)) calc(100% - var(--s)), linear-gradient(#000 0 0) content-box;

            &:after {
                content: '';
                position: absolute;
                width: calc(100% - 1vh);
                height: calc(100% - 1vh);
                background: radial-gradient(transparent 60%, #ffe2e2 100%) no-repeat;
            }
        }

        .cloud {
            position: fixed;
            height: 60vh;
            mix-blend-mode: screen;

            &:nth-of-type(1) { transform: translateX(-30vw) translateY(-60vh) rotateZ(45deg); }
            &:nth-of-type(2) { transform: translateX(-55vw) translateY(-35vh) rotateZ(190deg); }
            &:nth-of-type(3) { transform: translateX(40vw) translateY(-45vh) rotateZ(200deg); }
            &:nth-of-type(4) { transform: translateX(45vw) translateY(40vh) rotateZ(100deg); }
            &:nth-of-type(5) { transform: translateX(-35vw) translateY(40vh) rotateZ(10deg); }
        }

        & p {
            font-family: 'EVA', 'Times New Roman', Times, serif;
            position: absolute;
            color: white;
            font-size: 1.8vh; /* Man, I hope nobody has a monitor wider than 32:9... */
            text-align: center;
            text-shadow: 0 0 1vh #00154b;
            top: 85%;
            filter: blur(0.1vh);
        }
    }
}

@keyframes jiggle {
    0% { transform: translateX(1vh); }
    33% { transform: translateX(-2vh); }
    66% { transform: translateX(2vh); }
    100% { transform: translateX(-1vh); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes jitter {
    0% { transform: translateX(0); }
    20% { transform: translateX(-0.1vh); }
    40% { transform: translateX(0.1vh); }
    60% { transform: translateX(-0.05vh); }
    80% { transform: translateX(0.05vh); }
    100% { transform: translateX(0); }
}