/* Header, menu, scroll indicator */

#header {
    position: fixed;
    left: 0;
    z-index: 52;
    width: 100%;
    color: var(--color-black);
    padding: var(--base-padding-y) var(--base-padding-x);
    font-size: clamp(1rem, 1vw, 1.5rem);
    transition: color .25s;
    pointer-events: none
}

@media (max-width: 380px) {
    #header {
        font-size: clamp(.75rem, 1vw, 2rem)
    }
}

#header p {
    margin: 0
}

html.is-black-bg #header,
html.is-blue-bg #header {
    color: var(--color-white)
}

@media (max-width: 812px) {
    #header.--menu-opened #header-logo {
        color: var(--color-white)
    }
    #header.--menu-opened #header-logo img {
        filter: none
    }
}

#header.--menu-opened #header-right-sound-btn-background-layer1 {
    background: var(--color-white)
}

#header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    padding-bottom: .1em
}

#header-background {
    position: absolute;
    top: 0;
    right: 0;
    height: calc(var(--vh, 1vh) * 100);
    width: 50vw;
    background: linear-gradient(270deg, rgba(11, 11, 18, .5) 0%, rgba(11, 11, 18, 0) 100%);
    opacity: 0;
    transition: .4s .4s opacity;
    pointer-events: none
}

@media (max-width: 812px) {
    #header-background {
        background: var(--header-color);
        width: 100vw
    }
}

#header-background.--opened {
    transition: .4s opacity;
    pointer-events: auto
}

#header-logo {
    transition: color .5s;
    z-index: 10;
    position: relative
}

#header-logo svg,
#header-logo img {
    width: 7.5em;
    height: auto
}

@media (max-width: 812px) {
    #header-logo svg,
    #header-logo img {
        width: 6em
    }
}

html.is-black-bg #header-logo img,
html.is-blue-bg #header-logo img {
    filter: brightness(0) invert(1)
}

html.is-white-bg #header-logo img {
    filter: none
}

#header.--is-projects #header-logo img {
    filter: brightness(0) invert(1)
}

#header.--menu-opened #header-logo img {
    filter: none
}

.is-project-details-active #header-logo {
    color: var(--project-details-highlight)
}

#header-right {
    position: relative;
    display: flex;
    gap: 10.5em;
    will-change: transform
}

#header-right-sound-btn {
    display: none !important;
    position: relative;
    font-size: .875em;
    height: 3.2em;
    width: 3.2em;
    border: none;
    padding: 0;
    background: transparent;
    overflow: hidden;
    z-index: 1;
    cursor: pointer
}

@media (max-width: 812px) {
    #header-right-sound-btn {
        display: none
    }
}

#header-right-sound-btn canvas {
    width: 100%;
    height: 100%
}

#header-right-talk-btn,
#header-right-menu-btn {
    font-size: .875em;
    border-radius: 6.25em;
    padding: 0 1.125em 0 1.625em;
    font-weight: 500;
    text-transform: uppercase;
    border: none;
    transform: scale(0);
    transition: color .4s, background-color .4s;
    height: 3.2em;
    cursor: pointer
}

@media (max-width: 812px) {
    #header-right-talk-btn,
    #header-right-menu-btn {
        position: relative;
        width: 3.2em;
        padding: 0;
        transform: none
    }
}

#header-right-talk-btn-placeholder {
    display: none !important;
    border: none;
    position: absolute;
    font-size: .875em;
    border-radius: 6.25em;
    height: 3.2em;
    width: 9.5em;
    left: 4.5em;
    visibility: hidden;
    padding: 0
}

@media (max-width: 812px) {
    #header-right-talk-btn-placeholder {
        width: 3.2em
    }
}

#header-right-talk-btn {
    display: none !important;
    position: absolute;
    left: 4.5em;
    background: var(--color-grey-blue);
    transition: color .4s, background-color .4s;
    overflow: hidden;
    color: var(--color-white)
}

#header-right-talk-btn a {
    position: absolute;
    inset: 0;
    z-index: 1
}

@media (max-width: 812px) {
    #header-right-talk-btn {
        left: -4.5em
    }
}

@media (hover: hover) {
    #header-right-talk-btn:not(.--is-contact-active):hover {
        background: var(--header-color);
        color: var(--project-details-btn-text-hover)
    }
    #header-right-talk-btn:not(.--is-contact-active):hover #header-right-talk-btn-dots {
        transform: scale(0) translateZ(0)
    }
    #header-right-talk-btn:not(.--is-contact-active):hover #header-right-talk-btn-text {
        transform: translate3d(1.5em, 0, 0)
    }
    #header-right-talk-btn:not(.--is-contact-active):hover #header-right-talk-btn-arrow {
        transform: translateZ(0)
    }
}

