/*
 * Attention handoff
 * Focus changes are felt as light travelling from axis, to connector, to copy.
 * Geometry stays fixed; Z is expressed through time rather than another arrow.
 */

html[data-crossroad-phase="prelaunch"] .prediction-card.attention-arriving:not(.add-card) .lod-uniform-head,
html[data-crossroad-phase="prelaunch"] .prediction-card.attention-arriving:not(.add-card) .prediction-title,
html[data-crossroad-phase="prelaunch"] .prediction-card.attention-arriving:not(.add-card) .prediction-depth-hint {
  transition: opacity 230ms ease-out, color 230ms ease-out;
}

/*
 * The previous focus does not switch off. It releases its light toward the
 * exact opacity of its new near/distant state, avoiding a jump at cleanup.
 */
html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving:not(.add-card) {
  --attention-rest-opacity: .48;
  animation: attentionCardRelease 520ms cubic-bezier(.22, .72, .24, 1) both;
}

html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving.is-light-near:not(.add-card) {
  --attention-rest-opacity: .7;
}

html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving:not(.add-card)::before {
  animation: attentionConnectorRelease 440ms cubic-bezier(.22, .72, .24, 1) both;
}

html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving:not(.add-card)::after {
  animation: attentionSurfaceRelease 500ms ease-out both;
}

html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving:not(.add-card) .lod-uniform-head,
html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving:not(.add-card) .prediction-title,
html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving:not(.add-card) .prediction-depth-hint,
html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving:not(.add-card) .prediction-days-ahead {
  transition: color 420ms ease-out, opacity 420ms ease-out, text-shadow 420ms ease-out;
}

/* Beat 1: the local timeline resolves while the destination stays unreadable. */
html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="axis"] .prediction-line::after {
  opacity: .94;
  filter: brightness(1.12);
}

html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="axis"] .prediction-card.attention-arriving:not(.add-card)::before {
  opacity: .12 !important;
  filter: none !important;
}

html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="axis"] .prediction-card.attention-arriving:not(.add-card)::after {
  opacity: .24 !important;
}

html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="axis"] .prediction-card.attention-arriving:not(.add-card) .lod-uniform-head,
html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="axis"] .prediction-card.attention-arriving:not(.add-card) .prediction-title,
html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="axis"] .prediction-card.attention-arriving:not(.add-card) .prediction-depth-hint {
  opacity: .16 !important;
}

html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="axis"] .prediction-card.attention-arriving:not(.add-card) .prediction-days-ahead {
  opacity: .76;
  text-shadow: 0 0 11px rgba(215, 239, 251, .18);
}

/* Beat 2: light descends through the angled bridge and reaches the card face. */
html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="connector"] .prediction-card.attention-arriving:not(.add-card)::before {
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 5px rgba(230, 247, 255, .44))
    drop-shadow(0 0 12px rgba(130, 205, 252, .26)) !important;
}

html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="connector"] .prediction-card.attention-arriving:not(.add-card)::after {
  opacity: .9 !important;
}

html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="connector"] .prediction-card.attention-arriving:not(.add-card) .lod-uniform-head,
html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="connector"] .prediction-card.attention-arriving:not(.add-card) .prediction-title,
html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="connector"] .prediction-card.attention-arriving:not(.add-card) .prediction-depth-hint {
  opacity: .28 !important;
}

/* Beat 3: the selected future becomes readable; no scale or positional motion. */
html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="content"] .prediction-card.attention-arriving:not(.add-card) .lod-uniform-head,
html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="content"] .prediction-card.attention-arriving:not(.add-card) .prediction-title,
html[data-crossroad-phase="prelaunch"] .prediction-zone[data-attention-phase="content"] .prediction-card.attention-arriving:not(.add-card) .prediction-depth-hint {
  opacity: 1 !important;
}

@keyframes attentionCardRelease {
  from { opacity: 1; }
  to { opacity: var(--attention-rest-opacity); }
}

@keyframes attentionConnectorRelease {
  from {
    opacity: 1;
    filter:
      drop-shadow(0 0 5px rgba(230, 247, 255, .42))
      drop-shadow(0 0 11px rgba(130, 205, 252, .24));
  }
  to {
    opacity: var(--lod-connector-opacity);
    filter: drop-shadow(0 0 6px rgba(130, 205, 252, .18));
  }
}

@keyframes attentionSurfaceRelease {
  from { opacity: .9; }
  to { opacity: .42; }
}

@media (max-width: 760px) {
  html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving:not(.add-card) {
    --attention-rest-opacity: .56;
  }

  html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving.is-light-near:not(.add-card) {
    --attention-rest-opacity: .76;
  }
}

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

  html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving:not(.add-card),
  html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving:not(.add-card)::before,
  html[data-crossroad-phase="prelaunch"] .prediction-card.attention-leaving:not(.add-card)::after {
    animation: none;
  }
}