:root {
    --c-white: #ecebeb;
    --c-black: #0f0f0f;
    --c-bg: #ecebeb;
    --c-dbg: #E6E7EB;
    --c-accent: #C2C1D3;
    --c-daccent: #b6b5ca;
    --c-dgray: #1a1919;

    --s0-black: rgba(15, 15, 15, 0);
    --s2-black: rgba(15, 15, 15, 0.2);


    --s0-white: rgba(236, 235, 235, 0);
    --s5-white: rgba(236, 235, 235, 0.5);
    --s6-white: rgba(236, 235, 235, 0.6);
    --s7-white: rgba(236, 235, 235, 0.7);


    --s0-accent: rgba(194, 193, 211, 0);
    --s1-accent: rgba(194, 193, 211, 0.1);
    --s2-accent: rgba(194, 193, 211, 0.2);
    --s3-accent: rgba(194, 193, 211, 0.3);
    --s4-accent: rgba(194, 193, 211, 0.4);
    --s5-accent: rgba(194, 193, 211, 0.5);
    --s6-accent: rgba(194, 193, 211, 0.6);
    --s7-accent: rgba(194, 193, 211, 0.7);
    --s8-accent: rgba(194, 193, 211, 0.8);
    --s9-accent: rgba(194, 193, 211, 0.9);

    --s5-daccent: rgba(182, 181, 202, 0.5);


    --s0-white: rgba(236, 235, 235, 0);
    --s5-white: rgba(236, 235, 235, 0.5);

    --b-radius: 1em;
    --b-radius2: 1.5em;
    --b-radius3: 2em;

    --p-padding: 15%;
}
::-webkit-scrollbar {width: .35vw;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {background: var(--c-accent);border-radius: 0.35vw;}

::selection  {background-color: var(--c-accent);color: var(--c-white);}
.noselect, img {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}
input:not([type='checkbox']), select, .textarea {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
a {text-decoration: none;cursor: pointer;color: var(--c-accent);}
body, html {
    width: 100%;margin: 0;padding: 0;
    color: var(--c-white);font-family: "Poppins", serif;
    font-weight: 400;font-style: normal;background-color: var(--c-bg);
}
h1, h2, h3, h4, h5, h6 {line-height: 1;font-weight: normal;display:block;position:relative;margin: 0;padding: 0;}

.thin {font-weight: 200;}
.regular {font-weight: 400;}
.semibold {font-weight: 600;}
.bold {font-weight: 800;}


.extra-title {font-size: 120px;}
p {padding: 0;margin: 0;}
h1, .s1 {font-size: 40px;}
h2, .s2 {font-size: 25px;}
h3, .s3, .smallh {font-size: 22px;}
h4, .s4 {font-size: 20px;}
h5, .s5 {font-size: 18px;}
h6, .s6 {font-size: 16px;}
.small {font-size: 14px;}
.extra-small {font-size: 12px;}

.white {color: var(--c-white);}
.lgray {color: var(--c-lgray);}
.gray {color: var(--c-gray);}
.accent, .purple {color: var(--c-accent);}
.green {color: #4ee048;}
.red {color: #f04141;}
.black {color: var(--c-black);}
.pointer {cursor: pointer;}
.inline {display:inline-block !important;vertical-align: middle;position:relative;}
.block {position:relative;display:block;}
.top-inline {display:inline-block;vertical-align: top;}
.bottom-inline {display:inline-block;vertical-align: bottom;}
.underline {text-decoration: underline;text-decoration-color: var(--c-accent);}
.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}

.line-0 {line-height:0;}
.line-1 {line-height:1;}
.line-2 {line-height:1.25;}
.extra-line, .line-3 {line-height: 1.5 !important;}
.line-4 {line-height: 1.75;}
.line-5 {line-height: 2;}

.no-whitespace {white-space: nowrap;}

.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}

menu {
    position:absolute;top:0;left:0;z-index:990;
    margin:0;padding:0;width:100%;
}
.menu-top {
    display:grid;position:absolute;top:0;left:0;padding:4vh;box-sizing: border-box;
    width:100%;grid-template-columns: repeat(3, minmax(0, 1fr));align-items: center;
}
.center-side {margin: 0 auto;}

.canvas-move {position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}

header {
    position:relative;width:100%;height:100vh;overflow:hidden;
    /*background: linear-gradient(to top, var(--c-bg), var(--s0-white));*/
}
canvas {z-index:100;}
#image-wrapper canvas {border-radius: var(--b-radius2);}

button, .button {
    padding:16px 26px;border-radius: 40px;outline: none;background-color: var(--c-black);
    cursor:pointer;position:relative;border: none;text-decoration: none;
    box-shadow:
        inset 0 -6px 10px 0 #1d1d1d,
        0 6px 12px 0 rgba(36, 36, 36, 0.3);

    background-image: 
        linear-gradient(to bottom, transparent 50%, var(--c-black) 50%),
        linear-gradient(to right, var(--c-dgray) 50%, var(--c-black) 50%);
    background-size: 5px 5px, 5px 5px;background-position:center;
    transition: all 0.3s ease-in-out;
}
button p, .button p {
    position:relative;
    background-image: linear-gradient(to right, rgb(206, 204, 204), var(--c-white) 40%, var(--c-white) 60%, rgb(206, 204, 204));
    color: transparent;
    background-clip: text;
}
button:hover, .button:hover {
    background-size: 10px 10px, 10px 10px;
    box-shadow:
        inset 0 -6px 10px 0 #1d1d1d,
        0 8px 14px 0 rgba(36, 36, 36, 0.3);
}

.bubble {padding: 7px 14px;border-radius: var(--b-radius3);position:relative;}
.smaller-bubble {padding: 4px 10px;}
.accent-bubble {background-color: var(--c-accent);}
.orange-bubble {background-color: #df9526;}
.anim-bubble {
    transform: scale(0);transform-origin: left center;
}
@keyframes bubble {
    from {transform:scale(0);}
    to {transform:scale(1);}
}
.anim-bubble.animate {animation: bubble 0.3s ease-in-out forwards;}


main {position:relative;}
section {padding: 5% var(--p-padding);width: 100%;box-sizing: border-box;position:relative;background-color: var(--c-bg);}
.wrap-featured {margin-top:2vh;display:grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 2vh;}

.flex-title {display:flex;align-items: center;}
.arrow-box {margin-left:auto;}

#featured-projects {
    padding-top: 0;
    height: 400vh;
}
.big-project {position:sticky;display:block;top:15vh;left:0;height:70vh;}
.project-wrap {position:absolute;top:0;right:0;height:70vh;width:40%;opacity:0;transition: opacity 0.5s ease-in-out;}
.project-wrap article {margin-top:2vh;}
#image-wrapper {position:relative;transform-origin: top left;}
.worked-in {margin-top:2vh;}
.activities {margin-top:4vh;}
.activities .anim-bubble:not(.animate) {display: none !important;}


.featured-project {position:relative;}
.featured-first {grid-column-start: 1;grid-column-end: 4;}

.featured-image-wrap {position:relative;border-radius: var(--b-radius2);overflow:hidden;}
.fullheight {height:100%;}
.fullheight .over-aspect {position:absolute;}
.aspect {width:100%;display:block;position:relative;margin:0;padding:0;opacity:0;}
.over-aspect {width:100%;height:100%;position:absolute;top:0;left:0;object-fit: cover;object-position: center top;}
.gs .over-aspect {object-position:  center left;}

.over-featured {
    position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:10;
    border-radius: var(--b-radius2);overflow:hidden;background-color: rgba(10,10,10,0.35);
}
.over-featured::before {
    position:absolute;bottom:0;left:0;width:70%;height:45%;content:"";
    background: 
    radial-gradient(at 0% 150%, rgba(10,10,10,0.2) 25%, rgba(10,10,10,0) 65%);
}
.featured-logo {position:absolute;top:6vh;left:6vh;width: 10%;}
.featured-text {position:absolute;bottom:6vh;left:6vh;max-width:40%;}
.featured-text.longer-text {max-width:70%;}
.over-featured article {margin-top: 2vh;}


#short-about {background-color: transparent;background: linear-gradient(to bottom, var(--c-white), var(--s5-white), var(--c-white));}
#short-about p {margin: 1vh 0;}
#short-about p font {
    transform:scaleY(0);position:relative;display:inline-block;
}
#short-about article {z-index:10;position:relative;}

@keyframes magic-text {
    from {background-position: 0% center;}
    to {background-position: -200% center;}
}
.magic {
    animation: magic-text 3s linear infinite;
    background: linear-gradient(
        to right,
        #9B7CC2,
        #D28ECB,
        #656ABB,
        #9B7CC2
    );
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}


.op-no {opacity:0;}
@keyframes scale-up {
    from {transform:scaleY(0);}
    to {transform:scaleY(1);}
}
.scale-up {animation: scale-up 0.3s ease-in-out forwards;transform:scaleY(0);}
.scale-up:not(.magic) {
    animation: scale-up 0.3s ease-in-out forwards;
}
.scale-up.magic {
    animation: 
        scale-up 0.3s ease-in-out forwards,
        magic-text 3s linear infinite;
}


.wrap-recents {
    display:grid;grid-template-columns: repeat(5, minmax(0, 1fr));grid-template-rows: repeat(2, 1fr);
    margin-top:2vh;gap: 2vh;
    grid-auto-rows: calc(((100vw - (2vh * 4)) / 5) * 9 / 16);
}
.main-view {grid-column: span 2;grid-row: span 2;}
.recent-project {position:relative;}
.grid-dots {
    position:absolute;top:25%;height:75%;left:calc(var(--p-padding) / 2);width: calc(100% - var(--p-padding));
    background-image: radial-gradient(rgba(15,15,15,1) 1px, transparent 0);
    background-size: 50px 50px;
}

.bento-grid {
    display:grid;grid-template-columns: repeat(8, minmax(0, 1fr));gap:1vh;
}
.bento-in {position:relative;border-radius: var(--b-radius2);overflow:hidden;min-height:15vw;}
.bento-cover {width:100%;height:100%;position:absolute;top:0;left:0;object-fit: cover;object-position: center;}
.bento-1 {grid-row-start: 1;grid-row-end: 3;grid-column-start: 1;grid-column-end: 3;}
.bento-2 {grid-row-start: 1;grid-row-end: 2;grid-column-start: 3;grid-column-end: 5;}
.bento-3 {grid-row-start: 1;grid-row-end: 2;grid-column-start: 5;grid-column-end: 7;}
.bento-4 {grid-row-start: 1;grid-row-end: 4;grid-column-start: 7;grid-column-end: 9;}

.bento-5 {grid-row-start: 2;grid-row-end: 6;grid-column-start: 3;grid-column-end: 7;}


.bento-6 {grid-row-start: 3;grid-row-end: 7;grid-column-start: 1;grid-column-end: 3;}
.bento-7 {grid-row-start: 6;grid-row-end: 7;grid-column-start: 3;grid-column-end: 5;}
.bento-8 {grid-row-start: 6;grid-row-end: 7;grid-column-start: 5;grid-column-end: 7;}
.bento-9 {grid-row-start: 4;grid-row-end: 7;grid-column-start: 7;grid-column-end: 9;}


.anim-1, .anim-2, .anim-3 {display:none;}
.letter-wrap {overflow:hidden;position:relative;}
.letters font {
    position:relative;transform:rotate(45deg) translateY(50%);display:block;
    transform-origin: top left;transition: all 0.2s ease-in-out;text-shadow: 0 0 8px var(--c-black);
}
.letters.animate font {transform: rotate(0deg) translateY(0);text-shadow: 0 0 0 var(--c-black);}
.space-hidden {display: none !important;}

.contact-split {display:grid;grid-template-columns: 45% 50%;gap:5%;margin:10vh 0 20vh 0;z-index:20;position:relative;}
.earth-wrap {position:absolute;bottom:0;left:0;width:50%;height:80%;}
.earth-wrap canvas {width:100%;height:100%;}
.earth-wrap::after {
    position:absolute;bottom:0;left:0;width:100%;height:100%;content:"";
    background: linear-gradient(to top, var(--c-white), var(--s0-white));
}

.build-blocks {
    position:absolute;bottom:0;left:0;width:100%;overflow:hidden;
    display:grid;grid-template-columns: repeat(18, minmax(0, 1fr));gap: 4px;
}
.blocks-1 {height:auto;padding-top:0;}
.blocks-2 {height:50%;padding-top:10vh;}
.blocks-1::after {
    content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;
    background: linear-gradient(to top, var(--c-bg), var(--s6-white), var(--c-bg));
}
.blocks-2::after {
    content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;
    background: linear-gradient(to top, var(--c-bg), var(--s6-white));
}
.block-in {
    border-radius: 1vh;background-color: var(--c-accent);box-shadow: 0 4px 12px 0 rgba(15, 15, 15, 0.05);
    transition: all 0.3s ease-in-out;
}
.block-in .aspect {width:100%;opacity:0;}
.block-in.active {transform:translateY(-20%) scale(0.9);}
.empty-block {opacity:0;}

.social-option {
    display:inline-flex;gap:2vh;font-style: normal !important;
    padding: 1.5vh 0;align-items: center;
}
.social-icon {width:3vh;height:3vh;object-fit: contain;object-position: center;}

/* Inputs */
form {
    display:flex;gap:4vh;flex-direction: column;padding:4vh;border-radius: var(--b-radius);
    background-color: var(--c-white);z-index:20;position:relative;
    box-shadow: 0 12px 12px 0 var(--s3-accent);
}

.input-wrap {position:relative;}
input, textarea {
    padding: 1.5vh 2.5vh;border-radius: var(--b-radius3);border: solid 1px var(--c-black);outline: none;
    font-size: 20px;line-height: 1.3;font-family: "Poppins", serif;background-color: var(--c-bg);
    font-weight: 400;color: var(--c-black);display:block;width:100%;box-sizing: border-box;
}
textarea {border-radius: var(--b-radius2);resize: none;}
label {
    position:absolute;top:1.5vh;left:2.5vh;font-size: 20px;line-height: 1.3;
    font-family: "Poppins", serif;color: var(--c-black);font-weight: 600;
    transition: all 0.4s ease-in-out;
}
textarea::placeholder {font-size: 20px;line-height: 1.3;font-family: "Poppins", serif;color: var(--c-black);font-weight: 600;}

input:not(:placeholder-shown) ~ label,
input:focus ~ label,
input:hover ~ label,
label:hover {left:0;top: -0.85vw;transform: scale(0.75);transform-origin: left;}

input[type="submit"] {
    background-color: var(--c-black);color: var(--c-white);cursor:pointer;font-weight:600;
    box-shadow:
        inset 0 -6px 10px 0 #1d1d1d,
        0 6px 12px 0 rgba(36, 36, 36, 0.3);
}

@media (max-width: 2000px) {
    :root {
        --p-padding: 10%;
    }
}
@media (max-width: 1500px) {
    :root {
        --p-padding: 7.5%;
    }
}
@media (max-width: 1200px) {
    :root {
        --p-padding: 5%;
    }
}
@media (max-width: 1000px) {
    :root {
        --p-padding: 5%;
    }

    .menu-top {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .menu-top .center-side {display:none;}

    header {height: 45dvh;}

    .project-wrap {
        width:100%;height: auto;
    }
}