/*
 * Final art-direction layer: one world, three physical rules.
 * Prediction floats in amber, Official fixes into cold depth, and only the
 * currently observed record receives full light.
 */

:root {
  --prediction: #6f9fdd;
  --prediction-soft: color-mix(in srgb, var(--prediction) 12%, transparent);
  --prediction-muted: color-mix(in srgb, var(--prediction) 58%, var(--muted));
  --prediction-border: color-mix(in srgb, var(--prediction) 32%, transparent);
  --observation-white: #eef7fa;
}

/* Prediction keeps one continuous horizontal direction without a dotted rhythm. */
html[data-crossroad-phase="prelaunch"] .prediction-line {
  background: linear-gradient(
    90deg,
    transparent 0,
    color-mix(in srgb, var(--prediction) 18%, transparent) 4%,
    color-mix(in srgb, var(--prediction) 74%, transparent) var(--axis-x),
    color-mix(in srgb, var(--prediction) 36%, transparent) 72%,
    color-mix(in srgb, var(--prediction) 16%, transparent) 100%
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--prediction) 8%, transparent);
}

html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card) {
  background:
    radial-gradient(ellipse 66% 92% at 18% -8%, color-mix(in srgb, var(--prediction) 5%, transparent), transparent 62%),
    linear-gradient(112deg, rgba(13, 17, 18, .42), rgba(5, 10, 13, .55) 42%, rgba(1, 5, 9, .78));
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--prediction) 7%, transparent),
    inset 0 1px 0 rgba(222, 230, 231, .035),
    0 14px 31px rgba(0, 0, 0, .18);
}

html[data-crossroad-phase="prelaunch"] .prediction-card.lod-uniform:not(.add-card)::before {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--prediction) 76%, var(--observation-white)) 0,
    color-mix(in srgb, var(--prediction) 62%, transparent) 66%,
    transparent 100%
  ) 50% 5px / 2px calc(100% - 5px) no-repeat;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--prediction) 18%, transparent));
}

html[data-crossroad-phase="prelaunch"] .prediction-card.is-light-primary:not(.add-card),
html[data-crossroad-phase="prelaunch"] .prediction-card:not(.add-card):hover,
html[data-crossroad-phase="prelaunch"] .prediction-card:not(.add-card):focus-visible {
  border-left-color: color-mix(in srgb, var(--prediction) 30%, transparent);
  background:
    radial-gradient(ellipse 72% 104% at 19% -7%, color-mix(in srgb, var(--prediction) 15%, transparent), transparent 66%),
    linear-gradient(112deg, rgba(22, 21, 16, .9), rgba(8, 11, 12, .96) 48%, rgba(1, 5, 9, .99));
}

html[data-crossroad-phase="prelaunch"] .prediction-card .prediction-meta span,
html[data-crossroad-phase="prelaunch"] .prediction-card .prediction-date,
html[data-crossroad-phase="prelaunch"] .prediction-card .prediction-days-ahead,
.axis-sector-prediction {
  color: var(--prediction);
}

/* 429 and TODAY are the only absolute anchors in the hero. */
.countdown-deck .count-kicker::after {
  width: clamp(24px, 5cqi, 48px);
  background: linear-gradient(90deg, var(--prediction), transparent);
  opacity: .52;
}

.countdown-deck .launch-count-label,
.countdown-deck .launch-count-target {
  color: rgba(194, 210, 218, .76);
}

.countdown-deck .featured-panel .launch-countdown-button b {
  position: relative;
  color: rgba(207, 223, 230, .11);
  -webkit-text-fill-color: rgba(207, 223, 230, .11);
  -webkit-text-stroke: 1px rgba(225, 241, 247, .48);
  text-shadow:
    0 0 1px rgba(242, 251, 253, .66),
    0 0 16px rgba(130, 205, 252, .11),
    0 .085em 0 rgba(130, 205, 252, .16);
}

