header {
    height: 0;
}

/* Preloader */

.preloader {
    position: fixed;
    display: flex;
    top: var(--nav-bar-height);
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    z-index: 998;
    background-color: var(--brand-color5);
    opacity: 1;
    transition: opacity 0.5s ease;
}

.preloader.ldd {
    opacity: 0;
}

.preloader-container {
    display: flex;
    align-items: center;
    font-size: var(--FS10);
    gap: 1em;
    opacity: 0;
    animation: fade-in 0.6s linear forwards 0.2s;
}

.preloader-dot {
    width: 1em;
    height: 1em;
    background-color: white;
    border-radius: 50%;
    opacity: 0.2;
    transform: scale(0.2);
    animation: preloadAnim 1.5s ease infinite;
    animation-delay: calc(0.2s * var(--i));
}

@keyframes preloadAnim {
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* General */

.section {
    overflow: hidden;
    user-select: none;
    padding: 0;
    margin: 0;
}

section:first-of-type {
    margin: 0;
}

#fp-nav.fp-left {
    transition: opacity, transform;
    transition-timing-function: ease;
    transition-duration: 0.3s, 0.7s;
    transform: translateX(-50%);
}

.bg-wrapper {
    position: absolute;
    top: var(--nav-bar-height);
    right: 0;
    bottom: 40px;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.text-segment {
    display: grid;
    place-items: center;
    padding: 0 10%;
    max-height: 45%;
}

.img-segment {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 50%;
}

.img-wrapper {
    position: relative;
    width: 80%;
    height: 100%;
    max-width: 950px;
    align-self: flex-start;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.text-wrapper {
    position: relative;
    z-index: 999;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    max-width: 1200px;
}

.text-wrapper h2 {
    font-weight: 700;
    font-size: var(--FS5);
    text-align: left;
    width: fit-content;
    line-height: 1.2;
    margin-bottom: 0.2em;
}

.text-wrapper h3 {
    font-weight: 600;
    font-size: var(--FS10);
    text-align: left;
    width: fit-content;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

.text-wrapper p {
    margin-top: 0.5rem;
    font-size: var(--FS11);
    text-align: left;
    width: fit-content;
}

.buttons {
    margin: 1rem 0 0 0;
    width: fit-content;
}

/* Individual Sections */

/* Section 0 */

.fp-viewing-1 #fp-nav ul li a span {
    background-color: white;
    box-shadow: 0 0 1em var(--shadow-900), 0 0 1em var(--shadow-900);
}

.section0-container {
    position: absolute;
    top: var(--nav-bar-height);
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20%;
}

.intro-video-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

.video-fade {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);

    animation: fade-in 1s ease-in 1.5s forwards;
}

.section-overlay {
    z-index: 1;
    animation: fade-in 1s ease 1.5s forwards;
}

@media (prefers-reduced-motion: no-preference) {
    .video-fade {
        opacity: 0;
    }

    .section-overlay {
        opacity: 0;
    }
}

.overlay-logo-container {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 40vw;
    max-width: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: moveLogo 1.5s ease 4.5s forwards;
}

.overlay-logo-container img {
    filter: drop-shadow(0 0 5px black);
}

@keyframes moveLogo {
    100% {
        left: 20px;
        top: -10%;
        opacity: 0;
        width: 1vw;
        transform: translate(0, 0);
    }
}

.overlay-text {
    color: white;
    font-size: clamp(28px, 7vw, 70px);
    font-weight: 700;
    text-align: center;
    text-shadow: 0 0 0.2em black, 0 0 0.5em black;
    opacity: 0;
    transform: translateY(-20vh);
    will-change: transform;
    animation: moveOverlayText 2.5s ease 6.3s forwards;
}

.overlay-text a {
    display: block;
    font-size: var(--FS10);
    transition: all 0.3s ease;
}

.overlay-text a:hover {
    color: var(--accent-color1);
}

@keyframes moveOverlayText {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
        z-index: 1;
    }
}

