#skyLayer { z-index: 1; }
#cloudsLayer { z-index: 2; }
#mountainsLayer { z-index: 3; }
#housesLayer { z-index: 4; }
#pathLayer { z-index: 5; }

.walk { z-index: 6; }

#treesLayer { z-index: 7; }
#foregroundLayer { z-index: 8; }
#foregroundTrees { z-index: 9; }

.viewport {      
    transform-origin: center center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100vw;
    height: 100%;
    max-height: 1000px;    
    overflow: hidden;
    background: linear-gradient(to bottom, #DAE9F4 50%, #DCDFAE);
    cursor: default;    
}
.viewport:after{
    background: linear-gradient(to right, rgba(255,255,255,0),  rgba(255,255,255,1));
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    
}

.viewport:active {
    cursor: grabbing;
}


.scene-width {
    position: absolute;
    inset: 0;
    width: 20000px;
    height: 100%;
    pointer-events: none;
}

.layer {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 50;
    padding: 0.8rem 1rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    color: white;
    font-size: 0.95rem;
    backdrop-filter: blur(8px);
}

.progress-wrap {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    z-index: 50;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    /* overflow: hidden; */
}

.progress-bar {
    width: 100%;
    height: 100%;
    background: #075faa;
    transform-origin: left center;
    transform: scaleX(0); /* 👈 belangrijk */
}
.progress-marker {
    position: absolute;
    top: 50%;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    border: 2px solid rgba(16, 32, 51, 0.85);
    transform: translate(-50%, -50%);
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.cloud {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
}

.hill-svg {
    position: absolute;
    left: 0;
}

.tree,
.post {
    position: absolute;
    bottom: 0;
}

.tree-trunk,
.post-stick,
.post-arm,
.tree-crown {
    position: absolute;
}

.road-back {
    position: absolute;
    left: 0;
    bottom: 115px;
    width: 20000px;
    height: 18px;
    background: #6d5f4f;
}

.road {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20000px;
    height: 115px;
    background: repeating-linear-gradient(
    90deg,
    #2c2c2c 0 120px,
    #f0f0c0 120px 150px,
    #2c2c2c 150px 270px
    );
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.12);
}

.ground-strip {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20000px;
    height: 160px;
    background: linear-gradient(to bottom, #5e4f3d, #3f3429);
}

.walk {
    position: absolute;
    left: 50%;
    bottom: 150px;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-image: url("../png/walk.png");
    background-size: 900px 200px;
    background-position: 0 0;
    height: 200px;
    width: 112.5px;
    pointer-events: none;
}

@media (max-width: 768px) {
.progress-wrap {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    }
}
#popup {
    pointer-events: auto;
}
    

/*-------SIGN-----*/

.animated-sign {
  transform-origin: center bottom;
}

.animated-sign-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sign-ring {
  fill: none;
  stroke: #cfe4f6;
  stroke-width: 2;
}

.sign-ring-middle {
  stroke: #6ea6d4;
  stroke-width: 8;
}

.sign-dot {
  fill: #075faa;
}

.sign-line {
  fill: none;
  stroke: #cfe4f6;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.animated-sign .sign-main-circle,
.animated-sign .sign-dot-top,
.animated-sign .sign-dot-bottom {
  opacity: 0;
}

.animated-sign .sign-line {
  opacity: 0;
}