/* THE SANCTUM SKY — the homepage backdrop behind the header and the sigil (js/hero-sky.js) */
.hero-sky { position: absolute; left: 0; right: 0; top: 0; height: min(1180px, 135vh); z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
/* The sky can be changed in the Sanctum Editor (admin.html › Homepage sky). It writes a small
   <style id="hero-sky-pics"> just before .hero-sky in index.html with the chosen picture(s) (paths in a page's own
   <style> resolve from the page), and these settings onto .hero-sky itself: --sky-pos, --sky-pos-m (phones),
   --sky-bright, --sky-sat, and data-swirl="off" / data-eye="off". Without them the original sanctum shows. */
.hero-sky-img { position: absolute; inset: -6% -4%; background: url("../img/hero-sanctum.jpg") 58% 32% / cover no-repeat;
  background-image: image-set(url("../img/hero-sanctum.webp") type("image/webp"), url("../img/hero-sanctum.jpg") type("image/jpeg"));
  background-position: var(--sky-pos, 58% 32%);
  filter: saturate(var(--sky-sat, 1.15)) brightness(var(--sky-bright, .82)); transform: translate3d(0, 0, 0) scale(1.08); will-change: transform;
  opacity: 0; animation: sky-in 1.6s ease-out .1s forwards; }
@keyframes sky-in { from { opacity: 0; filter: saturate(var(--sky-sat, 1.15)) brightness(calc(var(--sky-bright, .82) * .5)) blur(6px); } to { opacity: 1; } }
.hero-sky[data-swirl="off"] .hero-sky-swirl, .hero-sky[data-eye="off"] .hero-sky-eye { display: none; }
/* the swirl in the sky turns, very slowly, as if the Void is breathing */
.hero-sky-swirl { position: absolute; left: 22%; top: -8%; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(190, 150, 255, 0.28), rgba(120, 70, 230, 0.12) 55%, transparent 72%);
  mix-blend-mode: screen; animation: sky-swirl 26s ease-in-out infinite; }
@keyframes sky-swirl { 0%, 100% { transform: scale(1) rotate(0deg); opacity: .65; } 50% { transform: scale(1.18) rotate(8deg); opacity: 1; } }
/* the eye at the heart of the spire pulses */
.hero-sky-eye { position: absolute; left: 58.5%; top: 46%; width: 14%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 230, 255, 0.45), rgba(120, 90, 255, 0.18) 50%, transparent 72%);
  mix-blend-mode: screen; animation: sky-eye 5s ease-in-out infinite; }
@keyframes sky-eye { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.12); } }
/* a veil keeps the sigil and the words readable */
.hero-sky::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 50% 52%, rgba(8, 5, 15, 0.55), transparent 75%),
              linear-gradient(180deg, rgba(8, 5, 15, 0.35) 0%, rgba(8, 5, 15, 0.05) 30%, rgba(8, 5, 15, 0.25) 60%, rgba(8, 5, 15, 0.9) 100%); }

/* THE SLIDESHOW: when .hero-sky carries data-slides="a.webp|b.webp|…" (set in the Sanctum Editor), js/hero-sky.js lays
   one .hero-sky-slide per picture inside .hero-sky-img and cycles them every data-interval seconds with data-transition
   (fade | slide | both). Each picture drifts slowly closer while it is shown, and each change arrives in a soft flash. */
.hero-sky-slide { position: absolute; inset: 0; background: center / cover no-repeat; background-position: var(--sky-pos, 58% 32%);
  opacity: 0; will-change: opacity, transform; }
.hero-sky-slide.on, .hero-sky-slide.off { animation: sky-drift var(--sky-drift, 14s) ease-out forwards; }   /* the leaving sky keeps its drift */
.hero-sky-slide.on { z-index: 2; opacity: 1; }
.hero-sky-slide.off { z-index: 1; }
@keyframes sky-drift { from { transform: scale(1); } to { transform: scale(1.09); } }
/* fade: a slow crossfade */
.show-fade .hero-sky-slide { transition: opacity 2s ease; }
/* slide: the new sky sweeps in from the right over the old, which slips away to the left */
.show-slide .hero-sky-slide { opacity: 1; translate: 100% 0; }
.show-slide .hero-sky-slide.on { translate: 0 0; transition: translate 1.5s cubic-bezier(.75, 0, .2, 1); }
.show-slide .hero-sky-slide.off { translate: -35% 0; transition: translate 1.5s cubic-bezier(.75, 0, .2, 1); }
/* both: the new sky drifts in from the side as it fades up, the old drifts away as it fades out */
.show-both .hero-sky-slide { translate: 7% 0; }
.show-both .hero-sky-slide.on { translate: 0 0; transition: opacity 2s ease, translate 2.6s cubic-bezier(.2, .7, .2, 1); }
.show-both .hero-sky-slide.off { translate: -7% 0; opacity: 0; transition: opacity 2s ease, translate 2.6s cubic-bezier(.2, .7, .2, 1); }
/* the glow flash that comes with each new sky */
.hero-sky-flash { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(55% 45% at 52% 42%, rgba(246, 236, 255, .5), rgba(190, 150, 255, .28) 40%, rgba(138, 77, 255, .1) 62%, transparent 78%); }
.hero-sky-flash.go { animation: sky-flash 1.8s cubic-bezier(.2, .7, .3, 1); }
@keyframes sky-flash { 0% { opacity: 0; transform: scale(.85); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }

/* the header goes glassy over the sky, and solid again once you scroll */
.has-sky .site-header { transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease; }
.has-sky.at-top .site-header { background: linear-gradient(180deg, rgba(8, 5, 15, 0.55), rgba(8, 5, 15, 0.08)); border-bottom-color: transparent; backdrop-filter: blur(2px); }

@media (max-width: 700px) {
  .hero-sky { height: min(980px, 120vh); }
  .hero-sky-img { background-image: url("../img/hero-sanctum-mobile.webp"); background-position: var(--sky-pos-m, 50% 30%); inset: -4%; }
  .hero-sky-slide { background-position: var(--sky-pos-m, 50% 30%); }
  .hero-sky-swirl { left: 5%; width: 90%; }
  .hero-sky-eye { left: 50%; width: 30%; }
}
/* PHONES: the sky holds still at 700px and narrower (js/hero-sky.js also stops the slideshow and the parallax there) */
@media (max-width: 700px) {
  .hero-sky-img { animation: none; opacity: 1; transform: scale(1.04) !important; will-change: auto; }
  .hero-sky-swirl, .hero-sky-eye { animation: none; }
  .hero-sky-slide, .hero-sky-slide.on, .hero-sky-slide.off { animation: none; transition: none; translate: 0 0; transform: none; will-change: auto; }
  .hero-sky-flash { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sky-img { animation: none; opacity: 1; transform: scale(1.04); }
  .hero-sky-swirl, .hero-sky-eye { animation: none; }
}