/* The opening sequence's blue planes continue into layer one as a future
   depth field. The prediction baseline remains the only line at y=0; every
   supporting plane lives strictly above it and recedes toward the upper right. */
.future-depth-horizon {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: var(--cross-y);
  overflow: hidden;
  pointer-events: none;
  opacity: .82;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--axis-x) + 16px), #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--axis-x) + 16px), #000 92%, transparent 100%);
}

.future-depth-horizon > i {
  position: absolute;
  left: calc(var(--axis-x) + var(--inset));
  right: 0;
  /* Keep the depth planes close to the floor. They begin below the scheduled
     official stack instead of filling the upper half of the room. */
  bottom: var(--y);
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent 0,
      rgba(198,236,255,.44) 3%,
      rgba(130,205,252,.72) 13%,
      rgba(130,205,252,.24) 56%,
      transparent 96%);
  background-size: 180% 100%;
  background-position: 0 0;
  box-shadow: 0 0 8px rgba(130,205,252,.07);
  opacity: var(--alpha);
  transform-origin: left center;
}

/* Air perspective: spacing compresses toward the far edge, while the final
   planes lose contrast and definition. */
.future-depth-horizon > i:nth-child(5),
.future-depth-horizon > i:nth-child(6) {
  filter: blur(.25px);
}

.future-depth-horizon > i:nth-child(7),
.future-depth-horizon > i:nth-child(8) {
  filter: blur(.55px);
  box-shadow: none;
}

/* Leave a clean interval immediately below the scheduled official stack. */
.future-depth-horizon > i:last-child {
  display: none;
}

/* Match the agreed projection mock: the connector bridges two horizontal
   planes, beginning on the timeline and landing exactly on the card's top
   guide instead of hanging from an isolated point. */
html[data-crossroad-phase="prelaunch"]
  .rail .prediction-card.lod-uniform:not(.add-card)::before {
  display: block;
  top: -39px;
  height: 40px;
  background: linear-gradient(
    180deg,
    rgba(176, 224, 249, .78),
    rgba(116, 202, 245, .42) 62%,
    rgba(116, 202, 245, .24)
  ) 50% 0 / 1px 100% no-repeat !important;
  transform: rotate(-14deg);
  transform-origin: 50% 0;
}

html[data-crossroad-phase="prelaunch"]
  .rail .prediction-card.lod-uniform:not(.add-card)::after {
  border-top: 1px solid rgba(116, 202, 245, .32);
}

/* Keep the day count as bare type; its vertical placement now clears the axis. */
html[data-crossroad-phase="prelaunch"]
  .prediction-card:not(.add-card) .prediction-days-ahead {
  padding-inline: 0;
  background: transparent;
  box-shadow: none;
}

/* The launch value itself casts the depth mark. Remove the button-wide
   underline; the shadow below is anchored to the numeral's lower edge. */
html[data-crossroad-phase="prelaunch"]
  .countdown-deck .launch-countdown-button::after {
  content: none;
}

html[data-crossroad-phase="prelaunch"] #featured-days {
  position: relative;
  isolation: isolate;
}

html[data-crossroad-phase="prelaunch"] #featured-days::after {
  position: absolute;
  z-index: -1;
  top: auto;
  bottom: 0;
  left: 1%;
  width: 148%;
  height: 42%;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(205,239,255,.42),
      rgba(130,205,252,.28) 42%,
      transparent 95%) 0 calc(100% - 11px) / 100% 1px no-repeat,
    linear-gradient(90deg,
      rgba(205,239,255,.31),
      rgba(130,205,252,.20) 38%,
      transparent 92%) 10px calc(100% - 19px) / calc(100% - 10px) 1px no-repeat,
    linear-gradient(90deg,
      rgba(205,239,255,.22),
      rgba(130,205,252,.14) 34%,
      transparent 89%) 23px calc(100% - 25px) / calc(100% - 23px) 1px no-repeat,
    linear-gradient(90deg,
      rgba(205,239,255,.09),
      rgba(130,205,252,.055) 30%,
      transparent 84%) 56px calc(100% - 30px) / calc(100% - 56px) 1px no-repeat;
  filter: drop-shadow(0 -4px 8px rgba(12, 45, 67, .16));
  opacity: calc(1 - var(--launch-depth) * .34);
}

.future-depth-horizon > i::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  content: "";
  background: rgba(206,239,255,.72);
  box-shadow: 0 0 8px rgba(130,205,252,.24);
  opacity: 0;
  translate: -50% -50%;
}

.future-depth-horizon > i.is-event-depth {
  box-shadow: 0 0 10px rgba(130,205,252,.1);
}

.crossroad-hero:has(.prediction-card:not(.add-card):hover) .future-depth-horizon > i.is-event-depth,
.crossroad-hero:has(.prediction-card:not(.add-card):focus-visible) .future-depth-horizon > i.is-event-depth {
  opacity: calc(var(--alpha) + .12);
}

.future-depth-horizon.is-light-swept > i {
  animation: futureDepthSignal .78s cubic-bezier(.2,.72,.25,1) calc(var(--order) * 42ms) both;
}

.future-depth-horizon.is-light-swept > i::before {
  animation: futureDepthNode .62s ease-out calc(var(--order) * 42ms) both;
}

@keyframes futureDepthSignal {
  0% { opacity: var(--alpha); background-position: 0 0; }
  32% { opacity: min(.66, calc(var(--alpha) + .34)); }
  100% { opacity: var(--alpha); background-position: 100% 0; }
}

@keyframes futureDepthNode {
  0%,100% { opacity: 0; transform: scale(.5); }
  32% { opacity: .76; transform: scale(1.3); }
}

@media (max-width: 760px) {
  .future-depth-horizon {
    opacity: .66;
  }

  .future-depth-horizon > i {
    left: calc(var(--axis-x) + var(--inset));
  }

  html[data-crossroad-phase="prelaunch"] #featured-days::after {
    width: 132%;
    height: 40%;
    background-position:
      0 calc(100% - 7px),
      7px calc(100% - 13px),
      16px calc(100% - 18px),
      36px calc(100% - 22px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .future-depth-horizon.is-light-swept > i,
  .future-depth-horizon.is-light-swept > i::before {
    animation: none;
  }
}