@media (hover: hover) {
    #header-right-talk-btn.--is-contact-active:hover {
        background: #0016ec
    }
    #header-right-talk-btn.--is-contact-active:hover #header-contact-close-svg {
        transform: translate3d(-50%, -50%, 0) rotate(180deg)
    }
}

#header-right-talk-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .625em;
    white-space: nowrap
}

#header-right-talk-btn-text {
    transition: transform cubic-bezier(.4, 0, .1, 1) .3s
}

#header-right-talk-btn-arrow {
    position: relative;
    top: calc(50% - .5em);
    left: 1.2em;
    transform: translate3d(-2.5em, 0, 0);
    position: absolute;
    width: 1em;
    height: 1em;
    transition: transform cubic-bezier(.4, 0, .1, 1) .3s
}

#header-right-talk-btn-arrow svg {
    width: 100%;
    height: 100%
}

#header-right-talk-btn-dots {
    position: relative;
    width: 1.15em;
    height: 1.15em;
    transition: transform cubic-bezier(.4, 0, .1, 1) .1s;
    transform: scale(.9) translateZ(0)
}

.header-right-talk-btn-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: .3125em;
    height: .3125em;
    background: var(--color-white);
    border-radius: 100%
}

#header-right-menu-btn {
    background: var(--color-dark-white);
    color: var(--color-black)
}

@media (hover: hover) {
    #header-right-menu-btn:hover {
        background: var(--color-white);
        color: var(--header-text-color)
    }
    #header-right-menu-btn:hover #header-right-menu-btn-dots {
        transform: translateY(-.1em) translateZ(0) rotate(270deg)
    }
}

#header-right-menu-btn.--opened {
    color: var(--header-text-color);
    background: var(--color-white)
}

#header-right-menu-btn.--opened #header-right-menu-btn-dots {
    transform: translateY(-.1em) translateZ(0) rotate(270deg)
}

@media (max-width: 812px) {
    #header-right-menu-btn.--opened #header-right-menu-btn-dots {
        transform: translate(.05em) translateY(-.1em) translateZ(0) rotate(270deg)
    }
}

#header-right-menu-btn.--opened #header-right-menu-btn-text {
    transform: translate3d(0, -100%, 0)
}

#header-right-menu-btn.--opened #header-right-menu-btn-text-close {
    transform: translateZ(0)
}

#header-right-menu-btn-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: transparent;
    overflow: hidden;
    gap: .625em
}

@media (max-width: 812px) {
    #header-right-menu-btn-inner {
        right: .1em
    }
}

#header-right-menu-btn-text {
    transition: transform .3s cubic-bezier(.4, 0, .1, 1);
    line-height: 1.2em
}

@media (max-width: 812px) {
    #header-right-menu-btn-text {
        display: none
    }
}

#header-right-menu-btn-text-close {
    position: absolute;
    transform: translate3d(0, 100%, 0);
    left: 0;
    transition: transform .3s cubic-bezier(.4, 0, .1, 1)
}

@media (max-width: 812px) {
    #header-right-menu-btn-text-close {
        display: none
    }
}

#header-right-menu-btn-dots {
    position: relative;
    transition: transform .4s cubic-bezier(.4, 0, .1, 1);
    transform: translateZ(0) rotate(180deg);
    width: 1.15em;
    height: 1.15em
}

@media (max-width: 812px) {
    #header-right-menu-btn-dots {
        font-size: 1.4em
    }
}

#header-right-menu-btn-dots .header-right-menu-btn-dot {
    position: absolute;
    display: inline-block;
    width: .3125em;
    height: .3125em;
    background: currentColor;
    border-radius: 100%;
    transition: background-color .4s;
    transform: translateY(-50%)
}

#header-right-menu-btn-dots .header-right-menu-btn-dot:first-child {
    left: .1em;
    top: 50%
}

#header-right-menu-btn-dots .header-right-menu-btn-dot:last-child {
    right: .1;
    top: 50%
}

#header-menu {
    position: absolute;
    top: calc(var(--base-padding-y) + var(--header-size) * 3.1 + .5em);
    right: var(--base-padding-x);
    width: 19.38em;
    display: flex;
    flex-direction: column;
    gap: .625em;
    pointer-events: none;
    color: var(--color-black)
}

@media (max-width: 1000px) {
    #header-menu {
        top: calc(var(--base-padding-y) * 2 + 3 * var(--header-size))
    }
}

#header-menu input,
#header-menu textarea,
#header-menu a,
#header-menu button {
    pointer-events: none
}

#header-menu #header-menu-links,
#header-menu #header-menu-newsletter,
#header-menu #header-menu-talk,
#header-menu #header-menu-labs {
    will-change: transform
}