.video-fade,
.section-overlay,
.overlay-logo-container,
.overlay-text {
    animation-play-state: paused;
}

.fp-viewing-1 .video-fade,
.fp-viewing-1 .section-overlay,
.fp-viewing-1 .overlay-logo-container,
.fp-viewing-1 .overlay-text {
    animation-play-state: running;
}

.animation-pause,
.animation-pause * {
    animation-play-state: paused !important;
}

/* Scroll prompt */

.scroll-prompt {
    position: absolute;
    display: none;
    align-items: center;
    gap: 0.5em;
    font-size: var(--FS11);
    bottom: 1.5em;
    right: 1.5em;
    padding: 0.3em 0.6em;
    border-radius: 0.1em;
    background-color: rgba(255, 255, 255, 1);
    opacity: 0;
    transform: scale(0.3);
    transition: all 0.6s ease;
}

.scroll-prompt * {
    flex: 0 0 auto;
}

.scroll-prompt p {
    color: black;
    font-size: var(--FS12);
    margin: 0;
}

.scroll-prompt img {
    height: 0.7em;
    width: auto;
}

/* Section 1 */

.text-wrapper .sec1-h1 {
    margin-bottom: 0.1em;
}

.img-wrapper1 {
    width: 70%;
}

.img-wrapper1 img {
    filter: drop-shadow(5px 5px 20px var(--shadow-500));
}

/* Section 3 */

.img-wrapper3 {
    width: 70% !important;
    max-width: 800px;
}

/* Section 4 */

.img-wrapper4 {
    overflow: hidden;
    border-radius: 20px;
    transition: all 0.1s;
}

.fp-viewing-5 .img-wrapper4,
.fp-viewing-6 .img-wrapper4 {
    box-shadow: 0 0 30px var(--shadow-900);
}

.fp-viewing-5 .img-sec4,
.fp-viewing-6 .img-sec4 {
    transform: scale(3.3) translateY(-22.7%) translateX(-0.75%);
}

@media (prefers-reduced-motion: no-preference) {
    .img-wrapper4 {
        transition: all 0.1s;
        transition-delay: 0.5s;
    }

    .img-sec4 {
        transition: all 0.1s;
        transition-delay: 0.5s;
    }

    .fp-viewing-5 .img-wrapper4,
    .fp-viewing-6 .img-wrapper4 {
        transition: all 2s ease-in-out;
        transition-delay: 1.8s;
    }

    .fp-viewing-5 .img-sec4,
    .fp-viewing-6 .img-sec4 {
        transition: all 2s ease-in-out;

        transition-delay: 1.2s;
    }
}

.disclaimer {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0 10%;
}

.disclaimer p {
    font-size: var(--FS13);
    margin: 0;
}

/* Section 5 (footer) */

.index-footer {
    background-color: var(--brand-color);
    color: white;
    display: flex;
    justify-content: center;
}

/* Etc */

.unhidden {
    display: none;
}

/* Animations */

#bg-sec0,
#bg-sec1,
#bg-sec2,
#bg-sec3,
#bg-sec4,
#bg-sec5,
#bg-sec6,
#bg-sec7,
#bg-sec8 {
    opacity: 0;
}

/* sec0 anim */

.fp-viewing-1 #bg-sec0 {
    opacity: 1;
    transition: all 0.7s ease-in;
}

.fp-viewing-2 #bg-sec0,
.fp-viewing-3 #bg-sec0,
.fp-viewing-4 #bg-sec0,
.fp-viewing-5 #bg-sec0,
.fp-viewing-6 #bg-sec0,
.fp-viewing-7 #bg-sec0 {
    opacity: 0;
    transition: all 0.5s ease-out;
}

/* sec1 anim */

.fp-viewing-2 #bg-sec1 {
    opacity: 1;
    transition: all 0.7s ease-in;
}

