/* ============================================
   VETUU — Landing Pad Traffic Styles
   Ships, cargo, and landing pad effects
   
   Follows the same patterns as traffic.css:
   - Simple solid-color sprites
   - Drop-shadow outlines (follows mask shape)
   - No wobble animations (ships are stable platforms)
   
   SHIP SHAPE MASKING:
   Ships use CSS mask-image for non-rectangular silhouettes.
   8-bit pixel style - all shapes use squared-off edges, no rounding.
   Placeholder SVG masks are defined in :root for each ship type.
   When final artwork is ready, update --ship-mask-* variables
   to point to the actual sprite PNGs/SVGs.
   ============================================ */

/* ---------- Landing Layer ---------- */
/* Ships fly ABOVE lighting canvas to avoid light sources appearing over them.
   z-index 16: Above lighting canvas (15), weather (14), vehicles (12)
   Ships have their own darkness overlay that matches the lighting canvas. */
.landing-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 16;
  
  /* CSS variables for ship overlays, updated by above-lighting system in game.js */
  --ship-darkness: 0;
  --ship-darkness-color: rgb(10, 15, 30);
  --ship-sand-tint: 0;     /* Sandstorm washout effect */
  --ship-thunder-tint: 0;  /* Thunderstorm blue tint */
  --ship-lightning-flash: 0; /* Lightning flash effect */
}

/* ---------- Base Ship ---------- */
/* Ship uses a 3D CSS hierarchy for smooth shadow transitions:
   - .ship: outer wrapper, handles position/rotation only (NOT scale)
   - .shadow: positioned in 3D space, scale controlled by CSS variables on .ship
   - .sprite: inner wrapper that handles visual scale
   
   This separation ensures:
   1. Shadow isn't clipped by parent scale transforms
   2. Shadow scale transitions are smooth (single CSS variable controls it)
   3. 3D transforms stay on compositor thread */
.ship {
  position: absolute;
  z-index: 50; /* Within landing-layer stacking context */
  
  /* Create local stacking context */
  isolation: isolate;
  
  /* PERF: contain style helps limit style recalc scope */
  /* Note: layout containment clips shadows, so only use style */
  contain: style;
  
  /* 3D context for shadow depth separation - CRITICAL for preventing clipping */
  transform-style: preserve-3d;
  perspective: 1000px;
  
  /* GPU compositing - keeps rendering on compositor thread */
  backface-visibility: hidden;
  will-change: transform, opacity;
  
  pointer-events: auto;
  cursor: pointer;
  
  /* Ships rotate around center (unlike vehicles which use rear axle) */
  transform-origin: 50% 50%;
  
  /* Position via JS transform - only translate3d and rotate, NOT scale
     Scale is applied to sprite child to prevent shadow clipping */
  transform: translate3d(0, 0, 0);
  
  /* Spawn fade-in transition */
  opacity: 1;
  transition: opacity var(--fade-quick) ease-out;
}

/* Spawning state - start invisible */
.ship.spawning {
  opacity: 0;
}

/* Despawning fade out */
.ship.despawning {
  opacity: 0;
  transition: opacity var(--fade-dramatic) ease-out;
}

/* ---------- Ship Sprite (Main Body) ---------- */
/* SVG silhouette placeholder - tests overlay clipping before final artwork.
   - SVG shape via mask-image (defines ship outline)
   - Solid color fill (--ship-color from JS)
   - 1px drop-shadow outline applied via wrapper (.sprite-wrap)
   
   When final artwork is ready, replace with background-image sprite. */

/* Sprite wrapper - provides the drop-shadow outline
   The shadow is generated from the masked child content */
.ship > .sprite-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  
  /* 1px outline (matches actors, crates, all game sprites)
     Applied to wrapper so shadow isn't clipped by child's mask */
  filter: 
    drop-shadow(1px 0 0 var(--sprite-outline))
    drop-shadow(-1px 0 0 var(--sprite-outline))
    drop-shadow(0 1px 0 var(--sprite-outline))
    drop-shadow(0 -1px 0 var(--sprite-outline));
  
  /* Scale for altitude animation (landing/takeoff) */
  transform: scale3d(var(--ship-scale, 1), var(--ship-scale, 1), 1);
  transform-origin: center center;
  transition: transform 0.1s ease-out;
}

/* Actual sprite - masked to ship silhouette */
.ship > .sprite-wrap > .sprite {
  position: absolute;
  inset: 0;
  
  /* Solid color - set via --ship-color from JS */
  background: var(--ship-color, oklch(0.48 0.030 230));
  
  /* Ship silhouette mask */
  -webkit-mask-image: var(--ship-sprite);
  mask-image: var(--ship-sprite);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  contain: layout style;
}

