/* =============================================================================
   cockpit-destination.css
   Subtle destination announcement for warp HUD.
   Shows up only during xray/warp state, fades through section names elegantly.
   Consumed by: index.html (#hud-big-destination h2), driven by script.js cycler.
   ============================================================================= */

#hud-big-destination {
  /* Reset any prior loud popup styling. Pure cockpit banner now. */
  position: fixed;
  top: clamp(60px, 12%, 140px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;

  margin: 0;
  padding: 1.25rem 2.5rem;

  /* Container: dashboard frame, not pill. */
  width: auto;
  max-width: min(680px, 80vw);
  border-radius: 4px;

  /* Subtle frame — top + bottom rails only, mint @ low alpha.
     No full box; reads as an embedded HUD module. */
  border: 0;
  border-top: 1px solid rgba(46, 242, 160, 0.55);
  border-bottom: 1px solid rgba(46, 242, 160, 0.35);

  /* Hairline side accents via inset shadow — keeps the dashboard feel
     without a full box outline. */
  box-shadow:
    inset 1px 0 0 0 rgba(46, 242, 160, 0.18),
    inset -1px 0 0 0 rgba(46, 242, 160, 0.18),
    0 0 24px rgba(46, 242, 160, 0.06);

  background: rgba(4, 10, 18, 0.4);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  text-align: center;

  /* Typography */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(32px, 3.5vw, 56px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: #fff;

  text-shadow: 0 0 20px rgba(46, 242, 160, 0.4);

  /* Gating — invisible until xray/warp active. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;

  /* Animation drives subtle pulse on every cycler tick (~760ms). */
  animation: destinationCycle 0.76s ease infinite;
  animation-play-state: paused;

  will-change: opacity, transform;
}

/* Eyebrow above the destination name — mono, mint, wide track. */
#hud-big-destination::before {
  content: "NEXT STOP →";
  display: block;
  margin-bottom: 0.5rem;

  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: rgba(46, 242, 160, 0.8);

  /* Mono eyebrow shouldn't inherit the big text-shadow. */
  text-shadow: none;
}

/* -----------------------------------------------------------------------------
   Pulse animation — fires on each cycler text swap.
   Keep amplitude small: this is a breath, not a flash.
   -------------------------------------------------------------------------- */
@keyframes destinationCycle {
  0% {
    opacity: 0.4;
    transform: translateX(-50%) scale(0.96) translateY(-4px);
  }
  30% {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
  100% {
    opacity: 0.92;
    transform: translateX(-50%) scale(1) translateY(0);
  }
}

/* -----------------------------------------------------------------------------
   Active state — only visible during warp/xray.
   -------------------------------------------------------------------------- */
body.xray #hud-big-destination {
  opacity: 1;
  animation-play-state: running;
}

/* -----------------------------------------------------------------------------
   Mobile — tighter banner, lower in viewport for thumb safety.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #hud-big-destination {
    top: 14%;
    padding: 0.875rem 1.5rem;
    font-size: clamp(28px, 8vw, 40px);
    max-width: 88vw;
    letter-spacing: 0.03em;
  }

  #hud-big-destination::before {
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    margin-bottom: 0.375rem;
  }
}

/* -----------------------------------------------------------------------------
   Reduced motion — static banner, no pulse.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #hud-big-destination {
    animation: none;
    transition: opacity 200ms ease;
  }

  body.xray #hud-big-destination {
    opacity: 1;
    transform: translateX(-50%);
  }
}