/* ============================================================
   Transitions — single easing (var(--ease)), all opacity/transform
   (GPU-friendly), durations layered for depth without stutter.
   ============================================================ */

.transition-layer { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
.transition-card {
  position: absolute;
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 40px rgba(0,0,0,0.5);
  will-change: transform, opacity, border-radius;
  transition:
    transform    560ms var(--ease),
    opacity      560ms var(--ease),
    border-radius 560ms var(--ease),
    box-shadow   560ms var(--ease),
    width        560ms var(--ease),
    height       560ms var(--ease);
}

/* Hub fades out its non-source cards + globe as the FLIP card travels. */
.hub.is-leaving .hub-card:not(.is-source),
.hub.is-leaving .hub__hero-copy,
.hub.is-leaving .hub__globe {
  opacity: 0;
  filter: blur(2px);
  transition: opacity 420ms var(--ease), filter 420ms var(--ease);
}

/* Incoming view fades + rises with a small delay so it feels consequent. */
.view.is-entering { opacity: 0; transform: translateY(12px); }
.view.is-entered  {
  opacity: 1;
  transform: none;
  transition:
    opacity   520ms var(--ease) 120ms,
    transform 560ms var(--ease) 120ms;
}

@media (prefers-reduced-motion: reduce) {
  .transition-card,
  .hub.is-leaving .hub-card:not(.is-source),
  .hub.is-leaving .hub__hero-copy,
  .hub.is-leaving .hub__globe,
  .view.is-entering,
  .view.is-entered { transition: none !important; filter: none !important; transform: none !important; opacity: 1 !important; }
}