/*
 * Launch depth
 *
 * The screen is underwater. Release is a surfacing, so `433 DAYS` is not only
 * "how long" but "how deep". Every constant here derives from --launch-depth
 * (0 = the surface / 1 = the deepest water), which JS computes from the days
 * remaining. Nothing in this file is a fixed value any more: the water clears
 * as the launch rises toward us.
 *
 * The countdown is not a card. It is a distant measurement read through water;
 * interaction briefly resolves it into an instrument.
 */

:root {
  /* JS overwrites this every minute; the fallback is roughly 15 months out. */
  --launch-depth: .92;
}

/* Released after the intro roll lands, so the water clears in one long beat
   instead of the 380ms used for pointer response. */
html.is-launch-depth-settling .countdown-deck,
html.is-launch-depth-settling .countdown-deck * {
  transition-duration: 700ms !important;
  transition-timing-function: cubic-bezier(.22, .72, .18, 1) !important;
}

/*
 * The latch.
 *
 * The spin decelerates into place and then stops hard. A dial that simply
 * arrives has not arrived at all, so the figure overshoots by a fraction,
 * settles back, and takes one flash of light as it seats. The shockwave in the
 * water is fired from JS (crossroad:launch-countdown-latch) using the same
 * impact the travelling light makes when it strikes an official node.
 */
@keyframes launchLatchSeat {
  0%   { transform: scale(1.017) translateY(-.006em); filter: contrast(1.04) brightness(1.62); }
  18%  { transform: scale(.9955) translateY(.003em);  filter: contrast(1.06) brightness(1.34); }
  42%  { transform: scale(1.0035) translateY(0);      filter: contrast(1.05) brightness(1.12); }
  70%  { transform: scale(.9992); }
  100% { transform: scale(1) translateY(0);           filter: contrast(1.04) brightness(1); }
}

@keyframes launchLatchHorizon {
  0%   { opacity: 0; filter: brightness(3.1); }
  12%  { opacity: 1; filter: brightness(2.4); }
  100% { opacity: calc(1 - var(--launch-depth) * .42); filter: brightness(1); }
}

/* Overrides the depth-driven blur for the length of the strike: the value is
   momentarily hard, then the water takes it back. */
html.is-launch-latched .countdown-deck .featured-panel .launch-countdown-button b {
  animation: launchLatchSeat 700ms cubic-bezier(.14, .86, .26, 1) both;
}

html.is-launch-latched .countdown-deck .launch-countdown-button::after {
  animation: launchLatchHorizon 820ms cubic-bezier(.2, .74, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  html.is-launch-latched .countdown-deck .featured-panel .launch-countdown-button b,
  html.is-launch-latched .countdown-deck .launch-countdown-button::after {
    animation: none !important;
  }
}

html[data-crossroad-phase="prelaunch"] .countdown-deck {
  isolation: isolate;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none;
}

/* A wide field of cold light, deliberately larger than the readable value. */
html[data-crossroad-phase="prelaunch"] .countdown-deck::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -66px -132px -74px -94px;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 58% 64% at 42% 49%,
      rgba(196, 231, 250, .09),
      rgba(130, 205, 252, .036) 45%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 84% 40% at 47% 58%,
      rgba(130, 205, 252, .028),
      transparent 72%
    );
  /* Deeper water scatters more and lets less through. */
  filter: blur(calc(9px + var(--launch-depth) * 11px));
  opacity: calc(1 - var(--launch-depth) * .48);
  transition: opacity 420ms ease, filter 420ms ease;
}

html[data-crossroad-phase="prelaunch"] .countdown-deck .featured-panel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

/* The old masked solid fill made the number read like a faded widget. */
html[data-crossroad-phase="prelaunch"] .countdown-deck .featured-cutout {
  opacity: 0;
}

html[data-crossroad-phase="prelaunch"] .countdown-deck .launch-countdown-button {
  position: relative;
  overflow: visible;
  border-bottom: 0 !important;
  outline: none;
}

/* A horizon, not an underline. It continues past the measured value. */
html[data-crossroad-phase="prelaunch"] .countdown-deck .launch-countdown-button::after {
  content: "";
  position: absolute;
  left: -7%;
  right: -27%;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168, 217, 243, .11) 14%,
    rgba(187, 226, 247, .25) 46%,
    rgba(130, 205, 252, .075) 78%,
    transparent
  );
  box-shadow: 0 0 9px rgba(130, 205, 252, .045);
  opacity: calc(1 - var(--launch-depth) * .42);
  transition: opacity 360ms ease, filter 360ms ease;
}

/*
 * Keep the figures on the browser's native text-paint path. Masked fills and
 * background-clip have produced rectangular paint artifacts in this counter,
 * so depth belongs to the surrounding atmosphere rather than a glyph layer.
 */
