/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × */
/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × */
/* × × × × × × × × × × CODEXBLAU  GMBH × × × × × × × × × × */
/* × × × × × × × × × × CORE STYLESHEET × × × × × × × × × × */
/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × */
/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × */

/************************************************************

$name      => CODEXBLAU GmbH
$author    => Nick Helfenbein <nick@codexblau.de>
$version   => Version 2 (2.0)
$year      => 2026
$copyright => 2026. CODEXBLAU GmbH. All rights reseved.

************************************************************/

/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × */
/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × */
/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × */
/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × */
/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × */
/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × */



/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × × 
 × × × × × × × × × LOGO FILL × × × × × × × × × × × × × × × ×
× × × × × × × × × × × × × × × × × × × × × × × × × × × × × */

.logo-fill-black {
    fill: var(--color-natural-1000);
}

.logo-fill-red {
    fill: var(--color-secondary);
}

.logo-fill-white {
    fill: var(--color-natural-100);
}

.fill-opacity-65 {
    opacity: .65;
}


/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × × 
 × × × × × × × × × LOADING × × × × × × × × × × × × × × × × ×
× × × × × × × × × × × × × × × × × × × × × × × × × × × × × */

.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1000000;
}

.loading-screen {
    position: relative;
    left: 0;
    background: var(--color-natural-900);
    width: 100%;
    height: 100%;
}

.loading-screen .camera-corner {
    position: absolute;
    left: calc(var(--gap) * 3);
    top: calc(var(--gap) * 3);
    width: calc(100% - calc(var(--gap) * 6));
    height: calc(100% - calc(var(--gap) * 6));
    background:
        linear-gradient(var(--color-natural-700), var(--color-natural-700)) top left,
        linear-gradient(var(--color-natural-700), var(--color-natural-700)) top left,
        linear-gradient(var(--color-natural-700), var(--color-natural-700)) top right,
        linear-gradient(var(--color-natural-700), var(--color-natural-700)) top right,
        linear-gradient(var(--color-natural-700), var(--color-natural-700)) bottom left,
        linear-gradient(var(--color-natural-700), var(--color-natural-700)) bottom left,
        linear-gradient(var(--color-natural-700), var(--color-natural-700)) bottom right,
        linear-gradient(var(--color-natural-700), var(--color-natural-700)) bottom right;
    background-repeat: no-repeat;
    background-size: calc(var(--gap) * 3) 1px, 1px calc(var(--gap) * 3), calc(var(--gap) * 3) 1px, 1px calc(var(--gap) * 3), calc(var(--gap) * 3) 1px, 1px calc(var(--gap) * 3), calc(var(--gap) * 3) 1px, 1px calc(var(--gap) * 3);
    opacity: 0;
    will-change: transform, opacity;
}

.loading-screen .rec-badge {
    position: absolute;
    left: 50%;
    bottom: calc(var(--gap) * 3);
    transform: translate(-50%, 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    opacity: 0;
    will-change: opacity;
}

.loading-screen .rec-badge .rec-dot {
    width: var(--gap);
    height: var(--gap);
    background: var(--color-primary);
    border-radius: 50%;
    animation: recDotBlink 1.5s ease-in-out infinite;
}

.loading-screen .rec-badge .mono {
    font-family: var(--font-mono);
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: var(--font-size-small);
}

@keyframes recDotBlink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }

    100% {
        opacity: 1;
    }
}

.loading-screen .loading-sequence {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    width: max-content;
    height: max-content;
    opacity: 0;
    will-change: opacity;
}

.loading-screen .loading-sequence * {
    color: var(--color-white);
}

.loading-screen .loading-sequence .loading-status {
    position: relative;
    width: 10em;
    height: 2px;
    background: var(--color-natural-700);
    margin-bottom: .5em;
}

.loading-screen .loading-sequence .loading-status .loading-status-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
}

.loading-screen .loading-sequence .loading-percent {
    font-family: var(--font-mono);
    font-size: var(--font-size-medium);
    text-transform: uppercase;
    letter-spacing: .05em;;
}

.loading-screen .loading-sequence .loading-glich {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    will-change: opacity;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × × 
 × × × × × × × × × NAVIFGATION × × × × × × × × × × × × × × ×
× × × × × × × × × × × × × × × × × × × × × × × × × × × × × */

.navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    z-index: 1000;
}

.navigation-wrap {
    position: absolute;
    bottom: var(--padding-container);
    top: var(--padding-container);
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    pointer-events: auto;
    height: max-content;
    flex-shrink: 0;
    flex-grow: 1;
    transform: translateX(-50%);
}

.navigation-wrap .col-logo {
    position: relative;
    max-width: 3.5em;
    width: 100%;
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 1000em;
}

