/* 

develop.css
by Aiden Melton

!! THIS IS NOT A PUBLIC STYLESHEET.              !!
!! THIS IS USED PURELY FOR DEVELOPMENTAL PURPOSES. !!

*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

/* Variables */
:root {
    --fonts: 'Poppins', Arial, Helvetica, sans-serif;
    --nav-height: 56px;
    --full-screen-height: calc(100vh - 64px);
    --max-full-screen-height: 1600px;

    /* Limitations */
    --max-height: 1600px;
    --mobile-width: 800px;
    --mobile-height: 90vh;
    --section-height: calc(100vh - 32px - var(--nav-height));

    --default-transition: 250ms ease-out;
    --border-radius: 3.6em;

    /* Sizing */
    --container-max-height: 1600px;
    --container-max-width: 1600px;
    --whitespace: 5vh;

    /* Color Pallete */
    --background: #fff;
    --black-primary: #02040f;
    --black-secondary: #006eff;
    --white-primary: #fff;
    --white-secondary: #ebebeb;

    /* Clear Elements */
    --transparency-hover: #ffffff20;
    --transparency-primary: #02040f50;
    --transparency-secondary: #ffffff50;

    /* Misc */
    --blur-effect: blur(16px) saturate(120%);
    --border: 1px solid var(--transparency-secondary);
    --bezier-curve: cubic-bezier(.11,.89,.41,1.36);
}

/* 

    1. Essentials

*/

* {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    background: var(--background);
    margin: 0;
    font-family: var(--fonts);
    font-size: 16px;
    color: #252525;
    transition: background var(--default-transition);
}

/* 

    2. Text Styles

*/

h1, h2, h3 {
    margin: 0;
}

h1 {
    color: var(--primary);
}

h2 {
    color: var(--black-primary);
    font-size: 2.8em;
    line-height: 1em;
    letter-spacing: -.025em;
}

h3 {
    color: var(--white-primary);
    font-size: .8em;
    line-height: 1em;
}

h4 {
    color: var(--black-secondary);
    margin-block-start: .4em;
    margin-block-end: .4em;
}

    /* Specific Text Styles */
    #section-title {
        color: var(--black-primary);
        font-size: 1.2em;
        font-weight: 600;
        letter-spacing: -.02em;
        
        top: 16px;
        right: var(--whitespace);
        position: fixed;
        
        height: var(--nav-height);
        width: 100vw;

        text-align: center;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        z-index: 4;

        opacity: 0;
        transform: translateX(0.5em);
        filter: blur(8px);
        transition: all 250ms var(--bezier-curve);

        &.active {
            letter-spacing: 0;
            filter: blur(0);
            transform: translateX(0);
            opacity: 1;
        }
    }

p {
    color: var(--white-secondary);
}

/* 

    3. Navigation

*/

nav {
    background: var(--transparency-primary);

    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);

    display: flex;
    justify-content: center;
    align-items: center;

    width: auto;
    height: var(--nav-height);
    padding: 0 8px 0 16px;

    border: var(--border);
    border-radius: 48px;

    z-index: 10;
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);

    transition: all 400ms var(--bezier-curve);
    -webkit-transition: all 400ms var(--bezier-curve);

    /* Navigation Properties */
    &.hide {
        margin-top: -16px;
        filter: blur(8px);
        -webkit-filter: blur(8px);
        padding: 0 12px 0 24px;
        opacity: 0;
    }

    &.aside {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        left: var(--whitespace);
    }

    /* Children */
    & ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row;
        padding-inline-start: 28px;
    }

    & li {
        color: var(--white-primary) !important;
        font-family: var(--fonts);
        font-weight: 500;
        list-style: none;

        border-radius: 16px;
        padding: 4px 12px;
        margin-right: 8px;

        transition: 400ms ease-out;

        &:hover {
            cursor: pointer;
            background: var(--transparency-hover);
        }
    }

    & h1, & .nav-header h1 {
        display: none;
    }
}

