@import url("/assets/fonts/inter.css");

:root {
    --accent: #b4befe;
    --text-color: black;
    --subtext-color: #666666;
    --hairline: #AAAAAA;
    --pitch: #FFFFFF;
    --background-color: #DDDDDD;
    --header-size: 20pt;
    --introduction-length: 0.75s;

    --easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
    --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);

    --navbar-height: calc(36px + var(--header-size));
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: white;
        --subtext-color: #999999;
        --hairline: #333333;
        --pitch: black;
        --background-color: #111111;
    }
}

html {
    overflow: hidden;
}

@keyframes body_light {
    0% { background-color: var(--pitch) }
    100% { background-color: var(--background-color) }
}

body {
    background-color: var(--background-color);

    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    margin: 0;
    animation: body_light var(--introduction-length) var(--easeOutQuint);
}

h1, h2, h3, h4, h5, p {
    font-family: "Inter", "Source Sans 3", "Source Sans Pro", sans-serif;
}

@keyframes nav_peek {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: none; opacity: 1; }
}

nav {
    height: var(--navbar-height);
    display: flex;
    position: fixed;
    left:0px;
    top:0px;
    width:100%;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hairline);
    animation: nav_peek var(--introduction-length) var(--easeOutQuint);

    z-index: 10000; /* lazy */
}

nav > .links {
    margin-left: auto;
    height: 100%;
    display: flex;
    gap: 18px;
    padding-right: 18px;
    align-items: center;
}

nav > .links > a {
    font-family: "Inter", "Source Sans 3", "Source Sans Pro", sans-serif;
    color: var(--text-color);
    font-weight: 200;
    font-size: 14pt;
    white-space:nowrap;

    transition-duration: 100ms;
    transition-property: text-decoration;
}

a {
    color: var(--subtext-color);
    text-decoration: solid transparent underline;

    transition-duration: 100ms;
    transition-property: text-decoration;
}

a:hover {
    text-decoration: solid var(--subtext-color) underline;

    transition-duration: 100ms;
    transition-property: text-decoration;
}

nav > h1 {
    margin: 0;
    display:flex;
    align-items: center;
    gap:7.5px;
    color: var(--text-color);
    font-size: var(--header-size);
    font-weight: 700;
    padding-left: 18px;
    white-space: nowrap;
}

nav > h1 > .owner {
    font-weight: 200;
}

nav > h1 > svg {
    height: var(--header-size);
    width: auto;
}

body > article {
    width: 100%;
}

body > article > #introduction {
    width: 100%;
    height: calc( 100vh - var(--navbar-height) );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: calc( var(--navbar-height) + 1px );
    gap: 10px;
    position:relative;
}

body > article > #introduction > h1, h2, h3 {
    margin: 0;
    text-align: center;
    max-width: calc(100% - 40px);
}

@keyframes intro_top {
    0% { transform: translateY(100%); opacity: 0; visibility: visible;}
    100% {transform: none; opacity: 1; visibility: visible;}
}

body > article > #introduction > h1 {
    color: var(--text-color);
    font-size: 50pt;
    animation: intro_top var(--introduction-length) var(--easeOutQuint);
}

body > article > #introduction > h2,
body > article > #introduction > h3 {
    color: var(--subtext-color);
    font-weight: 400;
    visibility: hidden;
}

body > article > #introduction > h2 {
    font-size: 18pt;
    animation: intro_top var(--introduction-length) var(--easeOutQuint) 0.25s 1 forwards;
}

body > article > #introduction > h3 {
    font-size: 14pt;
    animation: intro_top var(--introduction-length) var(--easeOutQuint) 0.5s 1 forwards;
}

@keyframes grad_intro_fade {
    0% { opacity: 0; top: 0px }
    100% { opacity: 0.2; top: calc( var(--navbar-height) + 1px ) }
}

body > article > #introduction > .gradient {
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, var(--accent) 0%, transparent);
    position: absolute;
    left:0px;
    top:calc( var(--navbar-height) + 1px );
    opacity: 0.2;
    animation: grad_intro_fade var(--introduction-length) var(--easeOutQuint);
}


@media screen and (max-width: 800px) {
    h1 > .owner {
        display: none;
    }

    body > article > #introduction > h1 {
        font-size: 40pt;
    }
}


@media screen and (max-width: 600px) {
    h1 > .app_name {
        display: none;
    }

    body > article > #introduction > h1 > span {
        display: none;
    }
}