.fp-viewing-1 #bg-sec1,
.fp-viewing-3 #bg-sec1,
.fp-viewing-4 #bg-sec1,
.fp-viewing-5 #bg-sec1,
.fp-viewing-6 #bg-sec1,
.fp-viewing-7 #bg-sec1,
.fp-viewing-8 #bg-sec1,
.fp-viewing-9 #bg-sec1 {
    opacity: 0;
    transition: all 0.5s ease-out;
}

/* sec2 anim */

.fp-viewing-1 #bg-sec2,
.fp-viewing-2 #bg-sec2,
.fp-viewing-4 #bg-sec2,
.fp-viewing-5 #bg-sec2,
.fp-viewing-6 #bg-sec2,
.fp-viewing-7 #bg-sec2,
.fp-viewing-8 #bg-sec2,
.fp-viewing-9 #bg-sec2 {
    opacity: 0;
    transition: all 0.5s ease-out;
}

.fp-viewing-3 #bg-sec2 {
    opacity: 1;
    transition: all 0.7s ease-in;
}

/* sec3 anim */

.fp-viewing-1 #bg-sec3,
.fp-viewing-2 #bg-sec3,
.fp-viewing-3 #bg-sec3,
.fp-viewing-5 #bg-sec3,
.fp-viewing-6 #bg-sec3,
.fp-viewing-7 #bg-sec3,
.fp-viewing-8 #bg-sec3,
.fp-viewing-9 #bg-sec3 {
    opacity: 0;
    transition: all 0.5s ease-out;
}

.fp-viewing-4 #bg-sec3 {
    opacity: 1;
    transition: all 0.7s ease-in;
}

/* sec4 anim */

.fp-viewing-1 #bg-sec4,
.fp-viewing-2 #bg-sec4,
.fp-viewing-3 #bg-sec4,
.fp-viewing-4 #bg-sec4 {
    opacity: 0;
    transition: all 0.5s ease-out;
}

.fp-viewing-5 #bg-sec4,
.fp-viewing-6 #bg-sec4 {
    opacity: 1;
    transition: all 0.7s ease-in;
}

/* Media Queries */
@media (max-width: 1150px) {
    .fp-viewing-5 .img-sec4,
    .fp-viewing-6 .img-sec4 {
        transform: scale(3.2) translateY(-23%) translateX(-0.75%);
    }
}

@media (max-width: 1150px) and (prefers-reduced-motion: no-preference) {
    .fp-viewing-5 .img-sec4,
    .fp-viewing-6 .img-sec4 {
        transition-delay: 1.2s;
    }
}

@media (max-width: 1000px) {
    .img-wrapper {
        width: 80%;
    }

    .scroll-prompt {
        bottom: 80px;
        right: auto;
    }

    /* Section 4 */

    .img-wrapper4 img {
        max-width: 65%;
    }

    .fp-viewing-5 .img-sec4,
    .fp-viewing-6 .img-sec4 {
        transform: scale(3.36) translateY(-22.5%) translateX(0.5%);
    }
}

@media (max-width: 750px) {
    .buttons {
        margin: 1rem 0 0 0;
    }

    #fp-nav {
        bottom: 10px;
    }

    .scroll-prompt {
        bottom: 50px;
    }

    /* Section 0 */
    .text-seg0 {
        height: 35%;
    }
    .img-seg0 {
        height: auto;
    }

    /* Section 1 */
    .img-wrapper1 img {
        filter: drop-shadow(3px 3px 15px var(--shadow));
    }

    /* Section 4 */
    .img-wrapper4 {
        width: 90%;
    }

    .fp-viewing-5 .img-sec4,
    .fp-viewing-6 .img-sec4 {
        transform: scale(3.5) translateY(-22.3%) translateX(1%);
    }
}

