/*******************************************************************************
    (1) Explore
*******************************************************************************/
#explore {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    background: linear-gradient(to bottom, #130B1E, #212136);
    cursor: wait;
}
.day #explore {
    background: linear-gradient(to bottom, #130B1E, #8cb3f0);
}

/* Intro Backgrounds */
#intro-day-background {
    display: none;
    opacity: 0;
    z-index: 1;
    background: linear-gradient(to bottom, #130B1E, #8cb3f0);
    animation: blinkIn 5.5s linear forwards;
    animation-delay: 6s;
}
.intro #intro-day-background { display: block; }
#intro-night-background {
    display: none;
    opacity: 0;
    z-index: 1;
    background: linear-gradient(to bottom, #130B1E, #212136);
    animation: blinkIn 5.5s linear forwards;
    animation-delay: 9s;
}
.intro #intro-night-background { display: block; }

/* Intro Text */
.intro-text {
    display: none;
    opacity: 0;
    position: absolute;
    width: 80vw;
    z-index: 3;
}
.intro .intro-text { display: block; }
#intro-txt-1 { /* Welcome! */
    animation: showText 2s linear;
    animation-delay: 1s;
}
#intro-txt-2 { /* My name... */
    animation: showText 3s linear;
    animation-delay: 3s;
}
#intro-txt-3 { /* By Day... */
    animation: showText 3.5s linear;
    animation-delay: 6s;
}
#intro-txt-4 { /* By Night... */
    animation: showText 3.5s linear;
    animation-delay: 9.5s;
}
#intro-txt-5 { /* I needed... */
    animation: showText 3.5s linear;
    animation-delay: 13s;
}
#intro-txt-6 { /* ...so I... */
    animation: showText 3.5s linear;
    animation-delay: 16.5s;
}
#intro-txt-7 { /* Come Explore... */
    animation: showText 3s linear;
    animation-delay: 20s;
}

/* Skip Button */
#skip-button {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 1rem;
    margin: calc(var(--margin) - 1rem);
    z-index: 10;

    /* font-weight: 400;
    font-size: 12px; */
    color: var(--dim-white);
    cursor: pointer;

    transition: opacity 1s ease-out, color 0.5s ease;
}
@media(hover: hover) and (pointer: fine) {
    #skip-button:hover { color: white; }
}
.intro #skip-button { display: block; }

/* Loader */
#page-loader {
    display: none;
    bottom: 0;
    right: 0;
    margin: 0 var(--margin);
}
.intro #page-loader { display: block; }

/* Dancer */
.svg-path {
    position: absolute;
    height: 100dvh;
    pointer-events: none;
    z-index: 2;
}
.fullscreen .svg-path {
    opacity: 0;
    pointer-events: none;
}
#dancer-path {
    --length: 2673.6435546875; /* use path.getTotalLength() */
    stroke: white;
    stroke-width: 1px;
    stroke-dasharray: var(--length) var(--length);
    stroke-dashoffset: var(--length);
    opacity: 0.5;

    animation: drawPath 22s ease-in forwards;
    transition: opacity 0.5s ease;
}

/* SVG Sky Mask */
#svg-sky-mask {
    display: none;
    z-index: 0;
    transition: opacity 0.3s ease-out;
}
.intro #svg-sky-mask { display: block; }


/* Main Page ******************************************************************/
/* Header */
#explore-header {
    position: absolute;
    top: 25dvh;
    font-weight: 300;
    transition: opacity 0.5s ease;
}
.intro #explore-header, .fullscreen #explore-header {
    opacity: 0;
    pointer-events: none;
}

/* Explore Text */
#explore-text {
    position: absolute;
    top: 25dvh;
    max-width: 80vw;
    z-index: 3;

    font-weight: 800;
    text-transform: uppercase;
    color: white;

    cursor: pointer;
    filter: drop-shadow(0px 0px 6px #ffffffaa);

    animation: bounce 5s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;

    transition: 0.5s ease;
}
.intro #explore-text, .fullscreen #explore-text {
    opacity: 0;
    pointer-events: none;
}
@media(hover: hover) and (pointer: fine) {
    #explore-text:hover {
        transform: scale(1.1);
        filter: drop-shadow(0px 0px 10px #ffffffaa);
    }
}

/* Thinker */
#thinker-container {
    position: absolute;
    bottom: calc(2*var(--margin));
    z-index: 3;
    animation: glow 5s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
    filter: drop-shadow(0px 0px 30px #ffffff);
}
.intro #thinker-container, .fullscreen #thinker-container {
    opacity: 0;
    pointer-events: none;
}
#thinker {
    height: 35vh;
    cursor: pointer;

    animation: bob 5s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
    transition: opacity 0.5s ease;
}


