/* React Bits GlassSurface + SpecularButton, adapted for the static Atlas site.
   Official sources: components/GlassSurface.css, components/SpecularButton.css */

.atlas-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 8px 32px rgba(31, 38, 135, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16);
}
.atlas-glass.header-bizcard,
.header-bizcard.atlas-glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
}

.atlas-specular {
  --atlas-spec-angle: 2.4rad;
  --atlas-spec-bright: 0.72;
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.atlas-specular::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  z-index: 3;
  background:
    conic-gradient(
      from var(--atlas-spec-angle),
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, 0) 292deg,
      rgba(82, 82, 82, 0.55) 318deg,
      rgba(255, 255, 255, 0.95) 334deg,
      rgba(82, 82, 82, 0.35) 348deg,
      rgba(255, 255, 255, 0) 360deg
    );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--atlas-spec-bright);
}

.btn.atlas-glass,
.pill.atlas-glass,
.nav-left > a.atlas-glass,
.nav-dd-btn.atlas-glass,
.bizcard-cta.atlas-glass {
  background: rgba(255, 255, 255, 0.14);
}

.hero-bg video.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-bg .hero-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero.has-video .hero-still {
  opacity: 0;
}