/* FB Atlas shared glass system.
   Source of truth for UI Kit, dashboard, and upcoming web projects.
   Include after the project's local stylesheet:
   https://fb-atlas-ui-kit.web.app/atlas-glass.css */

:root {
  --atlas-glass-bg: transparent;
  --atlas-glass-bg-overlay: transparent;
  --atlas-glass-text: rgba(0, 0, 0, 0.94);
  --atlas-glass-muted: rgba(0, 0, 0, 0.66);
  --atlas-glass-blur: blur(15px) saturate(140%) brightness(1.08);
  --atlas-glass-shadow: inset 6px 6px 2px -5px rgba(255, 255, 255, 0.42),
                        inset -6px -6px 3px -4.5px rgba(255, 255, 255, 0.28),
                        inset 0 1px 0 rgba(255, 255, 255, 0.28),
                        0 10px 34px -19px rgba(0, 0, 0, 0.10);
  --atlas-glass-shadow-lift: inset 6px 6px 2px -5px rgba(255, 255, 255, 0.46),
                             inset -6px -6px 3px -4.5px rgba(255, 255, 255, 0.32),
                             inset 0 1px 0 rgba(255, 255, 255, 0.30),
                             0 14px 38px -18px rgba(0, 0, 0, 0.13);
  --atlas-glass-radius: 30px;
  --atlas-glass-pill-radius: 999px;
  --atlas-glass-border: 0 solid transparent;
  --atlas-glass-bg-blend: soft-light;
  --atlas-glass-highlight-blend: screen;
  --atlas-glass-hue: hsla(205, 90%, 72%, 0.13);

  /* Compatibility aliases for existing FB Atlas projects. */
  --glass-bg: var(--atlas-glass-bg);
  --glass-bg-overlay: var(--atlas-glass-bg-overlay);
  --glass-blur: var(--atlas-glass-blur);
  --glass-shadow: var(--atlas-glass-shadow);
  --glass-shadow-lift: var(--atlas-glass-shadow-lift);
  --glass-border: var(--atlas-glass-border);
  --glass-radius: var(--atlas-glass-radius);
  --glass-bg-blend: var(--atlas-glass-bg-blend);
  --glass-highlight-blend: var(--atlas-glass-highlight-blend);
  --glass-hue: var(--atlas-glass-hue);
}

:root[data-glass-mode="dark"],
[data-theme="midnight"],
[data-theme="dark"] {
  --atlas-glass-bg: rgba(0, 0, 0, 0.20);
  --atlas-glass-bg-overlay: rgba(0, 0, 0, 0.20);
  --atlas-glass-text: rgba(255, 255, 255, 0.96);
  --atlas-glass-muted: rgba(255, 255, 255, 0.72);
  --atlas-glass-highlight-blend: soft-light;
}

:where(
  .atlas-glass,
  .atlas-glass-squircle,
  .atlas-glass-card,
  .atlas-glass-circle,
  .atlas-glass-pill,
  .atlas-glass-button,
  .atlas-glass-nav,
  .atlas-glass-sample
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    var(--atlas-glass-bg);
  border: var(--atlas-glass-border);
  color: inherit;
  -webkit-backdrop-filter: var(--atlas-glass-blur);
  backdrop-filter: var(--atlas-glass-blur);
  box-shadow: var(--atlas-glass-shadow);
}

:where(
  .atlas-glass,
  .atlas-glass-squircle,
  .atlas-glass-card,
  .atlas-glass-circle,
  .atlas-glass-pill,
  .atlas-glass-button,
  .atlas-glass-nav,
  .atlas-glass-sample
)::before,
:where(
  .atlas-glass,
  .atlas-glass-squircle,
  .atlas-glass-card,
  .atlas-glass-circle,
  .atlas-glass-pill,
  .atlas-glass-button,
  .atlas-glass-nav,
  .atlas-glass-sample
)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

:where(
  .atlas-glass,
  .atlas-glass-squircle,
  .atlas-glass-card,
  .atlas-glass-circle,
  .atlas-glass-pill,
  .atlas-glass-button,
  .atlas-glass-nav,
  .atlas-glass-sample
)::before {
  background:
    radial-gradient(circle at 0 0, var(--atlas-glass-hue), transparent 8%),
    linear-gradient(135deg, var(--atlas-glass-bg-overlay), transparent 62%);
  mix-blend-mode: var(--atlas-glass-bg-blend);
}

:where(
  .atlas-glass,
  .atlas-glass-squircle,
  .atlas-glass-card,
  .atlas-glass-circle,
  .atlas-glass-pill,
  .atlas-glass-button,
  .atlas-glass-nav,
  .atlas-glass-sample
)::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 30%);
  mix-blend-mode: var(--atlas-glass-highlight-blend);
}

:where(
  .atlas-glass,
  .atlas-glass-squircle,
  .atlas-glass-card,
  .atlas-glass-circle,
  .atlas-glass-pill,
  .atlas-glass-button,
  .atlas-glass-nav,
  .atlas-glass-sample
) > * {
  position: relative;
  z-index: 1;
}

.atlas-glass-squircle,
.atlas-glass-card,
.atlas-glass-sample.sample-squircle {
  border-radius: var(--atlas-glass-radius);
}

.atlas-glass-circle,
.atlas-glass-sample.sample-circle {
  border-radius: 50%;
}

.atlas-glass-pill,
.atlas-glass-nav {
  border-radius: var(--atlas-glass-pill-radius);
}

