/* The App Store art's sky, on the site.

   The store screenshots and header (promo-video/src/pie3d, StoreShots.tsx
   and StoreArt.tsx) put the app on a bright iOS-blue sky, a cyan bloom low on
   the left and an indigo one high on the right, a white glow behind the
   subject, and a bank of cumulus along the foot. The same sky opens the home
   page (first and last screen), Features and Pricing, and melts into the
   white page at its foot so the sections below carry on as they were.

   They are drawn live (assets/js/sky-live.js): the clouds float, billow
   and change shape, at their own depths. The still strips below are what
   shows until then, and where the page can't draw them.

   Markup, as the first child of the section it sits behind:
     <div class="sky" aria-hidden="true"><i class="sky__far"><i></i></i><i class="sky__bank"></i></div>
   and, where a picture should rise out of the clouds, <i class="sky-front">
   after the picture. The section gets .has-sky.

   The clouds are the store art's own (paintCloud), drawn once into strips
   that repeat side to side (scripts/sky-clouds/render.sh), so they drift.

   On the home page the 3D world draws this same gradient behind its tablet
   and phone (next-world.js, skyQuad), so the two must change together. */

:root {
  --sky-1: #1A7CF5;
  --sky-2: #4198F7;
  --sky-3: #8CCBFF;
  --sky-4: #CBE9FF;
  --sky-cyan: rgba(70, 225, 240, .45);
  --sky-indigo: rgba(110, 100, 255, .42);
  --sky-glow: rgba(255, 255, 255, .55);
  --sky-glow-core: rgba(255, 255, 255, .3);
  --sky-page: #FFFFFF;
  --sky-stars: none;
  --sky-clouds: none;
  --sky-ink: #FFFFFF;
  --sky-shadow: 0 1px 2px rgba(8, 56, 140, .18), 0 2px 28px rgba(8, 56, 140, .22);
}

/* Evening, for dark mode: the same scene at dusk, with stars (thinning out
   toward the clouds, assets/sky/stars.webp) and moonlit clouds. */
html[data-theme="dark"] {
  --sky-1: #060E2A;
  --sky-2: #0F2457;
  --sky-3: #24447F;
  --sky-4: #3B5A90;
  --sky-cyan: rgba(60, 170, 220, .2);
  --sky-indigo: rgba(124, 92, 255, .32);
  --sky-glow: rgba(150, 180, 255, .16);
  --sky-glow-core: rgba(170, 196, 255, .1);
  --sky-page: #111111;
  --sky-stars: url(/assets/sky/stars.webp);
  --sky-clouds: brightness(.62) saturate(1.6);
  --sky-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 28px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] :is(.sky__far > i, .sky__bank, .sky-front) {
  opacity: .85;
}

.has-sky {
  position: relative;
  isolation: isolate;
}

.sky {
  /* Where the white glow sits, as fractions of the band, and how big. */
  --sky-glow-x: 70%;
  --sky-glow-y: 46%;
  --sky-glow-r: 34vmax;
  /* The two cloud layers' heights, and how long each takes to drift one
     strip's width. */
  --sky-far-top: 72px;
  --sky-far-h: 210px;
  --sky-bank-h: 300px;
  /* The foot melts into the page over this much; a band that starts below
     other content fades in from the page over --sky-fade-top. */
  --sky-fade: 110px;
  --sky-fade-top: 0px;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* The sky itself, on its own layer so the home page can hand it to the
   3D canvas (below). */
.sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--sky-page) 0, transparent var(--sky-fade-top)),
    var(--sky-sun-paint, none),
    radial-gradient(circle calc(var(--sky-glow-r) * .4) at var(--sky-glow-x) var(--sky-glow-y), var(--sky-glow-core), transparent),
    radial-gradient(circle var(--sky-glow-r) at var(--sky-glow-x) var(--sky-glow-y), var(--sky-glow), transparent),
    var(--sky-stars) 0 0 / 640px 640px repeat-x,
    radial-gradient(circle 42vmax at 96% 2%, var(--sky-indigo), transparent),
    radial-gradient(circle 42vmax at 4% 108%, var(--sky-cyan), transparent),
    linear-gradient(172deg, var(--sky-1) 0%, var(--sky-2) 52%, var(--sky-3) 84%, var(--sky-4) 100%);
}

