@import url('https://fonts.googleapis.com/css2?family=Roboto:wdth,wght@75..100,100..900&display=swap');

@font-face {
    font-family: "GotFont";
    src: url(http://localhost:3000/fonts/fonts/spg.ttf) format("truetype");
}

@font-face {
    font-family: "ExatCon-Bold";
    src: url(http://localhost:3000/fonts/fonts/exatcyrcondensed-bold.otf) format("opentype");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "ExatWide-Bold";
    src: url(http://localhost:3000/fonts/fonts/exatcyrwide-bold.otf) format("opentype");
    font-style: oblique;
    font-weight: bold;
}

@font-face {
    font-family: "Exat-Bold";
    src: url(http://localhost:3000/fonts/fonts/exatcyr-bold.otf) format("opentype");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "Exat-Normal";
    src: url(http://localhost:3000/fonts/fonts/exatcyr-regular.otf) format("opentype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "Exat-Con-Light";
    src: url(http://localhost:3000/fonts/fonts/exatcyrcondensed-light.otf) format("opentype");
    font-style: normal;
    font-weight: auto;
}

@font-face {
    font-family: "PPSupplyMono";
    src: url("http://localhost:3000/fonts/fonts/PPSupplyMono-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: local('Helvetica Now Text  Regular'), local('Helvetica-Now-Text--Regular'),
    url('/fonts/HelveticaNowText-Regular.woff2') format('woff2'),
    url('/fonts/HelveticaNowText-Regular.woff') format('woff'),
    url('/fonts/HelveticaNowText-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "ABC Diatype";
    src: url("http://localhost:3000/fonts/4c4a87973ef80fc72049e01b9085fadc.eot");
    src: url("/fonts/4c4a87973ef80fc72049e01b9085fadc.eot?#iefix") format("embedded-opentype"),
    url("/fonts/4c4a87973ef80fc72049e01b9085fadc.woff") format("woff"),
    url("/fonts/4c4a87973ef80fc72049e01b9085fadc.woff2") format("woff2"),
    url("/fonts/4c4a87973ef80fc72049e01b9085fadc.ttf") format("truetype"),
    url("/fonts/4c4a87973ef80fc72049e01b9085fadc.svg#ABC Diatype") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.roboto-normal {
    font-family: "Roboto", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 400 !important;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}


.abc-diatype {
    font-family: "ABC Diatype", monospace;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}


/* Color Theme Swatches in Hex */
.LT-Monoslave---Font-1-hex {
    color: #F2F2F2;
}

.LT-Monoslave---Font-2-hex {
    color: #BFBFBF;
}

.LT-Monoslave---Font-3-hex {
    color: #8C8C8C;
}

.LT-Monoslave---Font-4-hex {
    color: #404040;
}

.LT-Monoslave---Font-5-hex {
    color: #0D0D0D;
}

/* Color Theme Swatches in RGBA */
.LT-Monoslave---Font-1-rgba {
    color: rgba(242, 242, 242, 1);
}

.LT-Monoslave---Font-2-rgba {
    color: rgba(191, 191, 191, 1);
}

.LT-Monoslave---Font-3-rgba {
    color: rgba(140, 140, 140, 1);
}

.LT-Monoslave---Font-4-rgba {
    color: rgba(16, 16, 16, 0.86);
}

.LT-Monoslave---Font-5-rgba {
    color: rgba(12, 12, 12, 1);
}


.martian-mono-bold {
    font-family: "Martian Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings: "wdth" 95.4;
}

.martian-mono-regular {
    font-family: "Martian Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 95.4;
}

/**,*/
/**::after,*/
/**::before {*/
/*    box-sizing: border-box;*/
/*}*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
html {
    font-family: "Martian Mono", monospace;
    text-rendering: optimizeLegibility !important;
    /*background-color: #126fca;*/
    background-color: #0D0D0D;
    color: #404040;
}

section {
    position: relative;
    min-height: 50vh;
    max-width: 100vw;
    /*border: 5px solid black;*/
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.section-normal {
    height: 100vh !important;
}

.section-short {
    position: relative;
    height: 50vh !important;
    display: flex;
    overflow: hidden;
}

.section-wrap {
    max-width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
}

.intro-overlay {
    top: 0;
    left: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #8C8C8C;
    z-index: 4;
}

/*IntroToIntro Grid*/

.container-intro2intro {
    position: relative;
    display: block;
    margin-left: 5px;
    margin-right: 5px;
    height: 100vh;
    overflow: hidden;
}

.scrambled_buzzwords {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.spacer-vertical-small {
    height: 5vh;
    width: auto;
}

.spacer-horizontal-fill {
    position: absolute;
    right: 0;
    height: 9vh;
    width: 61%;
}

@media (min-width: 470px) {
    .spacer-horizontal-fill {
        width: 81%;
    }
}

@media (min-width: 540px) {
    .spacer-horizontal-fill {
        width: 70%;
    }
}


@media (min-width: 720px) {
    .spacer-horizontal-fill {
        width: 68%;
    }
}

@media (min-width: 860px) {
    .spacer-horizontal-fill {
        width: 64%;
    }
}

@media (min-width: 1010px) {
    .spacer-horizontal-fill {
        width: 62%;
    }
}

@media (min-width: 1110px) {
    .spacer-horizontal-fill {
        width: 55%;
    }
}

@media (min-width: 1360px) {
    .spacer-horizontal-fill {
        width: 47%;
    }
}

@media (min-width: 1640px) {
    .spacer-horizontal-fill {
        width: 39%;
    }
}

@media (width >= 1840px) and (width <= 2200px) {
    .spacer-horizontal-fill {
        width: 34%;
    }
}

@media (min-width: 2200px) {
    .spacer-horizontal-fill {
        width: 25%;
    }
}

.headline {
    grid-area: headline;
    line-height: 0.9;
}

.business_type {
    height: 7vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: end;
    align-items: flex-end;
}

.intro_anim {
    width: 100vw;
    height: 50vh;
    display: block;
    background-color: #0D0D0D;

}

.business_type_style {
    opacity: 0;
    will-change: transform;
    line-height: 0.75;
}


.delim { grid-area: delim; }

.scroll_formore {
    position: absolute;
    right: 0;
    bottom: 0;
}

.version_info
{
    position: absolute;
    left: 0;
    bottom: 0;
}


.container-intro2intro *:after {
    content: attr(data-content);
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: start;
    justify-content: start;
    font-family: "PPSupplyMono", monospace;
    padding-left: 5px;
}



/*end of IntroToIntro Grid*/


.intro2intro-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 99vw;
    height: 98vh;
    background-color: #8C8C8C;
    border-bottom: #0D0D0D 20px solid;
    z-index: 5;
    overflow: hidden;
}

.white-bg {
    background-color: #BFBFBF !important;
}

.grey-bg {
    background-color: #8C8C8C !important;
}

.black-bg {
    background-color: #0D0D0D !important;
}

.border-thin {
    border: #0D0D0D 1px solid;
}

.border-heavy-bottom {
    border-bottom: #0D0D0D 20px solid;
}

.border-thinner {
    border: #0D0D0D 3px solid;
}

.border-thinner-no-bottom {
    border-left: #0D0D0D 3px solid;
    border-right: #0D0D0D 3px solid;
    border-top: #0D0D0D 3px solid;
}

.border-medium {
    border: #0D0D0D 5px solid;
}

.border-medium-heavy-sides {
    border-top: #0D0D0D 5px solid;
    border-bottom: #0D0D0D 5px solid;
    border-left: #0D0D0D 10px solid;
    border-right: #0D0D0D 10px solid;
}


.border-thin-left {
    border-left: #0D0D0D 2px solid;
}

.border-thin-sides-dashed {
    border-left: #0D0D0D 1px dashed;
    border-right: #0D0D0D 1px dashed;
}

.border-thin-right-dashed {
    border-right: #8C8C8C 1px dashed;
}

.border-thin-bottom-dashed {
    border-bottom: #0D0D0D 1px dashed;
}

.border-thin-bottom {
    border-bottom: #0D0D0D 2px solid;
}

.border-thin-top {
    border-top: #0D0D0D 1px solid;
}

.border-thinner-top {
    border-top: #0D0D0D 3px solid;
}

.border-thin-sides {
    border-left: #0D0D0D 1px solid;
    border-right: #0D0D0D 1px solid;
}

.border-thinner-sides {
    border-left: #0D0D0D 3px solid;
    border-right: #0D0D0D 3px solid;
}

.border-thin-top-lgrey {
    border-top: #BFBFBF 2px solid;
}

.padding-sides-small {
    padding-left: 10px;
    padding-right: 10px;
}

.padding-left-small {
    padding-left: 10px;
}

.padding-right-small {
    padding-right: 10px;
}

.padding-top-small {
    padding-top: 10px;
}

.padding-top-medium {
    padding-top: 15px;
}

.padding-bottom-xs {
    padding-bottom: 5px;
}

.text-to-end {
    text-align: end; !important;
}

.text-xxs {
    font-size: 0.9rem !important;
}

.text-xs {
    font-size: clamp(0.8rem, 0.9vw, 1rem) !important;
}

.text-s {
    font-size: clamp(18px, 7.889px + 1.944vw, 28px) !important;
}

.strong-s {
    font-size: clamp(24px, 7.889px + 1.944vw, 32px) !important;
}

.text-m {
    font-size: clamp(42px, 5px + 6.623vw, 72px) !important;
}

.text-ms {
    font-size: clamp(22px, 5px + 6.623vw, 52px) !important;
}

.text-xl {
    font-size: clamp(5rem, 10rem, 12rem) !important;
}

.text-xxl {
    font-size: clamp(8rem, 12rem, 15rem) !important;
}

.text-allcap {
    text-transform: uppercase !important;
}

.text-fixed_width-25 {
    width: 25vw !important;
}

.text-end-aligned {
    text-align: end !important;
}

.text-centered {
    text-align: center !important;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.wrapper-row {
    margin-left: 10px;
    width: 99%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

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

.title {
    font-family: "ABC Diatype", monospace;
    color: #0D0D0D;
    font-weight: 500;
    font-size: 10vw;
}

.headline-medium-black {
    width: 100%;
    height: auto;
    left: 0;
    position: absolute;
    font-family: "ABC Diatype", monospace;
    color: #F2F2F2;
    font-weight: 600;
    font-size: 12vw;
    text-align: center;
    z-index: 1;
    mix-blend-mode: difference;
}

.move-10-back {
    top: -10% !important;
}

.move-20-back {
    top: -20% !important;
}

.move-3-back {
    top: -3% !important;
}

.move-6-back {
    top: -6% !important;
}


.headline-header-thin-white {
    font-family: "PPSupplyMono", monospace;
    font-size: 0.8vw;
    color: #0D0D0D;
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 99vw;
    height: auto;
    top: 0;
    left: 0;
    z-index: 3;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 5px;
}

.headline-tagline-small-left {
    position: absolute;
    top: 40vh;
    left: 10vw;
    font-family: "ABC Diatype", monospace;
    color: #0D0D0D;
    font-size: 5vw;
    height: auto;
    width: auto;
    z-index: 0;
}
.headline-tagline-small-right {
    position: absolute;
    top: 50vh;
    right: 11vw;
    font-family: "ABC Diatype", monospace;
    color: #0D0D0D;
    font-size: 5vw;
    height: auto;
    width: auto;
    z-index: 0;
}


.headline-cards {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.headline-cards .card {
    flex: 1;
    position: relative;
    aspect-ratio: 5/7;
    padding: 0.75rem;
    border-radius: 0.5rem;
    outline: #0D0D0D 2px solid;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.headline a {
    color: #5a0a0a !important;

}

.card-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.headline-cards .card span {
    font-size: 0.7rem;
}

.headline-cards .card#hero-card-1 {
    background-color: #404040;
    transform-origin: top right;
    z-index: 2;
}

.headline-cards .card#hero-card-2 {
    background-color: #5F5F5F;
    z-index: 1;
}

.headline-cards .card#hero-card-3 {
    background-color: #333333;
    transform-origin: top left;
    z-index: 0;
}

.title span {
    display: inline-block;
    will-change: transform;
}

.no-margin-tb {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


.title-expanding-right {
    visibility: hidden;
    position: absolute;
    bottom: 5vh;
    right: 0;
    font-family: "ABC Diatype", monospace;
    letter-spacing: -0.1rem;
}

.title-expanding-left {

    position: absolute;
    top: 1vh;
    left: 0;
    font-family: "ABC Diatype", monospace;
    letter-spacing: -0.1rem;
}

.title-expanding-left strong {
    font-weight: 600 !important;
    letter-spacing: 0.1rem !important;
}

.intro-headline-container,
.intro-headline-container img,
.fade-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.intro-headline-img img {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 250px;
    height: auto;
    object-fit: contain;
}

.fade-overlay {
    background-color: #0D0D0D;
    will-change: opacity;
}

/* The line-overlay SVG is scrubbed from scale 500 down to 1.1 while the intro
   is pinned (see App.jsx). Without a compositor hint the browser re-rasterizes
   the vector on scale changes during scroll; keep it on its own GPU layer. */
#bcode {
    will-change: transform, opacity;
}

.svg {
    position: absolute;
    width: 0;
    height: 0;
}

.clipped {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #0D0D0D;
    background-size: cover;
    transform: scale(600,5);
    -webkit-clip-path: url(#my-clip-path);
    clip-path: url(#my-clip-path);
}

.headline-container {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    width: 99vw;
    height: 100%;
    z-index: 2;
}

.overlay-copy {
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 2;
    width: 100%;
}

.panel-vertical-slim {
    width: 2.5vw;
    height: 100vh;
    display: block;
    background-color: #BFBFBF;
    transform-origin: center bottom;
    transform: scaleY(0);

}

/*.panel-svg {*/
/*    position: absolute;*/
/*    top: 12%;*/
/*    left: 0;*/
/*    height: 75vh;*/
/*    overflow: hidden;*/
/*    width: 99vw;*/
/*    display: flex;*/
/*    align-items: flex-start;*/
/*    z-index: 2;*/
/*}*/

.panel-light {
    position: absolute;
    top: 33vh;
    height: 40vh;
    width: 97%;
    margin-left: 15px;
    display: inline-flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    background-color: #BFBFBF;
    z-index: 1;

}

.panel-bg-text-small {
    font-family: "PPSupplyMono", monospace;
    font-size: 0.5vw;
    text-align: justify;
    position: absolute;
    background-color: #0D0D0D;
    top:25vh;
    left: 20px;
    width: 99vw;
    height: 75vh;
}

.panel-black-thin {
    position: absolute;
    top:25vh;
    left: 20px;
    width: 99vw;
    height: 75vh;
    padding: 15px;
    margin-top: 15px;
    align-items: center;
    background-color: #0D0D0D;
    font-family: "ABC Diatype", monospace;
    font-size: 8vw;
    color: #F2F2F2;
    overflow: hidden;
    /*clip-path:  url(#b);*/
    z-index: 0;
}

.panel-black-cover-with-text svg {
    position: absolute;
    width: 0;
    height: 0;
}


/*TAGLINE TEXT ANIM STYLE*/
.content-tagline {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    grid-template-areas: 'main';
    height: calc(100vh);
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 4vh;
    left: 0;
}

.content-tagline__slide {
    grid-area: main;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    grid-template-areas: 'inner';
    align-items: center;
    opacity: 0;
    pointer-events: none;
}

.content-tagline__slide--current {
    opacity: 1;
}

.content-tagline__text-wrap {
    grid-area: inner;
    width: 100%;
}


.content-tagline__text-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.content-tagline__text {
    overflow: hidden;
    flex: 1;
    opacity: 0;
    pointer-events: none;
}

.content-tagline__text:nth-child(6) {
    opacity: 1;
}

.content-tagline__text--full {
    flex: none;
}

.content-tagline__text-inner {
    display: block;
    color: #0D0D0D;
    text-transform: uppercase;
    font-size: 10rem;
    font-weight: 900;
    line-height: 0.85;
    font-family: "Arial", monospace;
}

.content-tagline__text-inner--bottom {
    transform: translate3d(0,-40%,0);
}

.content-tagline__text-inner--stroke {
    -webkit-text-stroke: 2px #404040;
    text-stroke: 2px #404040;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
}


/*END OF TAGLINE TEXT ANIM STYLE*/


/* OUR SERVICES */

.services {
    position: relative;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.services-header {
    position: relative;
    width: 100%;
    padding: 0 2rem;
    background-color: #0D0D0D;
    will-change: transform;
}

.services-header img {
    object-fit: contain;
}

.services-header:nth-child(1),
.services-header:nth-child(3) {
    transform: translateX(100%) translateY(0%);
}

.services-header:nth-child(2) {
    transform: translateX(-100%) translateY(0%);
    z-index: 2;
}

.services-copy {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 155svh;
    padding: 2rem 2rem 25svh 2rem;
    text-align: center;
}

.animate-text {
    position: relative;
    width: 60%;
    margin: 0 auto;
    color: #4f4f4f;
    --clip-value: 100%;
}

.animate-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    clip-path: inset(0 0 var(--clip-value) 0);
    will-change: clip-path;
}

@media (max-width: 1000px) {
    h1 {
        font-size: 2rem;
        letter-spacing: -0.05rem;
    }

    .animate-text {
        width: 100%;
    }
}



.text-white {
    color: #F2F2F2 !important;
}

.text-black {
    color: #0D0D0D !important;
}

.tagline-big {
    position: absolute;
    line-height: 0.8;
    width: 99vw;
    text-align: right;
    color: #0D0D0D;
    top: 5vh;
}

.subtagline-small {
    position: absolute;
    top: 35vh;
    left: 5vw;
    text-align: start;
    opacity: 0;
    color: #0D0D0D;
}

.subtagline-content {
    display: grid;
    gap: 1rem;
    width: 20vw;
}

@media (min-width: 1920px) {
    .subtagline-small {
        top: 35vh;
        left: 5vw;
    }

    .subtagline-content {
        width: 15vw;
    }
}

svg {
    position: absolute;
    top: 0;
    left: 0;
}

.section-headline {
    max-width: 100vw;
    width: 99vw;
    height: 100vh;
    display: block;
    overflow-x: hidden;
    z-index: 3;
    background: #0D0D0D;
}

.box {
    height: 2.5vh;
    width: 50vw;
    background: #BFBFBF;
    display: block;
    position: relative;
    opacity: 0;
}

@media (min-width: 1920px) {
    .box {
        height: 2.5vh;
        width: 60vw;
        background: #BFBFBF;
        display: block;
        position: relative;
    }
}

.move-100-left {
    transform: translateX(0%);
}

.move-100-right {
    transform: translateX(2000%);
}

/*.circles-svg {*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 80vh;*/
/*    transform: scale(3) translateY(25%) rotate(45deg);*/
/*    overflow: visible;*/
/*}*/

/* END OF OUR SERVICES*/


/* ===== SceneAbout + motion-blur transition ===== */

/* Note: vertical motion blur for the scene transition is implemented as a
   WebGL postprocess shader (see src/shaders/VerticalMotionBlurEffect.js) and
   is only mounted during the transition window via <EffectComposer>. No
   CSS / SVG backdrop filter is used. */

#scene-about-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.scene-about__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform, filter;
}

.scene-about__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(80vw, 1100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    pointer-events: none;
    mix-blend-mode: difference;
}

.scene-about__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 48ch;
}

.scene-about__cta {
    pointer-events: auto;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #F2F2F2;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: background-color 200ms ease, color 200ms ease;
}

.scene-about__cta:hover {
    background-color: #F2F2F2;
    color: #0D0D0D !important;
}

/* ===== end SceneAbout ===== */