/* -------------------------
   RESET / BASE
   ------------------------- */
  
   /* -------------------------
      CONTAINER
      ------------------------- */
   .train-container {
     position: relative;
     width: 100%;
     height: 100vh;
 
     overflow: hidden;
     background: linear-gradient(#87CEEB,#9fd2ff 60%);
     border-radius: 12px;
     box-shadow: 0 20px 60px rgba(2,8,24,0.6);
     perspective: 1200px; /* for 2.5D feel */
     font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; color:#111;
     box-sizing: border-box; margin:0; padding:0;
   }
   
   /* -------------------------
      ENVIRONMENTS SCROLLER (moves)
      ------------------------- */
  .environments {
     display: flex;
     height: 100%;
    width: 300%; /* 3 stations => 3 * 100% */
     transition: transform 900ms cubic-bezier(.2,.9,.2,1);
     will-change: transform;
   }
   
   /* Each station occupies 100% width */
   .station {
     position: relative;
     flex: 0 0 100%;
     height: 100%;
     overflow: visible;
     z-index: 10;
     /* small transform origin for 3D tilt if needed */
   }
   
   /* -------------------------
      TRACK (spans all stations) — 2.5D look
      ------------------------- */
  .track {
     position: absolute;
     left: 0;
     bottom: 120px;
    width: 300%; /* match environments width */
     height: 80px;
     z-index: 30;
     transform-origin: center;
     transform: rotateX(12deg) translateZ(0); /* tilt to give 2.5D floor */
     background-image:
       linear-gradient( to right, #6b4b2a 0 20px, #4a2f1b 20px 40px),
       repeating-linear-gradient(to right, rgba(0,0,0,0.12) 0 60px, transparent 60px 120px);
     background-size: 60px 100%, 120px 100%;
     box-shadow: 0 -6px 30px rgba(0,0,0,0.35);
     pointer-events: none;
     will-change: transform;
   }
   
   /* sleepers */
   .track::before{
     content:"";
     position:absolute;
     left:0; right:0; top:50%; height:6px; transform:translateY(-50%);
     background-image: repeating-linear-gradient(to right, #8e6a45 0 60px, #794e2e 60px 120px);
     opacity:0.9;
     z-index:2;
   }
   
   /* rails (overlaid) */
   .track::after{
     content:"";
     position:absolute;
     left:0; right:0; top:18%; height:6px; transform:translateY(-50%);
     background: linear-gradient(90deg,#bba07a,#a07b53);
     z-index:3;
   }
   
   /* small decorative rocks on track foreground */
   .track .sleep-rock { position:absolute; bottom:12px; width:20px; height:12px; background:#3d3d3d; border-radius:6px; opacity:.7; }
   
   /* -------------------------
      LAYERS: each station has multiple layers to parallax
      - .layer-bg (farthest)
      - .layer-mid
      - .layer-fg (closest)
      ------------------------- */
   .layer {
     position: absolute;
     left: 0;
     top: 0;
     width: 200%;   /* larger than viewport to allow movement */
     height: 100%;
     will-change: transform;
     pointer-events: none;
   }
   
   /* small global style for objects inside layers */
   .obj { position:absolute; will-change: transform; pointer-events: none; }
   
   /* -------------------------
      DESERT (station 0)
      ------------------------- */
   .station.desert { background: linear-gradient(#ffd27f,#f7b84b 60%); }
   .desert .dune { position:absolute; bottom:190px; left:-10%; width:120%; height:220px; background: radial-gradient(closest-side, #f0b56b,#d88b3e); border-radius:50% 50% 0 0; transform: translateZ(0) scaleY(1.05); z-index:1; }
   .desert .sun { position:absolute; left:10%; top:7%; width:96px; height:96px; border-radius:50%; background: radial-gradient(circle at 40% 40%, #fff59d, #ffd54f 60%); box-shadow: 0 8px 28px rgba(255,180,20,0.25); z-index:99; pointer-events:none; }
   .desert .camel {
    position: absolute;
    bottom: 300px;
    left: 9.4%;
    width: 120px;       /* width of camel */
    height: 144px;      /* height of camel */
    background: url('/svg/camel.svg') no-repeat center center;
    background-size: contain;  /* scale the SVG properly */
    z-index: 6;
  }
  .desert .cactus {
    position: absolute;
    bottom: 20px;
    left: 12%;
    width: 132px;
    height: 84px;
    background: url('/svg/cactus.svg') no-repeat center center;
    background-size: contain;
    z-index: 5;
  }
  
   .desert .cloud { position:absolute; top:60px; left:6%; width:140px; height:46px; background:#fff; border-radius:40px; opacity:.92; box-shadow:0 10px 30px rgba(0,0,0,0.05); animation: cloudDrift 28s linear infinite; }
   
    /* Container for all signposts */
.layer.layer-fg {
  display: flex;           /* arrange signposts horizontally */
  gap: 370px;               /* space between signposts */
  flex-wrap: wrap;         /* wrap to next line if needed */
  justify-content: flex-start;
}

/* Each signpost */
.signpost {
  position: relative;
  display: inline-block;
  top: 40%;
  left: 3%;
}

/* Rod / Pole */
.pole {
  width: 6px;
  height: 30px; /* adjust rod height per sign */
  background: #444;
  margin: 0 auto;
  border-radius: 3px;
}

/* ======================
   DESERT THEME SIGNBOARD
   ====================== */

/* Base Sign */
.sign {
  position: absolute;
  border: 2px solid #8b5e3c; /* earthy brown frame */
  border-radius: 14px;
  background: linear-gradient(135deg, #f8e0a0, #e4b96b, #c97c2d);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 12px rgba(255, 180, 80, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  left: 5%;
  transform: translateX(-50%);
  z-index: 10;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Hover effect for interactivity */
.sign:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 0 18px rgba(255, 200, 100, 0.6);
}

/* Horizontal sign */
.sign.horizontal {
  width: 240px;
  height: 90px;
  top: -90px;
}

/* Vertical sign */
.sign.vertical {
  width: 140px;
  height: 240px;
  flex-direction: column;
  top: -240px;
}

/* ======================
   Panel Content Styling
   ====================== */

/* Image fills sign with black fallback */
.panel-image {
  width: 100%;
  height: 100%;
  object-fit: fit;
  object-position: center;
  border-radius: 10px;
  background-color: black;
  display: block;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
.panel-description {
  list-style: none; /* remove default bullets */
  padding-left: 15px;
  margin: 0;
}

.panel-description li {
  position: relative;
  margin: 6px 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff; /* adjust to match your sign theme */
}

.panel-description li::before {
  content: "➤"; /* custom bullet */
  position: absolute;
  left: 0;
  color: #ffd700; /* golden arrow, can change */
  font-size: 12px;
}

/* Title text */
.panel-title {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(90deg, #8b5e3c, #e57f2c, #4c3407);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Tags */
.panel-tags {
  font-size: 1rem;
  text-align: center;
  color: #3b2f1e;
  background: rgba(255, 220, 160, 0.6);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 500;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}

/* Description */
.panel-description {
  font-size: 0.95rem;
  text-align: center;
  color: #fff8e5;
  background: rgba(60, 30, 10, 0.7);
  padding: 8px;
  border-radius: 8px;
  line-height: 1.4;
  box-shadow: inset 0 0 10px rgba(255, 180, 80, 0.3);
}

/* Link */
.panel-link {
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffcf70;
  text-decoration: none;
  background: rgba(140, 70, 20, 0.8);
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.3s ease, color 0.3s ease;
}

.panel-link:hover {
  background: #ffcf70;
  color: #40210e;
}


   /* -------------------------
      FOREST (station 1)
      ------------------------- */
   /* ----------------------------
   Forest River Station Base
---------------------------- */
.station.forest_river {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background: linear-gradient(to top, #0b2d2b, #2b5a4a); /* night forest sky */
  font-family: 'Inter', sans-serif;
}

/* Background Layer */
.forest_layer_bg .forest_moon {
  position: absolute;
  top: 20px;
  left: 13%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #fff 0%, #cce6ff 80%);
  border-radius: 50%;
  box-shadow: 0 0 40px #ffffff66;
}

.forest_layer_bg .forest_mountain {
  position: absolute;
  bottom: 180px;

  width: 700px;
  background: linear-gradient(to top, #5a3d1f, #8c6239);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  z-index: 2;
}
.forest_mountain {
  height: 200px !important;

}

.forest_layer_bg .forest_cloud {
  position: absolute;
  top: 50px;
  left: 30%;
  width: 120px;
  height: 40px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  z-index: 3;
}

/* Midground Layer */
.forest_layer_mid .forest_tree {
  position: absolute;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to top, #020202, #904f09);
  border-radius: 8px;
  z-index: 4;
}

.forest_layer_mid .forest_lion {
  position: absolute;
  bottom: 10px;
  left: 9%;
  width: 80px;
  height: 50px;
  background: url('/svg/lion.svg') no-repeat center center;
  background-size: contain;
  z-index: 995;
}

.forest_layer_mid .rabbit {
  position: absolute;
  bottom: 10px;
  left: 19%;
  width: 80px;
  height: 50px;
  background: url('/svg/rabbit.svg') no-repeat center center;
  background-size: contain;
  z-index: 995;
}

.forest_layer_mid .giraffe {
  position: absolute;
  bottom: 10px;
  left: 19%;
  width: 80px;
  height: 50px;
  background: url('/svg/giraffe.svg') no-repeat center center;
  background-size: contain;
  z-index: 995;
}

.forest_layer_mid .monkey {
  position: absolute;
  bottom: 10px;
  left: 19%;
  width: 80px;
  height: 50px;
  background: url('/svg/monkey.svg') no-repeat center center;
  background-size: contain;
  z-index: 995;
}

.forest_layer_mid .elephant {
  position: absolute;
  bottom: 10px;
  left: 19%;
  width: 80px;
  height: 50px;
  background: url('/svg/elephant.svg') no-repeat center center;
  background-size: contain;
  z-index: 995;
}

.forest_layer_mid .shark {
  position: absolute;
  bottom: 10px;
  left: 19%;
  width: 80px;
  height: 50px;
  background: url('/svg/shark.svg') no-repeat center center;
  background-size: contain;
  z-index: 995;
}

.forest_layer_mid .forest_river {
  position: absolute;
  bottom: 1%;
  left:-42%;
  width: 120%;
  height: 200px;
  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
  clip-path: polygon(
    0% 60%, 
    10% 55%, 
    20% 65%, 
    30% 50%, 
    40% 60%, 
    50% 45%, 
    60% 55%, 
    70% 50%, 
    80% 60%, 
    90% 50%, 
    100% 55%, 
    100% 100%, 
    0% 100%
  );
  z-index: 3;
  transform: rotate(-10deg);
  animation: forest_river_flow 4s infinite linear;
}

@keyframes forest_river_flow {
  0% { background-position: 0 0; }
  100% { background-position: 200px 0; }
}


@keyframes forest_river_wave {
  0% { background-position-x: 0; }
  100% { background-position-x: 40px; }
}

/* ----------------------------
   Signpost / Project Card
---------------------------- */
.forest_signpost {
  position: relative;
  display: inline-block;
  margin: 140px;
  left: 5%;
  
}



/* Signs styling */
.forest_sign {
  position: absolute;
  border: 2px solid #2f4f2f;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f4f2f, #3cb043, #1a3d1a);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 12px rgba(80, 200, 120, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 990;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.forest_sign:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 0 18px rgba(120, 240, 150, 0.6);
}

/* Horizontal / Vertical signs */
.forest_sign.horizontal { flex-direction: column; text-align: center; }
.forest_sign.vertical { flex-direction: column; text-align: center; }

/* Panel content */
.forest_panel_image { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; background-color: black; }
.forest_panel_title { font-size: 1.4rem; font-weight: 700; color: #d1f0c1; text-shadow: 1px 1px 3px #0b3d0b; }
.forest_panel_tags { font-size: 1rem; color: #b0e5a5; background: rgba(20,50,20,0.6); padding:4px 10px; border-radius:6px; margin-top:4px; }
.forest_panel_description { font-size:0.95rem; text-align:center; color:#e0f8d8; background: rgba(10,40,10,0.7); padding:8px; border-radius:8px; }
.forest_panel_link { margin-top:8px; font-size:0.9rem; font-weight:600; color:#90ff90; text-decoration:none; background: rgba(10,60,10,0.7); padding:6px 12px; border-radius:6px; transition:0.3s; }
.forest_panel_link:hover { background:#90ff90; color:#0a2b0a; }

.forest_panel_description {
  list-style: none; /* Remove default bullets */
  padding-left: 20px; /* Space for custom bullets */
}

.forest_panel_description li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 25px; /* Space for the bullet */
  font-size: 14px;
  line-height: 1.5;
  color: #fff; /* Adjust text color if needed */
}

/* Custom bullet */
.forest_panel_description li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;  /* Bullet width */
  height: 10px; /* Bullet height */
  background-color: #ffcc00; /* Bullet color */
  border-radius: 50%; /* Makes it circular */
}

      /* ----------------------------
   FUTURISTIC STATION Station Base
---------------------------- */
        /* Folders with futuristic styling */
.futuristic_city { position: relative; width:100%; height:700px; overflow:hidden; background:#050a1e; font-family:'Orbitron', sans-serif; }

/* Background Buildings */
.futuristic_bld { position:absolute; bottom:0; width:120px; height:250px; background: linear-gradient(135deg,#0ff,#00f); box-shadow:0 0 20px #0ff; border-radius:4px; z-index:2; }
.futuristic_bld1 { left:1%; bottom: 50%; }
.futuristic_bld2 { left:0%; }
.futuristic_bld3 { left:4%; }
.futuristic_bld4 { left:6%; }
.futuristic_bld5 { left:8%; }

/* Sun, Moon, Stars */
.futuristic_sun { position:absolute; top:40px; left:20%; width:80px; height:80px; background: radial-gradient(circle,#ff0,#f0a); border-radius:50%; box-shadow:0 0 50px #ff0; }
.futuristic_moon { position:absolute; top:40px; left:15%; width:60px; height:60px; background: radial-gradient(circle,#fff,#aaa); border-radius:50%; box-shadow:0 0 40px #fff; }
.futuristic_star { position:absolute; width:6px; height:6px; background:#0ff; border-radius:50%; box-shadow:0 0 10px #0ff; animation: twinkle 2s infinite alternate; }

@keyframes twinkle { 0% { opacity:0.2; } 100% { opacity:1; } }
/* Futuristic Spinning Portal */
.futuristic_portal {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid #0ff;
  background: radial-gradient(circle at 50% 50%, #0ff 0%, #001 70%);
  box-shadow: 0 0 20px #0ff, inset 0 0 30px #0ff;
  z-index: 8;
  animation: spinPortal 3s linear infinite;
}

/* Inner lively circle (pulsing) */
.futuristic_portal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #00f, #0ff);
  box-shadow: 0 0 15px #0ff, inset 0 0 20px #00f;
  animation: pulsePortal 1.5s ease-in-out infinite alternate;
}

/* Spin animation */
@keyframes spinPortal {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

/* Pulse animation for inner circle */
@keyframes pulsePortal {
  0% { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.1); opacity: 1; }
}


/* Robots, UFOs, Holograms */
.futuristic_robot { position:absolute; left:5%; width:50px; height:50px; background-size:contain; background-repeat:no-repeat; animation: float 1s ease-in-out infinite alternate; }
 .futuristic_ufo { position:absolute; left:5%; width:50px; height:50px; background-size:contain; background-repeat:no-repeat; animation: float 0.3s ease-in-out infinite alternate; }

.futuristic_robot { 
  position: absolute;
  bottom: 300px;
  left: 9.4%;
  width: 70px;       /* width of camel */
  height: 144px;      /* height of camel */
  background: url('/svg/robot.svg') no-repeat center center;
  background-size: contain;  /* scale the SVG properly */
  z-index: 6;
}
.futuristic_ufo { 
  position: absolute;
  bottom: 300px;
  left: 9.4%;
  width: 120px;       /* width of camel */
  height: 144px;      /* height of camel */
  background: url('/svg/ufo.svg') no-repeat center center;
  background-size: contain;  /* scale the SVG properly */
  z-index: 6;
}
.futuristic_hologram { 
  position: absolute;
  bottom: 300px;
  left: 9.4%;
  width: 80px;       /* width of camel */
  height: 144px;      /* height of camel */
  background: url('/svg/hologram.svg') no-repeat center center;
  background-size: contain;  /* scale the SVG properly */
  z-index: 6;
}
.futuristic_floating_holo { 
  position: absolute;
  bottom: 300px;
  left: 9.4%;
  width: 120px;       /* width of camel */
  height: 144px;      /* height of camel */
  background: url('/svg/floating-holo.svg') no-repeat center center;
  background-size: contain;  /* scale the SVG properly */
  z-index: 6;
}


/* Float animation */
@keyframes float { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }

/* Glitch effect for text */
.glitch-text {
  position: relative;
  color: #0ff;
  font-weight:700;
  text-shadow: 0 0 5px #0ff;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  left:0; top:0;
  width:100%; height:100%;
  color:#0ff;
  background:transparent;
  overflow:hidden;
}
.glitch-text::before { animation: glitch1 2s infinite; clip-path: polygon(0 0,100% 0,100% 33%,0 33%); }
.glitch-text::after { animation: glitch2 3s infinite; clip-path: polygon(0 66%,100% 66%,100% 100%,0 100%); }

@keyframes glitch1 { 0%{transform:translate(0,0)} 20%{transform:translate(-2px,-2px)} 40%{transform:translate(2px,2px)} 60%{transform:translate(-1px,1px)} 80%{transform:translate(1px,-1px)} 100%{transform:translate(0,0)} }
@keyframes glitch2 { 0%{transform:translate(0,0)} 20%{transform:translate(1px,-1px)} 40%{transform:translate(-1px,1px)} 60%{transform:translate(2px,2px)} 80%{transform:translate(-2px,-2px)} 100%{transform:translate(0,0)} }

/* Project Cards */
.futuristic_project_card { 
  position:absolute; padding:16px; border:2px solid #0ff; border-radius:12px; background:rgba(0,255,255,0.1); backdrop-filter:blur(6px);
  box-shadow:0 0 15px #0ff, 0 0 30px #0ff inset; color:#0ff; transition: transform 0.3s ease; width:250px; z-index:10;
}
.futuristic_project_card:hover { transform:scale(1.05) rotateY(1deg); box-shadow:0 0 25px #0ff,0 0 50px #0ff inset; cursor:pointer; }
.futuristic_card_image img { width:100%; border-radius:8px; }
.futuristic_card_title { font-size:1.2rem; margin:6px 0; }
.futuristic_card_tags { font-size:0.9rem; margin-bottom:6px; background:rgba(0,255,255,0.1); padding:2px 6px; border-radius:4px; display:inline-block; }
.futuristic_card_description { font-size:0.65rem; margin:6px 0; }
.futuristic_card_link { display:inline-block; font-size:0.85rem; text-decoration:none; color:#0ff; border:1px solid #0ff; padding:4px 8px; border-radius:4px; transition:0.3s; }
.futuristic_card_link:hover { background:#0ff; color:#001; }

   /* -------------------------
      STATION PLATFORM (2.5D platform where project props live)
      ------------------------- */
   .platform {
     position: absolute;
     bottom: 280px;
     left: 8%;
     width: 340px;
     height: 120px;
     background: linear-gradient(#e9e7e2,#d7cbb9);
     border-radius: 8px;
     transform: rotateX(14deg) translateZ(0); /* tilt like a 3D platform */
     box-shadow: 0 18px 40px rgba(2,8,24,0.35);
     z-index:18;
     display:flex;
     align-items:center;
     justify-content:center;
   }
   
   /* Project card (on platform) */
   .project-card {
     width:260px;
     background: rgba(255,255,255,0.95);
     padding:12px 14px;
     border-radius:8px;
     box-shadow:0 8px 20px rgba(0,0,0,0.12);
     transform: translateZ(30px);
     pointer-events:auto;
   }
   
   /* -------------------------
      TRAIN (fixed) - more detail: engine + carriages + wheels + smoke puffs
      ------------------------- */
   .train {
     position: absolute;
     bottom: 92px;
     left: 80px;
     z-index: 60;
     display:flex;
     gap:12px;
     align-items:flex-end;
     pointer-events:none;
    transform: translate(100% ,-75%) scaleX(-1);

    transform-origin: left bottom;
   }
   
   /* engine */
   .engine {
     position:relative;
     width:160px;
     height:96px;
     background: linear-gradient(#2e2e2e,#1f1f1f);
     border-radius:10px;
     box-shadow: 0 12px 30px rgba(0,0,0,0.5);
     transform: translateZ(60px);
   }
   
   /* chimney + smoke */
   .chimney {
     position:absolute; left:18px; top:-36px; width:26px; height:44px; background:#333; border-radius:6px;
   }
   .smoke-puff {
     position:absolute; left:54px; top:-24px; width:18px; height:18px; background:rgba(240,240,240,0.85);
     border-radius:50%; opacity:0; transform-origin:center; animation: puff 2000ms infinite;
   }
   @keyframes puff {
     0% { transform: translateY(0) scale(.6); opacity:0.7; }
     40% { transform: translateY(-48px) scale(1.0); opacity:0.5; }
     100% { transform: translateY(-96px) scale(1.6); opacity:0; }
   }
   
   /* windows / detailing on engine */
   .eng-window { position:absolute; right:18px; top:22px; width:44px; height:30px; background:linear-gradient(#cfeaff,#9fd6ff); border-radius:6px; box-shadow:inset 0 3px 6px rgba(0,0,0,0.1); }
   
   /* carriage */
   .carriage {
     width:120px; height:80px; background: linear-gradient(#444,#333); border-radius:8px; position:relative;
     box-shadow: 0 10px 26px rgba(0,0,0,0.35);
   }
   
   /* wheels */
   .wheel { position:absolute; bottom:-18px; width:36px; height:36px; background:#222; border-radius:50%; left:18px; box-shadow: inset 0 -6px 8px rgba(255,255,255,0.02); animation: spin 1000ms linear infinite; }
   .carriage .wheel { left:18px; }
   .carriage .wheel:nth-child(3) { left:72px; }
   @keyframes spin { from { transform: rotate(0);} to { transform:rotate(360deg);} }
   
   /* -------------------------
      CONTROLS
      ------------------------- */
   .controls {
     position:absolute;
     right:18px;
     top:18px;
     z-index:100;
     display:flex;
     gap:10px;
   }
   .controls button {
     background: rgba(255,255,255,0.95);
     border: none;
     padding:10px 14px;
     border-radius:8px;
     cursor:pointer;
     font-weight:600;
     box-shadow: 0 6px 18px rgba(0,0,0,0.18);
   }
   
   /* small responsive */
   @media (max-width:900px) {
     .train-container { height:520px; max-width: 100%; margin: 12px; }
     .platform { left:10%; width: 300px; }
     .train { left:24px; bottom:72px; }
     .controls { right:10px; top:10px; }
   }

  
/* Desert */
.desert .sun, .desert .mountain, .desert .dune, .desert .cactus, .desert .camel, .desert .sand-particle {
    z-index: 999; /* relative to layer-bg / layer-mid / layer-fg */
}

/* Forest */
.forest .tree, .forest .bush, .forest .bird, .forest .lantern, .forest .landing-lantern {
    z-index: 999;
}

/* City */
.city .bld1, .city .bld2, .city .bld3, .city .floating-holo, .city .drone, .city .holo-sign {
    z-index: 999;
}