/* BASE */

* {
    box-sizing:                         border-box;
    margin: 						    0;
    padding: 						    0;
    -ms-touch-action:                   manipulation;
    touch-action:                       manipulation;
    -moz-osx-font-smoothing:            grayscale;
    -webkit-font-smoothing:             antialiased;
}

#frame {
    width: 100%;
    height: 100%;
    position: absolute;
    font-family: 'Space Mono', serif;
    font-weight: 400;
    color: black;
}

.title {
    font-size: 24px;
    font-weight: 500;
    font-family: 'Space Grotesk', sans-serif;
    line-height: 32px;
    margin-bottom: 40px;
}

p {
    font-size: 14px;
    line-height: 30px;
}

input {
    height: 44px;
    width: 100%;
    padding: 0 0 2px 12px;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.02em;
    background: #FFFFFF29;
    border: none;
    outline: none;
    font-family: 'Space Mono', serif;
    color: white;
}

input:focus {
    background: #FFFFFF52;
}

::placeholder {
    font-weight: 400 !important;
    color: #FFFFFF80;
}

::-ms-input-placeholder {
    font-weight: 400 !important;
    color: #FFFFFF80;
}

input:-webkit-autofill{
    -webkit-text-fill-color: white !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: inset 0 0 0 44px #FFFFFF29 !important;
}



/* TOP */

#top {
    display: flex;
    height: 64px;
    width: calc(100vh - 96px);
    max-width: 832px;
    margin: 0 auto;
}

#top #logo-wrap {
    overflow: hidden;
    position: relative;
}

#top #logo {
    margin: 23px 0 0 2px;
    height: 20px;
    transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-property: right, transform, opacity;
    animation: 1.25s cubic-bezier(0.22, 0.61, 0.36, 1) 0s 1 logo-in;
}

#top #menu {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;
}

#top #menu .item {
    display: flex;
    align-items: center;
    position: absolute;
    width: max-content;
    right: 0;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-property: right, transform, opacity;
    z-index: 10;
}

#top #menu .item svg {
    display: none;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    opacity: 0;
}

#top #menu .item.active svg {
    display: block;
    transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 1;
}

#top #menu .item:not(:first-child) {
    margin-left: 40px;
}

#top.navigated #menu .item:not(.active) {
    pointer-events: none;
}

#top:not(.navigated) #menu .item:not(.active):hover,
#top.navigated #menu .item.active:hover {
    color: white;
    background: black;
}

#top #menu .item[data-item="projects"] {
    animation: 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0s 1 menu-projects-in;
}

#top #menu .item[data-item="inquiry"] {
    animation: 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0s 1 menu-inquiry-in;
}

#top #menu .item[data-item="projects"]:not(.active) {
    right: 125px;
}

#top.navigated #logo {
    transform: translate(-50%);
    opacity: 0;
}

#top.navigated .item:not(.active) {
    transform: translate(-100%);
    opacity: 0;
}



/* CENTER */

#wrap {
    display: flex;
    position: relative;
    margin: 0 auto 32px;
    overflow: hidden;
    animation: 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0s 1 center-in;
}

#wrap,
.square {
    height: calc(100vh - 96px);
    max-height: 832px;
    aspect-ratio: 1;
}

.square {
    position: absolute;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow: hidden;
    color: white;
}

.gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: translate3d(-10%, -20%, 0px);
}

#projects {
    transform: translateY(100%);
}

#inquiry {
    transform: translateX(100%);
}

#home .gradient {
    background: radial-gradient(70% 70%, #150061, #734DFF);
}

#projects .gradient {
    background: radial-gradient(70% 70%, #601D00, #FF824D);
}

#inquiry .gradient {
    background: radial-gradient(70% 70%, #006060, #4DFFFF);
}

.content .title {
    margin-left: -1px;
}

.content p {
    margin-bottom: 40px;
}

.action {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 108px;
    background: transparent;
    cursor: pointer;
}

.action:hover {
    background: #FFFFFF32;
}

.action .label {
    width: fit-content;
    margin: 41px auto 0;
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
    line-height: 30px;
    transition: transform 0.2s linear;
    letter-spacing: .04em;
}

.action .icon {
    transition: opacity 0.2s linear;
}

.action:hover .icon {
    opacity: 0;
}



/* HOME */

#slogan {
    position: absolute;
    top: 32px;
    left: 45px;
    font-size: 48px;
    font-weight: 500;
    font-family: 'Space Grotesk', sans-serif;
    line-height: 68px;
}

