/*
    Lord, forgive me of my transgressions. 
    I have yet again commited the cardinal 
    sin of basing all units upon the view-
    port.  Please save the hearts of those
    folks still lost using Firefox ESR and
    unable to render the newer CSS nesting
    and smooth viewport calculations. Last
    request, my Lord, I pray you bless our
    Chromium stylesheets with masonry lay-
    out in the near future. In your name I
    pray:
    
    &:after { 
        content: 'Amen.'; 
    }
*/

@font-face {
    /* https://www.dafont.com/yagiza.font */
    font-family: 'yagiza';
    src: url('../fonts/Yagiza.woff') format('woff'),
         url('../fonts/Yagiza.woff2') format('woff2'),
         url('../fonts/YAGIZA__.TTF') format('truetype'); /* Some browsers are having trouble rendering this font. Hm. */
    font-display: swap;
}

@font-face {
    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 {
    /* https://www.dafont.com/vcr-osd-mono.font */
    font-family: 'OSD';
    src: url('../fonts/VCROSDMono.woff2') format('woff2'),
         url('../fonts/VCR_OSD_MONO_1.001.ttf') format('truetype'); 
        /* ...honestly, should I even bother referencing the TTFs? I mean, sure, they scale better... but at what cost? */
    font-display: swap;
}

:root {
    --shadow: 0.15vh;
    --shadow-color: #8ea17e;
    --lcd-color: black;
    --bivert-text-shadow:
        calc(-1 * var(--shadow)) calc(-1 * var(--shadow)) var(--shadow-color),
        0 calc(-1 * var(--shadow)) var(--shadow-color),
        calc(-1 * var(--shadow)) 0 var(--shadow-color);
    --eggshell-path: polygon(
        0% 0%, 10% 10%, 20% 0%, 30% 10%, 40% 0%, 50% 10%, 60% 0%, 70% 10%, 80% 0%, 90% 10%, 100% 0%,
        100% 100%, 90% 90%, 80% 100%, 70% 90%, 60% 100%, 50% 90%, 40% 100%, 30% 90%, 20% 100%, 10% 90%, 0% 100%
    );
}

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%;
    text-rendering: geometricPrecision;
    user-select: none;

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

    & a {
        color: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    & body {
        position: fixed;
        z-index: 0;
        width: 100vw;
        height: var(--full-height);
        overflow: hidden;
        background: radial-gradient(
            circle at center,
            #fee1e1 0%,
            #f4f8ff 33%,
            #a0a0b0 50%
        );
        background-size: 200% 200%;
        background-position: 50% 50%;
        font-family: 'OSD', 'Courier New', Courier, monospace;
        font-size: 2vh;
        font-weight: bold;
        animation: spot-light 1s ease-in-out forwards;

        &:after {
            content: '';
            position: absolute;
            z-index: 20;
            inset: 0;
            background: black;
            opacity: 0;
            animation: fade-in 1s ease-in-out forwards;
            pointer-events: none;
        }
    }
}

@keyframes spot-light {
    from { 
        background-position-x: 100%; 
    }
    from { 
        background-position-x: 0%; 
    }
}

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

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

#egg {
    /* Uses subtle gradients and pseudo elements for the actual egg shape. */
    --egg-height: var(--full-height);
    --top-height: calc(var(--egg-height) * 0.5);
    --egg-width: calc(var(--top-height) * 1.25);
    --egg-gradient: #cdd1de 40%, #e5e6ed 60%, #d2d3de 69%, #d8d9dd 75%;

    display: grid;
    place-items: center;
    pointer-events: none;

    &:before,
    &:after {
        content: '';
        position: absolute;
        width: var(--egg-width);
        border-bottom: 0;
        z-index: 0;
    }

    &:before {
        bottom: calc(40vh - (var(--top-height) - 50vh));
        height: var(--top-height);
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        background: radial-gradient(ellipse at bottom, var(--egg-gradient));
    }

    &:after {
        top: calc(60vh + (var(--top-height) - 50vh));
        height: calc(var(--egg-width)/2);
        border-radius: 0 0 50% 50% / 0 0 100% 100%;
        background: radial-gradient(ellipse at top, var(--egg-gradient));
    }

    & div {
        /* These <div>'s add subtle reflections. */
        position: absolute;

        &:nth-of-type(1) {
            z-index: 10;
            width: 50vh;
            height: 60vh;
            border-radius: 50%;
            background: linear-gradient(
                110deg,
                #ededf1 15%,
                transparent 20%,
                transparent 50%,
                #ededf1 85%
            );
            filter: blur(1vh);
            mix-blend-mode: color-dodge;
            opacity: 0.7; /* Fallback */
            animation: egg-light 1s ease-in-out forwards;
        }

        &:nth-of-type(2) {
            z-index: 2;
            width: 55vh;
            height: 75vh;
            border-radius: 50%;
            background: radial-gradient(
                circle at center,
                transparent 70%,
                #eae2e2 75%
            );
            transform: rotateZ(-10deg) translateX(1vh);
            filter: blur(2vh);
            opacity: 0.7; /* Fallback */
            animation: egg-light 1s ease-in-out forwards;
        }
    }
}

