/* GemstoneRO world scenery (art direction v2). Owner: footer-world. Contract: SCR/art2/contracts/footer-world.md.
   Loaded after the core CSS by header.php and inc/standalone-shell.php. Motion: transform and opacity only, static under
   prefers-reduced-motion. Light: the sky's moon, upper right (rim on the right and top edges). */

/* 1. The footer scene (main/site-footer.php): Prontera seen from the south field. The scene stands on the footer's top,
      its sky transparent (the global night sky shows through), its foot in the footer colour; the footer body under it is
      the calm surface for the links. The low-poly horizon and the old painted skyline of gs-core.css are switched off
      here (design-system deletes those rules). */
.gs-footer{margin-top:clamp(16px,2.4vw,40px);background:none}
.gs-footer::before{content:none;background:none}   /* background:none too: Chrome fetched the old horizon SVG even without a box */
.gs-footer__body{background:var(--gs-night-950)}
.gs-footer--slim{padding-top:40px;background:linear-gradient(rgba(5,10,26,0),var(--gs-night-950) 48px)}
.gs-footer--slim .gs-footer__body{background:none}

/* the stage keeps the panorama's ratio (5:1) and is never narrower than the screen: from 1081 to 1802 px its height is
   22.2 % of the width (the central 90 % of the panorama shows), under 1081 px it keeps 240 px and crops the sides,
   from 1802 to 2000 px it keeps 400 px, above 2000 px it is a fifth of the width (the whole panorama) */
.gs-footscene{--gs-fw-h:max(clamp(240px,22.2vw,400px),20vw);position:relative;height:var(--gs-fw-h);overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}
.gs-footscene::before{content:"";position:absolute;left:0;right:0;bottom:0;height:86%;background:radial-gradient(70% 100% at 50% 100%,var(--gs-sky-horizon,rgba(56,110,230,.2)),rgba(56,110,230,0) 74%)}
.gs-footscene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(rgba(5,10,26,0),var(--gs-night-950))}
.gs-footscene__stage{position:absolute;left:50%;bottom:0;width:calc(var(--gs-fw-h) * 5);height:100%;transform:translateX(-50%)}
.gs-footscene__plate,.gs-footscene__plate img{position:absolute;top:0;left:0;display:block;width:100%;height:100%;max-width:none}

/* a few windows flicker like candles, the campfire breathes and the star on Geffen Tower twinkles (positions are set in
   the markup, in % of the panorama) */
.gs-footscene__flicker{position:absolute;width:1.1%;aspect-ratio:1;margin:-.55% 0 0 -.55%;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(255,226,166,.8),rgba(255,184,92,.3) 46%,rgba(255,184,92,0));animation:gs-fw-flicker 6.4s ease-in-out infinite}
.gs-footscene__flicker--wide{width:1.7%;margin:-.85% 0 0 -.85%}
.gs-footscene__flicker--fire{width:3.4%;margin:-1.7% 0 0 -1.7%;background:radial-gradient(closest-side,rgba(255,206,120,.75),rgba(255,150,60,.28) 50%,rgba(255,150,60,0));animation-duration:3.1s}
.gs-footscene__flicker--star{width:1.5%;margin:-.75% 0 0 -.75%;background:radial-gradient(closest-side,rgba(214,236,255,.85),rgba(140,190,255,.3) 46%,rgba(140,190,255,0));animation-duration:4.6s}

/* life: the airship, the Angeling and the Porings (creatures-icons art), graded to the night, with a soft contact
   shadow; the Poring family sits in the grass right of the road, Marin by the pushcart */
.gs-footscene__life{position:absolute;display:block}
.gs-footscene__life img{position:relative;display:block;width:100%;height:auto;filter:brightness(.8) saturate(.88)}
.gs-footscene__life--marin::before,.gs-footscene__life--poring::before,.gs-footscene__life--drops::before,.gs-footscene__life--poporing::before{content:"";position:absolute;left:4%;right:4%;bottom:-5%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(1,4,14,.72),rgba(1,4,14,0))}
.gs-footscene__life--airship{left:84.6%;top:8%;width:5.4%}
.gs-footscene__life--airship img{filter:brightness(.84) saturate(.9);animation:gs-fw-drift 46s ease-in-out infinite alternate}
.gs-footscene__life--angeling{left:57.5%;top:31%;width:2.9%}
.gs-footscene__life--angeling img{filter:brightness(.86) saturate(.88);animation:gs-fw-float 5.2s ease-in-out infinite}
.gs-footscene__life--marin{left:38.3%;bottom:6.4%;width:1.9%}
.gs-footscene__life--marin img{transform-origin:50% 100%;animation:gs-fw-idle 3.1s ease-in-out infinite}
.gs-footscene__life--poring{left:60.4%;bottom:7.6%;width:2%}
.gs-footscene__life--poring img{transform-origin:50% 100%;animation:gs-fw-hop 3.4s ease-in-out infinite}
.gs-footscene__life--drops{left:63.5%;bottom:3.8%;width:2.1%}
.gs-footscene__life--drops img{transform-origin:50% 100%;animation:gs-fw-idle 2.7s ease-in-out -1.1s infinite}
.gs-footscene__life--poporing{left:67.4%;bottom:7.8%;width:2.15%}
.gs-footscene__life--poporing img{transform-origin:50% 100%;animation:gs-fw-idle 2.9s ease-in-out -.4s infinite}

/* under 1082 px the stage keeps 1200 px and the sides are cropped: the airship moves over the gate so it stays in view */
@media (max-width:1081.98px){
  .gs-footscene__life--airship{left:41.6%;top:2%}
}

/* the phone composition (1200 x 600): the church, the gate and the castle close together, the pushcart on the left,
   the Porings in the grass right of the road */
@media (max-width:639.98px){
  .gs-footscene{--gs-fw-h:50vw}
  .gs-footscene__stage{left:0;width:100%;transform:none}
  .gs-footscene__flicker{display:none}
  .gs-footscene__life--airship{left:74%;top:5%;width:10.5%}
  .gs-footscene__life--angeling{left:51.5%;top:19%;width:9%}
  .gs-footscene__life--marin{left:26.6%;bottom:6.4%;width:5.8%}
  .gs-footscene__life--poring{left:73.4%;bottom:6.6%;width:6%}
  .gs-footscene__life--drops{left:81%;bottom:3.2%;width:6.2%}
  .gs-footscene__life--poporing{left:88.8%;bottom:6.8%;width:6.4%}
}

@keyframes gs-fw-flicker{0%,100%{opacity:0}18%{opacity:.42}24%{opacity:.18}31%{opacity:.5}44%{opacity:.26}58%{opacity:.46}72%{opacity:.1}}
@keyframes gs-fw-hop{0%,58%,100%{transform:translateY(0) scale(1,1)}64%{transform:translateY(0) scale(1.09,.9)}74%{transform:translateY(-34%) scale(.94,1.07)}84%{transform:translateY(0) scale(1.07,.93)}90%{transform:translateY(0) scale(.98,1.02)}}
@keyframes gs-fw-idle{0%,100%{transform:scale(1,1)}50%{transform:scale(1.035,.965)}}
@keyframes gs-fw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12%)}}
@keyframes gs-fw-drift{0%{transform:translate(0,0)}100%{transform:translate(-38%,6%)}}

@media (prefers-reduced-motion:reduce){
  .gs-footscene .gs-footscene__life img,.gs-footscene__flicker{animation:none}
}
@media (forced-colors:active){.gs-footscene{display:none}}
@media print{.gs-footscene{display:none}}