*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --transition: cubic-bezier(.7, 0, .2, 1);
}

body {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-size: 100% 203%;
    background-position: center;

    font-family: "Poppins", sans-serif;
    font-style: normal;

    display: flex;
    align-items: center;
    justify-content: center;
}




video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

video,
img {
    user-select: none;
    pointer-events: none;
    touch-action: none;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}



#loader {
    position: absolute;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    background-image: url("./Images/loader-bg.png");
    background-size: cover;
    background-position: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;

    overflow: hidden;
}
#loader.remove {
    transition-delay: 0.2s;
    opacity: 0;
}

#loading_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    pointer-events: none;
    touch-action: none;
    height: 100%;
    width: 100%;
    background: radial-gradient(199.61% 108.54% at 50% 110.67%, #2F1C75 0%, #732FAF 100%);
    transition: all 0.5s ease;
}

#loader.hide #loading_container {
    opacity: 0;
}


#loading_container p {
    font-size: clamp(25px, 5vw, 40px);
    font-weight: 400;
    color: #fff;
}



#intro_into_veem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: clamp(100px, 90%, 1000px);
    opacity: 0;
    transition: all 0.5s var(--transition);
}

#loader.hide #intro_into_veem {
    opacity: 1;
}

#intro_into_veem i {
    font-size: clamp(12px, 1vw, 18px);
    color: #fff;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 2px;
}

#intro_into_veem h1 {
    font-size: clamp(25px, 5vw, 90px);
    color: #fff;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    line-height: 1.3;
    max-width: clamp(100px, 15ch, 100%);
}

#intro_into_veem p {
    font-size: clamp(14px, 1vw, 1.1rem);
    color: #fff;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    text-align: center
}

#intro_into_veem .slide-out-text span span {
    transition-duration: 1.5s;
}

#enter_scene {
    font-size: clamp(14px, 0.9vw, 16px);
    font-weight: 500;
    cursor: pointer;
    padding: 1.3ch 10ch;
    background-color: #fff;
    border-radius: 2rem;
    border: none;
    margin-top: clamp(10px, 1vw, 32px);
    opacity: 0;
    transform: translateY(50%);
    transition: all 1s var(--transition);
}

#loader.hide #enter_scene {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s;
}

#enter_scene.hide {
    opacity: 0;
    transform: translateY(50%);
}




.loader_bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    transform-origin: bottom center;
    transition: all 1s var(--transition);
    transform-origin: 50% 80%;
    transform: scale(1.05);
}

#loader.hide .loader_bg {
    transform: scale(1);
}

#loader.remove .loader_bg {
    transform: scale(3);
}


.loader_bg img {
    position: absolute;
    left: 50%;
    width: auto;
    transform: translateX(-50%);
    transition: transform 0.6s ease-out;
}

.floor {
    bottom: 0;
    height: 18.88888888888889%;
    transform: translateX(-50%) scaleY(1);
    transition: transform 0.6s ease-out;
    transform-origin: top;
}

.back {
    top: 0;
    height: 93.111111%;
}

.L1 {
    top: 0;
    height: 91.57407407407407%;
}

.L2 {
    top: 0;
    height: 87.68518518518519%;
}

.L3 {
    top: 0;
    height: 84.62962962962963%;
}



/*// MOUSE FOLLOWER //*/
#mouse_follower {
    position: absolute;
    scale: 0;
    transition: scale 0.3s var(--transition);

    width: max-content;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 100000;
    user-select: none;
    pointer-events: none;
    touch-action: none;
}

#mouse_follower.shown {
    scale: 1;
}


#mouse_follower>div:first-of-type {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: blueviolet;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 20px;
}

#mouse_follower.highlight_section>div:first-of-type {
    background-color: #fff;
}

#mouse_follower.highlight_section #target_action {
    color: blueviolet;
}

#target_action {
    font-size: clamp(14px, 1vw, 20px);
    color: #fff;
    text-align: center;
    max-width: 10ch;
}



#images_loading_progress {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 7px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    z-index: -1;

    display: flex;
    align-items: center;
    justify-content: center;
}


#images_loading_progress svg {
    position: absolute;
    left: -10px;
    top: -10px;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0.5;
}

#images_loading_progress circle {
    fill: none;
    stroke: #fff;
    stroke-width: 13px;
    stroke-dasharray: 441;
    stroke-dashoffset: 441;
    transition: stroke-dashoffset 0.3s linear;
}




main {
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 0.5625;
    max-height: 100vh;
    margin: auto;
    z-index: 3;
}

/*// MAIN SECTIONS //*/
.main_sections {
    position: absolute;
    top: 50%;
    left: 0;
    height: 100%;
    aspect-ratio: 1 / 0.5625;
    transform: translateY(-50%);
}

#Home {
    position: relative;
    z-index: 100;
}

#Home::before,
#Home::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 101%;
    aspect-ratio: 1 / 0.71;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: blueviolet;
}


