/* ============================================
   VETUU — Train System Styles
   Mag-lift ore hauler trains with coupling physics
   
   STRUCTURE:
   - .train: Container for entire train (engine + cars)
   - .train-unit: Individual unit (engine or car)
   - .train-engine: Engine with headlight
   - .train-car: Ore car
   
   ANIMATIONS:
   - Heavy industrial hover (like tanker vehicles)
   - Shadow responds to sun position
   - Headlight glow at night
   ============================================ */

/* ---------- Train Layer ---------- */
.train-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 11; /* Below vehicles (12) but above ground */
}

/* ---------- Train Container ---------- */
.train {
  position: absolute;
  pointer-events: auto; /* Allow targeting */
  
  /* Spawn fade-in */
  opacity: 1;
  transition: opacity var(--fade-standard) ease-out;
}

.train.spawning {
  opacity: 0;
}

.train.despawning {
  opacity: 0;
  transition: opacity var(--fade-slow) ease-out;
}

/* ---------- Train Unit (Engine/Car) ---------- */
.train-unit {
  position: absolute;
  z-index: 11;
  
  /* Allow targeting */
  pointer-events: auto;
  cursor: pointer;
  
  /* Create local stacking context */
  isolation: isolate;
  
  /* PERF: contain helps limit style recalc scope */
  contain: layout style;
  
  /* GPU compositing */
  backface-visibility: hidden;
  transform-style: preserve-3d;
  
  /* Pivot around center for trains */
  transform-origin: 50% 50%;
  
  /* Position set directly via JS */
  transform: translate3d(0, 0, 0);
}

/* ---------- Train Sprite (Body) ---------- */
.train-unit > .sprite {
  position: absolute;
  inset: 0;
  z-index: 1;
  
  /* PERF: box-shadow for outline */
  box-shadow: 
    1px 0 0 var(--sprite-outline-60),
    -1px 0 0 var(--sprite-outline-60),
    0 1px 0 var(--sprite-outline-60),
    0 -1px 0 var(--sprite-outline-60);
  
  /* GPU compositing for smooth animation */
  will-change: transform;
  contain: strict;
}

/* Engine sprite - industrial dark metal */
.train-engine > .sprite {
  background: oklch(0.25 0.015 55);
  
  /* Heavier outline for engine */
  box-shadow: 
    2px 0 0 oklch(0.12 0.010 55),
    -2px 0 0 oklch(0.12 0.010 55),
    0 2px 0 oklch(0.12 0.010 55),
    0 -2px 0 oklch(0.12 0.010 55);
}

/* Ore car sprite - rusty industrial brown */
.train-car > .sprite {
  background: oklch(0.38 0.045 55);
  
  /* Standard outline */
  box-shadow: 
    1px 0 0 oklch(0.22 0.025 55),
    -1px 0 0 oklch(0.22 0.025 55),
    0 1px 0 oklch(0.22 0.025 55),
    0 -1px 0 oklch(0.22 0.025 55);
}

/* ---------- Train Shadow ---------- */
.train-unit > .shadow {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  
  /* Solid black rectangle */
  background: var(--bg-void);
  transform-origin: center center;
  
  /* Sun-based shadow (matches vehicle system) */
  --shadow-base-scale: calc(1.02 + var(--shadow-scale-y, 0.4) * 0.15);
  
  transform: 
    translate3d(var(--shadow-offset-x, 0px), var(--shadow-offset-y, 3px), 0)
    scale3d(var(--shadow-base-scale), var(--shadow-base-scale), 1);
  
  transition: transform 30s ease-out;
  will-change: transform, opacity;
  opacity: 0.12;
  pointer-events: none;
  contain: strict;
}

/* Engine has bigger shadow (taller unit) */
.train-engine > .shadow {
  opacity: 0.15;
  --shadow-base-scale: calc(1.04 + var(--shadow-scale-y, 0.4) * 0.18);
}

/* ---------- Heavy Industrial Hover Animation ---------- */
/* Slow, lumbering sway for massive ore haulers */
@keyframes train-hover-heavy {
  0% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
  6.25% { transform: translate3d(1px, 0.9px, 0) scale3d(1.006, 1.007, 1); }
  12.5% { transform: translate3d(1.8px, 1.3px, 0) scale3d(1.007, 1.01, 1); }
  18.75% { transform: translate3d(2.3px, 0.9px, 0) scale3d(1.006, 1.007, 1); }
  25% { transform: translate3d(2.5px, 0, 0) scale3d(1, 1, 1); }
  31.25% { transform: translate3d(2.3px, -0.9px, 0) scale3d(1.006, 1.007, 1); }
  37.5% { transform: translate3d(1.8px, -1.3px, 0) scale3d(1.007, 1.01, 1); }
  43.75% { transform: translate3d(1px, -0.9px, 0) scale3d(1.006, 1.007, 1); }
  50% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
  56.25% { transform: translate3d(-1px, 0.9px, 0) scale3d(1.006, 1.007, 1); }
  62.5% { transform: translate3d(-1.8px, 1.3px, 0) scale3d(1.007, 1.01, 1); }
  68.75% { transform: translate3d(-2.3px, 0.9px, 0) scale3d(1.006, 1.007, 1); }
  75% { transform: translate3d(-2.5px, 0, 0) scale3d(1, 1, 1); }
  81.25% { transform: translate3d(-2.3px, -0.9px, 0) scale3d(1.006, 1.007, 1); }
  87.5% { transform: translate3d(-1.8px, -1.3px, 0) scale3d(1.007, 1.01, 1); }
  93.75% { transform: translate3d(-1px, -0.9px, 0) scale3d(1.006, 1.007, 1); }
  100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
}

