/* #sky — before/after window. --cut = divider position measured from the PHYSICAL left (the city fills the right part),
   so the few left/right/clip-path inset values below are deliberately physical. Everything else is logical. */
.sky .sec-head .h2 { max-inline-size: 22em; }
.sky-fig { display: grid; gap: 16px; max-inline-size: 1200px; margin-inline: auto; }

.sky-win {
  --cut: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: var(--r-card); background: var(--night); box-shadow: var(--sh-1);
  touch-action: pan-y;           /* vertical page scroll stays native; horizontal drags are ours */
  cursor: ew-resize; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.sky-win.is-drag { cursor: grabbing; }
.sky-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; -webkit-user-drag: none; }

/* the city copy: dimmed, hazy, warm — clipped so it occupies the part right of --cut */
.sky-city { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut)); }
.sky-img--city { filter: brightness(.5) contrast(.32) saturate(.3); }
.sky-haze {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(226, 138, 72, .92) 0%, rgba(176, 112, 84, .72) 45%, rgba(70, 60, 72, .58) 100%);
}
/* the dozen stars a city sky still lets through — "you can count them on your fingers" */
.sky-surv { position: absolute; inline-size: var(--s); block-size: var(--s); border-radius: 50%; background: var(--star); box-shadow: 0 0 6px rgba(246, 231, 200, .7); pointer-events: none; }

/* keyboard range: invisible, focusable; pointer handled on the window so geometry never disagrees */
.sky-range { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; pointer-events: none; }
.sky-range:focus-visible { outline: none; }

/* divider layer is as wide as the window, so translate % = window % (works without JS at 50%) */
.sky-div { position: absolute; inset: 0; translate: var(--cut) 0; pointer-events: none; will-change: translate; }
.sky-div::before {
  content: ""; position: absolute; inset-block: 0; left: -1px; inline-size: 2px; background: var(--star);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--night) 35%, transparent);
}
.sky-handle {
  position: absolute; left: -22px; inset-block-start: calc(50% - 22px); inline-size: 44px; block-size: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--night-2); color: var(--gold);
  box-shadow: 0 0 0 2px var(--star), 0 8px 24px -8px color-mix(in srgb, var(--night) 60%, transparent);
  transition: scale .25s var(--ease-out);
}
.sky-handle .star4 { inline-size: 16px; block-size: 16px; }
/* two small chevrons = "drag me sideways" */
.sky-handle::before, .sky-handle::after {
  content: ""; position: absolute; inset-block-start: calc(50% - 5px); inline-size: 6px; block-size: 10px; background: var(--star-2);
}
.sky-handle::before { left: 6px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.sky-handle::after { right: 6px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sky-win.is-drag .sky-handle { scale: 1.1; }
.sky-range:focus-visible ~ .sky-div .sky-handle { outline: 3px solid var(--focus-night); outline-offset: 4px; box-shadow: 0 0 0 2px var(--star), 0 0 0 11px rgba(10, 11, 20, .6); }

/* labels sit on a declared dark scrim */
.sky-tag {
  position: absolute; inset-block-start: 16px; z-index: 1; padding: 6px 14px; border-radius: var(--r-pill); pointer-events: none;
  font-size: var(--t-sm); font-weight: 500; line-height: 1.7; color: var(--star);
  background: color-mix(in srgb, var(--night) 72%, transparent); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sky-tag--city { inset-inline-start: 16px; }    /* right side */
.sky-tag--alula { inset-inline-end: 16px; }     /* left side */

.sky-cap { font-size: var(--t-sm); color: var(--ink-3); text-align: center; text-wrap: balance; }

@media (max-width: 760px) {
  .sky-win { aspect-ratio: 4 / 5; }
  .sky-img { object-position: 60% 50%; }
  .sky-tag { inset-block-start: 12px; padding-inline: 12px; }
  .sky-tag--city { inset-inline-start: 12px; }
  .sky-tag--alula { inset-inline-end: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sky-handle { transition: none; } }