/*
 * Water in front of the value.
 *
 * The WebGL sea (#underwater-light) sits behind every piece of content, so the
 * countdown reads as a plate held up in front of the water rather than as
 * something submerged in it. This layer puts a thin sheet of moving water on
 * the near side of the numeral: light entering from above, and caustic bands
 * drifting across the figures.
 *
 * It never uses background-clip on the glyphs. Masked fills have produced
 * rectangular paint artifacts on this counter before, so the numeral stays on
 * the browser's ordinary text path and the water is composited over it.
 *
 * Unlike the sea itself, this does not fade out with depth. Water is in front
 * of the viewer at every distance from the surface; only its speed and its
 * brightness ease off as the launch sinks away.
 */

.launch-caustics {
  position: absolute;
  z-index: 14;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 600ms ease;
  will-change: opacity;
}

.launch-caustics.is-ready {
  opacity: 1;
}

/* The counter slides away when the trailer wall takes focus; the water that
   belongs to it goes at the same time. */
.crossroad-hero:has(> .trailer-archive:not(.is-collapsed)) .launch-caustics {
  opacity: 0;
}

@media (max-width: 760px) {
  /* Smaller type, less room, and a much tighter pixel budget. The sheet stays
     but is quieter so it cannot muddy the value at 66px. */
  .launch-caustics {
    opacity: 0;
  }

  .launch-caustics.is-ready {
    opacity: .62;
  }
}