/* Home page preview (index-kit-preview.html): the Atmosphere layer of the Bespoke Glass stack runs on the kit.
   Weather is the kit's (GlassKit.weather on a window scene) and the drops are the kit's Wet Glass, refracting the real sky photo (data-gl-wet-source). */
.s-glass .lyr.l2 .hk-atm { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
#hkAtm.gl-scene { background: transparent !important; }
/* the kit's weather veil is made for a sky on its own; over this warm photo, keep it light so the picture stays warm */
#hkAtm::before { opacity: .25; }
/* The site's illustration icons used the class "gl", which is the kit's Glass class. In this page they are "glp"; same look. */
.bp .glp { fill: url(#bpG); stroke: #fff0c4; stroke-width: 1.6; filter: drop-shadow(0 0 5px rgba(246,200,90,.5)); animation: bpPulse 5s ease-in-out infinite; }
.gu-pre .bp .glp { transition: opacity .9s .5s; }
.gu-pre:not(.in) .bp .glp { opacity: 0; }
/* The header keeps its own press look on the kit's gel press (same rules as bbb-header-glass.css, kit class names) */
header .brand[data-bbb-polished] ~ :is(.nav-cta, .menu).gl-pol-gel-down {
  filter: brightness(1.2);
  box-shadow: inset 4px 0 10px rgba(var(--gel-pressure), .34), inset -4px 0 10px rgba(var(--gel-pressure), .26), inset 0 -3px 6px rgba(5, 8, 5, .40);
}
@media (prefers-reduced-motion: no-preference) {
  header .brand[data-bbb-polished] ~ :is(.nav-cta, .menu).gl-pol-gel-down { animation: header-gel-press .085s ease-out forwards !important; }
  header .brand[data-bbb-polished] ~ :is(.nav-cta, .menu).gl-pol-gel-up { animation: header-gel-release .23s cubic-bezier(.2, .75, .3, 1) both !important; }
}

/* Kit press on site buttons: squash from 60% down like the old .gel-down did.
   Loaded after the site CSS, so it wins over .gel-btn's 50% 100% only while a press runs. */
.gl-pol-bounce, .gl-pol-gel-down, .gl-pol-gel-up { transform-origin: 50% 60%; }