@import "https://unpkg.com/normalize.css";
@import "https://unpkg.com/open-props";
@import "./utility.css";
@import "./header.css";
@import "./footer.css";


section.mud {
    position: relative;
    overflow: hidden;
    background-color: var(--choco-12);
}
section.mud:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 1956/272;
    background-image: url(../assets/hr.png);
    background-size: cover;
    background-position: top center;
}
section.mud .bgs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
section.mud .bg {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    overflow: hidden;
}

section.mud .bg0 {
    z-index: 1;
    background: url(../assets/txt3.png),  var(--gradient-1);
    background-size: cover, cover;
    background-attachment: fixed;
    opacity: 1;
    opacity: 0.5;
}
section.mud .bg1 {
    z-index: 2;
    background: url(../assets/txt4.png), url(../assets/txt1.png);
    background-size: cover, cover;
    background-attachment: fixed;
    opacity: 0.8;
}
section.mud .bg2 {
    background: url(../assets/txt2.png);
    background-size: cover;
    z-index: 3;
}

/*keyframes animation to zoom an element in and out by 5% */
@keyframes zoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}


section.hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: calc(90vh - 5rem);
}
section.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, var(--blue-2) 0%, var(--yellow-2) 50%, var(--sand-10) 100%);
    z-index: 1;
    animation: infinite 5s linear alternate zoom;
    transform-origin: top center;
}
section.hero .cloud {
    width: 30%;
    aspect-ratio: 3/1;
    position: absolute;
    top: 3%;
    left: 8%;
    border-radius: 70% 70% 80% 80%;
    background: #fff;
    z-index: 1;
    opacity: 0.8;
    filter: blur(4vw);
    transform: translateX(calc(var(--bg-x) / 2));
}
section.hero .cloud.cloud2 {
    left: initial;
    right: 8%;
    transform: translateX(calc(var(--bg-x) * -0.5));
}
section.hero .mountain {
    --size: 100vh;
    --size2: 80vh;
    --color: var(--sand-10);
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent var(--color) transparent;
    position: absolute;
    bottom: 0;
}
section.hero .mountain-left {
    left: 0;
    border-width: 0 var(--size) var(--size2) 0;
}
section.hero .mountain-right {
    right: 0;
    border-width: 0 0 var(--size2) var(--size);
}
section.hero .mountain.mountain1 {
    --size: 90vh;
    --size2: 80vh;
    --color: var(--sand-11);
    z-index: 2;
}
section.hero .mountain.mountain2 {
    --size: 80vh;
    --size2: 70vh;
    --color: var(--sand-8);
    z-index: 4;
}
section.hero .mountain.mountain3 {
    --size: 65vh;
    --size2: 60vh;
    --color: var(--sand-6);
    z-index: 6;
}
section.hero>img {
    position: absolute;
    bottom: 35%;
    height: 40%;
    z-index: 7;
    width: auto;
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 0.9;
}
section.hero .field {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(50% * var(--heroh));
    background: var(--sand-6);
    z-index: 3;
    overflow: hidden;
}
section.hero .field2 {
    height: calc(40% * var(--heroh));
    background: var(--sand-10);
    z-index: 5;
}
section.hero .field3 {
    height: calc( calc(30% * var(--heroh)) + var(--fieldy));
    background: var(--sand-12);
    background-image: linear-gradient(180deg, var(--sand-12) 0%, var(--gray-12) 100%);
    z-index: 7;
}
section.hero .field3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    aspect-ratio: 1956/272;
    background-image: url(../assets/hr.png);
    background-size: cover;
    background-position: top center;
    transform-origin: top center;
    transform: translateY(101%) rotate(180deg);
    z-index: 2;
}
.topwords,
.bottomwords {
    z-index: 3;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: min(15vh, 13vw);
    font-weight: 700;
    color: var(--sand-12);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
    opacity: var(--heroh);
    transform: translateY(-50%);
}
.topwords {
    top: 25%;
}
.bottomwords {
    bottom: 25%;
    color: var(--sand-0);
    transform: translateY( -25% );
}
main.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    /* transform: translateY(calc(var(--scrolly) * -0.8)); */
}
main.absolute {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    /* transform: translateY(calc(var(--scrolly) * 0.8)); */
    /* transform: translateY(calc(var(--scrolly) * -1)); */
}
/* main.absolute section.hero, */
main.fixed section.hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* min-height: calc(90vh - 5rem - calc( var(--scrolly) * 2) ); */
    /* transform: scaleY(var(--heroh)); */
    /* transform-origin: bottom center; */
    height: calc( calc(90vh - 5rem) * var(--heroh));
    transform: height 0.3s ease-in-out;
}
main.fixed section.hero>.field:not(.field3),
main.fixed section.hero>.mountain {
    transform: translateY(calc(var(--bg-y2) * 0.4));
}
main.fixed section.hero .mountain-left {
    transform: translateX(calc(var(--scrolly) * -1));
}
main.fixed section.hero .mountain-right {
    transform: translateX(calc(var(--scrolly) * 1));
}

.more {
    background: var(--sand-6);
}