#header-menu.--opened #header-menu-links,
#header-menu.--opened #header-menu-newsletter,
#header-menu.--opened #header-menu-talk,
#header-menu.--opened #header-menu-labs {
    transition: transform .5s var(--open-delay) cubic-bezier(.4, 0, .1, 1), opacity .5s var(--open-delay) cubic-bezier(.4, 0, .1, 1);
    transform: translateZ(0);
    opacity: 1
}

#header-menu.--opened input,
#header-menu.--opened textarea,
#header-menu.--opened a,
#header-menu.--opened button {
    pointer-events: auto
}

@media (max-width: 812px) {
    #header-menu {
        width: calc(100% - var(--base-padding-x) * 2)
    }
}

#header-menu-links {
    transition: transform .5s var(--close-delay) cubic-bezier(.4, 0, .1, 1), opacity .5s var(--close-delay) cubic-bezier(.4, 0, .1, 1);
    transform: translate3d(0, 5.5em, 0) rotate(3.5deg);
    opacity: 0
}

#header-menu-talk,
#header-menu-newsletter,
#header-menu-labs {
    transition: transform .5s var(--close-delay) cubic-bezier(.4, 0, .1, 1), opacity .5s var(--close-delay) cubic-bezier(.4, 0, .1, 1);
    transform: translate3d(0, 7.75em, 0) rotate(-3.5deg);
    opacity: 0
}

#header-menu-links {
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    background: var(--color-white);
    border-radius: .625em;
    padding: 1em .3125em
}

#header-menu-newsletter {
    display: none !important;
    background: var(--color-white);
    padding: 1.875em;
    border-radius: .625em
}

@media (max-height: 650px) {
    #header-menu-newsletter {
        display: none
    }
}

@media (max-height: 1080px) and (max-width: 812px) and (min-width: 380px) {
    #header-menu-newsletter {
        display: none
    }
}

#header-menu-newsletter-title {
    margin: auto 0;
    font-size: 2.375em
}

#header-menu-newsletter-input {
    position: relative;
    height: 4.375em;
    font-size: 1.25em;
    margin-top: 1.4em;
    height: fit-content
}

#header-menu-newsletter-input-field {
    pointer-events: none;
    position: relative;
    width: 100%;
    height: 3.5em;
    border: 0;
    background-color: var(--color-off-white);
    border-radius: 1.125rem;
    outline: none;
    padding: 1.25em;
    font-size: 1em
}

#header-menu-newsletter-input-field::placeholder {
    opacity: .3;
    font-size: 1em
}

#header-menu-newsletter-input-arrow {
    position: absolute;
    display: inline-block;
    top: 1em;
    right: 1.5em;
    width: 1.5em;
    height: 1.5em;
    padding: 0
}

#header-menu-newsletter-input-arrow svg {
    width: 100%;
    height: auto
}

#header-menu-talk {
    background: var(--color-white);
    color: var(--color-black);
    padding: 1.875em;
    border-radius: .625em;
    align-items: center;
    justify-content: space-between;
    display: none
}

#header-menu-talk a {
    position: absolute;
    inset: 0;
    z-index: 1
}

@media (max-width: 812px) {
    #header-menu-talk {
        display: flex
    }
}

#header-menu-text {
    font-size: 1.625em;
    text-transform: uppercase
}

#header-menu-talk-icon {
    height: 1.5em;
    width: 1.5em
}

.header-menu-link {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 1em 1.625em;
    line-height: 1;
    cursor: pointer;
    pointer-events: none;
    color: var(--color-black)
}

.header-menu-link:before {
    content: "";
    position: absolute;
    top: calc(50% - .25em);
    right: 2em;
    background: var(--color-black);
    width: .5em;
    height: .5em;
    border-radius: 100%;
    transition: .3s transform cubic-bezier(.4, 0, .1, 1);
    transform: scale(0)
}

.header-menu-link.--active {
    pointer-events: none !important
}

.header-menu-link.--active:before {
    transform: scale(1)
}

@media (hover: hover) {
    .header-menu-link:hover {
        color: var(--header-text-color)
    }
    .header-menu-link:hover .header-menu-link-text {
        transform: translate3d(0, -100%, 0)
    }
    .header-menu-link:hover .header-menu-link-text-clone {
        transform: translateZ(0)
    }
    .header-menu-link:hover .header-menu-link-background {
        transform: scale(1);
        opacity: .1
    }
    .header-menu-link:hover .header-menu-link-svg {
        transform: scale(1);
        transition: .4s color, .2s .2s transform cubic-bezier(.4, 0, .1, 1)
    }
    .header-menu-link:hover.--active:before {
        transform: scale(0)
    }
}

