/* Document Setup */
* {
    margin: 0;
    font-family: "inter", sans-serif;
}

html,
body {
    animation: fade-in ease-in 0.8s 1;
    overflow-x: hidden;
    width: 100vw !important;
    scroll-behavior: smooth;

}

.hide {
    display: none;
}

section {
    height: 100vh !important;
    width: 100vw !important;
}

.send-front {
    z-index: 5;
}

.send-back {
    z-index: 0;
}

/* Animations */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}





/* Home Page */
/* Navigation */
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    /* align-self: center; */
    background-color: transparent;

    /* padding: 2rem; */
    margin: 0 auto;
    z-index: 1;
}

.nav-button {
    height: 60px;
    padding: 8px;
    animation: rotate 1s;
    z-index: 10 !important;

}

/* Hero Section */

#hero {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.hero-section {
    background-image: url(/Assets/hero-background.png);
}

.hero-content {
    display: flex;
    height: 80vh;
    padding: 2rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    align-self: stretch;
}

.hero-text-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.hero-text {
    font-family: "din-condensed", sans-serif;
    font-size: clamp(6rem, 20vw, 18.75rem);
    font-weight: 700;
    line-height: 100%;
    letter-spacing: clamp(-0.4rem, -1vw, -1.125rem);

    z-index: 10;
}

.hero-text-bottom {
    font-family: "din-condensed", sans-serif;
    font-size: clamp(7rem, 24vw, 22.5rem);
    font-weight: 700;
    line-height: normal;
    letter-spacing: clamp(-0.4rem, -1.2vw, -1.35rem);

    z-index: 3;
}

.hero-collage {
    position: absolute;
    top: 0;
    left: 9%;

    z-index: 2;
    opacity: 1;
    transition: opacity 0.1s;

    /* animation: heart-beat 2s;
    animation-iteration-count: infinite; */
}

.train-collage-wrapper {
    position: absolute;
    top: 0;
    left: 9%;

    z-index: 3;
    transition: transform 0.1s;
}

.can-animated {
    position: absolute;
    left: 35%;
    top: 30%;

    z-index: 1;
}

.writters-animated {
    position: absolute;
    top: -50%;
    right: -50%;

    height: 150px;

    z-index: 2;
}


/* Section 02 */
.section02,
.section03 {
    flex-shrink: 0;

    position: relative;
}

#section03 {
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
}

.horizontal-container {
    display: flex;
}

.section-text {
    max-width: 1000px !important;
    padding: 1rem;
    box-sizing: border-box;
}

.section02-content-container,
.section-content-container {
    display: flex;
    flex-wrap: nowrap;

    width: 100vw !important;
    max-width: 100vw;
    box-sizing: border-box;
    /* scroll-snap-align: start; */
    padding: 2rem;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto;

    scroll-behavior: smooth;
}

.section-content-container {
    min-width: 100vw;
    flex-shrink: 0;
}

.section-title {
    align-self: stretch;

    color: #000;

    font-family: "Anton";
    font-size: clamp(3rem, 10vw, 10rem);
    font-weight: 400;
    letter-spacing: -0.15rem;
}

.section-paragraph {
    font-size: clamp(16px, 2vw, 32px);

}

.section02-content {
    align-self: stretch;
}

.section02-image {
    position: absolute;
    right: 0;
    bottom: 32px;
    height: clamp(200px, 30vw, 500px);
    animation-iteration-count: infinite;
}


.tools-spray {
    position: absolute;
    right: 0;
    width: clamp(200px, 30vw, 500px);
    rotate: 45deg;
}

.tools-marker {
    position: absolute;
    right: -15px;
    width: clamp(300px, 50vw, 1000px);

    rotate: 60deg;
}

.tools-squeezer {
    position: absolute;
    right: 25%;
    top: -45px;

    width: clamp(200px, 40vw, 600px);
    rotate: 33deg;
}

.bottom-collage {
    position: absolute;
    bottom: 0;
}

.markers-link {
    position: absolute;
    left: 2rem;
    bottom: -1;
    animation-iteration-count: infinite;
    animation-delay: 20s;
}

.section04 {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    height: 100vh;

    text-align: justify;

    background: rgb(2, 0, 36);
    background: -moz-linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(120, 120, 120, 1) 34%, rgba(228, 228, 228, 1) 74%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(120, 120, 120, 1) 34%, rgba(228, 228, 228, 1) 74%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(120, 120, 120, 1) 34%, rgba(228, 228, 228, 1) 74%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024", endColorstr="#ffffff", GradientType=1);
}

.section04-content-container {
    padding: 32px;

    overflow-y: scroll;
}

.images {
    position: absolute;
    top: 32px;
    right: 32px;

    display: flex;
    flex-direction: column;
    gap: 32px;

    z-index: -1;
}

.images-2 {
    height: 300px;
}


.line {
    opacity: 0;
    transform: translateY(10vh);
    /* Initial position of text off-screen */
    margin: 0;
    font-family: "Anton";
    font-size: 2rem;
    font-weight: 200;
    color: white;
}

.scrolling-text {
    position: relative;
    overflow: hidden;
    height: 100%;
    /* Full height of the container */
}

.section05 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;



    background-color: #020024;
    color: white;

    position: relative;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.horizontal-scroll-wrapper {
    display: inherit;
    position: relative;
    width: fit-content;
}

