/* =============================================================
 * launch-trajectory.css
 * Styles for the scroll-driven flight profile on the home page.
 * Variables adapt to the site's light/dark theme.
 * ============================================================= */

#launch-trajectory {
  /* color tokens — overridden per theme below */
  --lt-guide:   rgba(255, 255, 255, 0.10);
  --lt-trail:   #7dd3fc;      /* sky blue glow */
  --lt-trail-2: #38bdf8;
  --lt-body:    #eef2ff;
  --lt-stroke:  #0b1530;
  --lt-accent:  #2563eb;
  --lt-shield:  #1a2d52;
  --lt-text:    rgba(255, 255, 255, 0.78);
  --lt-text-dim:rgba(255, 255, 255, 0.45);
  --lt-bg:      rgba(8, 14, 30, 0.35);
  --lt-mode-asc:#7dd3fc;
  --lt-mode-re: #ff8a3d;

  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 220px;
  pointer-events: none;     /* never blocks page interaction */
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 78px 10px 18px 0;   /* top padding clears the site masthead */
  box-sizing: border-box;
  font-family: var(--font-sans, "Inter", system-ui, -apple-system, sans-serif);
}

/* Light-theme palette */
html[data-theme="light"] #launch-trajectory,
html:not([data-theme]) #launch-trajectory {
  --lt-guide:   rgba(11, 21, 48, 0.14);
  --lt-trail:   #1d4ed8;
  --lt-trail-2: #2563eb;
  --lt-body:    #ffffff;
  --lt-stroke:  #0b1530;
  --lt-accent:  #2563eb;
  --lt-shield:  #1a2d52;
  --lt-text:    rgba(11, 21, 48, 0.78);
  --lt-text-dim:rgba(11, 21, 48, 0.45);
  --lt-bg:      rgba(255, 255, 255, 0.55);
  --lt-mode-asc:#1d4ed8;
  --lt-mode-re: #c2410c;
}

/* ----- Readout card at the top ----- */
.lt__readout {
  margin: 0 4px 8px auto;
  padding: 10px 12px;
  background: var(--lt-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--lt-guide);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  width: 108px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.lt__readout-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lt-text-dim);
}

.lt__readout-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--lt-text);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.lt__alt-num {
  font-size: 22px;
  letter-spacing: -0.01em;
}

.lt__alt-unit {
  font-size: 10px;
  color: var(--lt-text-dim);
  font-weight: 500;
}

.lt__readout-mode {
  margin-top: 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--lt-mode-asc);
  transition: color 250ms ease, border-color 250ms ease;
}

#launch-trajectory[data-mode="reentry"] .lt__readout-mode {
  color: var(--lt-mode-re);
}

/* ----- SVG (fills the rest of the strip) ----- */
.lt__svg {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Faint dashed guide */
.lt__guide {
  stroke: var(--lt-guide);
  stroke-width: 1.2;
  stroke-dasharray: 2 4;
}

/* Bright trail — colour shifts in re-entry */
.lt__trail {
  stroke: var(--lt-trail);
  stroke-width: 1.6;
  opacity: 0.95;
  transition: stroke 350ms ease;
}

#launch-trajectory[data-mode="reentry"] .lt__trail {
  stroke: var(--lt-mode-re);
}

/* Tick marks */
.lt__tick-line {
  stroke: var(--lt-text-dim);
  stroke-width: 0.6;
}
.lt__tick-text {
  fill: var(--lt-text-dim);
  font-size: 5.2px;
  font-family: var(--font-sans, "Inter", system-ui, -apple-system, sans-serif);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* Vehicle groups — fade smoothly */
.lt__rocket-group,
.lt__capsule-group {
  transition: opacity 280ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

/* Idle thrust flicker (subtle even when scroll paused) */
.lt__flame {
  transform-origin: 0px 8px;
  animation: lt-flicker 120ms steps(2, end) infinite;
}

@keyframes lt-flicker {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 0.78; }
}

/* Plasma pulse for re-entry */
.lt__plasma {
  transform-origin: 0 5px;
  animation: lt-plasma-pulse 1.1s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes lt-plasma-pulse {
  0%, 100% { opacity: 0.80; }
  50%      { opacity: 1.00; }
}

/* Bow shock crescent shimmer */
.lt__shock {
  animation: lt-shock-pulse 0.7s ease-in-out infinite;
}
@keyframes lt-shock-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1.00; }
}

/* Heat shield ablates: dark when cold, glowing during re-entry */
.lt__heatshield {
  transition: fill 350ms ease;
}
#launch-trajectory[data-mode="reentry"] .lt__heatshield {
  animation: lt-shield-glow 0.55s ease-in-out infinite alternate;
}
@keyframes lt-shield-glow {
  from { fill: #c14a2c; }
  to   { fill: #ffd45a; }
}

/* Booster engine flicker while attached */
.lt__booster-flame {
  transform-origin: 0px 7px;
  animation: lt-flicker 110ms steps(2, end) infinite;
}

/* Smoke puffs adopt screen blend so they read on dark backgrounds */
.lt__smoke circle {
  mix-blend-mode: screen;
}

html[data-theme="light"] .lt__smoke circle,
html:not([data-theme]) .lt__smoke circle {
  mix-blend-mode: multiply;
}

/* Hide entirely on narrow viewports (JS also enforces this) */
@media (max-width: 900px) {
  #launch-trajectory { display: none !important; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  #launch-trajectory { display: none !important; }
}