/* ============================================
   VISIBLEMILES — 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 — trains use JS-positioned transforms (per-frame lerp)
     so they need a persistent compositor layer */
  backface-visibility: hidden;
  /* PERF: Removed transform-style: preserve-3d (unnecessary 3D context) */
  
  /* 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),
    -1px 0 0 var(--sprite-outline),
    0 1px 0 var(--sprite-outline),
    0 -1px 0 var(--sprite-outline);
  
  /* PERF: will-change: transform — train-hover-heavy animation runs continuously,
     so a permanent compositor layer is correct. */
  will-change: transform;
  contain: strict;
}

/* Engine sprite - industrial dark metal */
.train-engine > .sprite {
  background: var(--train-engine-body);
  
  /* Heavier outline for engine */
  box-shadow: 
    2px 0 0 var(--train-engine-outline),
    -2px 0 0 var(--train-engine-outline),
    0 2px 0 var(--train-engine-outline),
    0 -2px 0 var(--train-engine-outline);
}

/* Ore car sprite - rusty industrial brown */
.train-car > .sprite {
  background: var(--train-car-body);
  
  /* Standard outline */
  box-shadow: 
    1px 0 0 var(--train-car-outline),
    -1px 0 0 var(--train-car-outline),
    0 1px 0 var(--train-car-outline),
    0 -1px 0 var(--train-car-outline);
}

/* ---------- 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;
  /* PERF: will-change: transform, opacity — train-shadow-heavy animation runs continuously,
     so a permanent compositor layer is correct. */
  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: var(--train-headlight-off);
  
  /* Inactive by default */
  opacity: 1;
  
  /* Smooth transition for headlight on/off (syncs with canvas light cone fade) */
  transition: opacity 1.5s ease, background 1.5s ease, box-shadow 1.5s ease;
}

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

/* Headlight off — engine stopped at depot */
.train-headlight.headlight-off {
  background: var(--train-headlight-off);
  box-shadow: none;
}

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

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

/* Lift layout containment when targeted so ::before brackets can extend
   outside the element via negative inset. Only one element targeted at
   a time so zero performance cost. */
.train-unit.targeted {
  contain: style;
}

/* Selection indicator: corner brackets around train unit bounding box.
   8 gradient layers (2 per corner) scale with element dimensions.
   Negative inset for breathing room between sprite and brackets.
   Brackets rotate with the parent's rotate3d(). */
.train-unit.targeted::before {
  content: '';
  position: absolute;
  inset: -8px;
  z-index: 3;
  pointer-events: none;
  --bracket-color: var(--warning);
  --bracket-len: calc(var(--tile-size) * 0.75);
  --bracket-w: 2px;
  background:
    linear-gradient(var(--bracket-color), var(--bracket-color)) 0 0 / var(--bracket-len) var(--bracket-w) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) 0 0 / var(--bracket-w) var(--bracket-len) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) 100% 0 / var(--bracket-len) var(--bracket-w) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) 100% 0 / var(--bracket-w) var(--bracket-len) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) 0 100% / var(--bracket-len) var(--bracket-w) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) 0 100% / var(--bracket-w) var(--bracket-len) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) 100% 100% / var(--bracket-len) var(--bracket-w) no-repeat,
    linear-gradient(var(--bracket-color), var(--bracket-color)) 100% 100% / var(--bracket-w) var(--bracket-len) no-repeat;
  opacity: 0.8;
}

/* Pulse only during active combat — .combat-active toggled by combat.js */
.train-unit.targeted.combat-active::before {
  animation: select-ring-pulse 1.5s ease-in-out infinite;
}

/* @keyframes select-ring-pulse defined in actors.css */

/* ============================================
   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 uses shared .dust-particle class (defined in traffic.css).
   Only override z-index for train layer context. */
#train-dust-layer .dust-particle {
  z-index: 10; /* Below train units (11) */
}