.countdown-deck .featured-panel .launch-countdown-button b::after {
  content: "";
  position: absolute;
  left: .04em;
  right: .02em;
  bottom: .035em;
  height: 1px;
  background: linear-gradient(90deg, rgba(235, 248, 251, .7), rgba(130, 205, 252, .28) 68%, transparent);
  box-shadow: 0 0 8px rgba(130, 205, 252, .2);
}

.countdown-deck .featured-panel .launch-countdown-button small {
  margin-left: -.06em;
  color: rgba(194, 210, 218, .72);
}

.present-marker .origin-today {
  color: var(--observation-white);
  text-shadow:
    0 0 5px rgba(245, 253, 255, .45),
    0 0 18px rgba(130, 205, 252, .24);
}

.present-marker .origin-core {
  background: var(--observation-white);
  box-shadow: 0 0 8px rgba(245, 253, 255, .66), 0 0 20px rgba(130, 205, 252, .24);
}

/* TODAYを越えたカードも消さず、公式軸の背後では最小限の残像として残す。 */
.rail .prediction-card.is-past-position.is-axis-overlap:not(.add-card),
.rail .prediction-card.is-past-position.is-axis-overlap:not(.add-card):hover,
.rail .prediction-card.is-past-position.is-axis-overlap:not(.add-card):focus-visible {
  opacity: .22;
  filter: none;
}

.rail .prediction-card.is-past-position:not(.add-card) {
  display: block;
  opacity: var(--past-distance-opacity, .28);
}

html[data-crossroad-phase="prelaunch"] .rail .prediction-card.lod-uniform.is-past-position.is-axis-overlap:not(.add-card),
html[data-crossroad-phase="prelaunch"] .rail .prediction-card.lod-uniform.is-past-position.is-axis-overlap:not(.add-card):hover,
html[data-crossroad-phase="prelaunch"] .rail .prediction-card.lod-uniform.is-past-position.is-axis-overlap:not(.add-card):focus-visible {
  opacity: .22;
}

.rail .prediction-card.is-past-position:not(.is-axis-overlap):not(.add-card):hover,
.rail .prediction-card.is-past-position:not(.is-axis-overlap):not(.add-card):focus-visible {
  opacity: max(var(--past-distance-opacity, .28), .48);
}

/* The top-right utilities stay submerged until the user asks for them. */
.crossroad-hero > .trailer-archive.is-collapsed:hover,
.crossroad-hero > .trailer-archive.is-collapsed:focus-within,
.crossroad-hero > .trailer-archive.is-collapsed.is-pointer-hot {
  --trailer-distance-opacity: 1 !important;
}