#slogan-item {
    margin-left: 8px;
}

#description {
    position: absolute;
    bottom: 36px;
    left: 47px;
    font-size: 14px;
    line-height: 32px;
    animation: 5.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1 description-in;
}

#description span {
    color: #00FFFF;
    font-weight: 700;
}



/* PROJECTS */

#projects .content {
    width: -webkit-fill-available;
    animation-name: projects-out;
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#projects .content.active {
    animation-name: none;
}

#projects .action .icon-chevron {
    height: 24px;
    animation: action-icon-bounce 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    margin: -4px auto 0;
    width: 100%;
}

#projects .action .icon-cases {
    display: none;
}

#projects .content:not(#projects-cases) .title,
#projects .content:not(#projects-cases) p,
#projects-solutions .list .item,
#projects-integrations .integrations {
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

#projects .content:not(#projects-cases).active .title,
#projects .content:not(#projects-cases).active p,
#projects-solutions.active .list .item,
#projects-integrations.active .integrations {
    animation-name: projects-in;
}



#projects-story {
    position: absolute;
    height: 100%;
    margin: 32% 48px 0;
}

#projects-story p span {
    font-weight: 700;
    color: #00FFFF;
}

#projects-story p:hover span {
    color: #FFFF00;
}



#projects-solutions {
    position: absolute;
    height: 100%;
    margin: 27% 48px 0;
}

#projects-solutions p {
    margin-bottom: 56px;
}

#projects-solutions .list {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
}

#projects-solutions .list .item {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    line-height: 14px;
    letter-spacing: .04em;
    font-size: 14px;
    transition: padding 0.1s linear;
}

#projects-solutions .list span {
    width: 10px;
    height: 10px;
    margin-right: 22px;
    background: #00FFFF;
}

#projects-solutions .list .item:hover {
    color: #FFFF00;
}

#projects-solutions .list .item:hover span {
    background: #FFFF00;
}



#projects-integrations {
    position: absolute;
    height: 100%;
    margin: 37% 48px 0;
}

#projects-integrations p {
    margin-bottom: 56px;
}

#projects-integrations .integrations {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 28px;
    place-items: center;
}

#projects-integrations .integrations svg {
    color: #00FFFF;
}

#projects-integrations .integrations svg:hover {
    color: #FFFF00;
}



#projects-cases,
#anchor-cases {
    position: absolute;
    height: 100%;
    margin: 28% 24px 0;
}

#projects-cases .case,
#anchor-cases .anchor {
    position: absolute;
    width: 100%;
    display: grid;
}

#projects-cases .cases {
    transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#projects-cases .case {
    grid-template-columns: 1fr 1fr;
    padding: 32px 24px 48px 40px;
    border-radius: 24px;
    box-shadow: 0 4px 4px 0 #0000000C;
    overflow: hidden;
    transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#projects-cases .case.covered .title,
#projects-cases .case.covered p {
    opacity: 0;
}

#projects-cases .case.scrolled {
    pointer-events: none;
}

#projects-cases .background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FFFFFF1A;
}

#projects-cases .gradient {
    position: absolute;
    z-index: -1;
}

#projects-cases .left {
    justify-items: start;
}

#projects-cases .right {
    justify-items: end;
}

#projects-cases .top {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

#projects-cases .title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
    transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#projects-cases p {
    font-size: 13px;
    line-height: 24px;
    margin-bottom: 0;
    transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#projects-cases .visit {
    width: 36px;
    height: 24px;
    padding-left: 12px;
    color: #FFFFFF88;
    cursor: pointer;
    z-index: 1;
}

#projects-cases .visit:hover {
    color: #00FFFF;
}

#projects-cases .preview {
    opacity: 0;
    position: absolute;
    transition: opacity .5s linear;
}

#projects-cases .preview.showing {
    opacity: 1;
}

#projects-cases .preview.wide {
    right: 24px;
    width: 339px;
}

#projects-cases .preview.wide .tag {
    width: fit-content;
    position: relative;
    margin: 6px auto 0;
    height: 40px;
    padding: 0 12px;
    box-shadow: 0 4px 4px 0 #00000040;
    z-index: 1;
}

#projects-cases .preview.wide .photo {
    opacity: 0;
    position: absolute;
    width: 339px;
    top: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 4px 0 #00000040;
    object-fit: cover;
    transition: opacity .5s linear;
}

#projects-cases .preview.wide .photo.showing {
    opacity: 1;
}

