/*
 * Card projection study
 * Axis points remain exact; angled bridges and asymmetric light imply Z.
 */

html[data-crossroad-phase="prelaunch"] {
  --projection-cold: 130, 205, 252;
  --projection-ink: 1, 5, 9;
}

/* Prediction cards float slightly below and behind the horizontal axis. */
html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card)::before {
  left: calc(var(--prediction-anchor-x) - 5px);
  top: -44px;
  width: 10px;
  height: 46px;
  background: linear-gradient(
    180deg,
    rgba(218, 240, 252, .58) 0,
    rgba(218, 240, 252, .64) 8%,
    rgba(var(--projection-cold), .28) 64%,
    rgba(var(--projection-cold), .1) 86%,
    transparent 100%
  ) 50% 5px / 2px calc(100% - 5px) no-repeat;
  z-index: 3;
  filter: drop-shadow(0 0 4px rgba(var(--projection-cold), .12));
  transform: rotate(-9deg);
  transform-origin: 50% 5px;
  opacity: var(--lod-connector-opacity);
  transition: opacity 220ms ease, transform 260ms ease, filter 220ms ease;
}

html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card)::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(207, 237, 252, .055), transparent 24%, transparent 76%, rgba(0, 0, 0, .2));
  opacity: .42;
  transition: opacity 220ms ease;
}

html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card) {
  background:
    radial-gradient(ellipse 66% 92% at 18% -8%, rgba(var(--projection-cold), .045), transparent 62%),
    linear-gradient(112deg, rgba(8, 18, 27, .42), rgba(3, 10, 16, .52) 42%, rgba(var(--projection-ink), .78));
  box-shadow:
    inset 1px 0 0 rgba(var(--projection-cold), .055),
    inset 0 1px 0 rgba(var(--projection-cold), .035),
    0 14px 31px rgba(0, 0, 0, .18);
}

html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform.is-light-near:not(.add-card)::before {
  transform: rotate(-12deg);
  filter: drop-shadow(0 0 7px rgba(var(--projection-cold), .24));
}

html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform.is-light-near:not(.add-card) {
  background:
    radial-gradient(ellipse 68% 96% at 19% -6%, rgba(var(--projection-cold), .085), transparent 63%),
    linear-gradient(112deg, rgba(9, 22, 33, .6), rgba(3, 11, 18, .7) 44%, rgba(var(--projection-ink), .9));
  box-shadow:
    inset 1px 0 0 rgba(var(--projection-cold), .1),
    inset 0 1px 0 rgba(var(--projection-cold), .065),
    0 16px 34px rgba(0, 0, 0, .25);
}

html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform.is-light-primary:not(.add-card)::before,
html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card):hover::before,
html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card):focus-visible::before {
  transform: rotate(-15deg);
  filter:
    drop-shadow(0 0 5px rgba(230, 247, 255, .42))
    drop-shadow(0 0 11px rgba(var(--projection-cold), .24));
}

html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform.is-light-primary:not(.add-card),
html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card):hover,
html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card):focus-visible {
  background:
    radial-gradient(ellipse 72% 104% at 19% -7%, rgba(var(--projection-cold), .19), rgba(var(--projection-cold), .045) 37%, transparent 66%),
    linear-gradient(112deg, rgba(10, 27, 40, .94), rgba(3, 12, 20, .97) 46%, rgba(var(--projection-ink), .995));
  border-left-color: rgba(var(--projection-cold), .24);
  box-shadow:
    inset 1px 0 0 rgba(220, 242, 253, .18),
    inset 0 1px 0 rgba(220, 242, 253, .1),
    0 18px 38px rgba(0, 0, 0, .4),
    -7px 0 25px rgba(var(--projection-cold), .045);
}

html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform.is-light-primary:not(.add-card)::after,
html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card):hover::after,
html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card):focus-visible::after {
  opacity: .9;
}

/* Official surface/axis rules moved to crossroad-agreed-axis-cards.css.
   This file now owns Prediction projection only. */

@media (max-width: 760px) {
  html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card)::before {
    top: -39px;
    height: 41px;
    transform: rotate(-8deg);
  }

  html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform.is-light-near:not(.add-card)::before {
    transform: rotate(-10deg);
  }

  html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform.is-light-primary:not(.add-card)::before,
  html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card):focus-visible::before {
    transform: rotate(-12deg);
  }

}

@media (prefers-reduced-motion: reduce) {
  html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card)::before,
  html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card)::after {
    transition: none;
  }
}