button.header-menu-link {
    text-align: start
}

.header-menu-link-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: var(--header-color);
    border-radius: 6.25em;
    transition: .3s opacity, .4s transform cubic-bezier(.4, 0, .1, 1);
    transform: scale(.85)
}

.header-menu-link-text {
    display: inline-block;
    position: relative;
    transition: .4s color, .4s transform cubic-bezier(.4, 0, .1, 1);
    z-index: 1;
    font-size: 1.625em;
    text-transform: uppercase
}

.header-menu-link-svg {
    position: absolute;
    height: 1.5em;
    width: 1.5em;
    top: calc(50% - .75em);
    right: 0;
    transition: .4s color, .2s transform cubic-bezier(.4, 0, .1, 1);
    transform: scale(0)
}

.header-menu-link-inner {
    position: relative;
    overflow: hidden
}

.header-menu-link-text-clone {
    position: absolute;
    transition: .4s color, .4s transform cubic-bezier(.4, 0, .1, 1);
    z-index: 1;
    top: 0;
    left: 0;
    font-size: 1.625em;
    transform: translate3d(0, 100%, 0);
    text-transform: uppercase
}

.header-menu-link-icon {
    height: 1em;
    width: 1em;
    transition: .4s color, .4s transform cubic-bezier(.4, 0, .1, 1)
}

.header-menu-link-icon {
    position: absolute;
    left: -1.25em;
    top: 0
}

.header-menu-link-icon-mobile {
    position: absolute;
    left: 6.875em;
    top: 0;
    display: none
}

@media (max-width: 812px) {
    .header-menu-link-icon-mobile {
        display: block;
        left: 6.25em
    }
}

#header-menu-labs {
    cursor: pointer;
    padding: 1.25em 1.875em;
    background: var(--color-black);
    border-radius: .625em;
    pointer-events: none
}

@media (hover: hover) {
    #header-menu-labs:hover #header-menu-labs-arrow {
        transform: translate3d(1.5em, -2.375em, 0)
    }
    #header-menu-labs:hover #header-menu-labs-arrow2 {
        transform: translateZ(0)
    }
    #header-menu-labs:hover #header-menu-labs-text {
        transform: translate3d(0, -100%, 0)
    }
    #header-menu-labs:hover #header-menu-labs-text-clone {
        transform: translateZ(0)
    }
}

#header-menu-labs-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5em;
    overflow: hidden
}

#header-menu-labs-lucy {
    height: 2.375em;
    width: 2.375em
}

#header-menu-labs-lucy svg {
    height: 100%;
    width: 100%
}

#header-menu-labs-texts {
    position: relative;
    width: 100%;
    color: var(--color-white);
    font-size: 1.625em;
    text-transform: uppercase
}

#header-menu-labs-text {
    transition: .4s transform cubic-bezier(.4, 0, .1, 1)
}

#header-menu-labs-text-clone {
    position: absolute;
    top: 0;
    transform: translate3d(0, 100%, 0);
    transition: .4s transform cubic-bezier(.4, 0, .1, 1)
}

#header-menu-labs-arrow {
    flex-shrink: 0;
    transform: translateZ(0);
    transition: .3s transform cubic-bezier(.4, 0, .1, 1);
    height: 1.5em;
    width: 1.5em
}

#header-menu-labs-arrow2 {
    position: absolute;
    right: 0;
    top: calc(50% - .75em);
    transform: translate3d(-1.5em, 2.375em, 0);
    transition: .3s transform cubic-bezier(.4, 0, .1, 1)
}

#header-contact-close-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) rotate(90deg);
    width: calc(16 / 44 * 100%);
    height: calc(16 / 44 * 100%);
    transition: .3s transform cubic-bezier(.4, 0, .1, 1)
}

#header-menu-newsletter-feedback-message {
    margin: .5em 1em 0;
    font-size: .6em
}

#header-menu-newsletter-feedback-message .error {
    color: red
}

#scroll-indicator {
    position: fixed;
    width: 6px;
    height: calc(var(--vh, 1vh) * 20);
    top: calc(var(--vh, 1vh) * 40);
    background-color: #0000001a;
    border-radius: 3px;
    right: 16px
}

html.is-black-bg #scroll-indicator,
html.is-blue-bg #scroll-indicator {
    background-color: #ffffff1a
}

@media (max-width: 812px) {
    #scroll-indicator {
        width: 2px;
        border-radius: 1px;
        right: 6px
    }
}

#scroll-indicator-bar {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    transform-origin: 0 0;
    border-radius: 3px
}

html.is-black-bg #scroll-indicator-bar,
html.is-blue-bg #scroll-indicator-bar {
    background-color: var(--color-white)
}