:root {
    /* Basisfarben */
    --layer-1: #1f3b24;
    --layer-2: #315932;
    --layer-3: #427344;
    /*fest*/
    --layer-4: #5A8C5C;
    --layer-5: #6da170;
    /*fest*/
    --layer-6: #363f84;
    /*Skyline 4B58B8*/

    --layer-1-hell: #2D5434;
    --layer-2-hell: #3F7341;
    --layer-3-hell: #579959;
    --layer-4-hell: #6AA66D;
    --layer-5-hell: #7FBA82;
    --layer-6-hell: #5462CC;

    --margin-top-mobile: 80px;

}

/* =========================
   SCENE
   ========================= */
.scene {
    position: relative;
    width: 100vw;
}

/* =========================
   BASE
   ========================= */
.layer {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    will-change: transform, filter;
}

svg {
    width: 100%;
    height: 100%;
    display: block;
}

.background-layer-wrapper {
    height: auto;
    aspect-ratio: 3 / 2;
    position: absolute;
    width: 100%;
    clip-path: inset(0px 0px 18vw 0px);
}

@media (max-width: 768px) {
    .background-layer-wrapper {
        clip-path: inset(calc(var(--margin-top-mobile) * -1) 0px 18vw 0px);
    }

    .scene {
        top: var(--margin-top-mobile);
    }

    .site-header {
        margin-bottom: var(--margin-top-mobile);
    }
}

/* =========================
   LAYERS (SORTIERT)
   ========================= */

/* 🚲 Layer Bike 1 (Herrenrad) */
.layer-bike-1 {
    --x-start: -17.5%;
    --y-start: 16%;
    --x-end: -17.5%;
    --y-end: 16%;
    --scale-start: 0.4;
    --scale-end: 0.4;
    --rotate: -3deg;
    --blur: 0;
    --duration: 18s;
    fill: #000;

    z-index: 9;
    filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.15));
    transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));

}

/* 🚲 Layer Bike 2 (Mountainbike) */
.layer-bike-2 {
    --x-start: 20%;
    --y-start: -51.6%;
    --x-end: 20%;
    --y-end: -51.6%;
    --scale-start: 0.15;
    --scale-end: 0.15;
    --rotate: -14.5deg;
    --blur: 0;
    --duration: 18s;
    fill: #181818;

    z-index: -1;
    filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.15));
    transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
}

/* 🚲 Layer Bike 3 (Rennrad) */
.layer-bike-3 {
    position: absolute;
    --x-start: 39%;
    --y-start: -51.7%;
    --x-end: 39%;
    --y-end: -51.7%;
    --scale-start: 0.1;
    --scale-end: 0.1;
    --rotate: 19deg;
    --blur: 0;
    --duration: 18s;
    fill: #181818;

    z-index: -1;
    filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.15));
    transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scaleY(var(--scale-start, 1)) scaleX(calc(-1*var(--scale-start, 1))) rotate(var(--rotate, 0));
}

/* 🚲 Layer Bike 3 (Damenrad) */
.layer-bike-4 {
    --x-start: 3%;
    --y-start: -47%;
    --x-end: 3%;
    --y-end: -47%;
    --scale-start: 0.1;
    --scale-end: 0.1;
    --rotate: -5deg;
    --blur: 0;
    --duration: 18s;
    fill: #181818;

    z-index: -1;
    filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.15));
    transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scaleY(var(--scale-start, 1)) scaleX(calc(-1*var(--scale-start, 1))) rotate(var(--rotate, 0));
}



/* 🌿 Layer 1 (Gras) */
.layer1 {
    --x-start: 0%;
    --y-start: 95%;
    --x-end: 0%;
    --y-end: 95%;
    --scale-start: 1;
    --scale-end: 1;
    --blur: 0;
    --duration: 18s;
    --shadow: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.3));

    z-index: 10;
    animation:
        layerPulse var(--duration, 20s) ease-in-out infinite,
        layerBlur var(--duration, 20s) ease-in-out infinite;
}

/* 🌄 Layer 2 (Hintergrund 2) */
.layer2 {
    --x-start: 0;
    --y-start: 132%;
    --x-end: 0;
    --y-end: 132%;
    --scale-start: 1.05;
    --scale-end: 1.01;
    --blur: 1.5px;
    --duration: 10s;
    --shadow: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.3));

    z-index: 6;
    transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
    filter: var(--shadow);
    opacity: 0;
	animation:
        slideInUp 1s ease-out forwards;
    animation-delay: 0.2s;
    /*
	animation:
        slideInUp 1s ease-out forwards,
        layerPulse var(--duration, 20s) ease-in-out infinite 1s,
        layerBlur var(--duration, 20s) ease-in-out infinite 1s;

    animation-delay: 0.2s, 4.2s, 4.2s;
	*/
}

/* 🌄 Layer 3 (Hintergrund 3) */
.layer3 {
    --x-start: 0;
    --y-start: 84%;
    --x-end: 0;
    --y-end: 84%;
    --scale-start: 1.05;
    --scale-end: 1.0;
    --blur: 1.5px;
    --duration: 10s;
    --shadow: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.3));

    z-index: 5;
    transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
    filter: var(--shadow);
    opacity: 0;
    animation:
        slideInUp 1s ease-out forwards;

    animation-delay: 0.4s;
	/*
    animation:
        slideInUp 1s ease-out forwards,
        layerPulse var(--duration, 20s) ease-in-out infinite 1s,
        layerBlur var(--duration, 20s) ease-in-out infinite 1s;

    animation-delay: 0.4s, 3.7s, 3.7s;
	*/
}