html[data-crossroad-phase="prelaunch"] .countdown-deck .featured-panel .launch-countdown-button b {
  padding-top: .12em;
  margin-top: -.12em;
  background: none !important;
  color: rgba(174, 217, 240, .82) !important;
  -webkit-text-fill-color: rgba(174, 217, 240, .82) !important;
  -webkit-text-stroke: 0 transparent !important;
  text-shadow: none !important;
  /* Large and thin, not small and thin. Something vast at depth still fills
     the field of view; what distance takes away is contrast, not size. */
  opacity: calc(1 - var(--launch-depth) * .38);
  filter: contrast(1.04) blur(calc(var(--launch-depth) * 1.1px));
  transition: opacity 380ms ease, filter 380ms ease, color 380ms ease;
}

/*
 * IF — the one mark that never surfaces.
 *
 * It carries exactly what the question marks used to carry: this figure is a
 * supposition. So it follows the same rule they did. Everything else in the
 * deck resolves as the launch rises toward us; this does not. The ceiling
 * below keeps it short of full strength even at --launch-depth: 0.
 *
 * No blur is applied. At this size a disclaimer has to stay legible, so the
 * softness is carried entirely by the ceiling.
 */
html[data-crossroad-phase="prelaunch"] .countdown-deck .prediction-badge {
  opacity: calc(.68 + (1 - var(--launch-depth)) * .16);
  transition: opacity 320ms ease, color 320ms ease;
}

html[data-crossroad-phase="prelaunch"] .countdown-deck .launch-count-meta {
  opacity: .72;
  transition: opacity 320ms ease;
}

html[data-crossroad-phase="prelaunch"] .countdown-deck .featured-panel .counter small {
  opacity: calc(1 - var(--launch-depth) * .5);
  transition: opacity 320ms ease;
}

/*
 * The trailing question marks were retired in favour of the IF badge above.
 * Should a build still carry them, they follow the badge's rule rather than
 * resolving with the water: a ceiling, and never full strength.
 */
html[data-crossroad-phase="prelaunch"] .countdown-deck .count-question,
html[data-crossroad-phase="prelaunch"] .countdown-deck .launch-date-question {
  opacity: calc(.58 + (1 - var(--launch-depth)) * .12);
  filter: blur(.4px);
  text-shadow: none;
  transition: opacity 320ms ease;
}

/* Nearness resolves the weather into a readable instrument. */
html[data-crossroad-phase="prelaunch"] .countdown-deck:has(.launch-countdown-button:hover)::before,
html[data-crossroad-phase="prelaunch"] .countdown-deck:has(.launch-countdown-button:focus-visible)::before {
  opacity: 1;
  filter: blur(12px);
}

html[data-crossroad-phase="prelaunch"] .countdown-deck .launch-countdown-button:hover b,
html[data-crossroad-phase="prelaunch"] .countdown-deck .launch-countdown-button:focus-visible b {
  color: rgba(211, 238, 251, .94) !important;
  -webkit-text-fill-color: rgba(211, 238, 251, .94) !important;
  opacity: .98;
  filter: contrast(1.12) brightness(1.08);
}

html[data-crossroad-phase="prelaunch"] .countdown-deck .launch-countdown-button:hover::after,
html[data-crossroad-phase="prelaunch"] .countdown-deck .launch-countdown-button:focus-visible::after {
  opacity: 1;
  filter: brightness(1.22);
}

html[data-crossroad-phase="prelaunch"] .countdown-deck:has(.launch-countdown-button:hover) .prediction-badge,
html[data-crossroad-phase="prelaunch"] .countdown-deck:has(.launch-countdown-button:focus-visible) .prediction-badge,
html[data-crossroad-phase="prelaunch"] .countdown-deck:has(.launch-countdown-button:hover) .launch-count-meta,
html[data-crossroad-phase="prelaunch"] .countdown-deck:has(.launch-countdown-button:focus-visible) .launch-count-meta,
html[data-crossroad-phase="prelaunch"] .countdown-deck:has(.launch-countdown-button:hover) .counter small,
html[data-crossroad-phase="prelaunch"] .countdown-deck:has(.launch-countdown-button:focus-visible) .counter small {
  opacity: .9;
}

@media (max-width: 760px) {
  html[data-crossroad-phase="prelaunch"] .countdown-deck::before {
    inset: -42px -52px -48px -38px;
    filter: blur(12px);
  }

  html[data-crossroad-phase="prelaunch"] .countdown-deck .launch-countdown-button::after {
    left: -4%;
    right: -12%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-crossroad-phase="prelaunch"] .countdown-deck::before,
  html[data-crossroad-phase="prelaunch"] .countdown-deck .launch-countdown-button::after,
  html[data-crossroad-phase="prelaunch"] .countdown-deck .launch-countdown-button b,
  html[data-crossroad-phase="prelaunch"] .countdown-deck .prediction-badge,
  html[data-crossroad-phase="prelaunch"] .countdown-deck .launch-count-meta,
  html[data-crossroad-phase="prelaunch"] .countdown-deck .counter small {
    transition: none;
  }
}