@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: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: black;
    
    /* Slow scroll behavior */
    scroll-snap-type: none;

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

    & body {
        position: relative;
        z-index: 0;
        width: 100vw;
        min-height: var(--full-height);
        overflow-x: hidden;
        overflow-y: auto;
        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: flex-start;
        padding: 0;
        margin: 0;

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

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

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

        #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; }


        .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);
        }

        #copyable {
            cursor: pointer;
            user-select: text;
            display: inline-block;
            transition: all 0.3s ease;
            position: relative;
            padding: 0.2vh 0.5vh;
            border-radius: 0.3vh;
            
            &:hover {
                background: rgba(255, 255, 255, 0.2);
                transform: scale(1.05);
                text-shadow: 0 0 1.5vh #4a9eff, 0 0 2vh #4a9eff;
            }

            &:active {
                transform: scale(0.95);
            }

            .tick {
                margin-left: 0.5vh;
                opacity: 0;
                transition: opacity 0.2s ease;
                font-size: 0.6em;
            }

            &.copied .tick {
                opacity: 1;
            }
        }
    }
}

@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); }
}

/* Smooth slow scrolling */
* {
    scroll-behavior: smooth;
}

/* Prevent scrolling past bottom */
html {
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
}

body {
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    padding: 0;
    margin: 0;
}

/* Prevent elastic scrolling on iOS/Safari */
@supports (-webkit-overflow-scrolling: touch) {
    html, body {
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
    }
}