/* ==========================================================
   BASE RESET
========================================================== */

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

/* ==========================================================
   HTML / BODY
========================================================== */

html,
body {
    width: 100%;
    height: 100%;

    overflow: hidden;
}

/* ==========================================================
   VARIABLES
========================================================== */

:root {
    --logo-width: 250px;
}

/* ==========================================================
   LINKS
========================================================== */

a {
    text-decoration: none;

    color: #ffffff;
}

/* ==========================================================
   LOGO CONTAINER
========================================================== */

.logo {
    width: var(--logo-width);

    perspective: 1800px;

    perspective-origin: center;
}

/* ==========================================================
   TEXT CONTAINER
========================================================== */

.logo-text {
    opacity: 0;
}

/* ==========================================================
   TEXT REVEAL
========================================================== */

.logo-text.loaded {
    animation: revealText 2s 2.8s ease-out forwards;
}

.hero.loaded .logo-text {
    animation: revealText 2s 2.8s ease-out forwards;
}

/* ==========================================================
   MAIN LOGO IMAGE
========================================================== */

.logo-text img {
    width: 900px;

    height: auto;

    margin-left: 80px;

    margin-top: 10px;

    display: block;

    transform: translateY(-4px);
}

/* ==========================================================
   CONSTRUCTION BANNER
========================================================== */

.construction-banner {
    margin-bottom: 40px;

    font:
        300 18px/1 "Gill Sans",
        "Gill Sans MT",
        Calibri,
        sans-serif;

    color: #939598;

    text-align: left;

    padding-left: 80px;

    line-height: 1.25;

    letter-spacing: 2pt;
}

/* ==========================================================
   CONTACT BANNER
========================================================== */

.contact-banner {
    margin-top: 2rem;

    margin-bottom: 0.5rem;

    font:
        300 18px/1 "Gill Sans",
        "Gill Sans MT",
        Calibri,
        sans-serif;

    color: #ffffff;

    text-align: left;

    padding-left: 80px;

    line-height: 1.5;

    letter-spacing: 2pt;
}

/* ==========================================================
   INFORMATION LABELS
========================================================== */

.info {
    margin-bottom: 0.5rem;

    font:
        300 17px/1 "Gill Sans",
        "Gill Sans MT",
        Calibri,
        sans-serif;

    color: #939598;

    text-align: left;
}

/* ==========================================================
   LEADING
========================================================== */

#leading {
    line-height: 1.5;
}

/* ==========================================================
   @ SYMBOL
========================================================== */

.at {
    font-size: 12px;

    position: relative;

    top: -1px;
}

/* ==========================================================
   HERO
========================================================== */

.hero {
    position: relative;

    width: 100vw;

    height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: flex-start;
}

/* ==========================================================
   FULL SCREEN VIDEO
========================================================== */

.hero-video {
    position: absolute;

    top: 50%;

    left: 50%;

    height: auto;

    object-fit: cover;

    -webkit-transform: translate(-50%, -35%) scale(1.75);

    transform: translate(-50%, -35%) scale(1.75);
}

/* ==========================================================
   LOGO LOCKUP
========================================================== */

.logo-lockup {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    margin-left: 100px;
}

/* ==========================================================
   SVG
========================================================== */

.logo-svg {
    width: 100%;

    height: auto;

    margin-left: 100px;

    overflow: visible;

    display: block;
}

/* ==========================================================
   LOGO VERTICAL POSITION
========================================================== */

.logo {
    transform: translateY(-38px);

    margin-top: 10px;
}

/* ==========================================================
   SVG 3D SETUP
==========================================================

   IMPORTANT:

   Keep perspective on .logo.

   Do NOT apply preserve-3d directly
   to the SVG paths.

========================================================== */

.logo {
    -webkit-transform-style: preserve-3d;

    transform-style: preserve-3d;
}

/* ==========================================================
   TEXT REVEAL
========================================================== */

@keyframes revealText {
    0% {
        opacity: 0;

        transform: translateX(20px);
    }

    40% {
        opacity: 0;

        transform: translateX(12px);
    }

    100% {
        opacity: 1;

        transform: translateX(0);
    }
}

/* ==========================================================
   FIREFOX SVG SAFETY
========================================================== */

@supports (-moz-appearance: none) {
    .shape {
        -webkit-backface-visibility: hidden;

        backface-visibility: hidden;
    }
}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .piece1,
    .piece2,
    .piece3,
    .piece4,
    .logo-text {
        animation: none !important;

        opacity: 1;
    }
}