@import url('https://fonts.googleapis.com/css2?family=Handjet:wght,ELSH@100..900,2&display=swap');

:root {
    margin: 0;
    --desc-offset: 15%;
}

body {
    background-color: black;
    display: flex;
    min-height: 100vh;
    overflow: hidden;
    min-width: 100vh;
    justify-content: center;
    align-items: center;
}

@keyframes sidescroll {
    0% {
        left: 0%;
        transform: rotateY(0deg);
    }
    100% {
        left: 100%;
        transform: rotateY(720deg);
    }
}

@keyframes armInFromLeft {
    0% {
        left: -350px;
        opacity: 0;
    }
    100% {
        left: -80px;
        opacity: 1;
    }
}

@keyframes armInFromRight {
    0% {
        right: -350px;
        opacity: 0;
    }
    100% {
        right: -80px;
        opacity: 1;
    }
}

.emerging {
    z-index: 1;
    top: 50%;
    width: 350px;
    height: 550px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: center center;
}

#scrolling-desc {
    position: fixed;
    color: white;
    bottom: var(--desc-offset);
    left: 0%;
    max-height: 1em;
    overflow: hidden;
    animation: sidescroll linear 15s infinite;
}

#eyes-grid {
    display: grid;
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 0;

    grid-template: repeat(6, 1fr) / repeat(8, 1fr);
    grid-template-areas:  "a00 a01 a02 a03 a04 a05 a06 a07"
                "a10 a11 a12 a13 a14 a15 a16 a17"
                "a20 a21 a22 a23 a24 a25 a26 a27"
                "a30 a31 a32 a33 a34 a35 a36 a37"
                "a40 a41 a42 a43 a44 a45 a46 a47"
                "a50 a51 a52 a53 a54 a55 a56 a57";
    column-gap: 10px;
}

.eye-container {
    background-image: url("./data/eyefull.png");
    background-position: center;
    background-size: 93%;
    background-repeat: no-repeat;
    transition: filter 0.8s ease-in-out;
}

.eye-container:hover {
    filter: invert();
}

#title-container {
    display: inline-flex;
    z-index: 1;

    justify-self: center;
    align-self: center;

    justify-items: center;
    align-items: center;
    background-color: black;
    border-radius: 20%;
    box-shadow: inset 0 0 1em 0.2em white;
    
}

#continue-button {
    align-self: flex-end;
    justify-self: center;
    color: white;
    position: fixed;
    z-index: 2;
    left: 45.2vw;
    width: 10%;
    text-align: center;
    height: fit-content;
    bottom: 35%;
    font-size: 2em;
    border: 1px solid white;
    box-shadow: inset 0 0 0.1em 0.2em white;

    cursor: crosshair;
}

#continue-button:hover {
    transition: box-shadow 1s;
    box-shadow: inset 0 0 0.2em 0.3em white;
}

#main-title {
    font-size: 3em;
    width: 100%;
    color: #e0dde7;
    font-family: 'Handjet', monospace;
    text-align: center;
    position: relative;
    transform: translateY(-20px);
    opacity: 0%;
}

 
#wing-left, #wing-right {
    min-width: 400px;
    min-height: 400px;
    display: inline;
    background-image: url("./data/wing1.png");
    background-size: 400px;
    filter: invert();
    transform: rotateZ(45deg);
}

#main-title.transition-init {
    transition: transform 1s ease-in,
                opacity 1s ease-out;
    transform: translateY(20px);
    opacity: 90%;
}

#wing-left.transition-init, #wing-right.transition-init {
    transition: transform 2s ease-out;
    transform: rotateZ(0deg);
}

#wing-left {
    scale: -1 1;
}