/* Mobile Navigation */
.mobile-nav {
    display: none !important;
    position: fixed;
    bottom: var(--whitespace);
    right: var(--whitespace);

    width: 5.6em;
    height: 5.6em;

    padding: 1.4em;

    border: var(--border);
    border-radius: 120px;
    background: var(--transparency-primary);
    color: var(--white-primary);
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;

    transition: all 250ms var(--bezier-curve);

    cursor: pointer;

    z-index: 11;

    backdrop-filter: var(--blur-effect);

    & ul {
        margin-block: 0;
        padding-left: 0;
        display: flex;
        justify-content: space-around;
        align-content: center;
        flex-direction: column;
        width: 100%;
        height: 100%;

        & li {
            transition: all 250ms var(--bezier-curve);
            transition: background-color 0s !important;

            height: 2px;
            width: 100%;
            background-color: var(--white-primary);
            border-radius: var(--border-radius);
            font-size: 1.2em;
            
            list-style: none;
            padding-block: 0;

            & a {
                font-weight: 500;
                pointer-events: none;
                user-select: none;
                text-decoration: none;
                color: transparent;
            }
        }
    }
    

    &.toggled {
        width: auto;
        height: auto;
        border-radius: 26px;
        padding: .5em;

        & ul {
            gap: .25em;

            & li {
                transition: all 400ms var(--bezier-curve);
                transition: all 250ms ease-out !important;

                background-color: transparent;
                border-radius: var(--border-radius);
                padding: .4em 2em;
                width: auto;
                height: auto;
                text-align: center;

                &:hover {
                    background-color: var(--transparency-secondary);
                }

                & a {
                    color: var(--white-secondary);
                }
            }
        }
    }
}

    /* Other */
    nav a, a.active_link {
        color: #ffffff;
        text-decoration: none;
    }

    .nav-menu {
        width: 24px;
        height: 24px;
        display: none;
        justify-content: center;
        align-items: center;
    }

/* 

    4. Header 
    
*/

header {
    color: var(--white-primary);
    background-color: var(--white-primary);
    
    height: calc(100vh - var(--whitespace));
    max-height: var(--max-full-screen-height);
    
    margin: var(--whitespace);
    margin-bottom: 0;

    & .background {
        
        position: absolute;
        top: var(--nav-height);
        left: 50%;
        transform: translateX(calc(-50% - 8px));

        display: block;
        width: calc(100% - calc(2 * var(--whitespace)));
        max-width: var(--container-max-width);

        height: calc(100vh - calc(2 * var(--whitespace)));
        max-height: var(--max-full-screen-height);
        
        overflow: hidden;
        border-radius: var(--border-radius);

        & img {
            position: absolute;
            left: 0;
            top: 0;
            width: calc(100% + 16px);
            height: calc(100% + 16px);
            object-fit: cover;

            &#bg {
                z-index: 1;
                filter: contrast(1.2) brightness(.8);
            }

            &#cutout {
                width: calc(100% + 36px);
                height: calc(100% + 36px);
                z-index: 5;
                transform: translate(-16px, -16px)
            }
        }
    }

    & aside {
        position: absolute;
        left: var(--whitespace);
        top: calc(2.4em + var(--nav-height));
        max-width: 256px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        z-index: 3;

        & svg {
            width: 100%;

            & path {
                transition: stroke-dashoffset 2s ease-in-out;
                stroke: var(--white-primary);
                stroke-dasharray: 1010;
                stroke-dashoffset: -1010;
                fill: none;
            }
        }

        & p {
            margin-block: 0;
            font-size: 1.6em;
            line-height: 1.2em;
            margin-block-start: 1.2em;
            font-weight: 500;
        }
    }

    & #h-cursor {
        border-radius: 100%;
        box-shadow: 0 0 32px 32px var(--white-primary), 0 0 68px 68px var(--white-secondary);
        background-color: var(--white-primary);
        mix-blend-mode: overlay;

        position:fixed;
        pointer-events: none;

        width: 0;
        height: 0;

        z-index: 4;
    }
}

header.active path {
    stroke-dashoffset: 0;
}

/* 

    5. Containers & Large Content

*/

/* Grid Blocks */
.grid-block {

    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--whitespace);
    padding-top: 0;

    & div {
        display: grid;
        grid-template-columns: 1fr 2fr;
        overflow: hidden;

        background: var(--white-secondary);
        width: 100%;
        max-width: var(--container-max-width);

        border: var(--border);
        border-radius: var(--border-radius);

        & section {
            padding: var(--whitespace);

            & p {
                color: var(--black-primary);
                font-weight: 500;
                font-size: 1em;
                margin-block: .4em;
            }

            & svg {
                height: 1.4em;
                transform: translateY(.25em);

                & path {
                    fill: var(--black-secondary)
                }
            }

            & h4 {
                display: inline;
            }
        }  

        & span {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50%;
        }
    }
    

}