@keyframes egg-light {
    from { 
        transform: translateX(-10vh); 
        opacity: 0;
    }
    to { 
        transform: translateX(0);
        opacity: 0.7;
    }
}

#bezel,
#bezel-inset div {
    width: 43vh;
    height: 43vh;
    border-radius: 20%;
    clip-path: var(--eggshell-path);
}

#bezel {
    position: absolute;
    z-index: 3;
    background: linear-gradient(
        170deg,
        #303030 0%,
        black 85%
    );
    box-shadow: inset 0.5vh 0 1vh black, inset 0 0.5vh 1vh black;
}

#bezel-inset {
    /* Adds subtle 3D effect behind the black bezel */
    position: absolute;
    z-index: 2;
    filter: blur(0.2vh);

    & div {
        background: linear-gradient(
            90deg,
            #b6c6ce 15%,
            #c8b8b8 85%
        );
        transform: scale(1.03);
    }
}

.modal:not(:target) {
    display: none;

    & .buttons div {
        /* Remove redundant shadows when hidden */
        box-shadow: none;
    }
}

#screen,
#mail,
#info,
#note {
    /* Common modal box properties */
    position: absolute;
    z-index: 6;
    width: 30vh;
    height: 30vh;
    border-radius: 2vh;
    background: linear-gradient(
        100deg,
        #d3dda1 16%,
        #c3c3b0 100%
    );
    box-shadow: inset 0.5vh 0.5vh 0.5vh #90ab4c;
}

#mail {
    & p:nth-of-type(2) {
        text-align: center;
    }

    & span {
        font-family: 'EVA';
    }
}

.content-area {
    position: absolute;
    width: 92%;
    height: 85%;
    margin-bottom: 10%;
    padding: 5%;
    text-shadow: 0.2vh 0.1vh 0.1vh #8ea17e;
}

#screen {
    /* Additional screen effects */
    z-index: 4;
    box-shadow: 0 0.5vh 1vh #2d2d2d, 0 -0.5vh 2vh black, inset 0.5vh 0.5vh 0.5vh #90ab4c;

    & h1 {
        font-size: 3vh;
        text-align: center;

        & span {
            font-family: 'yagiza';
            font-weight: normal;
        }
    }
}

#screen-burn {
    /* Adds a greenish 'burn-in' effect using mix-blend-mode */
    position: absolute;
    z-index: 15;
    width: 30vh;
    height: 30vh;
    border-radius: 2vh;
    background: radial-gradient(
        circle at top right,
        #006711 0%,
        transparent 100%
    );
    mix-blend-mode: difference;
    pointer-events: none;
}

.buttons {
    position: fixed;
    z-index: 4;
    top: 61vh;

    @supports (top: 61svh) {
        top: 61svh;
    }

    width: 30vh;
    height: 20vh;
    text-shadow: 0.2vh 0.1vh 0.1vh #8ea17e;

    & > a {
        width: 6vh;
        height: 100%;
        margin: 0 2vh;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;

        & div {
            /* Circular button properties */
            position: relative;
            width: 6vh;
            height: 6vh;
            border-radius: 50%;
            background: radial-gradient(
                circle,
                maroon 40%,
                #940000 60%,
                black 70%
            );
            box-shadow: 0 0 2vh #deb1b1;
        }

        &:active {
            & p {
                display: inline;
                font-weight: normal;
                color: #d3dda1;
                background: black;
                border-left: 0.5vh solid black;
                border-right: 0.5vh solid black;
                text-shadow: var(--bivert-text-shadow);
                box-shadow: 0.2vh 0.1vh 0.1vh var(--shadow-color);
            }

            & div {
                background: radial-gradient(
                    circle,
                    #630000 40%,
                    maroon 50%,
                    black 70%
                );
            }
        }
    }
}

#exclusion {
    /* Hidden exclusion zone for button-screen interaction */
    position: absolute;
    z-index: 20;
    top: 63vh;

    @supports (top: 63svh) {
        top: 63svh;
    }

    width: 30vh;
    height: 12vh;
}