:root {
    --color1: #2e8bc9;
    --color1-rgba: 102,153,204;
    --color2: #666666;
    --color2-rgba: 102,102,102;
    --color3: #a100ff;
    --color4: #d181ff;
    --page-padding:5vw;
    --animation-duration: 6s;
}

body {
    min-height: 100vh;
    padding:0 !important;
    margin:0 !important;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items:center;
    align-content:center;
    color:#fff;
    font-family: 'Lexend Deca', sans-serif;
    font-size: max(1vw, 18px);
    background: radial-gradient(ellipse at 50% 75%, rgb(0 0 0 / 0) 30%, rgb(33 0 61 / 75%) 90%), linear-gradient(to bottom, rgb(255 255 255 / .2) 20%, rgb(0 0 0 / .2) 58%, rgb(255 255 255 / .45) 100%), linear-gradient(to bottom, var(--color3) 0%, var(--color3) 100%);
}

@media (min-width:1366px){
    body {
        overflow: hidden;
    } 
}

body:after {
    content:'';
    min-height: 100vh;
    width:100vw;
    padding:0 !important;
    margin:0 !important;
    position:absolute;
    z-index:-1;
    opacity:.1;
    background: url(../grapple-background.svg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position: bottom left;
    filter:blur(.5rem);
}

body:before {
    content:'';
    min-height: 100vh;
    width:100vw;
    padding:0 !important;
    margin:0 !important;
    position:absolute;
    left:-20rem;
    bottom:-10rem;
    z-index:-1;
    opacity:.15;
    background: url(../grapple-background.svg);
    background-size:100%;
    background-repeat:no-repeat;
    background-position: bottom left;
    filter:blur(.2rem);
}

body > * {
    margin:auto !important;
}

body * {
    box-sizing: border-box;
}

body *:not(.promo):not(a) {
    pointer-events: none;
    user-select: none;
}

::-webkit-scrollbar {
    background: transparent;

}

::-webkit-scrollbar-thumb {
    background: rgb(141 56 191 / 25%);
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(184 86 242 / 50%);
}

::-webkit-scrollbar-corner {
    background:#fff;
}

h1, h2 {
    font-weight:400;
}

.splash {
    --width: 75vw;
    position:relative;
    width: var(--width);
    height: calc(var(--width) * .56);
    margin-top:0 !important;
    overflow: hidden;
    animation-duration: calc(var(--animation-duration) + 3s);
    animation-name: splash;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
}

@keyframes splash {
    0% {
        transform: translateX(calc(var(--width) * .5 - 10em));
    }

    55% {
        transform: translateX(calc(var(--width) * .5 - 10em));
    }

    100% {
        transform: translateX(-10em);
    }
}

.gr-logo {
    position: absolute;
    top:0;
    left:0;
    z-index:-1;
    width: var(--width);
    height: calc(var(--width) * .56);
    clip-path: polygon(0 0, 44% 0, 44% 100%, 0 100%);
    background-image: url(../grapple-logo-full.svg);
    background-size:100%;
    animation-duration: calc(var(--animation-duration) + 3s);
    animation-name: gr-logo;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
    -webkit-box-reflect: below .5rem linear-gradient(to bottom, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.1));
    opacity:.85;
}