.atlas-glass-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.atlas-glass-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.atlas-glass-sample {
  display: block;
}

.sample-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 5vw, 56px);
  flex-wrap: wrap;
}

.sample-squircle {
  width: min(320px, calc(100vw - 48px));
  aspect-ratio: 1;
}

.sample-circle {
  width: min(220px, calc(100vw - 96px));
  aspect-ratio: 1;
}

.glass-only-body {
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.14)),
    url("liquid-background.jpg") center / cover fixed no-repeat;
}

.glass-only-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

/* Strong project-facing selectors. These intentionally beat local component
   classes such as .card or .button when a project opts into an atlas glass class. */
.atlas-glass,
.atlas-glass-squircle,
.atlas-glass-card,
.atlas-glass-circle,
.atlas-glass-pill,
.atlas-glass-button,
.atlas-glass-nav,
.atlas-glass-sample {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    var(--atlas-glass-bg);
  border: var(--atlas-glass-border);
  -webkit-backdrop-filter: var(--atlas-glass-blur);
  backdrop-filter: var(--atlas-glass-blur);
  box-shadow: var(--atlas-glass-shadow);
}

.atlas-glass::before,
.atlas-glass-squircle::before,
.atlas-glass-card::before,
.atlas-glass-circle::before,
.atlas-glass-pill::before,
.atlas-glass-button::before,
.atlas-glass-nav::before,
.atlas-glass-sample::before,
.atlas-glass::after,
.atlas-glass-squircle::after,
.atlas-glass-card::after,
.atlas-glass-circle::after,
.atlas-glass-pill::after,
.atlas-glass-button::after,
.atlas-glass-nav::after,
.atlas-glass-sample::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.atlas-glass::before,
.atlas-glass-squircle::before,
.atlas-glass-card::before,
.atlas-glass-circle::before,
.atlas-glass-pill::before,
.atlas-glass-button::before,
.atlas-glass-nav::before,
.atlas-glass-sample::before {
  background:
    radial-gradient(circle at 0 0, var(--atlas-glass-hue), transparent 8%),
    linear-gradient(135deg, var(--atlas-glass-bg-overlay), transparent 62%);
  mix-blend-mode: var(--atlas-glass-bg-blend);
}

.atlas-glass::after,
.atlas-glass-squircle::after,
.atlas-glass-card::after,
.atlas-glass-circle::after,
.atlas-glass-pill::after,
.atlas-glass-button::after,
.atlas-glass-nav::after,
.atlas-glass-sample::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 30%);
  mix-blend-mode: var(--atlas-glass-highlight-blend);
}

.atlas-glass > *,
.atlas-glass-squircle > *,
.atlas-glass-card > *,
.atlas-glass-circle > *,
.atlas-glass-pill > *,
.atlas-glass-button > *,
.atlas-glass-nav > *,
.atlas-glass-sample > * {
  position: relative;
  z-index: 1;
}

.atlas-glass > .atlas-glass-fill,
.atlas-glass-squircle > .atlas-glass-fill,
.atlas-glass-card > .atlas-glass-fill,
.atlas-glass-circle > .atlas-glass-fill,
.atlas-glass-pill > .atlas-glass-fill,
.atlas-glass-button > .atlas-glass-fill,
.atlas-glass-nav > .atlas-glass-fill,
.atlas-glass-sample > .atlas-glass-fill,
.atlas-glass > .cz,
.atlas-glass-squircle > .cz,
.atlas-glass-card > .cz {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.atlas-glass-squircle,
.atlas-glass-card,
.atlas-glass-sample.sample-squircle {
  border-radius: var(--atlas-glass-radius);
}

.atlas-glass-circle,
.atlas-glass-sample.sample-circle {
  border-radius: 50%;
}

.atlas-glass-pill,
.atlas-glass-nav {
  border-radius: var(--atlas-glass-pill-radius);
}

@media (max-width: 520px) {
  .sample-row {
    gap: 28px;
  }

  .sample-squircle {
    width: min(260px, calc(100vw - 48px));
  }

  .sample-circle {
    width: min(180px, calc(100vw - 96px));
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :where(
    .atlas-glass,
    .atlas-glass-squircle,
    .atlas-glass-card,
    .atlas-glass-circle,
    .atlas-glass-pill,
    .atlas-glass-button,
    .atlas-glass-nav,
    .atlas-glass-sample
  ) {
    background: rgba(255, 255, 255, 0.72);
  }

  :root[data-glass-mode="dark"] :where(
    .atlas-glass,
    .atlas-glass-squircle,
    .atlas-glass-card,
    .atlas-glass-circle,
    .atlas-glass-pill,
    .atlas-glass-button,
    .atlas-glass-nav,
    .atlas-glass-sample
  ),
  [data-theme="midnight"] :where(
    .atlas-glass,
    .atlas-glass-squircle,
    .atlas-glass-card,
    .atlas-glass-circle,
    .atlas-glass-pill,
    .atlas-glass-button,
    .atlas-glass-nav,
    .atlas-glass-sample
  ),
  [data-theme="dark"] :where(
    .atlas-glass,
    .atlas-glass-squircle,
    .atlas-glass-card,
    .atlas-glass-circle,
    .atlas-glass-pill,
    .atlas-glass-button,
    .atlas-glass-nav,
    .atlas-glass-sample
  ) {
    background: rgba(0, 0, 0, 0.72);
  }
}