/* ═══════════════════════════════════════════
   Animations & transitions
   ═══════════════════════════════════════════ */

/* ── Sky panorama fade ── */
#sky-bg {
  transition: opacity 0.6s ease-in-out;
}

#sky-bg.fade-transition {
  animation: skyFadeOut 0.3s ease-in forwards;
}

@keyframes skyFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes skyFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Location transition wipe ── */
#transition-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
  pointer-events: none;
  z-index: 9998;          /* fixed — never drops so the CSS opacity transition is never hidden */
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

#transition-overlay.show {
  opacity: 1;
}

/* ── Shared overlay entrance animations ── */
@keyframes overlayEnter {
  0%   { opacity: 0; background: rgba(0, 0, 0, 0); }
  100% { opacity: 1; background: rgba(0, 0, 0, 0.92); }
}

@keyframes videoSlideIn {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}