.sky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sky-fade);
  /* Eased, so the sky melts into the page with no line where it starts. */
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--sky-page) 8%, transparent) 22%,
    color-mix(in srgb, var(--sky-page) 28%, transparent) 45%,
    color-mix(in srgb, var(--sky-page) 62%, transparent) 70%,
    color-mix(in srgb, var(--sky-page) 90%, transparent) 88%,
    var(--sky-page));
}

/* At night the clouds are grey on a near-black page, so the foot melts
   over a longer reach (sky-live.js darkens their undersides to meet it). */
html[data-theme="dark"] .sky {
  --sky-fade: 230px;
}
html[data-theme="dark"] .sky-front {
  --sky-live-foot: 220px;
}

.sky__far > i,
.sky__bank,
.sky-front {
  position: absolute;
  left: 0;
  display: block;
  width: calc(100% + var(--tile));
  background-repeat: repeat-x;
  background-size: var(--tile) 100%;
  filter: var(--sky-clouds);
  pointer-events: none;
  animation: sky-drift var(--drift) linear infinite;
  will-change: transform;
}

/* The small clouds high up drift only where there are no words: the band
   masks them off over the copy (--sky-far-mask). */
.sky__far {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--sky-far-top);
  height: var(--sky-far-h);
  overflow: hidden;
  -webkit-mask-image: var(--sky-far-mask, none);
  mask-image: var(--sky-far-mask, none);
}

.sky__far > i {
  --tile: calc(var(--sky-far-h) * 7.5);
  --drift: 420s;
  top: 0;
  height: 100%;
  background-image: url(/assets/sky/clouds-far.webp);
}

.sky__bank {
  --tile: calc(var(--sky-bank-h) * 6);
  --drift: 260s;
  bottom: 0;
  height: var(--sky-bank-h);
  background-image: url(/assets/sky/clouds-bank.webp);
}

/* A lower bank in front of a picture, so it rises out of the clouds. It
   melts into the page as the band does. */
.sky-front {
  --sky-front-h: 230px;
  --tile: calc(var(--sky-front-h) * 8.7);
  --drift: 190s;
  bottom: 0;
  height: var(--sky-front-h);
  background-image: linear-gradient(to bottom, transparent calc(100% - var(--sky-fade, 110px)), var(--sky-page)), url(/assets/sky/clouds-front.webp);
  background-size: 100% 100%, var(--tile) 100%;
  background-repeat: no-repeat, repeat-x;
}

@keyframes sky-drift {
  to { transform: translate3d(calc(-1 * var(--tile)), 0, 0); }
}

/* (The live canvases' own rules travel in sky-live.js, so the footer's
   bank works on pages that don't load this stylesheet.)

   Where the sky will be drawn live (theme-init.js: sky-wait), the still
   clouds, stars and sun stay hidden until it is, so only one sky ever
   shows, fading in, rather than the still one and then the live one in its
   place; sky-live.js marks a band it can't draw is-still. (The sun's still
   paint is set by each page's band, at night more specifically.) */
html.sky-wait .sky:not(.is-still) {
  --sky-stars: none;
  --sky-sun-paint: none !important;
}
html.sky-wait .sky:not(.is-still) > :is(.sky__far, .sky__bank) {
  visibility: hidden;
}
html.sky-wait .sky-front:not(.is-still) {
  background-image: none;
}

@media (prefers-reduced-motion: reduce) {
  .sky__far > i,
  .sky__bank,
  .sky-front {
    animation: none;
  }
}

@media (max-width: 720px) {
  html[data-theme="dark"] .sky {
    --sky-fade: 160px;
  }
  .sky {
    --sky-far-top: 64px;
    --sky-far-h: 150px;
    --sky-bank-h: 190px;
    --sky-fade: 80px;
    --sky-glow-r: 60vmax;
  }
  .sky-front {
    --sky-front-h: 150px;
  }
}

/* Words on the sky are white, as the store's are. */
html body .has-sky :is(h1, h2, h1 em, h2 em) {
  color: var(--sky-ink) !important;
  text-shadow: var(--sky-shadow);
}

/* (As specific as theme.css's rule that sets hero paragraphs in ink, and
   loaded after it.) */