#Home::before {
    background-image: url("./Images/home/home\ section\ e\ left.png");
    transform: translateX(-96%) translateY(-1%);
}

#Home::after {
    background-image: url("./Images/home/home\ section\ e\ right.png");
    transform: translateX(123%) translateY(-1%);
}


.main_sections>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#main_intro {
    z-index: 2;
    /* transition: all 500ms ease; */
}


/*/ MAIN SCENE /*/

#main_video {
    position: relative;
}

#main_video button,
#services_main_video button,
#solutions_main_video button {
    position: absolute;
    aspect-ratio: 1 / 1;
}


/* Common between each subsections */
.close_subsection {
    position: relative;
    border-radius: 5px;
}

.close_subsection:focus {
    outline: none;
}


.subsection {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transform: translateY(100vh);
    transition: backdrop-filter 0.5s ease;
}

.subsection.shown {
    transform: translateY(0);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.subsection.shown {
    transform: translateY(0);
}

.sequenceImages {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}

#u-values .sequenceImages {
    width: 92%;
}

.subsection_p {
    position: absolute;
    z-index: 33333333;
    color: #fff2b8;
    top: 50%;
    left: 32%;
    width: 48ch;
    font-size: clamp(10px, 0.8vw, 30px);
    rotate: -2deg;
    text-shadow: -2px 1px 0px #694d0042;
    transform: rotateY(5deg);
}

/* Slide out text common styles */
.slide-out-text>span {
    display: -webkit-inline-flex;
    display: inline-flex;
    overflow: hidden;
}

.slide-out-text>span span {
    display: inline-block;
    opacity: 0;
    -o-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -o-transition: transform 0.5s var(--transition),
        opacity 0.8s var(--transition);
    -moz-transition: transform 0.5s var(--transition),
        opacity 0.8s var(--transition);
    -webkit-transition: transform 0.5s var(--transition),
        opacity 0.8s var(--transition);
    transition: transform 0.5s var(--transition),
        opacity 0.8s var(--transition);
}

.slide-out-text.fade-in>span span {
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}


/* Directly chosen Buttons */
#trigger_vision {
    position: absolute;
    top: 40%;
    left: 59.8%;
    width: 4%;
    border-radius: 50%
}


#trigger_mission {
    top: 64.2%;
    left: 24.4%;
    width: 4%;
    border-radius: 50%
}


#trigger_values {
    top: 51.5%;
    left: 36.7%;
    width: 4%;
    border-radius: 50%
}

#trigger_about {
    top: 38%;
    left: 48.5%;
    width: 4%;
    border-radius: 50%
}

#trigger_services {
    position: absolute;
    top: 53%;
    right: 27.5%;
    width: 4%;
    aspect-ratio: 1 / 0.8;
}


#close_vision,
#close_mission,
#close_values {
    position: absolute;
    top: 24%;
    left: 23%;
    width: 7%;
    aspect-ratio: 1 / 1;
}

#close_about {
    position: absolute;
    top: 24%;
    left: 22.7%;
    width: 7%;
    aspect-ratio: 1 / 1;
}


/*/ SERVICES SECTION /*/
#trigger_home {
    position: absolute;
    top: 42.8%;
    left: 14%;
    width: 4%;
    aspect-ratio: 1 / 0.8;
}
#trigger_solutions {
    position: absolute;
    top: 38.5%;
    right: 19%;
    width: 4%;
    aspect-ratio: 1 / 0.8;
}


#trigger_vr {
    top: 44%;
    left: 34.7%;
    width: 5%;
    border-radius: 50%;
}

#trigger_ar {
    top: 30%;
    left: 44%;
    width: 5%;
    border-radius: 50%;
}

#trigger_research {
    top: 15%;
    left: 26.5%;
    width: 6%;
    border-radius: 50%;
}

#trigger_3d {
    top: 35%;
    right: 25%;
    width: 9%;
    border-radius: 50%;
}

#trigger_anamorphic {
    top: 42%;
    right: 47.6%;
    width: 4%;
    border-radius: 50%;
}

#trigger_ai {
    top: 30%;
    right: 40%;
    width: 5%;
    border-radius: 50%;
}

#trigger_directional_audio {
    top: 48%;
    left: 20.5%;
    width: 5%;
    border-radius: 50%;
}

#trigger_filters {
    bottom: 29%;
    right: 26.5%;
    width: 5%;
    border-radius: 50%;
}


#close_AR,
#close_VR,
#close_research,
#close_3D,
#close_anamorphic,
#close_ai,
#close_directional_audio,
#close_filters {
    position: absolute;
    top: 8.5%;
    left: 14%;
    width: 3.5%;
    aspect-ratio: 1 / 1;
}



.service_info_card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    bottom: 10%;
    left: 10%;
    padding: 40px;
    background: radial-gradient(214.95% 139.29% at 0% 0%, #A654B7 0%, #7E4BB5 58.39%);
    scale: 0;
    transition: all 0.3s ease;

    border-radius: 34px;
    border-top: 5px solid #FF963B;
    border-left: 8px solid #FF963B;
    transform: rotate(-1deg);
}

