/* City photo parallax + gentle Ken Burns backdrop */
body { position: relative; overflow-x: hidden; }

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #0a1220;
}

.sky-layer {
  position: absolute;
  inset: -25% 0 0 0;
  width: 100%;
  height: 150%;
  will-change: transform;
}

.sky-drift {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.city-photo {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  background-image: var(--city-photo);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform-origin: center center;
}

/* FAR: darkened / blurred twin of the city photo */
.city-photo--far {
  filter: blur(18px) brightness(0.38) saturate(0.85);
  transform: scale(1.12);
  opacity: 0.95;
}

/* MID: readable city landmark, soft ken burns */
.city-photo--mid {
  filter: brightness(0.55) saturate(1.05);
  opacity: 0.9;
}

/* NEAR: sharper hero photo with stronger presence */
.city-photo--near {
  filter: brightness(0.62) contrast(1.05);
  opacity: 0.85;
}

/* Dark gradient so white/frosted UI stays readable */
.city-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 8, 20, 0.55) 0%, rgba(8, 14, 28, 0.35) 35%, rgba(8, 14, 28, 0.55) 70%, rgba(5, 8, 20, 0.78) 100%),
    radial-gradient(ellipse 90% 60% at 50% 20%, rgba(15, 23, 42, 0.15), rgba(5, 8, 20, 0.55));
  pointer-events: none;
}

/* Subtle far twinkle ABOVE the darkened photo */
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #e8f0ff;
  box-shadow: 0 0 4px rgba(232, 240, 255, 0.75);
  opacity: 0.35;
  z-index: 2;
}

.star--lg {
  width: 3px;
  height: 3px;
  box-shadow: 0 0 7px rgba(186, 230, 253, 0.8);
  opacity: 0.4;
}

.sky-layer--far .star:nth-child(1) { top: 8%; left: 12%; }
.sky-layer--far .star:nth-child(2) { top: 14%; left: 42%; width: 1.5px; height: 1.5px; opacity: 0.25; }
.sky-layer--far .star:nth-child(3) { top: 22%; left: 78%; }
.sky-layer--far .star:nth-child(4) { top: 30%; left: 25%; opacity: 0.22; }
.sky-layer--far .star:nth-child(5) { top: 38%; left: 88%; }
.sky-layer--far .star:nth-child(6) { top: 48%; left: 55%; width: 1.5px; height: 1.5px; }
.sky-layer--far .star:nth-child(7) { top: 58%; left: 18%; opacity: 0.28; }
.sky-layer--far .star:nth-child(8) { top: 66%; left: 72%; }
.sky-layer--far .star:nth-child(9) { top: 74%; left: 35%; opacity: 0.2; }
.sky-layer--far .star:nth-child(10) { top: 82%; left: 92%; }
.sky-layer--far .star:nth-child(11) { top: 18%; left: 60%; }
.sky-layer--far .star:nth-child(12) { top: 44%; left: 8%; opacity: 0.25; }

/* Soft tint orbs kept very subtle (not the main look) */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.18;
  mix-blend-mode: soft-light;
  z-index: 1;
}
.sky-layer--near .orb:nth-child(1) {
  width: 260px; height: 260px; top: 10%; left: 6%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 70%);
}
.sky-layer--near .orb:nth-child(2) {
  width: 200px; height: 200px; top: 50%; right: 8%; left: auto;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.3), transparent 70%);
}

/* Aurora intentionally de-emphasized / unused as hero */
.aurora { display: none; }

@keyframes kenburns-mid {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-2.2%, -1.4%, 0); }
}
@keyframes kenburns-near {
  from { transform: scale(1.08) translate3d(0, 0, 0); }
  to   { transform: scale(1.18) translate3d(2.5%, -1.8%, 0); }
}
@keyframes photo-drift-far {
  from { transform: scale(1.12) translate3d(0, 0, 0); }
  to   { transform: scale(1.18) translate3d(1.5%, 1%, 0); }
}
@keyframes star-twinkle {
  from { opacity: 0.15; }
  to { opacity: 0.55; }
}
@keyframes orb-soft {
  from { opacity: 0.12; transform: scale(1); }
  to { opacity: 0.22; transform: scale(1.08); }
}

.sky-layer--far .city-photo--far {
  animation: photo-drift-far 48s ease-in-out infinite alternate;
}
.sky-layer--mid .city-photo--mid {
  animation: kenburns-mid 36s ease-in-out infinite alternate;
}
.sky-layer--near .city-photo--near {
  animation: kenburns-near 28s ease-in-out infinite alternate-reverse;
}
.sky-layer--far .star { animation: star-twinkle 4s ease-in-out infinite alternate; }
.sky-layer--far .star:nth-child(odd) { animation-duration: 5.2s; animation-delay: 0.7s; }
.sky-layer--near .orb { animation: orb-soft 12s ease-in-out infinite alternate; }

/* Keep content above sky */
.site-header,
.site-footer,
main,
.container,
.wrap,
.hero,
.section,
.affiliate-badge,
.cookie-banner,
.legal-page {
  position: relative;
  z-index: 1;
}

.site-header {
  background: rgba(11, 18, 32, 0.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.card,
.tool,
.disclosure,
.panel,
.hotel-card,
.stay-card,
.search-panel,
.legal-page {
  background: rgba(17, 24, 39, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {
  .city-photo,
  .orb,
  .star { animation: none !important; }
  .sky-layer { transform: none !important; }
  .city-photo--far { filter: blur(14px) brightness(0.4); }
  .city-photo--mid,
  .city-photo--near { filter: brightness(0.55); }
}