/* One stationary scene, including the area behind Safari's browser controls.
   Safari samples viewport-sized fixed elements as header/footer chrome and
   extends only their background-color. An oversized scene is not a bar.
   Keep the artwork in its original 100lvh coordinate space inside that plane. */
html:has(.kk-release),
body:has(.kk-release) {
  background: #14101f !important;
}
.kk-release > .volt-learning-backdrop--home {
  inset: -12vh 0 auto !important;
  inset: -12lvh 0 auto !important;
  height: 124vh;
  height: 124lvh;
  background-color: #14101f;
}
.kk-release > .volt-learning-backdrop--home > .volt-learning-backdrop__art {
  top: 12vh;
  top: 12lvh;
  bottom: auto;
  height: 100vh;
  height: 100lvh;
}
.kk-release > .volt-learning-backdrop--home > .volt-learning-backdrop__light {
  --volt-scene-offset: 12vh;
  --volt-scene-offset: 12lvh;
  background:
    radial-gradient(ellipse 60vw 900px at -10% calc(250px + var(--volt-scene-offset)), #e8a95c12, transparent 85%),
    radial-gradient(ellipse 55vw 1100px at 110% calc(1900px + var(--volt-scene-offset)), #b294e517, transparent 85%),
    radial-gradient(ellipse 70vw 1100px at -5% calc(4300px + var(--volt-scene-offset)), #c78e5310, transparent 85%),
    radial-gradient(ellipse 60vw 1200px at 105% calc(6900px + var(--volt-scene-offset)), #b294e512, transparent 85%),
    linear-gradient(110deg, #181320, #14101f 45%, #181222);
}
@media (max-width: 760px) {
  .kk-release > .volt-learning-backdrop--home > .volt-learning-backdrop__light {
    background: radial-gradient(ellipse 110% 1000px at 100% calc(500px + var(--volt-scene-offset)), #aa80ca12, transparent 85%),
      radial-gradient(ellipse 100% 1200px at 0% calc(2800px + var(--volt-scene-offset)), #d39d5211, transparent 85%), #14101f;
  }
  .kk-release footer.wrap.footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* On touch devices Safari clips composited fixed layers while its toolbar
   changes size. Paint the continuous colour on the document itself. This
   horizontal wash is identical at every vertical position, so scrolling and
   browser-controls animation cannot expose a differently coloured strip.
   Only the transparent electrical artwork remains on the fixed plane. */
@media (max-width: 1100px), (any-pointer: coarse) {
  html:has(.volt-learning-backdrop--home),
  body:has(.volt-learning-backdrop--home),
  .kk-release:has(> .volt-learning-backdrop--home) {
    background: linear-gradient(90deg, #181320 0%, #17121f 48%, #1c1728 100%) !important;
  }
  .kk-release > .volt-learning-backdrop--home {
    background: transparent;
    opacity: 1;
  }
  .kk-release > .volt-learning-backdrop--home > .volt-learning-backdrop__light {
    display: none;
  }
}