.subsection.shown .service_info_card {
    scale: 1;
}

.service_info_card h3 {
    font-size: 1.5625rem;
    font-weight: 700;
    color: #FFDF57;
    text-shadow: 0px 0px 16px #E774AF;
}

.service_info_card p {
    font-size: 1rem;
    font-weight: 400;
    max-width: 32ch;
    color: #fff;
    line-height: 1.4;
    margin-top: 1ch;
}



/*/// SOLUTIONS SECTION ///*/

#trigger_return_services {
    position: absolute;
    top: 39.8%;
    left: 14.9%;
    width: 4%;
    aspect-ratio: 1 / 0.8;
}

#trigger_pixicamel {
    bottom: 32.5%;
    left: 22.5%;
    width: 5%;
    border-radius: 50%;
}
#trigger_converence {
    top: 24%;
    left: 45.5%;
    width: 5%;
    border-radius: 50%;
}
#trigger_mrkba {
    bottom: 21.5%;
    left: 59%;
    width: 5%;
    border-radius: 50%;
}
#trigger_vdiner {
    bottom: 23.5%;
    left: 33%;
    width: 5%;
    border-radius: 50%;
}
#trigger_vcommerce {
    bottom: 39.5%;
    left: 30%;
    width: 5%;
    border-radius: 50%;
}


#close_pixicamel,
#close_converence,
#close_mrkba,
#close_vdiner,
#close_vcommerce {
    position: absolute;
    top: 19.5%;
    left: 21%;
    width: 3.5%;
    aspect-ratio: 1 / 1;
}


.solution_info_card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    top: 3%;
    right: 1%;
    height: 94%;
    padding: 40px;
    width: clamp(200px, 60vw, 400px);
    background: radial-gradient(214.95% 139.29% at 0% 0%, #A654B7 0%, #7E4BB5 58.39%);
    transform: translateX(100%);
    transition: all 0.3s var(--transition);
    border-radius: 34px;
}

.subsection.shown .solution_info_card {
    transform: translateX(0);
}

.solution_info_card h3 {
    font-size: 1.5625rem;
    font-weight: 700;
    color: #FFDF57;
    text-shadow: 0px 0px 14px #FF963B;
}

.solution_info_card p {
    font-size: 1rem;
    font-weight: 400;
    max-width: 32ch;
    color: #fff;
    line-height: 1.4;
    margin-top: 1ch;
}

.solution_metrics {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 2ch;
}

.solution_metrics p:first-of-type {
    font-size: 2rem;
    line-height: 1;
}
.solution_metrics p:first-of-type span {
    font-size: 1rem;
}

.solution_link {
    font-size: 1rem;
    font-weight: 500;
    color: #2F1C75;
    text-decoration: none;

    display: block;
    width: max-content;
    max-width: 100%;
    padding: 1.2ch 5ch;

    background-color: #fff;
    border-radius: 8px;
    margin-top: auto;
}




/*/ PULSE EFFECT ON MAIN VIDEO BUTTONS /*/
.section_main_scene button::before,
.section_main_scene button::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 67.28%, rgba(255, 255, 255, 0.4) 100%);
    opacity: 0;
}


.section_main_scene.shown button::before,
.section_main_scene.shown button::after,
.close_subsection:hover::before,
.close_subsection:hover::after,
.close_subsection:focus::before,
.close_subsection:focus::after {
    animation: pulse 2s ease-out infinite;
}

.section_main_scene.shown button::after,
.close_subsection:hover::after,
.close_subsection:focus::after {
    animation-delay: 1s;
}


.section_main_scene button::before,
.close_subsection::before {
    width: 70%;
    aspect-ratio: 1 / 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section_main_scene button::after,
.close_subsection::after {
    width: 100%;
    aspect-ratio: 1 / 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes pulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}




@media screen and (orientation: portrait) {
    main {
        position: absolute;
        left: 0;
        top: -100vw;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);

        -webkit-transform-origin: bottom left;
        -moz-transform-origin: bottom left;
        transform-origin: bottom left;
        width: 100vh;
        height: 100vw;
        object-fit: cover;

        z-index: 4;
        overflow: hidden;
    }

    .subsection_p {
        transform: rotateY(5deg) translateX(-14%);
    }

    #close_vision {
        top: 14%;
        left: 17%;
    }
}

@media screen and (max-width: 900px) {

    main .sequenceImages,
    #u-values .sequenceImages {
        width: 140%;
    }

    #close_values {
        top: 13%;
        left: 10%;
        width: 9%;
    }

    #close_vision,
    #close_mission {
        top: 15%;
        left: 12%;
        width: 9%;
    }

    #close_about {
        top: 14%;
        left: 12%;
        width: 10%;
    }

    .subsection_p {
        transform: rotateY(5deg) translateX(-14%);
    }

}