/* Ship type sprite assignments */
.ship.ship-cargo {
  --ship-sprite: url('../sprites/ship-cargo.svg');
}
.ship.ship-military {
  --ship-sprite: url('../sprites/ship-military.svg');
}
.ship.ship-civilian {
  --ship-sprite: url('../sprites/ship-civilian.svg');
}

/* ---------- Ship Shadow ---------- */
/* Shadow uses 3D CSS for smooth transitions without clipping:
   
   KEY ARCHITECTURE:
   - Parent .ship sets CSS variables: --shadow-scale, --shadow-opacity, --ship-scale
   - Shadow is positioned in 3D space (translate3d Z) to prevent clipping
   - All transitions happen via CSS, triggered by variable changes from JS
   - Shadow size is independent of sprite scale (no compounding transforms)
   
   Variable ranges:
   --shadow-scale: 1.0 (landed) to 2.0 (hovering) - shadow spread
   --shadow-opacity: 0.5 (landed) to 0.15 (hovering) - shadow visibility
   --ship-scale: 0.7 (hovering) to 1.0 (landed) - sprite visual size */

/* Shadow control variables on parent - single source of truth for transitions */
.ship {
  --shadow-scale: 1.5;
  --shadow-opacity: 0.5;
  --ship-scale: 1;
}

.ship > .shadow {
  position: absolute;
  z-index: 0; /* Behind sprite */
  
  /* Shadow is 200% of ship size to allow for spread without clipping
     Centered via negative offset (extra 50% on each side) */
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  
  /* 3D positioning: push shadow back in Z space
     This prevents clipping when sprite scales and ensures proper layer order */
  transform: 
    translate3d(0, 0, -1px)
    scale3d(var(--shadow-scale, 1.5), var(--shadow-scale, 1.5), 1);
  transform-origin: center center;
  transform-style: preserve-3d;
  
  /* Smooth transitions for ALL shadow properties
     Controlled by parent CSS variable changes - single transition handles all */
  transition: 
    transform 0.15s ease-out,
    opacity 0.15s ease-out;
  
  /* Radial gradient shadow - opacity controlled by CSS variable */
  background: radial-gradient(
    ellipse 50% 50% at center,
    oklch(0.12 0.015 230) 0%,
    oklch(0.12 0.015 230 / 0.7) 25%,
    oklch(0.12 0.015 230 / 0.3) 50%,
    transparent 70%
  );
  
  /* Opacity controlled by parent variable for smooth fade with altitude */
  opacity: var(--shadow-opacity, 0.5);
  
  /* No pointer events on shadow */
  pointer-events: none;
  
  /* GPU compositing */
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* ---------- Ship Weather Overlays ---------- */
/* Ships are above the lighting canvas, so they need their own weather overlays.
   Uses the same three-layer system as depot roof (centralized in game.js):
   
   CSS variables on .landing-layer, updated by above-lighting system:
   - --ship-darkness: night/time-of-day darkening opacity
   - --ship-darkness-color: night color (rgb(10, 15, 30))
   - --ship-sand-tint: sandstorm washout effect opacity
   - --ship-thunder-tint: thunderstorm blue tint opacity
   - --ship-lightning-flash: lightning flash effect opacity
   
   Overlays use the same mask as the sprite so they clip to the ship outline. */

/* Base styles shared by all ship overlay types */
.ship > .darkness-overlay,
.ship > .sand-tint-overlay,
.ship > .thunder-tint-overlay,
.ship > .lightning-flash-overlay {
  position: absolute;
  z-index: 2; /* Above sprite (1) */
  inset: 0;
  
  /* Use same mask as sprite - overlays clip to ship outline */
  -webkit-mask-image: var(--ship-sprite);
  mask-image: var(--ship-sprite);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  /* Scale with sprite so overlay matches visual size */
  transform: scale3d(var(--ship-scale, 1), var(--ship-scale, 1), 1);
  transform-origin: center center;
  transition: transform 0.1s ease-out;
  
  pointer-events: none;
  backface-visibility: hidden;
}

/* Darkness overlay - night/time-of-day darkening */
.ship > .darkness-overlay {
  background: var(--ship-darkness-color, rgb(10, 15, 30));
  opacity: var(--ship-darkness, 0);
  transition: opacity var(--fade-slow) ease-out;
}

/* Sand tint overlay - sandstorm washout effect */
.ship > .sand-tint-overlay {
  background: rgb(186, 154, 116);  /* SAND_COLOR */
  opacity: var(--ship-sand-tint, 0);
  transition: opacity var(--fade-slow) ease-out;
}

/* Thunder tint overlay - thunderstorm blue tint */
.ship > .thunder-tint-overlay {
  background: rgb(63, 73, 86);  /* THUNDER_COLOR */
  opacity: var(--ship-thunder-tint, 0);
  transition: opacity var(--fade-slow) ease-out;
}

/* Lightning flash overlay - matches lighting canvas flash effect */
.ship > .lightning-flash-overlay {
  background: rgb(200, 220, 255);  /* Blue-white flash color matching lighting canvas */
  opacity: var(--ship-lightning-flash, 0);
  /* No CSS transition - smoothing is handled in JS via lerp (fast attack, slow decay) */
}

/* ---------- Ship Cockpit (Front Indicator) ---------- */
/* Visual indicator at nose of ship - helps identify orientation
   Default ship orientation has nose pointing right (east)
   8-bit style: no rounded corners */
.ship .sprite::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  
  /* Cockpit window - darker tinted glass look */
  width: 20%;
  max-width: 16px;
  height: 40%;
  background: oklch(0.25 0.02 230 / 0.8);
  
  /* Subtle window frame */
  box-shadow: 
    inset 1px 0 0 oklch(0.35 0.02 230 / 0.5),
    inset 0 1px 0 oklch(0.4 0.01 200 / 0.3);
}