html body .has-sky .sky-copy.sky-copy :is(p, a):not(.btn):not(.ms-eyebrow) {
  color: var(--sky-ink) !important;
  border-color: rgba(255, 255, 255, .55);
  text-shadow: var(--sky-shadow);
}

/* Keyboard focus on a link on the sky shows white, where the site's
   olive ring would sink into the blue. (The white buttons keep their ink
   ring, which a white one would vanish against.) */
html body .has-sky :focus-visible:not(.btn) {
  outline-color: #FFFFFF !important;
}

/* The main button on the sky is white with ink words, as the store's
   buttons sit on it. */
html body .has-sky .btn-primary {
  background: #FFFFFF;
  color: var(--ink, #111111);
  border-color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(16, 70, 160, .22);
}

html body .has-sky .btn-primary:hover {
  background: #FFFFFF;
  color: var(--ink, #111111);
  box-shadow: 0 14px 32px rgba(16, 70, 160, .3);
}

html[data-theme="dark"] body .has-sky .btn-primary,
html[data-theme="dark"] body .has-sky .btn-primary:hover {
  color: #111111;
}

/* ---------- Features: the hero's glass board floats in the sky ---------- */
/* Room under the words for the bank, so they never sit on cloud. */
body.features-page .features-hero.has-sky {
  padding-bottom: clamp(150px, 16vw, 220px);
}
body.features-page .features-hero .sky {
  --sky-far-mask: linear-gradient(to right, transparent 40%, #000 60%);
  --sky-far-off: 0 .5;
  --sky-glow-x: 74%;
  --sky-glow-y: 50%;
  --sky-bank-h: 280px;
}
/* On white the glass reads grey and wants its drop shadow; on the sky the
   shadow is the sky's, a soft blue. */
body.features-page .features-hero.has-sky .features-hero__art--video {
  filter: drop-shadow(0 30px 40px rgba(12, 64, 160, .16));
}

/* ---------- Pricing: the plan table comes up out of the clouds ---------- */
body.pricing-page .pricing-hero.has-sky {
  padding-bottom: clamp(170px, 17vw, 230px);
}
body.pricing-page .pricing-hero .sky {
  --sky-far-mask: linear-gradient(to right, #000 14%, transparent 27% 73%, #000 86%);
  --sky-far-off: .2 .8;
  --sky-glow-x: 50%;
  --sky-glow-y: 92%;
  --sky-glow-r: 30vmax;
  --sky-bank-h: 290px;
}
html body.pricing-page .pricing-hero.has-sky .pricing-hero__aside {
  color: var(--sky-ink) !important;
}

/* Apricity's pricing opens on the same sky, with Apricity's winter sun
   (the moon by night) low on the right, just above the clouds and clear of
   the words, as the footers have it. */
body.apricity-pricing-page .apricity-pricing-hero.has-sky {
  padding-bottom: clamp(170px, 17vw, 230px);
}
html body.apricity-pricing-page .apricity-pricing-hero.has-sky .apricity-pricing-hero__aside {
  color: var(--sky-ink) !important;
}
body.apricity-pricing-page .apricity-pricing-hero .sky {
  --sky-far-mask: linear-gradient(to right, #000 14%, transparent 27% 73%, #000 86%);
  --sky-far-off: .2 .8;
  --sky-glow-x: 50%;
  --sky-glow-y: 92%;
  --sky-glow-r: 30vmax;
  --sky-bank-h: 290px;
  --sky-sun: .88 50% 24px;
  --sky-sun-paint:
    radial-gradient(circle 42px at 88% 50%, #FFFFFB 0, #FFFEF6 13px, rgba(255, 251, 238, .9) 23px, rgba(255, 246, 226, 0) 42px),
    radial-gradient(circle 100px at 88% 50%, rgba(255, 245, 225, .7), rgba(255, 245, 225, 0)),
    radial-gradient(circle 250px at 88% 50%, rgba(255, 230, 190, .42), rgba(255, 230, 190, 0));
}

/* ---------- A little sky behind the devices ----------
   Where a phone tells a feature's story (Features, Apricity's three sets),
   it stands in a soft sky of its own: sky blue at the top easing to the
   page's white, a faint warm glow where the winter sun would be, and two
   layers of the store's cumulus at its foot, the far one paler and slower,
   each melting away at its base. No frame: the whole of it fades into the
   page on every side, so the phone and the words stay the point. (The
   homepage's stops have theirs in the 3D world: next-world.js.) */
:is(.features-story__sticky, .story__sticky):has(> .device-sky) {
  isolation: isolate;
}
.device-sky {
  position: absolute;
  z-index: -1;
  top: -3%;
  bottom: 0;
  left: 50%;
  width: min(860px, 240%);
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 68% 16%, rgba(255, 250, 238, .9) 0, rgba(255, 246, 228, .5) 6%, rgba(255, 240, 214, 0) 22%),
    linear-gradient(to bottom, #BEDCFF 0%, #CFE6FF 34%, #E0EFFF 64%, #EAF4FF 100%);
  /* A soft-edged column of sky: it fades out to the sides and at its top
     and foot, so no edge or circle shows. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 32%, #000 68%, rgba(0, 0, 0, .55) 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 32%, #000 68%, rgba(0, 0, 0, .55) 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 74%, transparent 100%);
  mask-composite: intersect;
}
.device-sky > i {
  --tile: calc(var(--h) * var(--aspect));
  position: absolute;
  left: 0;
  display: block;
  width: calc(100% + var(--tile));
  height: var(--h);
  background-image: url(/assets/sky/clouds-bank.webp);
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: var(--tile) 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  animation: device-sky-drift var(--drift) linear infinite;
  will-change: transform;
}
/* The far bank, higher, paler and slower; the near one, low and full. */
.device-sky__far {
  --h: 120px;
  --aspect: 6;
  --drift: 420s;
  bottom: 24%;
  opacity: .55;
}
.device-sky__bank {
  --h: 160px;
  --aspect: 6;
  --drift: 260s;
  bottom: 8%;
  animation-direction: reverse;
}
@keyframes device-sky-drift {
  to { transform: translate3d(calc(-1 * var(--tile)), 0, 0); }
}
/* By night: a deep blue sky, a cool glow where the moon would be, and the
   clouds moonlit grey. */
html[data-theme="dark"] .device-sky {
  background:
    radial-gradient(circle at 70% 18%, rgba(196, 210, 236, .22) 0, rgba(160, 182, 222, .1) 8%, rgba(120, 150, 210, 0) 24%),
    linear-gradient(to bottom, #1A2B4C 0%, #172540 32%, #141D30 58%, #121621 76%, #111111 90%);
}
html[data-theme="dark"] .device-sky > i {
  filter: brightness(.5) saturate(.7);
}
html[data-theme="dark"] .device-sky__far {
  opacity: .25;
}
html[data-theme="dark"] .device-sky__bank {
  opacity: .5;
}
@media (prefers-reduced-motion: reduce) {
  .device-sky > i { animation: none; }
}
/* Where the phone pins above the words on a narrow screen, its sky keeps
   to the screen's width. */
@media (max-width: 759.98px), (max-width: 999.98px) and (max-aspect-ratio: 5/4), (max-width: 999.98px) and (max-height: 639.98px) {
  .device-sky {
    width: 100%;
  }
  .device-sky__far {
    --h: 76px;
  }
  .device-sky__bank {
    --h: 96px;
  }
}

/* ---------- Home: the first and last screens ----------
   The two bands lie behind the 3D world (which is clear over them), laid
   by sky-live.js at the first screen (#home) and the last screenful of
   #begin; the tablet and the phone stand in the sky, the clouds float
   behind them. */
/* The page's white is the root's alone here, so the bands, laid behind
   everything, show through the body. */
html body[data-story="home"] {
  background: transparent;
}
body[data-story="home"] .sky[data-anchor] {
  inset: auto 0 auto 0;
  top: 0;
  height: calc(100 * var(--vh, 1vh));
}
body[data-story="home"] .sky[data-anchor="#begin"] {
  height: 0;
}

body[data-story="home"] .sky--home-top {
  --sky-glow-x: 74%;
  --sky-glow-y: 46%;
  --sky-bank-h: 250px;
  /* The small clouds keep to the sky over the tablet, clear of the words. */
  --sky-far-top: 78px;
  --sky-far-h: 130px;
  --sky-far-off: 0 .54;
  --sky-far-mask: linear-gradient(to right, transparent 44%, #000 64%);
  /* The same winter sun as Apricity's (the moon by night), high on the
     right above the tablet, clear of the words; the small clouds cross it.
     Its still paint is for where the sky can't be drawn live. */
  --sky-sun: .86 150px 28px;
  --sky-sun-paint:
    radial-gradient(circle 46px at 86% 150px, #FFFFFB 0, #FFFEF6 15px, rgba(255, 251, 238, .9) 26px, rgba(255, 246, 226, 0) 46px),
    radial-gradient(circle 110px at 86% 150px, rgba(255, 245, 225, .7), rgba(255, 245, 225, 0)),
    radial-gradient(circle 280px at 86% 150px, rgba(255, 230, 190, .42), rgba(255, 230, 190, 0));
}
html[data-theme="dark"] body[data-story="home"] .sky--home-top {
  --sky-sun-paint:
    radial-gradient(circle 19px at 86% 150px, #F3F1EA 0 17px, rgba(243, 241, 234, 0) 19px),
    radial-gradient(circle 110px at 86% 150px, rgba(196, 210, 255, .22), rgba(196, 210, 255, 0));
}
@media (max-width: 720px) {
  /* On a phone the tablet stands under the top bar, so the sun sits to
     its right, as Apricity's sits beside the books. */
  body[data-story="home"] .sky--home-top {
    --sky-sun: .87 118px 20px;
    --sky-sun-paint:
      radial-gradient(circle 34px at 87% 118px, #FFFFFB 0, #FFFEF6 11px, rgba(255, 251, 238, .9) 19px, rgba(255, 246, 226, 0) 34px),
      radial-gradient(circle 80px at 87% 118px, rgba(255, 245, 225, .7), rgba(255, 245, 225, 0)),
      radial-gradient(circle 200px at 87% 118px, rgba(255, 230, 190, .42), rgba(255, 230, 190, 0));
  }
  html[data-theme="dark"] body[data-story="home"] .sky--home-top {
    --sky-sun-paint:
      radial-gradient(circle 14px at 87% 118px, #F3F1EA 0 12px, rgba(243, 241, 234, 0) 14px),
      radial-gradient(circle 80px at 87% 118px, rgba(196, 210, 255, .22), rgba(196, 210, 255, 0));
  }
}

/* The words sit above the bank, never on cloud. */
body[data-story="home"] .chapter--hero.has-sky .hero {
  padding-bottom: max(190px, 24vh);
}

body[data-story="home"] .has-sky .hero__caret {
  background: #FFFFFF;
}

/* The last screen, fading in from the white world above it. The words
   fill its left side top to bottom, so the clouds gather on the phone's
   side, behind it and (.sky-front) in front of its foot and the plinth. */
body[data-story="home"] .sky--home-end {
  --sky-fade-top: 36%;
  --sky-glow-x: 76%;
  --sky-glow-y: 50%;
  --sky-bank-h: 230px;
  --sky-bank-off: 0 .42;
}
body[data-story="home"] :is(.sky--home-end .sky__bank, .chapter--begin .sky-front) {
  width: 100%;
  animation: none;
  -webkit-mask-image: linear-gradient(to right, transparent 34%, #000 58%);
  mask-image: linear-gradient(to right, transparent 34%, #000 58%);
}
body[data-story="home"] .chapter--begin .sky-front {
  z-index: 1;
  --sky-front-h: 400px;
  --sky-bank-off: 0 .42;
  --sky-live-size: .95;
  --sky-live-anchor: .72;
  --sky-live-foot: 110px;
}
body[data-story="home"] .chapter--begin.has-sky .begin {
  z-index: 2;
}

/* The plain page (no 3D): the last band is its whole section. */
html.no-webgl body[data-story="home"] .sky--home-end {
  --sky-fade-top: 0px;
}
html.no-webgl body[data-story="home"] .chapter--begin.has-sky .begin {
  padding-bottom: 240px;
}

@media (max-width: 720px) {
  body[data-story="home"] .chapter--hero.has-sky .hero {
    padding-bottom: max(118px, 14vh);
  }
  body[data-story="home"] .sky--home-top {
    --sky-bank-h: 180px;
  }
  /* Here the phone stands above the words, so the cloud under it stays
     out (the bank still floats by). */
  body[data-story="home"] .chapter--begin .sky-front {
    --sky-front-h: 230px;
    --sky-live-anchor: 0;
  }
}

/* The nav over the sky, on any page: white words on its clear glass bar,
   as on About over its picture (prologue.css). sky-live.js sets
   nav-on-sky while a band's sky is under the bar. */
html.nav-on-sky:not(.menu-open) .nav .brand,
html.nav-on-sky:not(.menu-open) .nav .brand span,
html.nav-on-sky:not(.menu-open) .nav-links a,
html.nav-on-sky:not(.menu-open) .nav-links a:hover,
html.nav-on-sky:not(.menu-open) .nav-links a.on {
  color: #FFFFFF;
}
html.nav-on-sky:not(.menu-open) .nav .brand-mark {
  filter: brightness(0) invert(1);
}
/* Log in keeps its terracotta, lifted so it reads on the blue. */
html.nav-on-sky:not(.menu-open) .nav .nav-login {
  color: #FFC3A2 !important;
  text-shadow: 0 1px 8px rgba(8, 56, 140, .3);
}
html.nav-on-sky:not(.menu-open) .nav-links .nav-menu__list a {
  color: var(--ink-2, #4c4740);
}
html.nav-on-sky:not(.menu-open) .nav-links .nav-menu__list :is(a:hover, a:focus-visible, a.on) {
  color: var(--ink, #191714);
}
html[data-theme="dark"].nav-on-sky:not(.menu-open) .nav-links .nav-menu__list a {
  color: #B9B4AC;
}
html[data-theme="dark"].nav-on-sky:not(.menu-open) .nav-links .nav-menu__list :is(a:hover, a:focus-visible, a.on) {
  color: #F2F2F2;
}
/* Try now: frosted white glass over the sky (navigation.js styles the bar's
   buttons as glass). */
html.nav-on-sky:not(.menu-open) .nav .nav-cta {
  background: rgba(255, 255, 255, .64);
  color: #15110D;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .95), 0 10px 22px -14px rgba(12, 64, 160, .45);
}
html.nav-on-sky:not(.menu-open) .nav .nav-cta:hover {
  background: rgba(255, 255, 255, .8);
  color: #15110D;
}
html.nav-on-sky:not(.menu-open) .nav .nav-burger:not(.open) span {
  background: #FFFFFF;
}

/* Where the words run the full width of a narrow screen, the small high
   clouds would drift behind them; there the sky keeps only its bank. */
@media (max-width: 860px) {
  body:is(.features-page, .pricing-page, .apricity-pricing-page) .sky {
    --sky-far-h: 0px;
  }
  body:is(.features-page, .pricing-page, .apricity-pricing-page) .sky__far {
    display: none;
  }
}

/* ---------- Apricity: the same sky, with the winter sun ----------
   Apricity is the warmth of the sun in winter, so its sky has one, high on
   the right, clear of the words: it lights the clouds from its side and
   warms them near it (sky-live.js), and turns to the moon by night. The
   band reaches from the top of the page (sky-live.js lays it) to the foot
   of the hero, and the devices stand in it without their card, rising out
   of the clouds in front of them. */
body.apricity-page .apricity-hero.has-sky {
  z-index: 0;
}
body.apricity-page .apricity-hero .sky {
  /* Up to the top of the page from the first paint, before sky-live.js
     lays it exactly: the hero starts at the top of the page, under the top
     bar (there is no second bar of page tabs above it now). */
  --apricity-above: 0px;
  inset: auto 0 auto 0;
  top: calc(-1 * var(--apricity-above));
  height: calc(100% + var(--apricity-above));
  /* The sun's core (sky-live.js blooms it out from there), and the same
     sun in still light for where the sky can't be drawn live. */
  --sky-sun: .82 176px 28px;
  --sky-sun-paint:
    radial-gradient(circle 46px at 82% 176px, #FFFFFB 0, #FFFEF6 15px, rgba(255, 251, 238, .9) 26px, rgba(255, 246, 226, 0) 46px),
    radial-gradient(circle 110px at 82% 176px, rgba(255, 245, 225, .7), rgba(255, 245, 225, 0)),
    radial-gradient(circle 280px at 82% 176px, rgba(255, 230, 190, .42), rgba(255, 230, 190, 0));
  --sky-glow-x: 50%;
  --sky-glow-y: 70%;
  --sky-glow-r: 38vmax;
  --sky-bank-h: 300px;
  --sky-far-top: 120px;
  --sky-far-h: 190px;
  /* Off the words, but whole by the time they reach the sun, so they cross
     it (and light up from behind) rather than fade in front of it. */
  --sky-far-off: .17 .7;
  --sky-far-mask: linear-gradient(to right, #000 12%, transparent 24% 68%, #000 80%);
}
html[data-theme="dark"] body.apricity-page .apricity-hero .sky {
  --sky-sun-paint:
    radial-gradient(circle 19px at 82% 176px, #F3F1EA 0 17px, rgba(243, 241, 234, 0) 19px),
    radial-gradient(circle 110px at 82% 176px, rgba(196, 210, 255, .22), rgba(196, 210, 255, 0));
}

/* The devices in the sky: the picture is already cut out, so its white
   card goes (in both themes) and a soft shadow of the sky's blue takes its
   place. Room under them for the clouds' foot to melt into the page. */
body.apricity-page .apricity-hero.has-sky {
  padding-bottom: clamp(70px, 8vw, 120px);
}
html body.apricity-page .apricity-hero.has-sky .apricity-devices {
  position: relative;
  border: 0;
  background: none;
  box-shadow: none;
  padding-top: 0;
}
body.apricity-page .apricity-hero.has-sky .apricity-devices img {
  filter: drop-shadow(0 34px 44px rgba(12, 64, 160, .2)) drop-shadow(0 6px 12px rgba(12, 64, 160, .1));
}
html[data-theme="dark"] body.apricity-page .apricity-hero.has-sky .apricity-devices img {
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .4)) drop-shadow(0 6px 12px rgba(0, 0, 0, .25));
}
/* The bank in front of their feet. */
body.apricity-page .apricity-hero .sky-front {
  z-index: 1;
  --sky-front-h: clamp(190px, 25vw, 340px);
  --sky-live-size: .9;
  --sky-live-foot: 110px;
}

/* Words on the sky: the headline white; the books keep the app icon's own
   ink lines, on their apricot shelf. */
body.apricity-page .apricity-hero.has-sky .apricity-hero__icon svg {
  filter: drop-shadow(0 8px 18px rgba(12, 64, 160, .18));
}
html body.apricity-page .apricity-hero.has-sky .apricity-store-badge:focus-visible {
  outline-color: #FFFFFF;
}

/* Apricity's pricing up to a tablet's width: the words fill the width, so
   its sun rises into the clear under the top bar. */
@media (max-width: 1000px) {
  body.apricity-pricing-page .apricity-pricing-hero .sky {
    --sky-sun: .86 104px 16px;
    --sky-sun-paint:
      radial-gradient(circle 30px at 86% 104px, #FFFFFB 0, #FFFEF6 10px, rgba(255, 251, 238, .9) 17px, rgba(255, 246, 226, 0) 30px),
      radial-gradient(circle 72px at 86% 104px, rgba(255, 245, 225, .7), rgba(255, 245, 225, 0)),
      radial-gradient(circle 180px at 86% 104px, rgba(255, 230, 190, .42), rgba(255, 230, 190, 0));
  }
}

@media (max-width: 720px) {
  /* On a phone the bars fill the top, so the sun sits lower, in the clear
     beside the books. */
  body.apricity-page .apricity-hero .sky {
    --sky-sun: .86 238px 20px;
    --sky-sun-paint:
      radial-gradient(circle 34px at 86% 238px, #FFFFFB 0, #FFFEF6 11px, rgba(255, 251, 238, .9) 19px, rgba(255, 246, 226, 0) 34px),
      radial-gradient(circle 80px at 86% 238px, rgba(255, 245, 225, .7), rgba(255, 245, 225, 0)),
      radial-gradient(circle 200px at 86% 238px, rgba(255, 230, 190, .42), rgba(255, 230, 190, 0));
    --sky-far-h: 0px;
  }
  html[data-theme="dark"] body.apricity-page .apricity-hero .sky {
    --sky-sun-paint:
      radial-gradient(circle 14px at 86% 238px, #F3F1EA 0 12px, rgba(243, 241, 234, 0) 14px),
      radial-gradient(circle 80px at 86% 238px, rgba(196, 210, 255, .22), rgba(196, 210, 255, 0));
  }
  body.apricity-page .apricity-hero .sky__far {
    display: none;
  }
}