/* Carousel */
.carousel {
    width: 100vw;
    height: 100vh;
    max-height: var(--max-full-screen-height);

    & ul {
        display: flex;
        transition: transform 250ms ease-in;
        padding-inline: var(--whitespace);
        height: calc(var(--section-height) - var(--nav-height));
        margin: 0;
        padding-top: 16px;
    }

    & li {
        width: 50vw;
        min-width: calc(var(--mobile-width) - var(--whitespace) - 32px);
        flex-shrink: 0;

        position: relative;

        list-style: none;
        margin-right: 16px;

        background: var(--black);
        border-radius: var(--border-radius);
        overflow: hidden;

        &:hover .details {
            filter: blur(0) drop-shadow(0 0 16px #000000);
            -webkit-filter: blur(0) drop-shadow(0 0 16px #000000);
            margin-bottom: 0;
            opacity: 1;
        }

        &:hover .hover-content {
            opacity: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }

    & img {
        display: inline;
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-radius: var(--border-radius);
        background: #000;

        &.hover-content {
            position: absolute;
            left: -16px;
            top: -16px;
            width: calc(100% + 32px);
            height: calc(100% + 32px);
            opacity: 0;
            transition: all 400ms ease-out;
        }
    }

    & .details {
        position: absolute;
        bottom: 0;
        left: 0;

        max-width: 50%;

        padding: 2.4em;

        filter: blur(4px) drop-shadow(0 0 16px #000000);
        -webkit-filter: blur(4px) drop-shadow(0 0 16px #000000);
        margin-bottom: -8px;
        opacity: 0;

        transition: var(--default-transition);
        -webkit-transition: var(--default-transition);

        z-index: 4;

        & h6 {
            color: var(--transparency-secondary);
            margin-block: .8em;
        }

        & h2 {
            color: var(--white-primary);
            margin-block: 0;
        }

        & p {
            color: var(--white-secondary);
            font-size: 1.2em;
            margin-block: 0.4em;
        }

        & .logo {
            height: 2.8em;
            width: 2.8em;
            border-radius: 0;
            object-fit: contain;
            display: inline;
            margin-right: .8em;
            background: transparent;
        }
    }

    & .controls {
        left: 0;
        height: var(--nav-height);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    
        & .dot {
            width: 12px;
            height: 12px;
            border: 1px solid var(--transparency-primary);
            border-radius: 100%;
            cursor: pointer;
            transition: background 250ms ease-out;

            &.active {
                background: var(--black-primary);
            }
        }
    }
}

/* Photo Block */
.photo-block {
    border-top: solid 8px #f8f8f8;
    border-bottom: solid 8px #f8f8f8;

    width: calc(100vw - 96px - 16px);
    max-width: var(--container-max-width);

    padding: 48px 48px 0 48px;
    margin-bottom: -24px;
    background-color: var(--default-white);

    overflow-x: hidden;
    position: relative;
    height: var(--full-screen-height);

    display: block;
    position: relative;

    & .fs-sticky {
        height: var(--full-screen-height);
        width: 100%;
        max-width: var(--container-max-width);
        top: 64px;
        overflow: hidden;
        display: block;
    }

    & .fs-img img {
        position: absolute;

        height: calc(var(--full-screen-height) - 48px);
        max-height: var(--container-max-height);

        object-fit: cover;
        object-position: center;
        transition: 600ms ease-out;

        border-radius: 2px;

        width: calc(100%);
        max-width: var(--container-max-width);
        
        left: 50%;
        transform: translateX(-50%);

        animation: 1000s linear infinite home-cruisephoto;
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }

    & .fs-details {
        width: var(--container-max-width);
        color: #fff;
        position: absolute;
        height: calc(var(--full-screen-height) - 48px);
        max-height: var(--container-max-height);
        z-index: 5;
        opacity: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        transition: 600ms ease-out;
        left: 50%;
        animation: 1000s linear infinite home-cruisephotodetails;
        -webkit-animation-play-state: paused;
        animation-play-state: paused;

        & h1 {
            font-size: 8rem;
            text-align: center;
            padding: 0 16px;
            letter-spacing: -10px;
            line-height: 7rem;
            margin-bottom: -16px;
            /* text-shadow: 0 0 8px 8px #000; */
        }

        & p {
            font-size: 32px;
        }
    }
}

    /* Photo Block Animation */
    @keyframes home-cruisephoto {
        0% {
            border-radius: 0px;
            filter: saturate(100%);
            width: 100%;
        }

        30% {       
            filter: saturate(0%);
            border-radius: 16px;
            width: calc(-64px + 100%);
        }

        100% {
            filter: saturate(0%);
            border-radius: 16px;
            width: calc(-64px + 100%);
        }
    }

    @keyframes home-cruisephotodetails {
        0% {
            transform: translateX(-50%) translateY(120px) scale(80%);
            filter: blur(16px);
            -webkit-filter: blur(16px);
            opacity: 0;
        }
        25% {
            transform: translateX(-50%) translateY(0) scale(80%);
            filter: blur(16px);
            -webkit-filter: blur(16px);
            opacity: 0;
        }

        80% {
            transform: translateX(-50%);
            filter: blur(0);
            -webkit-filter: blur(0);
            opacity: 1;
        }

        90% {
            transform: translateX(-50%);
            opacity: 1;
        }

        100% {       
            transform: translateX(-50%) scale(100%);
            filter: blur(0);
            -webkit-filter: blur(0);
            opacity: 0;
        }
    }

/* Big Idea Containers */
.big-idea {
    padding: var(--whitespace);

    & .type-box {
        max-width: calc(var(--container-max-width)/2);
    }

    & h1 {
        color: var(--black-primary);
        font-size: 4.8em;
        line-height: 1em;
        max-width: 100%;
        word-break:break-word;
    }

    & p {
        color: var(--black-primary);
        font-size: 1.6em;
        line-height: 1em;
        opacity: 0;

        transition: var(--default-transition);
        filter: blur(4px);
        -webkit-filter: blur(4px);
        margin-bottom: -8px;
        opacity: 0;
    }

    & .switch {
        transition: var(--default-transition);
        filter: blur(4px);
        -webkit-filter: blur(4px);
        margin-bottom: -8px;
        opacity: 0;
        
        user-select: none;
        pointer-events: none;
    }

    &.typing-complete p, &.typing-complete .switch {
        filter: blur(0);
        -webkit-filter: blur(0);
        margin-bottom: 0;
        opacity: 1;

        
        user-select: unset !important;
        pointer-events: unset !important;
    }
}

/* Corner Notifications */
.notification, .css-container {
    display: block;
    position: fixed;
    bottom: 0;
    left: 24px;

    width: auto;
    margin-bottom: 32px;

    height: auto;
    z-index: 200;

    &:hover {
        cursor: default;
    }

    & .notify-container {
        background: var(--transparency-primary);
        color: var(--default-white);
        border: var(--border);

        border-radius: 36px;
        backdrop-filter: blur(16px) saturate(120%);
        -webkit-backdrop-filter: blur(16px) saturate(120%);

        flex-direction: row;
        align-items: center;
        justify-content: center;

        padding: 12px 24px;
        width: auto;
        transition: 350ms ease-out;

        opacity: 0%;
        transform: translateY(16px);
        display: flex;

        &:hover {
            box-shadow: 0 0 16px #25252520;
            cursor: pointer;
        }

        &.active {
            opacity: 100%;
            transform: translateY(0px);
        }

        & h6, & p {
            color: #fff;
            margin: 0;
            line-height: 16px;
        }

        & p {
            font-size: 0.8rem;
            margin-top: 0;
            max-width: 128px;
        }

        & .switch {
            z-index: 10;
            display: inline-block;
            position: relative;
            width: 54px;
            height: 34px;
            margin-left: 16px;

            & input {
                opacity: 0;
                width: 0;
                height: 0;
            }

            & .slider {
                position: absolute;
                cursor: pointer;

                border-radius: 100%;

                top: 0;
                left: 0;
                right: 0;
                bottom: 0;

                border-radius: 24px;
                background-color: #ccc;
                transition: 250ms;

                &::before {
                    position: absolute;
                    content: "";
                    height: 26px;
                    width: 26px;
                    left: 4px;
                    top: 4px;
                    border-radius: 100%;

                    background-color: white;
                    transition: 400ms;
                }
            }
            
            & input:checked + .slider {
                background-color: #54a8ff;
            }

            & input:checked + .slider:before {
                transform: translateX(20px);
            }
        }
    }
}

/* Overlay / More Details */
.overlay {
    display: none;
    width: 100vw;
    height: 100vh;

    opacity: 0;

    position: fixed;
    top: 0;
    left: 0;

    z-index: 10;
    background: var(--transparency-primary);
    backdrop-filter: var(--blur-effect);
    -webkit-backdrop-filter: var(--blur-effect);
    
    transition: 400ms ease-out;
    transition-property: opacity;

    &.active {
        display: block;
        opacity: 1;
    }

    & ul {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: var(--nav-height);

        border: var(--border);

        margin-block: 0;
        padding-inline: 0;
        border-radius: var(--border-radius);

        width: calc(100% - 48px);
        height: calc(100% - 24px - var(--nav-height));
        background-color: var(--transparency-primary);
    }
}


/* 

    6. Footer

*/

footer {
    width: 100vw;
    padding: var(--whitespace);
    background-color: var(--white-primary);
    color: var(--black-primary);
    display: flex;
    justify-content: center;
    align-items: flex-start;

    & .footer-contents {
        max-width: var(--container-max-width);
        width: 100%;
    }

    & li {
        font-weight: 500;
        list-style: none;
    }

    & ul {
        padding-inline-start: 0;
        margin: 8px 0;
    }

    & svg {
        max-width: 128px;

        & path {
            stroke: var(--black-primary);
            transition: var(--default-transition);
        }

        &:hover path {
            stroke-width: 10px;
        }
    }

    & p {
        font-weight: 500;
        margin-bottom: -8px;
    }

    & img {
        filter: brightness(10%);
    }

    & h2 {
        font-weight: 600;
        font-size: 2em;
        margin: 0;
    }

    & a {
        font-size: 1.2em;
        font-weight: 500;
        text-decoration: none;
        color: var(--black-primary);
    }

    & button {
        font-weight: 500;
        font-family: var(--fonts); 
        border-radius: 16px;
        border: 2px var(--black-primary) solid;
        padding: 4px 16px;
        background-color: transparent;
        margin-top: 16px;
        transition: 250ms ease-out;

        &:hover {
            cursor: pointer;
            color: var(--white-primary);
            background-color: var(--black-primary);
        }
    }


}

/* 

    7. Properties
 
*/

.is-sticky {
    width: 100vw;
    min-height: 200vh;

    & section {
        top: calc(var(--nav-height) + 16px);
        position: sticky;
    }

    & section.center {
        top: 0;
    }
}

.big {
    font-size: 3.6em;
    line-height: 1.2em;
}

.center {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.content-center {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

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

.fs {
    height: var(--section-height);
}

.descriptor {
    text-align: center;
    padding: 10vh 10vw 0 10vw;
}

.space {
    border: none;
    margin-bottom: 3.6em;
}

.fade-fx {
    opacity: 0;
    filter: blur(8px);
    transform: scale(90%);
    transition: 250ms ease-out;

    &.seen {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

.number {
    text-align: left;

    & h1 {
        color: var(--black-primary);
        font-size: 3.6em;
        line-height: 1em;
    }
}

/* 

    8. Misc. Elements

*/

progress {
    appearance: none;

    &::-webkit-progress-bar {
        border-radius: 16px;
        height: .25em;
        background: transparent;
    }

    &::-webkit-progress-value {
        border-radius: 16px;
        background: var(--black-secondary);
    }
}

marquee {
    background: var(--white-secondary);
    gap: 3.6em;
    height: 10vh;
    display: flex;
    /* justify-content: center; */
    align-items: center;

    & img {
        max-height: 3.6em;
        filter: brightness(0.5);
    }
}

.type-box {
    & h1 {
        display: inline;
    }

    & .type-line {
        display: inline-block;
        height: 4em;
        width: 1.6em;
        background-color: var(--black-secondary);
        margin-left: .1em;
        border-radius: 2px;

        animation: typing 1s ease-in-out infinite;
    }
}

.typing-complete .type-line {
    display: none;
}

@keyframes typing {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.switch {
    display: inline;
    position: relative;
    height: 34px;
    max-width: 68px;
    aspect-ratio: 2/1;


    &.big {
        margin-top: .8em;
        height: 2.4em;
        max-width: 4.8em;

        & .slider::before {
            height: 2em;
            left: .2em;
            top: .2em;
        }

        & input:checked + .slider:before {
            transform: translateX(calc(4.8em - 2.4em));
        }
    }

    & input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    & .slider {
        display: block;
        position: absolute;
        cursor: pointer;

        border-radius: 100%;
        padding: 2.5%;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        border-radius: 100vh;
        background-color: var(--white-secondary);
        transition: var(--default-transition);

        &::before {
            position: absolute;
            content: "";
            height: 90%;
            aspect-ratio: 1/1;
            border-radius: 100%;
            left: 5%;

            background-color: var(--white-primary);
            transition: all 250ms var(--bezier-curve);
        }
    }
    
    & input:checked + .slider {
        background-color: var(--black-secondary);
    }

    & input:checked + .slider:before {
        transform: translateX(100%);
    }
}

::-webkit-scrollbar {
    display: none;
}

/* 

    9. Branding

*/

/* Loading Screen */
#LoadingScreen {
    background-color: #ffffff;

    width: 100vw;
    height: 100vh;
    z-index: 99999;
    top: 0;
    left: 0;
    position: fixed;
    transition: 400ms ease-out;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;


    &.complete {
        opacity: 0;
    }

    & .loadingBlock {
        background-color: #141414;
        width: 48px;
        height: 48px;
        border-radius: 8px;

        animation-iteration-count: infinite;
        animation: 800ms ease-out 0s infinite loading-block;
    }

    & p.loadingMsg {
        font-weight: 600;
        font-size: 1em;
        height: 0;
        
        opacity: 0%;
        margin: 0;

        
        animation: 5s ease-out infinite loading-msg;
        animation-delay: 5s;
    }

    & svg {
        width: 64px;
        height: 64px;
    
        & path {
            stroke: var(--black-primary);
            stroke-width: 2px;
            stroke-dasharray: 163.8867950439453;
            stroke-dashoffset: 163.8867950439453;
            fill: none;

            animation: loading-block 4s linear infinite;
        }
    }
}

    @keyframes loading-block {
        0% {
            stroke-dashoffset: 163.8867950439453;
        }
        100% {
            stroke-dashoffset: -163.8867950439453;
        }
    }

    @keyframes loading-msg {
        0% {
            opacity: 0%;
            height: 0px;
        }

        20% {
            opacity: 0%;
            height: 0px;
        }
        30% {
            opacity: 100%;
            height: 1em;
        }
        70% {
            opacity: 100%;
            height: 1em;
        }
        80% {
            opacity: 0%;
            height: 0px;
        }
        100% {
            opacity: 0%;
            height: 0px;
        }
    }

/* Brand Icon */
.brand-icon {
    height: 28px;
    fill: none !important;
    margin-right: -20px;

    & path {
        stroke: var(--white-primary);
        stroke-dasharray: 164;
        stroke-width: 2px;
    }

    &.dark path {
        stroke: var(--black-primary);
    }

    &.large {
        height: 64px;
    }
}

/* 

    9. Mobile Responsiveness

*/

@media only screen and (max-width: 800px) {

    /* Root Changes */
    :root {
        --section-height: 100vh;
        --nav-height: 116px;
        --whitespace: 5vw;
    }

    /* Navigation */
    nav {
        display: none;
    }

    .mobile-nav {
        display: flex !important;
    }

    .nav-menu {
        display: flex;
    }

    /* Header */
    header {
        margin-top: 0;
        margin: var(--whitespace);
        margin-bottom: 0;
        height: 100vh;

        & .background {
            height: calc(100% - calc(2 * var(--whitespace)));
            left: var(--whitespace);
            top: var(--whitespace);
            transform: translate(0,0);

            & aside {
                left: 3.6em;
                top: 3.6em;

                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
        }
    }

    /* Photo Block */
    .fs-details h1 {
        font-size: 6rem;
        line-height: 5rem;
    }

    /* Carousel */
    .carousel li {
        width: 80vw;
        min-width: 0;

        & .controls {
            height: calc(var(--nav-height) - 16px - 48px);
        }

        & .details {
            max-width: 100%;
        }
    }

    /* Grid Block */
    .grid-block {

        & div {
            grid-template-rows: 1fr 2fr;
            grid-template-columns: 1fr;

            & section {
                padding: calc(1.5 * var(--whitespace));

                & p {
                    margin-block: 0 !important;
                }
            }
        }
    }

    /* Overlay */
    .overlay {
        & ul {
            bottom: var(--nav-height);
            top: auto;
        }
    }

    /* Section Titles */
    #section-title {
        justify-content: center;
        right: 0;
        height: 32px;
    }

    /* Properties */
    .is-sticky section {
        top: 48px;
    }

    .type-box {
        max-width: 80vw;
    }

    .type-box {
        & h1 {
            font-size: 4em;
        }
    }
}

/* 

    10. Animations

*/

.animated {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

@keyframes platform-experience-animation {
    0% {
        background: 'blue';
        filter: blur(16px);
        opacity: 0;
        transform: scale(90%) translateY(-5%);
    }
    100% {
        background: 'red';
        filter: blur(0);
        opacity: 1;
        transform: scale(100%) translateY(0);
    }
}

/* 

    0. Hidden Objects

*/

/* Hidden objects (from default structure) */
#default-header-title, .sidebar, .revert-css-container {
    display: none;
}