.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100vh
}

.hero__overflow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none
}

@media(min-width: 64rem) {
    .hero__overflow {
        display:block
    }
}

@media(prefers-reduced-motion: no-preference) {
    .hero__overflow__gradient {
        opacity: 0;
        visibility: hidden
    }

    .no-js .hero__overflow__gradient {
        opacity: 1;
        visibility: visible
    }
}

.hero__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    opacity: 0;
    animation: animate .4s cubic-bezier(0.19, 1, 0.22, 1) 1s forwards
}

@keyframes animate {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.hero__main__title {
    color: #e8eaed;
    text-align: center;
    font-family: Google Sans Display,sans-serif;
    font-size: min(max(60px,11.111vw),160px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -0.76px;
    margin-bottom: 25px
}

@media(min-width: 43.75rem) {
    .hero__main__title {
        letter-spacing:-4.8px
    }
}

.hero__main__title .word {
    display: inline-block
}

@media(prefers-reduced-motion: no-preference) {
    .hero__main__title .word {
        opacity: 0;
        transform: translate3d(0, 100vh, 0)
    }
}

.no-js .hero__main__title .word {
    opacity: 1 !important;
    transform: none !important
}

@keyframes animateIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }

    20% {
        opacity: 0
    }

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

@media(prefers-reduced-motion: no-preference) {
    .hero__main__title.in-view .word:nth-of-type(1) {
        animation-delay: 225ms;
        animation-name: animateIn;
        animation-duration: calc(.7s*var(--motion));
        animation-fill-mode: forwards
    }

    .hero__main__title.in-view .word:nth-of-type(2) {
        animation-delay: 250ms;
        animation-name: animateIn;
        animation-duration: calc(.7s*var(--motion));
        animation-fill-mode: forwards
    }

    .hero__main__title.in-view .word:nth-of-type(3) {
        animation-delay: 275ms;
        animation-name: animateIn;
        animation-duration: calc(.7s*var(--motion));
        animation-fill-mode: forwards
    }

    .hero__main__title.in-view .word:nth-of-type(4) {
        animation-delay: 300ms;
        animation-name: animateIn;
        animation-duration: calc(.7s*var(--motion));
        animation-fill-mode: forwards
    }

    .hero__main__title.in-view .word:nth-of-type(5) {
        animation-delay: 325ms;
        animation-name: animateIn;
        animation-duration: calc(.7s*var(--motion));
        animation-fill-mode: forwards
    }
}

.hero__main__inline-logo {
    display: inline-block;
    position: relative
}

.hero__main__inline-logo__text {
    color: rgba(0,0,0,0)
}

.hero__main__inline-logo__logo-wrapper {
    display: block;
    position: absolute;
    top: .1875rem;
    left: 0;
    width: 100%
}

.hero__main__inline-logo__logo-wrapper svg {
    width: 100%;
    height: 100%
}

.hero__main__inline-logo__logo-blur {
    --blur: 0%;
    display: block;
    position: absolute;
    top: -10px;
    width: 100%;
    height: 100%;
    filter: blur(20px)
}

@media(prefers-reduced-motion) {
    .hero__main__inline-logo__logo-blur {
        display: none !important
    }
}

.hero__main__inline-logo__logo-blur svg {
    -webkit-mask-image: linear-gradient(90deg, transparent, red var(--blur), transparent);
    mask-image: linear-gradient(90deg, transparent, red var(--blur), transparent)
}

.hero__main__logo {
    width: 295px;
    margin: 15px auto;
    opacity: 0;
    visibility: hidden
}

.no-js .hero__main__logo {
    opacity: 1;
    visibility: visible
}

@media(min-width: 43.75rem) {
    .hero__main__logo {
        width:auto;
        margin: 10px auto 35px
    }
}

.hero__main__logo svg {
    width: 100%;
    height: auto
}

.hero__main p {
    opacity: 0;
    visibility: hidden
}

.no-js .hero__main p {
    opacity: 1;
    visibility: visible
}

@media(prefers-reduced-motion: no-preference) {
    .hero__main .js-button {
        opacity: 0;
        transform: translate3d(0, 40px, 0)
    }
}

.no-js .hero__main .js-button {
    opacity: 1 !important;
    transform: none !important
}

@keyframes animateIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 40px, 0)
    }

    20% {
        opacity: 0
    }

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

.hero__main .js-button.in-view {
    animation-delay: 500ms;
    animation-name: animateIn;
    animation-duration: calc(.7s*var(--motion));
    animation-fill-mode: forwards
}