.section05-content-container {
    max-width: 1200px;
    text-align: center;

}

.section05-paragraph {
    font-size: clamp(3rem, 15vw, 15rem);
    font-weight: 500;

    opacity: 0.8;
    white-space: nowrap;
}

.disclaimer-image {
    position: absolute;
    bottom: -10px;
    left: 0;
    height: 50%;
    object-fit: cover;
}

.final-image {
    position: absolute;
    height: 90%;
    bottom: 0;
    left: 30%;

    object-fit: scale-down;
}



/* About Page */
.content-card {
    display: flex;
    flex-direction: column;
    gap: 16px;

    padding: 10%;
    max-width: 40%;
}

.about-title {
    font-size: 48px;
}

.about-container {
    display: flex;
    position: relative;


    width: 100vw;
    height: 100vh;
}

.about-container img {
    position: absolute;
    left: -20%;
    top: -10%;

    scale: 70%;
    overflow: hidden;

    opacity: 0.2;

    z-index: -2;

}

.container404 {
    display: flex;
    justify-content: center;
}

/* Mobile (up to 576px) */
@media (max-width: 900px) {

    /* General Reset */
    * {
        margin: 0;
        font-family: "inter", sans-serif;
        overflow-x: hidden;
    }

    html,
    body {
        animation: fade-in ease-in 0.8s 1;
        overflow-x: hidden;
        width: 100vw !important;
        scroll-behavior: smooth;
    }

    /* Home Page */
    /* Navigation */
    .navigation {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 1rem;
        margin: 0;

        z-index: 10;
    }

    .nav-button {
        height: 50px;
        padding: 8px;
        animation: rotate 1s;
    }

    /* Hero Section */
    #hero {
        position: relative;
        height: auto;
    }

    .hero-section {
        background-image: url(/Assets/hero-background.png);
        background-size: cover;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: end;
        height: auto;
        padding: 2rem;
    }

    .hero-text {
        font-size: 2em;
        letter-spacing: normal;
    }



    .hero-text-top,
    .hero-text-bottom {
        font-size: 64px;
        letter-spacing: normal;
        text-align: center;
        flex-direction: column;

        z-index: 5;

    }

    .hero-collage,
    .train-collage-wrapper,
    .can-animated,
    .writters-animated {
        position: absolute;
        scale: 0.8;
        left: -120%;
        top: 0;
        opacity: 1;
        transition: none;
        /* display: none; */
    }

    /* Section 02 and 03 */
    .section02 {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px;

        overflow-x: hidden;
    }

    .section03 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        height: 100vh;
        overflow-x: hidden;
    }

    #section03 {
        width: 100vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: hidden;
    }

    .horizontal-container {
        display: flex;
        width: 100%;
    }

    .section02-content-container,
    .section-content-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        width: 100vw;
        max-width: 100vw;
        box-sizing: border-box;

        overflow-x: hidden !important;
    }

    .section-content-container {
        min-width: 100vw;
        flex-shrink: 0;
        position: relative;
    }

    .section-title {
        font-size: 4rem;
        letter-spacing: -0.1rem;
        text-align: center;
    }

    .section-paragraph {
        font-size: 18px;
        text-align: center;
    }

    .section02-image {
        width: 100%;
        position: static;
    }

    .tools-spray,
    .tools-marker,
    .tools-squeezer {
        top: auto;
        bottom: 5%;
        right: 5%;
    }

    .markers-link {
        position: absolute;
        left: 50%;
        bottom: 2rem;
        transform: translateX(-50%);
        width: clamp(100px, 30vw, 200px);
    }

    .markers-link img {
        width: 200px;
        height: auto;
    }

    /* Section 04 */
    .section04 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        text-align: center;
        padding: 0;
        background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(120, 120, 120, 1) 34%, rgba(228, 228, 228, 1) 74%, rgba(255, 255, 255, 1) 100%);
    }

    .section04-content-container {
        padding: 0rem;
        overflow-y: hidden
    }

    .images {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 1rem;
        padding: 1rem;
    }

    .images-2 {
        height: 150px;
        width: auto;
    }

    .line {
        opacity: 0;
        transform: translateY(10vh);
        margin: 0;
        font-family: "Anton";
        font-size: 1.5rem;
        font-weight: 200;
        color: white;
        text-align: center;
    }

    .scrolling-text {
        position: relative;
        overflow: hidden;
        height: auto;
    }

    /* Section 05 */
    .section05 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #020024;
        color: white;
        position: relative;
        overflow: hidden;
        scroll-behavior: smooth;
    }

    .horizontal-scroll-wrapper {
        display: flex;
        position: relative;
        width: fit-content;
    }

    .section05-content-container {
        max-width: 100%;
        text-align: center;
        padding: 2rem;
    }

    .section05-paragraph {
        font-size: clamp(3rem, 15vw, 15rem);
        font-weight: 500;
        opacity: 0.8;
        white-space: nowrap;
    }

    .disclaimer-image {
        position: static;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .final-image {
        position: absolute;
        width: 80%;
        height: auto;
        bottom: 0;
        left: 10%;
        object-fit: scale-down;
    }

    /* About Page */
    .content-card {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 5%;
        max-width: 80%;
    }

    .about-title {
        font-size: 32px;
        text-align: center;
    }

    .about-image {
        position: relative;
        left: 0;
        top: 10%;
        width: 90%;
        margin: 0 auto;
    }
}