.navigation-wrap .col-navigation {
    position: relative;
    padding: calc(var(--gap) * .5);
    background: rgba(var(--color-natural-100-rgb), 0.2);
    backdrop-filter: blur(1em);
    -webkit-backdrop-filter: blur(1em);
    border-radius: 1000em;
    pointer-events: auto;
    flex-shrink: 0;
}

.navigation-wrap .col-navigation .navigation-list {
    display: flex;
    align-items: center;
    gap: calc(var(--gap) * .5);
}

.navigation-wrap .col-navigation .navigation-list .link {
    flex-shrink: 0;
}


/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × × 
 × × × × × × × × × HOME - HERO × × × × × × × × × × × × × × ×
× × × × × × × × × × × × × × × × × × × × × × × × × × × × × */

.section-home-hero {
    position: relative;
    height: calc(var(--vh) * 100);
    background: var(--color-natural-1000);
}

.section-home-hero .overlay-gradient {
    background: linear-gradient(to top, rgba(var(--color-natural-1000-rgb), 1), rgba(var(--color-natural-1000-rgb), .35));
    z-index: 10;
}

.section-home-hero .container {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.section-home-hero .container .header-svg {
    width: 100%;
}


/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × × 
 × × × × × × × × × HOME - ABOUT  × × × × × × × × × × × × × ×
× × × × × × × × × × × × × × × × × × × × × × × × × × × × × */

.section-home-about {
    position: relative;
    background: var(--color-natural-1000);
}

.section-home-about::before {
    content: '';
    position: absolute;
    right: -15em;
    bottom: 30%;
    width: 45em;
    aspect-ratio: 1/1;
    background: radial-gradient(circle, var(--color-primary), var(--color-natural-1000), var(--color-natural-1000));
    opacity: .5;
    transform: translateY(50%);
}

.section-home-about .container {
    position: relative;
}

.section-home-about .container .container-wrap {
    position: relative;
    padding-inline: calc(var(--padding-container) * 7);
    border-radius: 1000em;
    background: var(--color-natural-900);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(var(--vh) * 80);
}

.section-home-about .container .container-wrap .col {
    position: relative;
    width: 40%;
    z-index: 10;
}

.section-home-about .container .container-wrap .col.col-text {
    width: 35%;
}

.section-home-about .container .container-wrap h2,
.section-home-about .container .container-wrap p:not(.subheading) {
    color: var(--color-white);
}

.section-home-about .container .container-wrap .col.col-image {
    position: absolute;
    left: 50%;
    top: 0;
    width: 20em;
    height: calc(var(--vh) * 80);
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: end;
    z-index: 1;
}

.section-home-about .container .container-wrap .col.col-image .image-figure {
    position: relative;
    width: 100%;
    height: 100%;
    /* filter: grayscale(100%); */
}

.section-home-about .container .container-wrap .col.col-image .image-figure * {
    object-fit: contain;
    object-position: bottom;
}

.section-home-about .container .facts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
    margin-top: calc(var(--padding-section) * .5);
    padding-top: calc(var(--padding-container) * 2.5);
    padding-bottom: calc(var(--padding-container) * 4);
    border-top: 1px solid rgba(var(--color-natural-100-rgb), .25);
    border-bottom: 1px solid rgba(var(--color-natural-100-rgb), .25);
}

.section-home-about .container .facts .col-fact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: var(--gap);
    width: calc(100% - calc(var(--gap) * .5));
}

.section-home-about .container .facts .col-fact * {
    color: var(--color-white);
}


/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × × 
 × × × × × × × × × HOME - SERVICES × × × × × × × × × × × × × 
× × × × × × × × × × × × × × × × × × × × × × × × × × × × × */

.section-home-services {
    position: relative;
    background: var(--color-natural-1000);
}

.section .container-header h2 {
    color: var(--color-white) !important;
}

.section-home-services .services-list {
    display: flex;
    flex-direction: column;
    margin-top: var(--padding-section);
}

.section-home-services .services-list .service {
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: space-between;
    justify-content: center;
    gap: var(--gap);
    padding: calc(var(--padding-container) * 4);
    border-top: 1px solid rgba(var(--color-natural-100-rgb), .25);
    border-bottom: 1px solid rgba(var(--color-natural-100-rgb), .25);
}

.section-home-services .services-list .service * {
    color: var(--color-white);
}

.section-home-services .services-list .service .title {
    width: 65%;
    display: flex;
    align-items: center;
    gap: calc(var(--gap) * 3);
}

.section-home-services .services-list .service .title .number {
    opacity: .5;
    font-family: var(--font-mono);
}

.section-home-services .services-list .service .text {
    width: 30%;
}


/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × × 
 × × × × × × × × × HOME - PORTFOLIO  × × × × × × × × × × × ×
× × × × × × × × × × × × × × × × × × × × × × × × × × × × × */

.section-home-portfolio {
    position: relative;
    background: var(--color-natural-1000);
}