/* Icons ******************************************************************** */
/* Full Screen Icon */
.fullscreen-icon {
    position: absolute;
    aspect-ratio: 5 / 4;
    height: calc(var(--icon-size) * 2/3);
    top: calc(var(--margin) + var(--icon-size)*1/3/2);
    padding: 1dvh;
    /* left: var(--margin); */
    right: calc(3*var(--margin));
    z-index: 4;

    cursor: pointer;

    transition: opacity 0.2s ease-out, transform 0.5s ease-out;
}
.intro .fullscreen-icon {
    opacity: 0;
    pointer-events: none;
}
.fullscreen-icon > span {
    position: absolute;
    width: 35%;
    height: 35%; /* make height same as width*/
    border: 2px solid var(--dim-white);

    transition: 0.2s ease-out, border-color 0.5s ease-out;
}
.fullscreen-icon > span:nth-child(1) {
    top: 0;
    left: 0;
    border-style: solid none none solid;
}
.fullscreen-icon > span:nth-child(2) {
    top: 0;
    right: 0;
    border-style: solid solid none none;
}
.fullscreen-icon > span:nth-child(3) {
    bottom: 0;
    left: 0;
    border-style: none none solid solid;
}
.fullscreen-icon > span:nth-child(4) {
    bottom: 0;
    right: 0;
    border-style: none solid solid none;
}
@media(hover: hover) and (pointer: fine) {
    .fullscreen-icon:hover { transform: scale(1.1); }
    .fullscreen-icon:hover > span { border-color: white; }
}




/* Button Bar *************************************************************** */
#button-bar {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    height: var(--icon-size);
    margin: var(--margin);
    padding-left: calc(var(--margin) + var(--icon-size));
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    transition: opacity 0.5s ease;
}
/* @media(hover: hover) and (pointer: fine) {
    #button-bar { padding-left: calc(7*2px + 8*2px + 2*var(--margin)); }
} */
.intro #button-bar {
    opacity: 0;
    pointer-events: none;
}
.icon {
    --color: var(--dim-white);
    cursor: pointer;
    transition: 0.5s ease-out;
    margin: 0 calc(var(--margin)/2);
}
.icon > path { fill: var(--color); }
@media(hover: hover) and (pointer: fine) {
    .icon:hover { --color: white; transform: scale(1.1); }
}

.icon-text {
    opacity: 0;
    position: absolute;
    top: calc(1.5 * var(--margin));
    left: 0;
    padding: 0.75dvh 0;
    
    font-size: 2dvh;
    color: var(--dim-white);

    transform: translateX(-25%);
    transition: 0.5s ease;
}
.icon:hover + .icon-text {
    opacity: 1;
    transform: translateX(0);
}


/* Email Icon */
#email-icon {
    width: var(--icon-size);
    margin-left: 0;
}



/* Game Icon */
#game-icon {
    width: var(--icon-size);
}


/* Book Icon */
#book-icon {
    height: calc(var(--icon-size)*3.75/4);
}



/* File Icon */
#file-icon {
    --color: var(--dim-white);
    height: var(--icon-size);
}
#file-text { --show-file: 0; }



/* Folder Icon */
/* #portfolio { display: none; } */
#folder-icon {
    height: calc(var(--icon-size)*3.5/4);
}
#folder-text { --show-folder: 0; }








/* Contact Modal ************************************************************** */
#contact-form {
    position: absolute;
    max-height: 90dvh;
    max-width: 90vw;
    padding: var(--margin);
    background-color: #32374ef5;
    border-radius: calc(var(--margin)/2);
    font-size: calc(var(--icon-size)/2);
    text-align: left;
    color: white;
    transition: opacity 1s ease;
    z-index: 6;
}
#contact-close-button {
    position: absolute;
    width: var(--icon-size);
    aspect-ratio: 1;
    font-size: var(--icon-size);
    right: 0;
    top: 0;
    cursor: pointer;
}
#contact-form textarea {
    max-width: 70vw;
    width: 50dvh;
    height: calc(var(--icon-size)*4);
    margin-bottom: 2dvh;
    resize: none;
    font-family: "Montserrat", Helvetica, sans-serif;
    font-size: calc(var(--icon-size)/2.25);
}
#contact-form input {
    max-width: 70vw;
    width: 50dvh;
    height: var(--icon-size);
    margin-bottom: 1dvh;
    font-family: "Montserrat", Helvetica, sans-serif;
    font-size: calc(var(--icon-size)/2.25);
}
#contact-form button {
    aspect-ratio: 3;
    height: var(--icon-size);
    font-family: "Montserrat", Helvetica, sans-serif;
    font-size: calc(var(--icon-size)/2.5);
    cursor: pointer;
}
#contact-email {
    padding-bottom: 2dvh;
    cursor: pointer;
    transition: 0.5s ease;
}
@media(hover: hover) and (pointer: fine) {
    #contact-email:hover { color: var(--dim-white); }
}

#success-message {
    position: absolute;
    min-width: 60vw;
    top: 50%;
    left: 50%;
    text-align: center;
    text-transform: none;
    color: white;
    transform: translate(-50%, -50%);
}
#return-message {
    text-align: center;
    padding: 1vh;
}


/* Stars ***********************************************************************/
/* Canvas */
canvas {
    display: none;
    position: absolute;
    z-index: 2;
    @media (pointer: fine) { display: block; }
}

/* Boid Settings */
#settings p { display: inline; }
#settings {
    position:absolute;
    max-width: 60vw;
    max-height: 80dvh;
    padding: 5dvh;
    z-index: 5;

    text-align: left;
    text-transform: lowercase;
    background-color: #32374ef5;
    border-radius: calc(var(--margin)/2);
    color: white;

    overflow: clip;

    transition: 1s ease;
}