/* ============================================
   HORIZONTAL TREKKING LANDSCAPE
   Visible mountain silhouettes with parallax scroll
   ============================================ */

/* Multi-layer mountain system — visible on light bg */
.mountain-range {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 500%;
  height: 220px;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  opacity: 1;
}

.mountain-range::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 65%,
    rgba(255, 255, 255, 0.9) 100%
  );
  pointer-events: none;
}

/* Far background mountains — lightest layer */
.mountain-range-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background-image: 
    url('data:image/svg+xml,<svg width="1200" height="150" xmlns="http://www.w3.org/2000/svg"><path d="M0 150 L150 100 L300 120 L450 90 L600 110 L750 80 L900 100 L1050 70 L1200 90 L1200 150 L0 150" fill="rgba(16,155,110,0.55)"/></svg>');
  background-size: 20% 100%;
  background-repeat: repeat-x;
  z-index: 1;
}

/* Mid-ground mountains — medium layer */
.mountain-range-mid {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180px;
  background-image: 
    url('data:image/svg+xml,<svg width="1000" height="180" xmlns="http://www.w3.org/2000/svg"><path d="M0 180 L120 120 L240 140 L360 100 L480 120 L600 90 L720 110 L840 80 L960 100 L1000 95 L1000 180 L0 180" fill="rgba(10,140,100,0.58)"/></svg>');
  background-size: 25% 100%;
  background-repeat: repeat-x;
  z-index: 2;
}

/* Foreground peaks — most visible layer */
.mountain-range-fg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background-image: 
    url('data:image/svg+xml,<svg width="800" height="200" xmlns="http://www.w3.org/2000/svg"><path d="M0 200 L80 140 L160 160 L240 130 L320 150 L400 120 L480 140 L560 110 L640 130 L720 100 L800 120 L800 200 L0 200" fill="rgba(6,160,105,0.7)"/></svg>');
  background-size: 30% 100%;
  background-repeat: repeat-x;
  z-index: 3;
}

/* Perspective container */
.mountain-perspective {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  perspective: 1000px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.8;
}

@media (max-width: 600px) {
  .mountain-range {
    height: 130px;
  }

  .mountain-range-bg {
    height: 90px;
  }

  .mountain-range-mid {
    height: 105px;
  }

  .mountain-range-fg {
    height: 120px;
  }

  .mountain-perspective {
    height: 160px;
  }

  .mountain-range::after {
    height: 80px;
  }

  .mountain-perspective::after {
    height: 90px;
  }
}

.mountain-perspective::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 65%,
    rgba(255, 255, 255, 0.9) 100%
  );
  pointer-events: none;
}

.mountain-perspective::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 300%;
  height: 100%;
  background-image: 
    url('data:image/svg+xml,<svg width="1600" height="250" xmlns="http://www.w3.org/2000/svg"><path d="M0 250 L200 180 L400 200 L600 170 L800 190 L1000 160 L1200 180 L1400 150 L1600 170 L1600 250 L0 250 Z" fill="rgba(16,155,110,0.5)"/><path d="M0 250 L150 190 L300 210 L450 180 L600 200 L750 170 L900 190 L1050 160 L1200 180 L1350 160 L1600 180 L1600 250 L0 250 Z" fill="rgba(6,125,88,0.38)"/></svg>');
  background-size: contain;
  transform: rotateX(60deg) translateZ(-200px);
  animation: trekForward 60s linear infinite;
}

@keyframes trekForward {
  from { transform: rotateX(60deg) translateZ(-200px) translateX(0); }
  to { transform: rotateX(60deg) translateZ(-200px) translateX(-33.33%); }
}

/* Trek progress bar */
.trek-progress-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 100vh;
  background: linear-gradient(to top,
    rgba(255, 122, 0, 0.4) 0%,
    rgba(255, 122, 0, 0.2) 30%,
    rgba(255, 122, 0, 0.06) 60%,
    transparent 100%
  );
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

/* Horizon line */
.horizon-line {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 122, 0, 0.15) 50%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
  transform: translateY(-50%);
  animation: horizonGlow 4s ease-in-out infinite;
}

@keyframes horizonGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* Valley shadows at bottom edge */
.valley-shadow {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, 
    rgba(14, 15, 18, 0.05) 0%, 
    transparent 100%
  );
  z-index: 0;
  pointer-events: none;
}