/* 🌄 Layer 4 (Hintergrund 4) */
.layer4 {
    --x-start: 0;
    --y-start: 105%;
    --x-end: 0;
    --y-end: 105%;
    --scale-start: 1.05;
    --scale-end: 1.0;
    --blur: 1.5px;
    --duration: 10s;
    --shadow: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.3));

    z-index: 4;
    transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
    filter: var(--shadow);
    opacity: 0;
	animation:
        slideInUp 1s ease-out forwards;

    animation-delay: 0.6s;
	/*
    animation:
        slideInUp 1s ease-out forwards,
        layerPulse var(--duration, 20s) ease-in-out infinite 1s,
        layerBlur var(--duration, 20s) ease-in-out infinite 1s;

    animation-delay: 0.6s, 3.2s, 3.2s;
	*/
}

/* 🌄 Layer 5 (Hintergrund 5) */
.layer5 {
    --x-start: 0;
    --y-start: 82%;
    --x-end: 0;
    --y-end: 82%;
    --scale-start: 1.05;
    --scale-end: 1.0;
    --blur: 2px;
    --duration: 10s;
    --shadow: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.3));

    z-index: 3;
    transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
    filter: var(--shadow);
    opacity: 0;
	animation:
        slideInUp 1s ease-out forwards;

    animation-delay: 0.8s;
	/*
    animation:
        slideInUp 1s ease-out forwards,
        layerPulse var(--duration, 20s) ease-in-out infinite 1s,
        layerBlur var(--duration, 20s) ease-in-out infinite 1s;

    animation-delay: 0.8s, 2.7s, 2.7s;
	*/
}

/* 🏙️ Layer 6 (Skyline) */
.layer6 {
    --x-start: 0;
    --y-start: 2%;
    --x-end: 0;
    --y-end: 2%;
    --scale-start: 1.09;
    --scale-end: 1.03;
    --blur: 2.5px;
    --duration: 10s;
    --shadow: drop-shadow(3px 0px 7px rgba(0, 0, 0, 0.2));

    z-index: 2;
    transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
    filter: var(--shadow);
    opacity: 0;
	animation:
        slideInUp 1.3s ease-out forwards;

    animation-delay: 1s;
    /*
	animation:
        slideInUp 1.3s ease-out forwards,
        layerPulse var(--duration, 20s) ease-in-out infinite 1s,
        layerBlur var(--duration, 20s) ease-in-out infinite 1s;

    animation-delay: 1s, 2.5s, 2.5s;
	*/
}

/* ☁️ Layer 7 (Wolken) */
.layer7 {
    --x: 0px;
    --y: 0%;
    --x-start: -4%;
    --duration: 10s;
    --blur: 5px;
    --shadow: drop-shadow(0px 5px 6px rgba(0, 0, 0, 0.1));

    fill: #fff;
    z-index: 1;
    transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
    filter: var(--shadow);
    opacity: 0;
	animation:
        slideInUp 1.3s ease-out forwards,
        cloudMove 60s ease-in-out infinite;
    animation-delay: 1.2s, 2.7s;
	/*
    animation:
        slideInUp 1.3s ease-out forwards,
        cloudMove 60s ease-in-out infinite,
        layerBlur var(--duration, 20s) ease-in-out infinite;
    animation-delay: 1.2s, 2.7s, 2.7s;
	*/

}



/* =========================
   ANIMATIONS
   ========================= */

@keyframes cloudMove {
    0% {
        transform: translate(calc(var(--x) - 4%), var(--y));
    }

    50% {
        transform: translate(calc(var(--x) + 9%), var(--y));
    }

    100% {
        transform: translate(calc(var(--x) - 4%), var(--y));
    }
}

@keyframes layerPulse {
    0% {
        transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
    }

    50% {
        transform: translate(var(--x-end, 0%), var(--y-end, 0%)) scale(var(--scale-end, 1.05)) rotate(var(--rotate, 0));
    }

    100% {
        transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
        ;
    }
}

@keyframes layerBlur {
    0% {
        filter: blur(0px) var(--shadow);
    }

    50% {
        filter: blur(var(--blur, 1px)) var(--shadow);
    }

    100% {
        filter: blur(0px) var(--shadow);
    }
}

@keyframes slideInUp {
    from {
        transform: translate(var(--x-start, 0%), calc(var(--y-start, 0%) + 80px)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
        opacity: 0;
    }

    to {
        transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
        opacity: 1;
    }
}


@media (max-width: 768px) {
    @keyframes slideInUp {
        from {
            transform: translate(var(--x-start, 0%), calc(var(--y-start, 0%) + 60px)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
            opacity: 0;
        }

        to {
            transform: translate(var(--x-start, 0%), var(--y-start, 0%)) scale(var(--scale-start, 1)) rotate(var(--rotate, 0));
            opacity: 1;
        }
    }
}