/* Shadow responds to hover */
@keyframes train-shadow-heavy {
  0%, 50%, 100% { opacity: 0.12; }
  12.5%, 37.5%, 62.5%, 87.5% { opacity: 0.11; }
  25%, 75% { opacity: 0.12; }
}

/* Apply hover to engine - slower, heavier */
.train-engine > .sprite {
  animation: train-hover-heavy 7s linear infinite;
}
.train-engine > .shadow {
  animation: train-shadow-heavy 7s linear infinite;
}

/* Apply hover to cars - slightly different timing for visual interest */
.train-car > .sprite {
  animation: train-hover-heavy 6.5s linear infinite;
}
.train-car > .shadow {
  animation: train-shadow-heavy 6.5s linear infinite;
}

/* Stagger car animations for wave effect */
.train-car[data-car-index="0"] > .sprite { animation-delay: 0s; }
.train-car[data-car-index="1"] > .sprite { animation-delay: -0.5s; }
.train-car[data-car-index="2"] > .sprite { animation-delay: -1.0s; }
.train-car[data-car-index="3"] > .sprite { animation-delay: -1.5s; }
.train-car[data-car-index="4"] > .sprite { animation-delay: -2.0s; }
.train-car[data-car-index="5"] > .sprite { animation-delay: -2.5s; }
.train-car[data-car-index="6"] > .sprite { animation-delay: -3.0s; }
.train-car[data-car-index="7"] > .sprite { animation-delay: -3.5s; }
.train-car[data-car-index="8"] > .sprite { animation-delay: -4.0s; }
.train-car[data-car-index="9"] > .sprite { animation-delay: -4.5s; }
.train-car[data-car-index="10"] > .sprite { animation-delay: -5.0s; }
.train-car[data-car-index="11"] > .sprite { animation-delay: -5.5s; }
.train-car[data-car-index="12"] > .sprite { animation-delay: -6.0s; }
.train-car[data-car-index="13"] > .sprite { animation-delay: -6.5s; }
.train-car[data-car-index="14"] > .sprite { animation-delay: -7.0s; }

/* ---------- Engine Headlight ---------- */
.train-headlight {
  position: absolute;
  z-index: 2;
  
  /* Position at front of engine
     Train element is horizontal (width=length, height=width) then rotated -90° to face north.
     Before rotation: right edge is the "front"
     After -90° rotation: right edge becomes top (north-facing front)
     So position on right edge, vertically centered */
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  
  /* Large single high-beam lamp */
  width: 6px;
  height: 12px;
  background: oklch(0.35 0.020 55);
  
  /* Inactive by default */
  opacity: 1;
}

/* Headlight glow when active (night time) */
.train-headlight.active,
[data-time-of-day="night"] .train-headlight,
[data-time-of-day="dusk"] .train-headlight,
[data-time-of-day="dawn"] .train-headlight {
  background: oklch(0.95 0.030 85);
  box-shadow:
    0 0 8px 2px oklch(0.95 0.030 85 / 0.9),
    0 0 20px 6px oklch(0.95 0.030 85 / 0.6),
    0 0 40px 12px oklch(0.95 0.030 85 / 0.3),
    0 0 80px 24px oklch(0.95 0.030 85 / 0.1);
}

/* ---------- Debug Track Overlay ---------- */
.train-track-debug {
  position: absolute;
  pointer-events: none;
  z-index: 4;
}

/* ---------- Debug Collision Hitbox ---------- */
.train-hitbox-debug {
  position: absolute;
  background: oklch(0.55 0.25 240 / 0.3); /* Blue with transparency */
  border: 2px solid oklch(0.55 0.25 240 / 0.8);
  pointer-events: none;
  z-index: 10;
}

/* ---------- Targeted Train Unit ---------- */
/* PERF: Use box-shadow instead of drop-shadow filter (much cheaper) */
.train-unit.targeted > .sprite {
  box-shadow: 
    0 0 2px var(--warning),
    0 0 4px var(--warning),
    inset 0 0 1px var(--warning);
}

/* ============================================
   TRAIN DUST PARTICLES
   Sand-colored particles kicked up from train sides and rear.
   Similar to vehicle dust but with train-specific patterns.
   ============================================ */

#train-dust-layer {
  contain: strict;
}

.train-dust-particle {
  position: absolute;
  z-index: 10; /* Below train units (11) */
  pointer-events: none;
  
  /* Base particle: simple sand-colored square */
  width: 4px;
  height: 4px;
  background: oklch(0.78 0.065 65);
  
  /* Subtle outline - 0.25px border (matches vehicle dust) */
  border: 0.25px solid var(--sprite-outline);
  
  /* GPU compositing */
  will-change: transform, opacity;
  contain: layout style;
  backface-visibility: hidden;
  
  /* Hidden until animation starts */
  opacity: 0;
}

/* Color variants - sand palette (matches vehicle dust) */
.train-dust-particle[data-variant="0"] { background: oklch(0.76 0.055 65); }  /* Pale sand */
.train-dust-particle[data-variant="1"] { background: oklch(0.68 0.070 62); }  /* Warm tan */
.train-dust-particle[data-variant="2"] { background: oklch(0.60 0.075 58); }  /* Ochre */
.train-dust-particle[data-variant="3"] { background: oklch(0.52 0.070 55); }  /* Brown-tan */
.train-dust-particle[data-variant="4"] { background: oklch(0.45 0.060 52); }  /* Brown */