.section-home-portfolio::before {
    content: '';
    position: absolute;
    left: -15em;
    top: 15em;
    width: 45em;
    aspect-ratio: 1/1;
    background: radial-gradient(circle, var(--color-primary), var(--color-natural-1000), var(--color-natural-1000));
    opacity: .5;
    transform: translateY(-50%);
}

.section-home-portfolio .container-header {
    margin-bottom: calc(var(--gap) * 3);
}

.section-home-portfolio .swiper-container,
.section-home-portfolio .swiper-container * {
    overflow: visible;
}

.section-home-portfolio .swiper-container * {
    color: var(--color-white);
}

.section-home-portfolio .swiper-container .swiper-slide {
    transition: transform var(--animation-default), opacity var(--animation-default);
}

.section-home-portfolio .swiper-container .swiper-slide {
    cursor: pointer !important;
}

.section-home-portfolio .swiper-container[data-slider-drag-status="grabbing"] {
    cursor: grabbing;
}

.section-home-portfolio .swiper-container[data-slider-drag-status="grabbing"] .swiper-slide {
    transform: scale(.95);
    opacity: .75;
}

.section-home-portfolio .swiper-container figure {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    border: 1px solid var(--color-natural-700);
    margin-bottom: var(--gap);
}

.section-home-portfolio .swiper-container figure picture,
.section-home-portfolio .swiper-container figure img {
    position: relative;
    width: 100%;
    object-fit: cover;
}

.section-home-portfolio .swiper-container .swiper-slide-active h5 {
    color: var(--color-primary);
}

.section-home-portfolio .swiper-container h5 {
    transition: color var(--animation-default);
}

.section-home-portfolio .swiper-container .mono {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .05em;
}


/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × × 
 × × × × × × × × × HOME - CONTACT  × × × × × × × × × × × × ×
× × × × × × × × × × × × × × × × × × × × × × × × × × × × × */

.section-home-contact {
    position: relative;
    background: var(--color-natural-1000);
}

.section-home-contact::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15em;
    width: 45em;
    aspect-ratio: 1/1;
    background: radial-gradient(circle, var(--color-primary), var(--color-natural-1000), var(--color-natural-1000));
    opacity: .5;
    transform: translateY(-50%);
}

.section-home-contact .container-header {
    margin-bottom: calc(var(--gap) * 3);
}

.section-home-contact .container-header h2 {
    color: var(--color-white);
}

.section-home-contact .container-header .red {
    color: var(--color-primary);
}


/* × × × × × × × × × × × × × × × × × × × × × × × × × × × × × 
 × × × × × × × × × FOOTER  × × × × × × × × × × × × × × × × ×
× × × × × × × × × × × × × × × × × × × × × × × × × × × × × */

.section-footer {
    position: relative;
    background: var(--color-natural-1000);
}

.section-footer::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 5em;
    width: 45em;
    aspect-ratio: 1/1;
    background: radial-gradient(circle, var(--color-primary), var(--color-natural-1000), var(--color-natural-1000));
    opacity: .35;
    animation: glowDot 15s ease-in-out infinite;
    transform: translateY(50%) translateX(30%);
}


.section-footer .container-logo-claim {
    padding-bottom: calc(var(--padding-container) * 3);
    border-bottom: 1px solid var(--color-natural-800);
}

.section-footer .container-logo-claim .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--gap) * 3);
}

.section-footer .container-logo-claim .col-logo {
    position: relative;
    width: 50%;
}

.section-footer .container-logo-claim .col-text {
    position: relative;
    width: 30%;
}

.section-footer .container-logo-claim .col-text p {
    font-family: var(--font-mono);
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: var(--font-size-small);
}


.section-footer .container-contact {
    padding-block: calc(var(--padding-container) * 3);
    border-bottom: 1px solid var(--color-natural-800);
}

.section-footer .container-contact * {
    color: var(--color-white);
}

.section-footer .container-contact .link-wrap::before {
    background: var(--color-primary);
}


.section-footer .container-socials {
    padding-block: calc(var(--padding-container) * 3);
}

.section-footer .container-socials * {
    color: var(--color-white);
}

.section-footer .container-socials .row {
    justify-content: space-between;
    align-items: center;
}

.section-footer .container-socials .row .row {
    width: max-content;
    justify-content: start;
}

.section-footer .container-socials .row .mono {
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
}



@keyframes glowDot {
    0% {
        opacity: .35;
        transform: translateY(50%) translateX(30%);
    }

    35% {
        opacity: .25;
        transform: scale(1.1) translateY(55%) translateX(25%);
    }

    70% {
        opacity: .45;
        transform: scale(.9) translateY(50%) translateX(35%);
    }

    0% {
        opacity: .35;
        transform: translateY(50%) translateX(30%);
    }
}