/* ============================================
   TRAVEL SCENE - Retro Pixel Art Animation
   Inspired by the 1990 DOS Oregon Trail
   ============================================ */

/* EGA/VGA palette - 1990 DOS Oregon Trail style */
:root {
  --sky-blue: #5555ff;
  --sky-light: #55ffff;
  --sky-storm: #0000aa;
  --sky-fog: #55aaaa;
  --cloud-white: #ffffff;
  --mountain-far: #555555;
  --mountain-near: #aaaaaa;
  --mountain-snow: #ffffff;
  --hill-green: #55ff55;
  --ground-green: #00aa00;
  --ground-brown: #aa5500;
  --trail-brown: #aa5500;
  --trail-rut: #553300;
  --tree-green: #00aa00;
  --tree-trunk: #aa5500;
  --cactus-green: #00aa00;
  --rock-gray: #aaaaaa;
  --rock-dark: #555555;
  --wagon-brown: #aa5500;
  --wagon-cover: #ffffff;
  --wagon-cover-shadow: #aaaaaa;
  --wheel-brown: #aa5500;
  --ox-brown: #aa5500;
  --ox-dark: #555555;
  --water-blue: #0000aa;
  --water-light: #5555ff;
  --reed-green: #00aa00;
  --desert-tan: #ffff55;
  --desert-ground: #aa5500;
  --valley-green: #55ff55;
}

/* === SCENE CONTAINER === */
.travel-scene {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border: 2px solid #555555;
  border-radius: 0;
  margin-bottom: 12px;
  image-rendering: pixelated;
  background: var(--sky-blue);
}

/* === SKY === */
.scene-sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(180deg, #223388 0%, var(--sky-blue) 40%, var(--sky-light) 100%);
  z-index: 1;
}

.sky-storm .scene-sky {
  background: linear-gradient(180deg, #222233 0%, var(--sky-storm) 60%, #445566 100%);
}

.sky-overcast .scene-sky {
  background: linear-gradient(180deg, #445566 0%, #667788 60%, #778899 100%);
}

.sky-fog .scene-sky {
  background: linear-gradient(180deg, #556666 0%, var(--sky-fog) 60%, #88aa99 100%);
}

/* === CLOUDS === */
.cloud {
  position: absolute;
  background: var(--cloud-white);
  border-radius: 2px;
  z-index: 2;
}

.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 2px;
}

.cloud-1 {
  width: 40px;
  height: 8px;
  top: 12px;
  left: 20%;
  animation: cloudDrift 25s linear infinite;
}
.cloud-1::before { width: 20px; height: 10px; top: -6px; left: 8px; }
.cloud-1::after { width: 14px; height: 6px; top: -4px; left: 22px; }

.cloud-2 {
  width: 50px;
  height: 8px;
  top: 20px;
  left: 60%;
  animation: cloudDrift 30s linear infinite;
  animation-delay: -10s;
}
.cloud-2::before { width: 24px; height: 12px; top: -8px; left: 10px; }
.cloud-2::after { width: 16px; height: 8px; top: -4px; left: 30px; }

.cloud-3 {
  width: 30px;
  height: 6px;
  top: 8px;
  left: 40%;
  opacity: 0.7;
  animation: cloudDrift 35s linear infinite;
  animation-delay: -20s;
}
.cloud-3::before { width: 16px; height: 8px; top: -5px; left: 6px; }

@keyframes cloudDrift {
  from { transform: translateX(calc(100% + 960px)); }
  to { transform: translateX(-150px); }
}

/* === RAIN / SNOW === */
.rain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  pointer-events: none;
  background: repeating-linear-gradient(
    transparent 0px,
    transparent 4px,
    rgba(150, 180, 220, 0.15) 4px,
    rgba(150, 180, 220, 0.15) 5px
  );
  animation: rainFall 0.3s linear infinite;
}

@keyframes rainFall {
  from { background-position: 0 0; }
  to { background-position: -4px 12px; }
}

.snow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 10% 20%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 30% 40%, #ddd 50%, transparent 50%),
    radial-gradient(2px 2px at 50% 10%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 60%, #eee 50%, transparent 50%),
    radial-gradient(1px 1px at 90% 30%, #fff 50%, transparent 50%);
  background-size: 100px 80px;
  animation: snowFall 3s linear infinite;
}

@keyframes snowFall {
  from { background-position: 0 0; }
  to { background-position: 20px 80px; }
}

/* === MOUNTAINS === */
.scene-mountains {
  position: absolute;
  bottom: 42%;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 3;
  background:
    linear-gradient(135deg, var(--mountain-far) 25%, transparent 25%) -20px 0,
    linear-gradient(225deg, var(--mountain-far) 25%, transparent 25%) -20px 0,
    linear-gradient(135deg, var(--mountain-near) 25%, transparent 25%) 40px 0,
    linear-gradient(225deg, var(--mountain-near) 25%, transparent 25%) 40px 0,
    linear-gradient(135deg, var(--mountain-far) 25%, transparent 25%) 100px 0,
    linear-gradient(225deg, var(--mountain-far) 25%, transparent 25%) 100px 0;
  background-size: 60px 40px, 60px 40px, 70px 40px, 70px 40px, 50px 40px, 50px 40px;
  background-repeat: repeat-x;
}

.terrain-mountains .scene-mountains {
  height: 60px;
  bottom: 40%;
  background-size: 50px 60px, 50px 60px, 60px 60px, 60px 60px, 45px 60px, 45px 60px;
}

/* Snow caps for mountains terrain */
.terrain-mountains .scene-mountains::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background:
    linear-gradient(135deg, var(--mountain-snow) 15%, transparent 15%) -20px 0,
    linear-gradient(225deg, var(--mountain-snow) 15%, transparent 15%) -20px 0,
    linear-gradient(135deg, var(--mountain-snow) 15%, transparent 15%) 40px 0,
    linear-gradient(225deg, var(--mountain-snow) 15%, transparent 15%) 40px 0;
  background-size: 50px 8px, 50px 8px, 60px 8px, 60px 8px;
  background-repeat: repeat-x;
}

.terrain-desert .scene-mountains {
  height: 25px;
  background: linear-gradient(135deg, #998866 25%, transparent 25%) -20px 0,
              linear-gradient(225deg, #887755 25%, transparent 25%) -20px 0;
  background-size: 80px 25px;
  background-repeat: repeat-x;
}

.terrain-plains .scene-mountains {
  opacity: 0.5;
  height: 20px;
}

/* === HILLS === */
.scene-hills {
  position: absolute;
  bottom: 38%;
  left: 0;
  right: 0;
  height: 20px;
  z-index: 4;
  background: var(--hill-green);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.moving .scene-hills {
  animation: hillScroll 8s linear infinite;
}

.terrain-desert .scene-hills {
  background: #aa8844;
}

.terrain-river .scene-hills {
  background: #336633;
}

.terrain-river .trail-path {
  display: none;
}

@keyframes hillScroll {
  from { background-position: 0 0; }
  to { background-position: -200px 0; }
}

/* === GROUND === */
.scene-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42%;
  z-index: 5;
  background: var(--ground-green);
}

.terrain-desert .scene-ground {
  background: var(--desert-ground);
}

.terrain-river .scene-ground {
  background: #336633;
}

.terrain-valley .scene-ground {
  background: var(--valley-green);
}

/* === TRAIL PATH === */
.trail-path {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  height: 18px;
  background: var(--trail-brown);
  border-top: 2px solid var(--trail-rut);
  border-bottom: 2px solid var(--trail-rut);
}

.trail-path::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--trail-rut) 0px,
    var(--trail-rut) 8px,
    transparent 8px,
    transparent 20px
  );
}

