/* GLOBE-THROUGH (home only; big screens). The globe stays behind the whole page. Sections are transparent; cards, frames and
   the closing band are frosted glass, so the globe shows through while the text on them stays crisp.
   To undo: remove the <link> to this file, the "globe-through" class on <body>, and the `keys` option in index.html's module script. */
@media (min-width:1100px){
  body.globe-through .section,
  body.globe-through .section.alt,
  body.globe-through .section.how{background:transparent}
  body.globe-through .section-head h2,
  body.globe-through .section-head .lead{text-shadow:0 0 18px var(--bg),0 0 8px var(--bg)}
  body.globe-through .card,
  body.globe-through .frame,
  body.globe-through .panel,
  body.globe-through .cta-band{
    background:color-mix(in srgb,var(--surface) 62%,transparent);
    -webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1)}
  body.globe-through .cta-band{background:color-mix(in srgb,var(--bg-alt) 62%,transparent)}
  body.globe-through .queue-card,body.globe-through .pv-frame .frame{background:color-mix(in srgb,var(--surface) 78%,transparent)}
}

/* GLOBE-THROUGH: the finale. Near the end of the page the globe flies into the footer logo; the canvas rides above the footer meanwhile. */
@media (min-width:1100px){
  body.globe-merging #gl{z-index:5}
  .site-footer .logo-mark{transition:box-shadow .6s ease,background-color .6s ease}
  .site-footer .logo-mark.merged{background:color-mix(in srgb,var(--teal) 14%,transparent);box-shadow:0 0 0 6px color-mix(in srgb,var(--teal) 16%,transparent),0 0 26px color-mix(in srgb,var(--teal) 55%,transparent)}
}
.cta-band{padding-bottom:88px}