/* Cargo ships have smaller cockpit (more cargo space) */
.ship.ship-cargo .sprite::after {
  width: 12%;
  max-width: 12px;
  height: 30%;
}

/* Military ships have darker cockpit */
.ship.ship-military .sprite::after {
  background: oklch(0.2 0.015 240 / 0.85);
}

/* Civilian ships have larger, more comfortable cockpit */
.ship.ship-civilian .sprite::after {
  width: 25%;
  max-width: 20px;
  height: 50%;
  background: oklch(0.3 0.02 220 / 0.7);
}

/* ---------- Ship Type Variants ---------- */
/* All ships use the same 1px stroke (defined on .sprite-wrap above)
   matching the actor sprite outline style. Ship-specific colors are
   set via --ship-color from JS. */

/* ---------- Ship States ---------- */
/* No wobble animations - ships are stable platforms with precise controls */

/* ---------- Ship Lights (Night) ---------- */
/* Running lights visible at night */
.ship-light {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 4px;
  background: oklch(0.85 0.12 65);
  opacity: 0;
  transition: opacity var(--fade-standard) ease;
  pointer-events: none;
}

/* Lights visible at night (controlled by body class or JS) */
.ship.lights-on .ship-light {
  opacity: 1;
  box-shadow: 0 0 4px 1px oklch(0.85 0.12 65 / 0.6);
}

/* Landing lights - brighter during approach/land */
.ship[data-state="APPROACH"] .ship-light,
.ship[data-state="LAND"] .ship-light {
  opacity: 1;
  background: oklch(0.95 0.08 85);
  box-shadow: 0 0 8px 2px oklch(0.95 0.08 85 / 0.5);
}

/* ---------- Targeted State ---------- */
/* PERF: Targeting glow uses box-shadow (cheaper than extra drop-shadows)
   Outline drop-shadows are kept because they need to follow mask shape */
.ship.targeted > .sprite-wrap {
  /* Keep outline drop-shadows for crisp border */
  filter: 
    drop-shadow(1px 0 0 var(--sprite-outline))
    drop-shadow(-1px 0 0 var(--sprite-outline))
    drop-shadow(0 1px 0 var(--sprite-outline))
    drop-shadow(0 -1px 0 var(--sprite-outline));
  /* Add targeting glow as box-shadow (won't follow mask but still visible) */
  box-shadow: 0 0 4px 2px var(--warning);
}

/* ---------- Landing Pad Effects ---------- */
/* Pad lights activate when ship approaching */
.landing-pad-light {
  position: absolute;
  width: 8px;
  height: 8px;
  background: oklch(0.4 0.02 55);
  opacity: 0.5;
  transition: all 0.5s ease;
}

.landing-pad-light.active {
  background: oklch(0.75 0.12 145);
  opacity: 1;
  box-shadow: 0 0 6px 2px oklch(0.75 0.12 145 / 0.5);
  animation: pad-light-pulse 1s ease-in-out infinite;
}

@keyframes pad-light-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* ---------- Debug Overlay ---------- */
.ship.debug::after {
  content: attr(data-state) ' #' attr(data-ship-id);
  position: absolute;
  top: -16px;
  left: 0;
  font-size: 8px;
  font-family: monospace;
  color: var(--color-cream);
  background: var(--alpha-black-60);
  padding: 1px 3px;
  white-space: nowrap;
}

/* ============================================
   THRUSTER DUST PARTICLES (Canvas-based)
   Now rendered via canvas for zero DOM overhead.
   See landing.js for implementation.
   ============================================ */

#ship-dust-canvas {
  /* Canvas positioned via JS, this is fallback */
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 12; /* Below landing-layer (16), same level as vehicles */
}