.moving .trail-path::after {
  animation: trailScroll 0.6s linear infinite;
}

@keyframes trailScroll {
  from { background-position: 0 0; }
  to { background-position: -20px 0; }
}

/* === TERRAIN OBJECTS === */
.terrain-objects {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 30%;
  z-index: 6;
}

.terrain-obj {
  position: absolute;
  bottom: 0;
}

.moving .terrain-obj {
  animation: objectScroll 4s linear infinite;
}

.moving .terrain-obj:nth-child(2) { animation-delay: -0.7s; }
.moving .terrain-obj:nth-child(3) { animation-delay: -1.4s; }
.moving .terrain-obj:nth-child(4) { animation-delay: -2.1s; }
.moving .terrain-obj:nth-child(5) { animation-delay: -2.8s; }
.moving .terrain-obj:nth-child(6) { animation-delay: -3.5s; }

@keyframes objectScroll {
  from { transform: translateX(100px); opacity: 1; }
  to { transform: translateX(-150px); opacity: 1; }
}

/* Pine Tree */
.tree-pine {
  width: 12px;
  height: 24px;
}
.tree-pine::before {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 1px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 18px solid var(--tree-green);
}
.tree-pine::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 4px;
  height: 8px;
  background: var(--tree-trunk);
}

/* Oak Tree */
.tree-oak {
  width: 16px;
  height: 22px;
}
.tree-oak::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 1px;
  width: 14px;
  height: 14px;
  background: var(--tree-green);
  border-radius: 50%;
}
.tree-oak::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 6px;
  width: 4px;
  height: 10px;
  background: var(--tree-trunk);
}

/* Grass Tuft */
.grass-tuft {
  width: 10px;
  height: 6px;
}
.grass-tuft::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 6px;
  background: #44aa44;
  box-shadow: 3px 1px 0 #44aa44, 6px -1px 0 #44aa44, 8px 1px 0 #44aa44;
}

/* Cactus */
.cactus {
  width: 8px;
  height: 18px;
}
.cactus::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 2px;
  width: 4px;
  height: 16px;
  background: var(--cactus-green);
  border-radius: 2px 2px 0 0;
}
.cactus::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: -2px;
  width: 3px;
  height: 8px;
  background: var(--cactus-green);
  border-radius: 2px;
  box-shadow: 7px -2px 0 var(--cactus-green);
}