.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed:hover,
.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed:focus-within,
.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed.is-pointer-hot {
  filter: none !important;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-image {
  filter: saturate(.42) brightness(.84) contrast(1.05) !important;
  opacity: .85;
  transition: filter .28s ease, opacity .28s ease, translate .24s cubic-bezier(.2, .7, .25, 1);
}

/* The collapsed bundle may keep changing after navigation. Paint it through a
   canvas so the visual loop remains intact without creating a new LCP image. */
.crossroad-hero > .trailer-archive .trailer-collapsed-preview.is-canvas-preview .trailer-preview-image {
  visibility: hidden !important;
}

.crossroad-hero > .trailer-archive .trailer-preview-canvas {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-motion {
  filter: saturate(.42) brightness(.84) contrast(1.05) !important;
  opacity: 0;
  transition: filter .28s ease, opacity .28s ease;
}

.crossroad-hero > .trailer-archive.has-collected-art .trailer-preview-motion {
  visibility: hidden;
  opacity: 0 !important;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-preview-image.is-depth-0 {
  filter: saturate(.62) brightness(.94) contrast(1.04) !important;
  opacity: .95;
}

.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:hover .trailer-preview-image,
.crossroad-hero > .trailer-archive.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-image,
.crossroad-hero > .trailer-archive.is-collapsed.is-pointer-hot .trailer-preview-image {
  filter: saturate(.96) brightness(1.02) contrast(1.03) !important;
  opacity: 1;
}

.crossroad-hero > .trailer-archive.is-collapsed.is-previewing:not(.has-collected-art) .trailer-preview-motion {
  filter: saturate(.96) brightness(1.02) contrast(1.03) !important;
  visibility: visible;
  opacity: 1;
}

.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed .trailer-preview-image.is-depth-0 {
  filter: saturate(.68) brightness(.78) contrast(1.02) !important;
  opacity: .92;
}

.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed .trailer-preview-stack::after {
  opacity: .26;
  transition: opacity .24s ease-out;
}

.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed .trailer-archive-toggle:hover .trailer-preview-image.is-depth-0,
.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-image.is-depth-0,
.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed.is-pointer-hot .trailer-preview-image.is-depth-0 {
  filter: none !important;
  opacity: 1;
}

.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed .trailer-archive-toggle:hover .trailer-preview-stack::after,
.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed .trailer-archive-toggle:focus-visible .trailer-preview-stack::after,
.crossroad-hero > .trailer-archive.has-surface-art.is-collapsed.is-pointer-hot .trailer-preview-stack::after {
  opacity: 0;
}

.brand-site,
.vfprep-signature {
  filter: saturate(.25) brightness(.56);
  opacity: .56;
  transition: filter .2s ease, opacity .2s ease;
}

.brand-site:hover,
.brand-site:focus-visible,
.vfprep-signature:hover,
.vfprep-signature:focus-visible {
  filter: saturate(.82) brightness(.92);
  opacity: .92;
}

/* Resting Official geometry/surface lives in official-frames + agreed-axis-cards.
   World Physics owns only the observed-record response and source projection. */
html[data-crossroad-phase="prelaunch"] .latest-official.is-reading-near,
html[data-crossroad-phase="prelaunch"] .official-event.is-reading-near {
  opacity: .56;
}

html[data-crossroad-phase="prelaunch"] .latest-official.is-reading-active,
html[data-crossroad-phase="prelaunch"] .official-event.is-reading-active {
  border-top-color: rgba(207, 235, 247, .26);
  border-right-color: rgba(130, 205, 252, .08);
  border-bottom-color: rgba(130, 205, 252, .07);
  border-left-color: rgba(224, 244, 252, .6);
  box-shadow:
    inset 1px 0 0 rgba(239, 250, 253, .2),
    inset 0 1px 0 rgba(220, 242, 253, .08),
    -10px 0 30px rgba(130, 205, 252, .055);
  opacity: 1;
  translate: -3px 0;
  animation: officialRecordResolve .78s cubic-bezier(.2, .72, .2, 1) both;
}

html[data-crossroad-phase="prelaunch"] .latest-official.is-reading-active::before,
html[data-crossroad-phase="prelaunch"] .official-event.is-reading-active::before {
  opacity: 1;
  box-shadow: 0 0 9px rgba(130, 205, 252, .16);
}

html[data-crossroad-phase="prelaunch"] .latest-official.is-reading-active::after,
html[data-crossroad-phase="prelaunch"] .official-event.is-reading-active::after {
  background: var(--observation-white);
  box-shadow: 0 0 7px rgba(242, 252, 255, .7), 0 0 17px rgba(130, 205, 252, .2);
}

.official-source-frame {
  align-self: stretch;
  height: 100%;
  aspect-ratio: auto;
  border-right: 0;
  background: rgba(2, 7, 11, .86);
}

.official-source-frame::after {
  background:
    linear-gradient(90deg, transparent 54%, rgba(3, 9, 14, .55) 78%, rgba(3, 9, 14, .94)),
    linear-gradient(0deg, rgba(2, 7, 11, .38), transparent 42%);
}

.official-source-frame img {
  object-fit: cover;
  filter: saturate(.28) brightness(.6) contrast(1.1);
  transition: filter .55s ease, opacity .45s ease;
}

.is-reading-near .official-source-frame img {
  filter: saturate(.46) brightness(.69) contrast(1.08);
}

.is-reading-active .official-source-frame img {
  filter: saturate(.9) brightness(.82) contrast(1.05);
}

/* The latest confirmed item is visible in the opening composition. Keep its
   resting presentation fully legible without turning it into reading focus. */
html[data-crossroad-phase="prelaunch"] .latest-official {
  opacity: 1;
}

html[data-crossroad-phase="prelaunch"] .latest-official .official-source-frame img {
  filter: saturate(.9) brightness(.86) contrast(1.05);
}

html[data-crossroad-phase="prelaunch"] .latest-official .official-card-copy h2 {
  color: rgba(239, 247, 251, .96);
  text-shadow: 0 0 14px rgba(130, 205, 252, .12);
}

html[data-crossroad-phase="prelaunch"] .latest-official .official-card-copy p {
  color: rgba(183, 205, 217, .82);
}

html[data-crossroad-phase="prelaunch"] .latest-official .official-source {
  color: rgba(220, 239, 248, .92);
}

html[data-crossroad-phase="prelaunch"] .official-card-copy h1,
html[data-crossroad-phase="prelaunch"] .official-card-copy h2 {
  color: rgba(210, 224, 231, .62);
  transition: color .38s ease, text-shadow .38s ease;
}

html[data-crossroad-phase="prelaunch"] .is-reading-active .official-card-copy h1,
html[data-crossroad-phase="prelaunch"] .is-reading-active .official-card-copy h2 {
  color: var(--observation-white);
  text-shadow: 0 0 14px rgba(130, 205, 252, .12);
}

html[data-crossroad-phase="prelaunch"] .latest-official:not(:has(.official-source-frame)),
html[data-crossroad-phase="prelaunch"] .official-event:not(:has(.official-source-frame)) {
  grid-template-columns: minmax(0, 1fr);
  min-height: 112px;
}

.latest-official:not(:has(.official-source-frame)) .official-card-copy,
.official-event:not(:has(.official-source-frame)) .official-card-copy {
  grid-column: 1 / -1;
  padding-left: 22px;
  padding-right: 28px;
}

@keyframes officialRecordResolve {
  0% { filter: brightness(.78); }
  42% { filter: brightness(1.08); }
  100% { filter: brightness(1); }
}

/* The active source image remains submerged, but must still read as the selected record. */
.official-reading-projection {
  position: fixed;
  z-index: 1;
  top: 4svh;
  right: 0;
  bottom: 0;
  width: min(74vw, 1180px);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .68) 19%, #000 48%),
    linear-gradient(0deg, transparent 0, #000 11%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .68) 19%, #000 48%),
    linear-gradient(0deg, transparent 0, #000 11%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

.official-reading-projection.has-source {
  opacity: 1;
}

.official-reading-projection-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: none;
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .86s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1);
}

.official-reading-projection-layer.is-active {
  opacity: .15;
  transform: scale(1);
}

body > main {
  z-index: 2;
}

/* The route is finite. Fine underwater movement can continue without the orb. */
html:not(.light-route-active) .travel-light-orb {
  opacity: 0 !important;
}

@media (max-width: 760px) {
  html[data-crossroad-phase="prelaunch"] .latest-official.is-reading-active,
  html[data-crossroad-phase="prelaunch"] .official-event.is-reading-active {
    translate: -2px 0;
  }

  .official-reading-projection {
    top: 12svh;
    bottom: 0;
    width: 84vw;
    opacity: 0;
  }

  .official-reading-projection.has-source {
    opacity: .72;
  }

  .official-reading-projection-layer.is-active {
    opacity: .11;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-crossroad-phase="prelaunch"] .latest-official,
  html[data-crossroad-phase="prelaunch"] .official-event,
  .official-source-frame img,
  .official-reading-projection,
  .official-reading-projection-layer {
    animation: none;
    transition: none;
  }
}

/* The launch date is the destination of the large countdown.
   Keep its ordinary card connector legible even while the card is at rest. */
html[data-crossroad-phase="prelaunch"]
  .rail .prediction-card.lod-uniform.launch-projection-source:not(.add-card)::before {
  display: block !important;
  content: "";
  opacity: max(var(--lod-connector-opacity, .5), .5);
}