@media (max-width: 500px) {
    /* Section 0 */

    .overlay-logo-container {
        width: 60vw;
    }

    .fp-viewing-5 .img-sec4 {
        transform: scale(3.5) translateY(-22.1%) translateX(1%);
    }

    /* Section 1 */

    .img-wrapper1 img {
        filter: drop-shadow(1px 1px 10px var(--shadow));
    }

    .text-wrapper h1 {
        font-size: 28px;
    }
}

@media (max-width: 450px) {
    .text-hideable {
        display: none;
    }

    .unhidden {
        display: initial;
    }
}

@media (max-width: 400px) {
    .fp-viewing-5 .img-sec4,
    .fp-viewing-6 .img-sec4 {
        transform: scale(3.5) translateY(-22%) translateX(1%);
    }
}

/* min-width */

@media (min-width: 2000px) {
    @keyframes moveLogo {
        75% {
            opacity: 0;
        }

        100% {
            left: 10%;
            top: -10%;
            opacity: 0;
            width: 1vw;
            transform: translate(0, 0);
        }
    }
}

@media (min-width: 2500px) {
    @keyframes moveLogo {
        75% {
            opacity: 0;
        }

        100% {
            left: 17.5%;
            top: -10%;
            opacity: 0;
            width: 1vw;
            transform: translate(0, 0);
        }
    }
}

@media (min-width: 3000px) {
    .overlay-logo {
        animation: moveLogo 2s ease 3.5s forwards;
    }

    @keyframes moveLogo {
        50% {
            opacity: 0;
            width: 1vw;
        }

        70%,
        100% {
            left: 22%;
            top: -10%;
            opacity: 0;
            width: 1vw;
        }
    }
}

@media (min-width: 4000px) {
    @keyframes moveLogo {
        75% {
            opacity: 0;
        }

        100% {
            left: 35%;
            top: -10%;
            opacity: 0;
            width: 1vw;
        }
    }
}

/* height */

@media (max-height: 800px) {
    .overlay-logo-container {
        max-width: 300px;
    }
}

/* mixed media queries */

@media (max-width: 800px) and (min-height: 1000px) {
    .bg-wrapper {
        justify-content: center;
        gap: 10px;
    }

    .bg-wrapper:not(.bg-wrapper0) {
        gap: 100px;
    }
}

@media (max-width: 1200px) and (max-height: 600px) and (min-width: 600px) {
    .overlay-text {
        font-size: clamp(25px, 6.3vw, 63px);
    }
}

@media (max-width: 600px), (max-height: 600px) {
    .bg-wrapper3::after {
        position: absolute;
        content: '';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.95);
    }
    .bg-wrapper3 {
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-origin: content-box;
        padding: 5vw;
    }
    .bg-wrapper3 {
        background-image: url(../../images/sustainability.svg?v=010922);
    }
    .img-seg3 {
        display: none;
    }
    .tex-seg3 {
        max-height: unset;
    }
    .text-container3 * {
        text-shadow: 0 0 0.1em var(--shadow-500);
    }
    .text-hideable {
        display: none;
    }
    .unhidden {
        display: initial;
    }
}

@media (max-width: 800px) and (max-height: 600px) {
    .bg-wrapper1::after,
    .bg-wrapper2::after {
        position: absolute;
        content: '';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.95);
    }

    .bg-wrapper1,
    .bg-wrapper2 {
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-origin: content-box;
        padding: 5vw;
    }
    .bg-wrapper1 {
        background-image: url(../../images/dotlink_multiple.png?v=03.07.2023);
    }
    .bg-wrapper2 {
        background-image: url(../../images/devices/device-collection.png?v=03.07.2023);
    }

    .bg-wrapper4 {
        justify-content: center;
    }

    .img-seg1,
    .img-seg2,
    .img-seg4 {
        display: none;
    }

    .tex-seg1,
    .tex-seg2,
    .tex-seg4 {
        max-height: unset;
    }
    .text-container1 *,
    .text-container2 * {
        text-shadow: 0 0 0.1em var(--shadow-500);
    }
    .text-seg4 {
        margin-bottom: 20px;
    }
}