/* Rock Pile */
.rock-pile {
  width: 14px;
  height: 8px;
}
.rock-pile::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 6px;
  background: var(--rock-gray);
  border-radius: 3px 3px 0 0;
}
.rock-pile::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 6px;
  width: 8px;
  height: 8px;
  background: var(--rock-dark);
  border-radius: 4px 4px 0 0;
}

/* Reed */
.reed {
  width: 6px;
  height: 14px;
}
.reed::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 2px;
  width: 2px;
  height: 14px;
  background: var(--reed-green);
}
.reed::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 4px;
  background: #558844;
  border-radius: 50%;
}

/* === WAGON GROUP === */
.wagon-group {
  position: absolute;
  bottom: 32%;
  left: 25%;
  z-index: 7;
  display: flex;
  align-items: flex-end;
  /* flip entire wagon + oxen as one unit */
  transform: scaleX(-1);
}

.moving .wagon-group {
  animation: wagonBounce 0.4s ease-in-out infinite;
}

@keyframes wagonBounce {
  0%, 100% { transform: translateY(0) scale(var(--wagon-scale, 1)); }
  50% { transform: translateY(-1px) scale(var(--wagon-scale, 1)); }
}

/* === OXEN === */
.ox {
  position: relative;
  width: 24px;
  height: 18px;
  margin-right: -2px;
}

.ox-body {
  position: absolute;
  bottom: 6px;
  left: 2px;
  width: 18px;
  height: 10px;
  background: var(--ox-brown);
  border-radius: 2px;
}

.ox-head {
  position: absolute;
  bottom: 10px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: var(--ox-dark);
  border-radius: 2px 0 0 2px;
}

.ox-head::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 2px;
  height: 3px;
  background: var(--ox-dark);
  box-shadow: 4px 0 0 var(--ox-dark);
}

.ox-legs {
  position: absolute;
  bottom: 0;
  left: 4px;
}

.ox-leg {
  position: absolute;
  width: 3px;
  height: 8px;
  background: var(--ox-dark);
  bottom: 0;
}

.ox-leg.front-left { left: 0; }
.ox-leg.front-right { left: 4px; }
.ox-leg.back-left { left: 10px; }
.ox-leg.back-right { left: 14px; }

.moving .ox-leg.front-left { animation: legWalk 0.4s ease-in-out infinite; }
.moving .ox-leg.front-right { animation: legWalk 0.4s ease-in-out infinite 0.2s; }
.moving .ox-leg.back-left { animation: legWalk 0.4s ease-in-out infinite 0.2s; }
.moving .ox-leg.back-right { animation: legWalk 0.4s ease-in-out infinite; }

@keyframes legWalk {
  0%, 100% { transform: rotate(12deg); transform-origin: top center; }
  50% { transform: rotate(-12deg); transform-origin: top center; }
}

/* === YOKE BAR === */
.yoke-bar {
  position: absolute;
  bottom: 12px;
  left: 46px;
  width: 14px;
  height: 2px;
  background: var(--tree-trunk);
  z-index: 1;
}

/* === WAGON === */
.wagon {
  position: relative;
  width: 40px;
  height: 30px;
  margin-left: -4px;
}

.wagon-bed {
  position: absolute;
  bottom: 8px;
  left: 4px;
  width: 34px;
  height: 12px;
  background: var(--wagon-brown);
  border-radius: 0 0 2px 2px;
  border-top: 2px solid #996633;
}

.wagon-cover {
  position: absolute;
  bottom: 18px;
  left: 2px;
  width: 36px;
  height: 16px;
  background: var(--wagon-cover);
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
  border: 1px solid var(--wagon-cover-shadow);
}

.wagon-cover-frame {
  position: absolute;
  bottom: 18px;
  left: 6px;
  width: 4px;
  height: 16px;
  background: transparent;
  border-left: 2px solid var(--wagon-brown);
  border-radius: 50% 0 0 0;
  box-shadow: 10px 0 0 0 var(--wagon-brown), 20px 0 0 0 var(--wagon-brown);
}

/* === WHEELS === */
.wheel {
  position: absolute;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--wheel-brown);
  border-radius: 50%;
  background: transparent;
}

.wheel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 2px;
  background: var(--wheel-brown);
  transform: translate(-50%, -50%);
}

.wheel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 8px;
  background: var(--wheel-brown);
  transform: translate(-50%, -50%);
}

.wheel-front {
  left: 4px;
  width: 10px;
  height: 10px;
}

.wheel-back {
  right: 2px;
}

.moving .wheel {
  animation: wheelSpin 0.5s linear infinite;
}

@keyframes wheelSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* === RIVER === */
.river-water {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(180deg, var(--water-light) 0%, var(--water-blue) 100%);
  z-index: 6;
  opacity: 0.7;
}

.river-water::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 30px,
    rgba(255,255,255,0.15) 30px,
    rgba(255,255,255,0.15) 34px
  );
  animation: riverFlow 1.5s linear infinite;
}

@keyframes riverFlow {
  from { background-position: 0 0; }
  to { background-position: -34px 0; }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .travel-scene {
    height: 160px;
  }
  .wagon-group {
    left: 15%;
    --wagon-scale: 0.85;
  }
}