/*
 * Future axis atmosphere
 * The future is always present as a faint field. Its exact timeline becomes
 * visible only around the prediction currently receiving attention.
 */

html[data-crossroad-phase="prelaunch"] .prediction-line {
  --future-focus-x: var(--axis-x);
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
}

/* A broad difference in luminance replaces the diagram-like dotted rule. */
html[data-crossroad-phase="prelaunch"] .prediction-line::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 50%;
  height: 24px;
  translate: 0 -50%;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 0,
      rgba(130, 205, 252, .008) 24%,
      rgba(130, 205, 252, .038) 48%,
      rgba(130, 205, 252, .016) 62%,
      transparent 100%
    );
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 13%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 2%, #000 13%, #000 91%, transparent 100%);
}

/* The exact axis is disclosed locally, centred on the selected prediction. */
html[data-crossroad-phase="prelaunch"] .prediction-line::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  width: clamp(200px, 26vw, 360px);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(166, 218, 246, .08) 18%,
    rgba(211, 239, 253, .54) 50%,
    rgba(151, 210, 241, .07) 82%,
    transparent
  );
  box-shadow:
    0 0 6px rgba(130, 205, 252, .09),
    0 0 18px rgba(130, 205, 252, .035);
  opacity: .76;
  transform: translate3d(calc(var(--future-focus-x) - clamp(100px, 13vw, 180px)), 0, 0);
  will-change: transform, opacity;
  transition: transform 380ms cubic-bezier(.2, .72, .24, 1), opacity 240ms ease;
}

html[data-crossroad-phase="prelaunch"] .prediction-zone:has(.lod-is-centering) .prediction-line::after,
html[data-crossroad-phase="prelaunch"] .prediction-zone:has(.rail.is-dragging) .prediction-line::after {
  opacity: .4;
}

@media (max-width: 760px) {
  html[data-crossroad-phase="prelaunch"] .prediction-line::before {
    height: 18px;
  }

  html[data-crossroad-phase="prelaunch"] .prediction-line::after {
    transform: translate3d(calc(var(--future-focus-x) - 92px), 0, 0);
    width: 184px;
    opacity: .68;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-crossroad-phase="prelaunch"] .prediction-line::after {
    transition: none;
  }
}