html:not(.home) .gr-logo {
    animation-name: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

@keyframes gr-logo {
    0% {
        clip-path: polygon(0 0, 44% 0, 44% 100%, 0 100%);
    }

    70% {
        clip-path: polygon(0 0, 44% 0, 44% 100%, 0 100%);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

.animated-logo {
    position: absolute;
    --animated-logo-width: calc(var(--width) * .31);
    width: var(--animated-logo-width);
    height: calc(var(--animated-logo-width) * 1);
    top: calc(var(--animated-logo-width) * .388);
    left: calc(var(--animated-logo-width) * .708);
    background-image: url(../animated.gif);
    background-size:100%;
    animation-duration: var(--animation-duration);
    animation-name: animated-logo;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
}

html:not(.home) .animated-logo {
    animation-name: none;
    display:none !important;
}

@keyframes animated-logo {
    0% {
        transform: scale(2);
        opacity:1;
    }

    80% {
        transform: scale(1);
        opacity:1;
    }

    81% {
        transform: scale(1);
        opacity:1;
    }

    82% {
        transform: scale(1);
        opacity:1;
    }

    100% {
        transform: scale(1);
        opacity:0;
    }
}

.site {
    position: absolute;
    top: calc(var(--width) * .277);
    left: calc(var(--width) * .78);
    z-index:-1;
    width: var(--width);
    height: calc(var(--width) * .56);
    clip-path: polygon(0 0, 44% 0, 44% 100%, 0 100%);
    font-size:5vw;
    animation-duration: calc(var(--animation-duration) + 3s);
    animation-name: site;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
    opacity:.5;
    font-family: 'Bebas Neue', sans-serif;
}

html:not(.home) .site {
    animation-name: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

@keyframes site {
    0% {
        clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
    }

    70% {
        clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

.promo {
    animation-duration: calc(var(--animation-duration) + 6s);
    animation-name: faderighttoleft;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
    font-size:.75em;
    padding: 1rem var(--page-padding);
    background-color:rgb(0 0 0 / 20%);
    transition: all .4s ease-out !important;
    overflow:auto;
}

@media (min-width:1366px){
    .promo {
        position:absolute;
        top: 0vh;
        right:0vw;
        width:30em;
        height:100vh;
        padding:4em;
    }
}

.promo h1,
.promo h2{
    border-top: .1em var(--color4) solid;
    margin-top:1.5em;
    padding-top:1.5em;
    position:relative;
}

.promo h1:first-of-type{
    border-top: none;
    margin-top:0;
    padding-top:0;
}

.promo h2:after {
    content:'Why';
    display:flex;
    justify-content:center;
    align-content:center;
    align-items:center;
    position:absolute;
    --new-height: 1em;
    height: var(--new-height);
    top: calc(((var(--new-height) / 2) * -1) - .3em);
    left: 2em;
    font-size:.55em;
    font-weight:bold;
    text-transform:uppercase;
    color:#58018c;
    background-color: var(--color4);
    padding: .2em .5em;
    border-radius:.2em;
}

.promo h2:nth-of-type(2):after {
    content:'What';
}

.promo h2:nth-of-type(3):after {
    content:'How';
}

.promo ul.emoji {
    text-indent:-1.66em;
    filter:grayscale(1);
}

.promo li {
    text-wrap:balance;
    margin:.5em 0;
}

.promo ul.emoji li {
    list-style:none;
    text-indent:-1.66em;
}

@keyframes faderighttoleft {
    0% {
        opacity:0;
        padding-top:100vh;
        right: -38em;
    }

    80% {
        opacity:0;
        padding-top:100vh;
        right: -38em;
    }

    90% {
        padding-top:100vh;
    }

    100% {
        opacity:.7;
        padding-top:4em;
        right: 0em;
    }
}

.summary {
    animation-duration: calc(var(--animation-duration) + 4s);
    animation-name: fadeup;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
    opacity:0;
}

@media (max-width:1365px){
    .summary {
        width:100vw;
        padding: 1rem var(--page-padding); 
    } 
}

@media (min-width:1366px){
    .summary {
        position:absolute;
        top: 53vh;
        left:41vw;
    } 
}

@keyframes fadeup {
    0% {
        opacity:0;
        transform: translateY(-10rem) !important;
    }

    95% {
        opacity:0;
        transform: translateY(-10rem) !important;
    }

    100% {
        opacity:.5;
        transform: translateY(0rem) !important;
    }
}

.summary h1 {
    font-size:1.7em;
}

.summary h1 span {
    display:block;
    width:100%;
}

.footer {
    display:flex;
    align-content:flex-end;
    align-items:flex-end;
    /* opacity:.8; */
    font-size:.6em;
    letter-spacing:.5em;
    text-transform:uppercase;
    /* background-color:#00cada; */
    width:100vw;
    padding: 1rem var(--page-padding);
    /* border-top: .25rem pink solid; */
    margin:0 0 5em 0 !important;
}

.footer nav {
    margin-top:auto;
    margin-bottom:0;
    display:flex;
    align-content:center;
    align-items:center;
}

.footer nav a {
    margin: 1rem;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
    border-radius:20em;
    padding:1.25rem;
    pointer-events: all;
    user-select:all;
}

.footer nav a:hover {
    color:#000;
    text-decoration:none;
    background-color:rgb(255 255 255 / 70%);
}

.copyright {
    display:flex;
    align-content:center;
    align-items:center;
    padding:1rem;
    margin-left:6em;
    opacity:.5;
}

.snakeSegment {
    position: absolute;
    top: 100px;
    left: 50%;
    width: 5px;
    height: 10px;
    background-color: #fff;
}

.hook {
    --height: 21px;
    --width: 31px;
    position: absolute;
    bottom: var(--height);
    left: calc((var(--width) / 2) * -1);
    width: var(--width);
    height: var(--height);
    background-color: transparent;
    background-image: url(../grapple-white.svg);
    background-size:100%;
    background-repeat:no-repeat;
    transform: translate(calc(var(--width) * .06), calc(var(--width) * .65))
}