body {
    height: 100svh;
    width: 100%;
    background-color:#000000;
    touch-action: none;
}

.container {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.content {
    --max-width: 300px;
    --max-height: calc(var(--max-width) * 5 / 4);
    position: relative;
    overflow: hidden;
    width: min(var(--max-width), 100%);
    height: min(var(--max-height), 100%);
    background-image: url(img/stars.svg), linear-gradient(#0d0029, #6c3087);
    background-size: 40vw, auto;
    max-width: var(--max-width);
    max-height: var(--max-height);
    border-radius: 0 0 35% 35%;
    pointer-events: none;
}

@media (min-width: 576px) {
    .content {
        --max-width: 576px;
        --max-height: calc(var(--max-width) * 4 / 5);
        background-size: 10vw, auto;
    }
}

.overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-image: radial-gradient(ellipse at center bottom, #ffffffb2 15%, #05041b 85%);
    mix-blend-mode: overlay;
    border-radius: inherit;
    box-shadow: inset 0 0 15px #000;
}

@media (min-width: 576px) {
    .overlay {
        box-shadow: inset 0 0 30px #000;
    }
}

/* z-index stacking does not work in combination with pseudo elements on the parent */
.scene {
    --bg-decoration: var(--max-width);
    --full-width: var(--max-width);
    --width: var(--full-width);
    --speed: 13s;
    --zoom-transition: 1s;
    --height: calc(var(--full-width) * 1.1);
    --depth: calc(var(--max-width) * 0.1);
    --bg-color: #080618;
    --side-color: #000000;
    --ground-width: calc(var(--full-width) * 3);
    width: 100%;
    height: 100%;
    perspective: 20px;
    perspective-origin: 50% 70%;
    transform-style: preserve-3d;
    transition: perspective var(--zoom-transition);
}

.scene.zoom {
    perspective: 40px;
}

@media (min-width: 576px) {
    .scene {
        --height: calc(var(--full-width) * 2);
        --speed: 46s;
        --depth: calc(var(--max-width) * 0.4);
        --ground-width: calc(var(--full-width) * 5);
        perspective: 30px;
        perspective-origin: 50% 66%;
        animation: calc(var(--speed) * 0.02) infinite alternate ease-in walkBob;
    }
    .scene.zoom {
        perspective: 60px;
    }
}

.scene.zoom .bg:before {
    opacity: 1;
}

@keyframes walkBob {
    from {transform: translateY(0);}
    to {transform: translateY(0.1vh);}
}

.bg,
.side1,
.side2,
.ground,
.path,
.ground-overlay,
.tree-01,
.tree-02,
.tree-03,
.tree-04,
.tree-05,
.tree-06 {
    position: absolute;
    height: var(--height);
    width: var(--width);
    bottom: 0;
    transform-origin: bottom center;
    left: calc(50% - var(--width) * 0.5);
    transform-style: preserve-3d;
}

.bg {
    --width: var(--ground-width);
    background-color: var(--bg-color);
    transform: translateX(1px) translateZ(calc(var(--depth) * -1));
}
.bg:before {
    position: absolute;
    transition: opacity calc(var(--zoom-transition) * 1.5);
    transition-timing-function: ease-in-out;
    opacity: 0.1;
    transform-origin: bottom;
    content: "";
    left: 25%;
    top: 0;
    width: 50%;
    height: 100%;
    background-image: url(img/tree_bg.png);
    background-size:contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}

@media (min-width: 572px) {
    .bg {
        --width: calc(var(--ground-width) * 2);
    }
    .bg:before {
        background-size: contain;
    }
}

.bg::after {
    position:absolute;
    content:"";
    width: 100%;
    height: var(--bg-decoration);
    top: calc(-1 * var(--bg-decoration) + 1px);
    left:0;
    background-color: var(--bg-color);
    background-repeat: repeat-x;
    background-size: 300vw var(--bg-decoration);
    mask: url(img/treeline.svg#treeline-path);
    mask-repeat: repeat-x;
    mask-size: 348vw 100%;
    pointer-events: none;
}

@media (min-width: 576px) {
    .side1,
    .side2 {
        --width: var(--depth);
        width: var(--width);
        background-color:var(--bg-color);
        background-position-x: 0;
        background-position-y: bottom;
    }

    .side1 {
        background-image: linear-gradient(-90deg, var(--bg-color), 75%, var(--side-color));
        transform-origin: bottom left;
        transform: translateX(calc(var(--width) * 0.5 + var(--ground-width) * -0.5)) rotateY(90deg)
    }

    .side2 {
        background-image: linear-gradient(90deg, var(--bg-color), 75%, var(--side-color));
        transform-origin: bottom right;
        transform: translateX(calc(var(--width) * -0.5 + var(--ground-width) * 0.5)) rotateY(-90deg)

    }

    .side1::after,
    .side2::after {
        position:absolute;
        content:"";
        width: 100%;
        height: var(--bg-decoration);
        top: calc(-1 * var(--bg-decoration) + 1px);
        left:0;
    }


    .side1::after {
        background-image: linear-gradient(-90deg, var(--bg-color), 75%, var(--side-color));
    }
    .side2::after {
        background-image: linear-gradient(90deg,  var(--bg-color), 75%, var(--side-color));
    }
    .side1::after,
    .side2::after {
        mask: url(img/treeline.svg#treeline-path);
        mask-repeat: repeat-x;
        mask-size: 40vw 100%;
        pointer-events: none;
    }

    .side1::before,
    .side2::before {
        --translate-start: 50%;
        --translate-end: 0%;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 200%;
        content: "";
        background-image: url(img/tree_row.png);
        background-size: 50% 85%;
        background-repeat: repeat-x;
        background-position: bottom;
        animation: var(--speed) linear infinite moveSide;
        pointer-events: none;
    }
    
    .side2::before {
        --translate-start: 0%;
        --translate-end: 50%;
        animation-delay: calc(var(--speed) * -0.5);
    }
}

@keyframes moveSide {
    from { transform: translateX(var(--translate-start));}
    to { transform: translateX(var(--translate-end));}
}

.ground-overlay {
    --height: var(--depth);
    --width: var(--ground-width);
    background-image: radial-gradient(ellipse at center bottom, #45002d00 4%,9%, #050d145e 12%,24%, var(--bg-color) 50%);
    transform: rotateX(90deg) translateZ(5px);
}
.ground {
    --height: calc(var(--depth) * 2);
    --width: var(--ground-width);
    background-color: #061221;
    background-image: url(img/forest_floor.png);
    background-size: 50% 25%;
    transform: rotateX(90deg);
    animation: calc(var(--speed)) linear infinite walkPath;
    pointer-events: none;
}
.path {
    --width: var(--full-width);
    height: 100%;
    background-image: url(img/forest_path.png);
    background-size: 100% 25%;
    background-repeat: repeat-y;
    pointer-events:none;
}

@media (min-width: 576px) {
    .ground {
        background-size: 12.5% 6.25%;

    }
    .path {
    --width: var(--full-width);
        background-size: 100% 6.25%;
    }
}

@keyframes walkPath {
    from {transform: rotateX(90deg) translateY(0);}
    to {transform: rotateX(90deg) translateY(var(--depth));}
}



/* Trees -------------------- */
.tree-01,
.tree-02,
.tree-03,
.tree-04,
.tree-05,
.tree-06 {
    --amount: 6;
    --time: calc(var(--speed) * 2); 
    --order: 0;
    --delay-interval: calc(var(--time) / var(--amount));
    /* filter:blur(10px); */
    pointer-events: none;
}

@media (max-width: 575px) {
    .tree-01,
    .tree-02,
    .tree-03,
    .tree-04,
    .tree-05,
    .tree-06 {
        --yPosition: -90px !important;
    }
}

.tree-01 {
    --order: 0;
    --xPosition: calc(var(--full-width) * -1);
    --yPosition: 0px;
    --width: calc(var(--height) * 2.3);
}
.tree-02 {
    --order: 1;
    --xPosition: calc(var(--full-width) * 1.1);
    --yPosition: 0px;
    --width: calc(var(--height) * 1.9);
}
.tree-03 {
    --order: 2;
    --xPosition: calc(var(--full-width) * -1.4);
    --yPosition: 0px;
    --width: calc(var(--height) * 1.7);
}
.tree-04 {
    --order: 3;
    --xPosition: calc(var(--full-width) * 1.1);
    --yPosition: 40px;
    --width: calc(var(--height) * 1.5);
}
.tree-05 {
    --order: 4;
    --xPosition: calc(var(--full-width) * -1.4);
    --yPosition: 30px;
    --width: calc(var(--height) * 2.3);
}
.tree-06 {
    --order: 5;
    --xPosition: calc(var(--full-width) * 1.2);
    --yPosition: 0px;
    --width: calc(var(--height) * 2.5);
}

.tree-01,
.tree-02,
.tree-03,
.tree-04,
.tree-05,
.tree-06 {
    height: var(--width);
    animation: 
    var(--time) linear calc(var(--delay-interval) * -1 * var(--order)) infinite treeZoom, 
    var(--time) linear calc(var(--delay-interval) * -1 * var(--order)) infinite treeOpacity;
}

@keyframes treeZoom {
    from {transform: translate3d(var(--xPosition),var(--yPosition), calc(var(--depth) * -1))}
    to {transform: translate3d(var(--xPosition),var(--yPosition), calc(var(--depth)))}
}
@keyframes treeOpacity {
    0% {opacity: 0;}
    15% {opacity: 1;}
    100% {opacity: 1;}
}