#projects-cases .preview.tall .mobile {
    position: absolute;
    margin: -8px 0 0 13px;
    height: 280px;
    border-radius: 6px;
    box-shadow: 0 4px 4px 0 #00000040;
    object-fit: cover;
    z-index: 1;
}

#projects-cases .preview.tall .background {
    position: relative;
    top: 16px;
    right: -22px;
    height: 225px;
    width: 339px;
    border-radius: 16px;
    box-shadow: 0 4px 4px 0 #00000040;
}

#projects-cases .preview.tall .background .logo {
    position: absolute;
}





/* INQUIRY */

#inquiry .content {
    position: absolute;
    height: 100%;
    margin: 29% 48px 0;
}

#inquiry p:hover span {
    color: #FFFF00;
}

#inquiry .inputs {
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 28px;
    margin: 56px 0 24px;
}

#projects .action .icon-cases,
#inquiry .action .icon {
    margin: 1px auto;
    width: 48px;
    height: 1px;
    background: white;
    animation: action-icon-bounce 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

#inquiry .content .title,
#inquiry .content p,
#inquiry .content input {
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

#inquiry .content.active .title,
#inquiry .content.active p,
#inquiry .content.active input {
    animation-name: inquiry-in;
}

#inquiry .error {
    position: absolute;
    opacity: 0;
    bottom: 45px;
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #FFFF00;
}

#inquiry .action.input-error .icon,
#inquiry .action.input-error .label {
    opacity: 0;
}

#inquiry .action.input-error .error {
    opacity: 1;
}



#contact {
    position: fixed;
    top: 21px;
    right: 33px;
    font-size: 14px;
    line-height: 30px;
    opacity: 0;
    transition: opacity 0s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;
}

#contact.visible {
    opacity: 1;
    transition-duration: 2s;
    transition-delay: 2s;
}

#contact p {
    font-size: 13px;
    line-height: 21px;
    margin-bottom: 7px;
    width: fit-content;
    margin-left: auto;
    cursor: pointer;
    pointer-events: none;
}

#contact.visible p {
    pointer-events: unset;
}

#contact.visible p:hover {
    background: black;
    color: white;
}



/* ANIMATIONS */

@keyframes logo-in {
    0%, 60% { transform: translateX(-50%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes menu-projects-in {
    0%, 66.65%  { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes menu-inquiry-in {
    0%, 68.75% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes center-in {
    0%, 25% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes description-in {
    0%, 63.5% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes projects-in {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0px); }
}

@keyframes projects-out {
    0% { opacity: 1; transform: translateY(0px); }
    100% { opacity: 0; transform: translateY(-80px); }
}

@keyframes inquiry-in {
    0% { opacity: 0; transform: translateX(30px); }
    100% { opacity: 1; transform: translateY(0px); }
}

@keyframes action-icon-bounce {
    0%, 100% { transform: translateY(-2px); }
    66% { transform: translateY(6px); }
}



/* FONTS */

@font-face {
    font-family:                        'Space Grotesk';
    src:                                url('/fonts/SpaceGrotesk-Regular.otf') format("opentype");
    font-weight:                        400;
}

@font-face {
    font-family:                        'Space Grotesk';
    src:                                url('/fonts/SpaceGrotesk-Medium.otf') format("opentype");
    font-weight:                        500;
}

@font-face {
    font-family:                        'Space Grotesk';
    src:                                url('/fonts/SpaceGrotesk-Bold.otf') format("opentype");
    font-weight:                        700;
}

@font-face {
    font-family:                        'Space Mono';
    src:                                url('/fonts/SpaceMono-Regular.ttf') format("truetype");
    font-weight:                        400;
}

@font-face {
    font-family:                        'Space Mono';
    src:                                url('/fonts/SpaceMono-Bold.ttf') format("truetype");
    font-weight:                        700;
}

@font-face {
    font-family:                        'Space Mono';
    src:                                url('/fonts/SpaceMono-RegularItalic.ttf') format("truetype");
    font-weight:                        400;
    font-style:                         italic;
}

@font-face {
    font-family:                        'Space Mono';
    src:                                url('/fonts/SpaceMono-BoldItalic.ttf') format("truetype");
    font-weight:                        700;
    font-style:                         italic;
}



/* DISABLE SELECTION */

#frame > * {
    -webkit-tap-highlight-color:        transparent;
    -webkit-touch-callout:              none;
    -webkit-user-select:                none;
    -khtml-user-select:                 none;
    -moz-user-select:                   none;
    -ms-user-select:                    none;
    user-select:                        none;
}