/* ============================================================
   NorthStar — page-wide compass sky
   A fixed star layer sits behind the light sections; the navy
   sections keep their own gradients and get the same stars as an
   inner overlay, so one theme runs the length of the page.
   Everything here is decorative: aria-hidden, pointer-events off.
   ============================================================ */

/* ---------- shared star recipe ---------- */
/* The host element sets `color` (the star colour) and --star-max
   (peak opacity). Each star carries its own size/position/timing. */
.stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.stars .star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: star-drift var(--dur) linear var(--delay) infinite;
}
/* Fading in and out at the ends hides the loop, so no star ever pops. */
@keyframes star-drift {
  0%        { transform: translateY(0); opacity: 0; }
  12%, 78%  { opacity: var(--star-max, .5); }
  100%      { transform: translateY(calc(-1 * var(--rise))); opacity: 0; }
}

/* ---------- the fixed sky (shows through the light sections) ---------- */
.sky {
  position: fixed;
  inset: 0;
  /* Negative, so the sky sits behind every element without needing a blanket
     rule on body's children. An earlier version lifted the children instead,
     which overrode .nav's `position: fixed` and un-stuck the header. */
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: var(--gold);
}

.sky .stars { --star-max: .42; }

/* Two slow compass rings drifting at opposite edges. */
.sky__ring {
  position: absolute;
  border: 1px solid rgba(232, 185, 35, .13);
  border-radius: 50%;
}
/* The cardinal ticks are what make it read as a compass rose rather
   than a plain circle. */
.sky__ring::before,
.sky__ring::after {
  content: "";
  position: absolute;
  background: rgba(232, 185, 35, .16);
}
.sky__ring::before { left: 50%; top: -6px; bottom: -6px; width: 1px; transform: translateX(-50%); }
.sky__ring::after  { top: 50%; left: -6px; right: -6px; height: 1px; transform: translateY(-50%); }

.sky__ring--a {
  width: 620px; height: 620px;
  top: 12vh; left: -260px;
  animation: spin 150s linear infinite;
}
.sky__ring--b {
  width: 420px; height: 420px;
  bottom: 8vh; right: -180px;
  animation: spin 110s linear infinite reverse;
}

/* The north star itself — the one fixed point the rest drifts around. */
.sky__north {
  position: absolute;
  top: 14vh; right: 11vw;
  width: 132px; height: 132px;
  color: var(--gold);
  opacity: .15;
  animation: north-pulse 9s ease-in-out infinite;
}
.sky__north svg { width: 100%; height: 100%; display: block; animation: spin 120s linear infinite; }
.sky__north::before {
  content: "";
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 185, 35, .22) 0%, transparent 68%);
}
@keyframes north-pulse {
  0%, 100% { opacity: .13; transform: scale(1); }
  50%      { opacity: .22; transform: scale(1.05); }
}

/* ---------- stars inside the navy sections ---------- */
/* These keep their solid gradients (white text sits on them), so the
   stars go *in* rather than showing through. */
.process, .casestudy, .footer { position: relative; overflow: hidden; }
/* Lift the real content above the stars — but not the star layer itself,
   which must stay absolutely positioned to fill the section. */
.process > *:not(.sky-in),
.casestudy > *:not(.sky-in),
.footer > *:not(.sky-in) { position: relative; z-index: 1; }
.sky-in {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: #ffffff;
  --star-max: .5;
}
/* A few gold ones among the white for warmth. */
.sky-in .star--gold { color: var(--gold); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .stars .star {
    animation: none;
    opacity: var(--star-max, .4);
  }
  .sky__ring, .sky__north, .sky__north svg { animation: none; }
}

/* ---------- letting the sky through the light sections ---------- */
/* These two painted solid colours over the sky, which cut the rings off
   mid-arc. The page still reads the same: body is already white, and the
   booking band keeps its tint, just translucently. */
.vision  { background: transparent; }
.booking { background: rgba(245, 247, 251, .72); }

/* ---------- stars read differently on navy ---------- */
/* On white a 40%-opacity dot is plenty; on navy it disappears, so the
   in-section stars run brighter and a few carry a soft halo. */
.sky-in { --star-max: .72; }
.sky-in .star--bright { box-shadow: 0 0 7px 1px rgba(255, 255, 255, .30); }
.sky-in .star--gold.star--bright { box-shadow: 0 0 8px 1px rgba(232, 185, 35, .40); }