/* GemstoneRO night sky (art direction v2): the world behind every page. Owner: the sky agent.
   Contract: SCR/art2/contracts/sky.md. Markup: main/sky.php. Images carry a manual ?v= key: bump it when img/sky/ changes.
   Motion: transform and opacity only, on the compositor; static under prefers-reduced-motion. */

/* 1. Tokens. Capital (default) on :root; a variant re-sets them on .gs-sky--x and on every later sibling of the sky
      (header, main, footer), so the whole page reads the variant's values. Others read these, never set them. */
:root{
  --gs-sky-zenith:#040916;--gs-sky-mid:#08122d;--gs-sky-low:#0e1f45;
  --gs-sky-horizon:rgba(56,110,230,.2);--gs-sky-haze:#13285a;--gs-sky-rim:#9cc4ff;--gs-sky-warm:#ffb85c;--gs-sky-mote:#cfe8ff;
  --gs-sky-moon-r0:15px;--gs-sky-moon-dx:44px;--gs-sky-moon-top:31px;--gs-sky-moon-lift:0px;--gs-sky-lift-k:.35;--gs-sky-moon-k:1;
  --gs-sky-stars:1;--gs-sky-wisps:.42;--gs-sky-mid-o:.8;--gs-sky-near-o:.96;
  --gs-sky-bank:672px;--gs-sky-near:0px;--gs-sky-near-y:0px;--gs-sky-veil-y:-26px;--gs-sky-veil-h:150px;
  --gs-sky-mask:linear-gradient(90deg,transparent 52%,#000 80%);--gs-sky-tw-room:200px
}
@media (min-width:768px){:root{--gs-sky-moon-r0:clamp(18px,calc(8px + 1.5vw),34px);--gs-sky-moon-dx:92px;--gs-sky-moon-top:56px;--gs-sky-lift-k:.7;--gs-sky-tw-room:calc(38vw - var(--gs-sky-moon-dx) - 24px);
  --gs-sky-bank:1040px;--gs-sky-veil-y:-48px;--gs-sky-veil-h:250px;--gs-sky-mask:linear-gradient(90deg,transparent 42%,#000 68%)}}
@media (min-width:1024px){:root{--gs-sky-moon-dx:max(128px,calc(50vw - 540px));--gs-sky-moon-top:70px;--gs-sky-lift-k:1;--gs-sky-tw-room:calc(38vw - var(--gs-sky-moon-dx) - 24px);
  --gs-sky-bank:1280px;--gs-sky-near:1760px;--gs-sky-near-y:118px;--gs-sky-veil-y:-60px;--gs-sky-veil-h:380px;
  --gs-sky-mask:linear-gradient(90deg,transparent 44%,#000 66%)}}
/* derived values: recomputed wherever a variant changes an input */
:root,.gs-sky,.gs-sky~*{
  --gs-sky-moon-r:calc(var(--gs-sky-moon-r0) * var(--gs-sky-moon-k));
  --gs-sky-moon-x:calc(100% - var(--gs-sky-moon-dx));
  --gs-sky-moon-y:calc(var(--gs-header-h,64px) + var(--gs-sky-moon-top) + var(--gs-sky-moon-lift) * var(--gs-sky-lift-k))
}

/* 2. Variants: one family. The moon stays upper right; height, size, clouds and the horizon tint change. */
.gs-sky--tower,.gs-sky--tower~*{--gs-sky-zenith:#040a19;--gs-sky-mid:#07142f;--gs-sky-low:#0a2148;--gs-sky-horizon:rgba(70,190,255,.15);--gs-sky-haze:#10305e;--gs-sky-warm:#ffd89a;--gs-sky-mote:#a8ecff;--gs-sky-moon-lift:-14px;--gs-sky-moon-k:.9;--gs-sky-wisps:.36;--gs-sky-mid-o:.67;--gs-sky-near-o:0}
.gs-sky--village,.gs-sky--village~*{--gs-sky-zenith:#050a18;--gs-sky-mid:#0a1430;--gs-sky-low:#122246;--gs-sky-horizon:rgba(255,178,92,.085);--gs-sky-haze:#1a2a52;--gs-sky-mote:#ffd27a;--gs-sky-moon-lift:16px;--gs-sky-wisps:.4;--gs-sky-mid-o:.77;--gs-sky-near-o:.88}
.gs-sky--harbour,.gs-sky--harbour~*{--gs-sky-zenith:#040a18;--gs-sky-mid:#071530;--gs-sky-low:#0b2349;--gs-sky-horizon:rgba(64,160,225,.17);--gs-sky-haze:#0f2d5a;--gs-sky-warm:#ffc06a;--gs-sky-mote:#d6f0ff;--gs-sky-moon-lift:22px;--gs-sky-moon-k:1.05;--gs-sky-wisps:.48;--gs-sky-mid-o:.7;--gs-sky-near-o:.96}
.gs-sky--skyport,.gs-sky--skyport~*{--gs-sky-zenith:#040a1a;--gs-sky-mid:#0a1736;--gs-sky-low:#142a58;--gs-sky-horizon:rgba(110,150,255,.2);--gs-sky-haze:#1a3266;--gs-sky-mote:#dff0ff;--gs-sky-moon-lift:-16px;--gs-sky-moon-k:1.1;--gs-sky-wisps:.52;--gs-sky-mid-o:1;--gs-sky-near-o:1}
.gs-sky--hills,.gs-sky--hills~*{--gs-sky-zenith:#050b1a;--gs-sky-mid:#0a1631;--gs-sky-low:#12244c;--gs-sky-horizon:rgba(96,140,235,.15);--gs-sky-haze:#182c5a;--gs-sky-mote:#e6f2ff;--gs-sky-mid-o:.83;--gs-sky-near-o:.8}
.gs-sky--siege,.gs-sky--siege~*{--gs-sky-zenith:#040815;--gs-sky-mid:#08112b;--gs-sky-low:#10203f;--gs-sky-horizon:rgba(255,150,84,.08);--gs-sky-haze:#15254d;--gs-sky-warm:#ff9f50;--gs-sky-mote:#ffc27a;--gs-sky-moon-lift:4px;--gs-sky-wisps:.48;--gs-sky-mid-o:1;--gs-sky-near-o:1}
.gs-sky--arena,.gs-sky--arena~*{--gs-sky-zenith:#040917;--gs-sky-mid:#08132f;--gs-sky-low:#0f2249;--gs-sky-horizon:rgba(70,120,255,.18);--gs-sky-warm:#ffcf70;--gs-sky-mote:#ffe3a0;--gs-sky-moon-lift:-10px;--gs-sky-moon-k:.95;--gs-sky-stars:1.15;--gs-sky-wisps:.32;--gs-sky-mid-o:.64;--gs-sky-near-o:0}
.gs-sky--forest,.gs-sky--forest~*{--gs-sky-zenith:#030814;--gs-sky-mid:#061127;--gs-sky-low:#0a1d3a;--gs-sky-horizon:rgba(60,170,160,.1);--gs-sky-haze:#0f2a44;--gs-sky-warm:#ffd89a;--gs-sky-mote:#e6f59a;--gs-sky-moon-lift:28px;--gs-sky-moon-k:.9;--gs-sky-stars:.82;--gs-sky-wisps:.44;--gs-sky-mid-o:.64;--gs-sky-near-o:.74}
.gs-sky--quiet,.gs-sky--quiet~*{--gs-sky-zenith:#040916;--gs-sky-mid:#07112a;--gs-sky-low:#0c1c3f;--gs-sky-horizon:rgba(56,110,230,.1);--gs-sky-haze:#122650;--gs-sky-mote:transparent;--gs-sky-moon-lift:-20px;--gs-sky-moon-k:.75;--gs-sky-wisps:.28;--gs-sky-mid-o:.42;--gs-sky-near-o:0}
/* the shape of the first screen. low: a compact band (moon high and small, one small bank); wide: a centred text
   column (clouds at both edges, the middle clear); auth: the card stands on the right from 1024 px */
.gs-sky--low,.gs-sky--low~*{--gs-sky-moon-lift:-26px;--gs-sky-moon-k:.8;--gs-sky-near-o:0}
@media (min-width:768px){.gs-sky--low{--gs-sky-bank:880px;--gs-sky-veil-y:-41px;--gs-sky-veil-h:150px}}
.gs-sky--wide{--gs-sky-mask:linear-gradient(90deg,#000 0,transparent 24%,transparent 76%,#000 100%);--gs-sky-tw-room:calc(50vw - 340px - var(--gs-sky-moon-dx) - 24px)}
@media (min-width:768px) and (max-width:1023.98px){.gs-sky--wide{--gs-sky-tw-room:40px}}
@media (max-width:767.98px){.gs-sky--wide{--gs-sky-mask:linear-gradient(90deg,transparent 56%,#000 84%);--gs-sky-tw-room:200px}}
/* auth (log in, register, recovery): the moon keeps the top right corner like every page, a little higher and smaller so it
   stands above the card (log in and register, 1024 to 1920 px) and right of the wide register card; no banks over the
   aside and the landmark side (the far wisps stay) */
.gs-sky--auth,.gs-sky--auth~*{--gs-sky-moon-k:.75;--gs-sky-mid-o:0;--gs-sky-near-o:0}
@media (min-width:1024px){.gs-sky--auth,.gs-sky--auth~*{--gs-sky-moon-dx:max(72px,calc(50vw - 600px));--gs-sky-moon-top:30px;--gs-sky-moon-lift:0px}
  .gs-sky--auth{--gs-sky-tw-room:300px}}

/* 3. The layer: a zero-height anchor at the top of the document, below every in-flow element (z-index -1) */
.gs-sky{position:absolute;top:0;left:0;right:0;height:0;z-index:-1;pointer-events:none;-webkit-user-select:none;user-select:none}
.gs-sky span,.gs-sky i{position:absolute;display:block}

/* 3a. Far layer: fixed to the viewport (calm, behind content): gradient, stars, horizon, far wisps, edge twinkles */
.gs-sky__far{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;overflow:hidden;background:linear-gradient(180deg,var(--gs-sky-zenith) 0%,var(--gs-sky-mid) 52%,var(--gs-sky-low) 100%)}
.gs-sky__stars{inset:0;opacity:var(--gs-sky-stars);background:url(../img/sky/stars-b.svg?v=1) 0 0/787px 733px,url(../img/sky/stars-a.svg?v=1) 211px 113px/431px 397px}
/* haze: fewer stars towards the horizon, then the horizon glow (static, painted once) */
.gs-sky__haze{inset:0;background:radial-gradient(120% 58% at 72% 112%,var(--gs-sky-horizon),transparent 72%),linear-gradient(180deg,transparent 42%,var(--gs-sky-low) 100%);opacity:.92}
.gs-sky__veil{inset:0;opacity:0}
/* drifting layers are three tiles wide and move by one tile (a third of their width): a seamless loop at any tile size */
.gs-sky__wisps{top:0;bottom:0;left:-1200px;width:3600px;opacity:var(--gs-sky-wisps);
  background:url(../img/sky/cloud-wisp.webp?v=1) 0 40%/1200px 220px repeat-x,url(../img/sky/cloud-wisp.webp?v=1) 560px 94%/1200px 220px repeat-x;
  background-image:image-set(url(../img/sky/cloud-wisp.avif?v=1) type("image/avif"),url(../img/sky/cloud-wisp.webp?v=1) type("image/webp")),image-set(url(../img/sky/cloud-wisp.avif?v=1) type("image/avif"),url(../img/sky/cloud-wisp.webp?v=1) type("image/webp"));
  animation:gs-sky-drift 300s steps(3600) infinite}

/* 3b. Top layer: the first screen, scrolls away with it: moon, halo, twinkles, cloud banks under the moon */
.gs-sky__top{position:absolute;top:0;left:0;right:0;height:100vh;height:100lvh;overflow:hidden;overflow:clip}
.gs-sky__halo{top:calc(var(--gs-sky-moon-y) - var(--gs-sky-moon-r) * 7);right:calc(var(--gs-sky-moon-dx) - var(--gs-sky-moon-r) * 7);width:calc(var(--gs-sky-moon-r) * 14);height:calc(var(--gs-sky-moon-r) * 14);border-radius:50%;
  background:radial-gradient(closest-side,rgba(214,230,255,.3) 13%,rgba(176,206,255,.13) 19%,rgba(136,176,255,.06) 33%,rgba(116,164,255,.022) 60%,rgba(110,160,255,0) 100%)}
.gs-sky__moon{top:calc(var(--gs-sky-moon-y) - var(--gs-sky-moon-r));right:calc(var(--gs-sky-moon-dx) - var(--gs-sky-moon-r));width:calc(var(--gs-sky-moon-r) * 2);height:calc(var(--gs-sky-moon-r) * 2);border-radius:50%;
  background:radial-gradient(circle at 31% 27%,rgba(255,255,255,.62) 0,rgba(255,255,255,0) 38%),
    radial-gradient(29% 23% at 37% 37%,rgba(118,144,196,.52) 0,rgba(118,144,196,.2) 62%,rgba(118,144,196,0) 100%),
    radial-gradient(15% 14% at 61% 35%,rgba(118,144,196,.46),rgba(118,144,196,0)),
    radial-gradient(19% 16% at 66% 53%,rgba(118,144,196,.44),rgba(118,144,196,0)),
    radial-gradient(21% 32% at 23% 59%,rgba(118,144,196,.3),rgba(118,144,196,0)),
    radial-gradient(13% 10% at 47% 70%,rgba(118,144,196,.34),rgba(118,144,196,0)),
    radial-gradient(4% 4% at 43% 84%,rgba(255,255,255,.85),rgba(255,255,255,0)),
    radial-gradient(circle at 50% 46%,rgba(112,142,204,0) 60%,rgba(112,142,204,.3) 100%),
    radial-gradient(circle at 44% 40%,#f6faff 0,#e2ecfc 55%,#c6d8f4 100%)}
.gs-sky__top>.gs-sky__veil{top:calc(var(--gs-sky-moon-y) + var(--gs-sky-moon-r) + var(--gs-sky-veil-y));bottom:auto;left:0;height:var(--gs-sky-veil-h);
  -webkit-mask-image:var(--gs-sky-mask),linear-gradient(#000 64%,transparent);mask-image:var(--gs-sky-mask),linear-gradient(#000 64%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.gs-sky__bank{top:0;left:calc(var(--gs-sky-bank) * -1);width:calc(var(--gs-sky-bank) * 3);height:calc(var(--gs-sky-bank) / 5);
  background:url(../img/sky/cloud-bank.webp?v=2) 0 0/var(--gs-sky-bank) calc(var(--gs-sky-bank) / 5) repeat-x;
  background-image:image-set(url(../img/sky/cloud-bank.avif?v=2) type("image/avif"),url(../img/sky/cloud-bank.webp?v=2) type("image/webp"))}
.gs-sky__bank--mid{opacity:var(--gs-sky-mid-o);animation:gs-sky-drift 240s steps(3600) infinite}
.gs-sky__bank--near{top:var(--gs-sky-near-y);left:calc(var(--gs-sky-near) * -1);width:calc(var(--gs-sky-near) * 3);height:calc(var(--gs-sky-near) / 5);
  background-size:var(--gs-sky-near) calc(var(--gs-sky-near) / 5);background-position:41% 0;opacity:var(--gs-sky-near-o);animation:gs-sky-drift 200s steps(3600) infinite}

/* 3c. Twinkles: a dozen small stars with slow, staggered opacity changes (8 around the moon, 4 at the far edges) */
.gs-sky i{width:9px;height:9px;border-radius:50%;opacity:.4;
  background:radial-gradient(circle,#fff 0,rgba(236,244,255,.95) 14%,rgba(156,196,255,.42) 34%,rgba(156,196,255,0) 70%);
  animation:gs-sky-tw 7s steps(5) infinite}
.gs-sky i:nth-of-type(3n+1){width:15px;height:15px;
  background:radial-gradient(circle,#fff 0,rgba(236,244,255,.9) 9%,rgba(156,196,255,.34) 24%,rgba(156,196,255,0) 52%),
    linear-gradient(90deg,rgba(214,230,255,0) 18%,rgba(214,230,255,.6) 50%,rgba(214,230,255,0) 82%) 50% 50%/100% 1px no-repeat,
    linear-gradient(rgba(214,230,255,0) 18%,rgba(214,230,255,.6) 50%,rgba(214,230,255,0) 82%) 50% 50%/1px 100% no-repeat}
.gs-sky__top>i{top:calc(var(--gs-sky-moon-y) + var(--y));right:calc(var(--gs-sky-moon-dx) + min(var(--x),var(--gs-sky-tw-room)))}
.gs-sky__top>i:nth-of-type(1){--x:150px;--y:-46px;animation-duration:7.6s;animation-delay:-1.2s}
.gs-sky__top>i:nth-of-type(2){--x:286px;--y:6px;animation-duration:9.4s;animation-delay:-5.8s;opacity:.7}
.gs-sky__top>i:nth-of-type(3){--x:96px;--y:30px;animation-duration:6.2s;animation-delay:-3.1s}
.gs-sky__top>i:nth-of-type(4){--x:-74px;--y:-30px;animation-duration:10.8s;animation-delay:-7.4s;opacity:.85}
.gs-sky__top>i:nth-of-type(5){--x:372px;--y:-24px;animation-duration:8.3s;animation-delay:-2.6s}
.gs-sky__top>i:nth-of-type(6){--x:212px;--y:-62px;animation-duration:11.6s;animation-delay:-9.1s;opacity:.6}
.gs-sky__top>i:nth-of-type(7){--x:-50px;--y:26px;animation-duration:6.9s;animation-delay:-4.4s}
.gs-sky__top>i:nth-of-type(8){--x:440px;--y:22px;animation-duration:9.9s;animation-delay:-.6s;opacity:.75}
.gs-sky__far>i{display:none}
.gs-sky__far>i:nth-of-type(1){left:2.4%;top:28%;animation-duration:8.8s;animation-delay:-3.3s}
.gs-sky__far>i:nth-of-type(2){right:2.2%;top:46%;animation-duration:10.2s;animation-delay:-6.1s;opacity:.7}
.gs-sky__far>i:nth-of-type(3){left:3.1%;top:66%;animation-duration:7.3s;animation-delay:-1.9s}
.gs-sky__far>i:nth-of-type(4){right:3.3%;top:84%;animation-duration:9.1s;animation-delay:-4.7s;opacity:.6}
@media (min-width:1360px){.gs-sky__far>i{display:block}}
@media (max-width:1279.98px){.gs-sky__top>i:nth-of-type(8){display:none}}
@media (max-width:1023.98px){
  .gs-sky__top>i:nth-of-type(n+5){display:none}
  .gs-sky__top>i:nth-of-type(1){--x:84px;--y:-14px}
  .gs-sky__top>i:nth-of-type(2){--x:150px;--y:10px}
  .gs-sky__top>i:nth-of-type(3){--x:46px;--y:-30px}
  .gs-sky__top>i:nth-of-type(4){--x:-26px;--y:22px}
  .gs-sky__bank--near{display:none}
}
@media (max-width:767.98px){
  /* phones: the moon in the corner beside the breadcrumb, three twinkles in the strip under the header, no banks */
  .gs-sky__top>.gs-sky__veil,.gs-sky__top>i:nth-of-type(4){display:none}
  .gs-sky__top>i:nth-of-type(1){--x:64px;--y:-25px}
  .gs-sky__top>i:nth-of-type(2){--x:128px;--y:-22px}
  .gs-sky__top>i:nth-of-type(3){--x:-22px;--y:25px}
  .gs-sky__wisps{left:-800px;width:2400px;background-size:800px 147px,800px 147px;animation-duration:220s}
}

/* 4. Motion */
@keyframes gs-sky-drift{to{transform:translate3d(33.3333%,0,0)}}
@keyframes gs-sky-tw{0%,62%,100%{opacity:.32;transform:scale(.72)}70%{opacity:1;transform:scale(1)}80%{opacity:.6;transform:scale(.86)}}
@keyframes gs-sky-in{from{opacity:0}to{opacity:1}}
/* The clouds fade in once their images are in (gs-sky.js adds .is-lit after load): an element that first paints while
   transparent is never taken as the page's largest contentful paint, so the clouds cannot delay the LCP. */
.gs-sky.is-lit .gs-sky__veil{animation:gs-sky-in 2.4s ease-out both}
html:not(.gs-js) .gs-sky__veil{opacity:1}
/* Stepped timing: a drift step is under half a pixel and a twinkle has five steps per phase, so the compositor draws a frame
   only when something changed (measured: about a quarter of the frames of linear timing). The whole sky rests while its
   first screen is out of view (gs-sky.js: .is-still); motes and any box marked data-gs-rest (a footer scene, a hero stage
   with a moving cast) rest while off screen (.is-off), because off-screen animations still tick the compositor. */
.gs-sky.is-still *,.gs-motes.is-off>i,[data-gs-rest].is-off *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .gs-sky__wisps,.gs-sky__bank,.gs-sky i,.gs-motes>i{animation:none}
  .gs-sky.is-lit .gs-sky__veil{animation-duration:.8s}
}

/* 5. Motes and fireflies, placed by scenery owners: gsSkyMotes(n) inside a positioned box (contract section 7) */
.gs-motes{position:absolute;inset:0;pointer-events:none}
.gs-motes>i{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,var(--gs-sky-mote) 0,var(--gs-sky-mote) 22%,transparent 70%);animation:gs-sky-mote 12s steps(24) infinite}
.gs-motes>i:nth-child(1){left:12%;top:58%;animation-delay:-1s}
.gs-motes>i:nth-child(2){left:31%;top:34%;animation-duration:14s;animation-delay:-6s}
.gs-motes>i:nth-child(3){left:47%;top:70%;animation-duration:11s;animation-delay:-3.5s}
.gs-motes>i:nth-child(4){left:63%;top:42%;animation-duration:15s;animation-delay:-9s}
.gs-motes>i:nth-child(5){left:78%;top:62%;animation-duration:12.5s;animation-delay:-4.2s}
.gs-motes>i:nth-child(6){left:90%;top:30%;animation-duration:13.5s;animation-delay:-11s}
.gs-motes>i:nth-child(7){left:22%;top:80%;animation-duration:16s;animation-delay:-7.5s}
.gs-motes>i:nth-child(8){left:55%;top:22%;animation-duration:12s;animation-delay:-2.2s}
.gs-motes>i:nth-child(9){left:71%;top:84%;animation-duration:14.5s;animation-delay:-12.4s}
.gs-motes>i:nth-child(10){left:6%;top:26%;animation-duration:11.5s;animation-delay:-5.6s}
.gs-motes>i:nth-child(11){left:39%;top:52%;animation-duration:13s;animation-delay:-8.3s}
.gs-motes>i:nth-child(12){left:84%;top:48%;animation-duration:15.5s;animation-delay:-13.7s}
@keyframes gs-sky-mote{0%{opacity:0;transform:translate3d(0,10px,0)}22%{opacity:.85}50%{transform:translate3d(9px,-12px,0)}78%{opacity:.6}100%{opacity:0;transform:translate3d(-5px,-30px,0)}}
@media (prefers-reduced-motion:reduce){.gs-motes>i{opacity:.55}}

/* 6. No sky in print and in forced colours (high contrast) */
@media print{.gs-sky,.gs-motes{display:none}}
@media (forced-colors:active){.gs-sky,.gs-motes{display:none}}