* {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    --color-accent-green: #3FA636;
    --color-promary-blue: #2752FF;
    --color-promary-white: #FFF8EE;
    --color-promary-yellow: #FFBE1E;
    --color-promary-red: #FF2E00;
    --color-promary-black: #510101;
}

:root {
    font-size: 22px;
    background-color: var(--color-promary-white);
    color: var(--color-promary-black);
    letter-spacing: 0.3px;
}

body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

h1 {
    font-size: 3.25rem;
    font-weight: 600;
}
h2 {
    font-size: 2.15rem;
    font-weight: 560;
}
h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
}


header {
    background-color: var(--color-promary-blue);
    color: var(--color-promary-white);
    font-weight: 600;
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.header_container {
    transform: translateY(-1rem);
}
.header_typografy {
    --translate-height: 0.5rem;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    letter-spacing: 0.1em;
    text-align: center;
    transform: translateY(var(--translate-height));
    animation: typo-load 1000ms ease;
    z-index: 10;
}

.header_typografy img {
    width: 3.45em;
    opacity: 0;
    animation: jumping-arrow 1000ms ease-in-out 4s infinite alternate, opacity-0-1 1s ease 4s forwards;
}

.prevent-select {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hex_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-12.4rem);
    display: flex;;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1;
    opacity: 0;
    animation: hexagon-lift 2300ms ease, opacity-0-1 1s ease 750ms forwards;
}
.hex_container::after { /* Shaddow */
    content: "";
    position: absolute;
    top: 24rem; /* adjust distance from text */
    left: 50%;
    transform: translateX(-50%);
    width: 22rem;
    height: 6rem;
    background: rgb(0, 28, 140, 0.6);
    border-radius: 50%;
    filter: blur(50px);
    z-index: -10; /* make sure it's behind the text */
    opacity: 0;
    animation: opacity-0-1 2s ease forwards 2s;
}

.hexagon {
    --animation-wait-amount: 2600ms;
    
    position: absolute;
    width: 25.35rem;
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
    rotate: 90deg; /* Start at 90 degrees */
}

.hexagon:nth-child(1) {
    --rotation-angle: 81.94deg;
    --seperated-amount: -5vh;
    background-color: var(--color-promary-white);
    animation: hexagon-twist 500ms ease-in-out var(--animation-wait-amount) forwards, hexagon-split 500ms ease-in-out var(--animation-wait-amount) forwards;
}

.hexagon:nth-child(2) {
    --rotation-angle: 90deg;
    background-color: var(--color-promary-yellow);
    animation: hexagon-twist 500ms ease-in-out var(--animation-wait-amount) forwards;
}

.hexagon:nth-child(3) {
    --rotation-angle: 100.49deg;
    --seperated-amount: 5vh;
    background-color: var(--color-promary-red);
    animation: hexagon-twist 500ms ease-in-out var(--animation-wait-amount) forwards, hexagon-split 500ms ease-in-out var(--animation-wait-amount) forwards;
}

.inndeling_1 {
    margin-top: 5rem;
    background-color: var(--color-promary-yellow);
    height: 63rem;

    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.inndeling_1 .typografy {
    font-weight: 330;
    /* max-width: 22rem; */
    text-align: left;
}

.cosmetic_lines {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 53.6rem;
    pointer-events: none; /* Prevent interaction with decorative images */
}

.cosmetic_lines img {
    position: absolute;
    transform: scale(0.9);
    /* transform-origin: center; */
}

/* Position each image in a decorative arrangement */
.cosmetic_lines img:nth-child(1) {
    top: -0.5rem;
    left: 0rem;
}

.cosmetic_lines img:nth-child(2) {
    top: 7rem;
    right: 3.4rem;
}

.cosmetic_lines img:nth-child(3) {
    top: 24.5rem;
    left: 1rem;
}

.cosmetic_lines img:nth-child(4) {
    bottom: 5rem;
    /* right: 2rem; */
    transform: translateX(0.15rem);
}


#anim1_video {
    max-width: var(--max-width);
    width: 100%;
    box-sizing: border-box;
    border-radius: 1.5rem;
    border: 8px solid #FE5624;
    margin: 2.4rem 0 15rem 0;
}

.content_container {
    --max-width: 23.9rem;
    max-width: var(--max-width);
    margin-top: 6.5rem;
}

/* Del 2 */

.inndeling_2 {
    height: 75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-promary-white);
    gap: 6rem;
    /* overflow: hidden; */
}

.inndeling_2_top {
    width: 84%;
    margin-top: 6rem;
    max-width: 65rem;
}
#anim2_video {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid black;
    box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
    .inndeling_2_top {
        width: 90%;
    }
  }

.inndeling_2 .side1 {
    display: flex;
    flex-direction: column;
    gap: 7rem;
}
.inndeling_2_bunn {
    --scroll-progress: 0%;
    --slide-amount: 0;
    display: flex;
    /* max-width: 60rem; */
    gap: 5rem;
    height: 100%; /* Height is so big that the moving hexagon can move all the way*/ 
}
.hex_design {
    width: 9rem;
    aspect-ratio: 1 / 0.866; /* 1 / cos(30°), forenklet */
    clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
    background-color: #FE5624;

    scale: calc(1 + ((var(--scroll-progress)) - 1)/165);
    transform: rotate(calc(-2deg * (var(--scroll-progress)))) /* antall rotasjoner */
}

#hex_figur {

    /* background-color: blue; */
    transition: transform 0.1s ease;
    will-change: transform;
    transform: translateX(calc(1px * var(--slide-amount)));
    
}
.stick {
    position: sticky;
    transform: scale(1);
    top: calc(50vh - 4.5rem); /* Center vertically, adjust for hexagon height */   
}

.nostick {
    position: static;
}
.inndeling_2 .side2 {
    width: 15rem;
    /* max-width: fit-content;
    margin-left: auto; */
    margin-left: 4rem;
}
.inndeling_2 .typografy {
    max-width: 27rem;
    font-weight: 300;
}


/* Del 3 */

.inndeling_3 {
    --tech-color-purple: #5448C8;
    display: flex;
    padding-top: 2rem;
    background-color: black;
    height: 96rem;
    color: white;
    font-weight: 250;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* z-index: -2; */
}
.inndeling_3 h2 {
    margin-top: 7rem;
    font-size: 2em;
    /* letter-spacing: 1px; */
}
.gradient-transition{
    position: absolute;
    bottom: 0;
    height: 11rem;
    width: 100%;
    background: url(./Resources/Gradient-transition.svg);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 77%;
}
.info_underdeling {
    display: flex;
    align-items: center;
    flex-direction: row;
    height: 25rem;
    gap: 5rem;
}

.info_underdeling .typografy {
    font-weight: 300;
}

.info_underdeling img {
    width: 33vw;
    max-width: 28rem;
}
.iu1 .typografy p{
    max-width: 26rem;
}
.iu2 .typografy p{
    max-width: 25.7rem;
}
.iu3 .typografy p{
    max-width: 25.7rem;
}

.inndeling_3 .iu2 {
    flex-direction: row-reverse;
    transform: translateX(5rem);
}

.inndeling_3_container {
    transform: translateX(-2rem);
}

/* Del 4 */
.inndeling_4 {
    --margin-padding-inline: 5rem;
    --border-radius: 3rem;
    --height-length: 34rem;
    display: flex;
    align-items: center;
    flex-direction: column;

    height: 80rem;
    background-color: var(--color-promary-white);
    color: var(--color-promary-white);
    margin-top: var(--margin-padding-inline);
}

.inndeling_4 .typografy {
    font-weight: 900;
}
.mikro-interaksjoner {
    width: 100%;
    height: 100%;
    max-width: 63.5rem;
    max-height: var(--height-length);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--border-radius);
    background-color: var(--color-promary-red);
    margin-bottom: var(--margin-padding-inline);
    overflow: hidden;
    transition: background-color 0.3s ease; /* Add smooth transition */

    h1:hover {
        color: var(--color-promary-black);
    }
}

.js--canvas {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  z-index: 9999;
  pointer-events: none;
  cursor: none;
}

.overgangsanimasjoner {
    width: 100%;
    height: 100%;
    max-width: 63.5rem;
    max-height: var(--height-length);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-radius: var(--border-radius);
    background-color: var(--color-promary-blue);
    transform-origin: center center; /* Ensure scaling happens from the center */

    transition: opacity ease 1s;
    .oppsummering {
        display: none;
        opacity: 0;
    }
}

.overgangsanimasjoner .typografy {
    opacity: 1;
    transition: opacity 1s ease; /* Smooth transition for opacity */
}

.hex_ending_btn {
    position: absolute;
    bottom: 0;
    background-color: inherit;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 0; /* Remove any line-height spacing */
    display: inline-block; /* Ensure button hugs its content */
}
.hex_ending {
    margin: 0;
    padding: 0;
    display: block; /* Ensure SVG takes full space without inline spacing */
    width: 100%; /* Ensure SVG scales correctly */
    height: auto; /* Maintain aspect ratio */
}

.hex_ending path {
    fill: var(--color-promary-white); /* Default fill */
    transition: fill 0.3s ease; /* Smooth color transition on hover */
}

.hex_ending path:hover {
    fill: var(--color-promary-yellow);
}

.open_sum {
    /* position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0; */

    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    position: fixed;
    bottom: 0;

    z-index: 1000; /* Ensure it appears above other content */
    animation: open_summary 2s forwards ease;
    transition: all 4s;

    .typografy {
        opacity: 0; /* Fade out when open_sum is added */
    }
    .oppsummering {
        display: none;
        flex-direction: column;
        gap: 2rem;
        opacity: 0;
        animation: opacity-0-1 2s ease 1s forwards; /* Adjusted delay for smoother sequence */
    }
    .oppsummering p {
        max-width: 36rem;
    }
}

.close {
    animation: close_summary 2s forwards ease;
    
    .typografy {
        opacity: 1; /* Fade in when close is added */
    }
    .oppsummering {
        display: none; /* Hide oppsummering when closing */
        opacity: 0;
    }
}

@keyframes open_summary {
    from {
        /* width: 100%;
        height: 100%; */
        max-width: 63.5rem;
        max-height: var(--height-length);
        border-radius: var(--border-radius);
        position: relative;
    }
    to {
        /* width: 100vw;
        height: 100vh; */
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        position: fixed;
    }
}
@keyframes close_summary {
    from {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        bottom: 0;
        transform: none;
    }
    to {
        width: 100%;
        height: 100%;
        max-width: 63.5rem;
        max-height: var(--height-length);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;

        border-radius: var(--border-radius);

    }
}
@keyframes typo-load {
    0% {
        opacity: 0;
        transform: translateY(-30%);
    }
    100% {
        opacity: 1;
        transform: translateY(var(--translate-height));
    }
}
@keyframes opacity-0-1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes opacity-1-0 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes hexagon-twist {
    0% {
        rotate: 90deg;
    }
    100% {
        rotate: var(--rotation-angle);
    }
}

@keyframes hexagon-split {
    from {
        top: 0vh;
    }
    to {
        top: var(--seperated-amount);
    }
}

@keyframes hexagon-lift {
    0% {
        transform: translateY(100vh);
    }
    20% {
        transform: translateY(100vh);
    }
    100% {
        transform: translateY();
    }
}

@keyframes jumping-arrow {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(20%);
    }
}