/* app/assets/stylesheets/components/glass.css
   ─────────────────────────────────────────────────────────────────────────────
   Translucent surfaces for the pages where the map watermark is the point: the
   public home page and the auth pages. Two treatments, and the difference
   matters:

     scrim  — a thin wash over the big open bands (hero, CTA). The map is meant
              to be read through these, so they stay light.
     panel  — a much denser wash under the cards that carry small copy, so the
              map is present in the seams and gutters but never competes with
              the text. A banknote puts its watermark in the margin, not under
              the serial number.

   No backdrop-filter anywhere. It is the obvious way to do this and it is the
   wrong one here: the backdrop moves, so every blurred element re-blurs every
   frame. Measured on this page, one blurred element takes 60fps to 30 and the
   full set takes it to 20 — on a desktop. See the note in tokens.css.

   Dense data surfaces — admin and dashboard cards, tables, charts — are
   deliberately not in this file. Small figures over a moving translucent layer
   is where this effect stops being elegant.

   Every selector is scoped to the page it applies to, and that is load-bearing
   rather than tidiness: `stylesheet_link_tag :app` emits one <link> per file in
   ALPHABETICAL order, so this file is served before home.css and
   layouts/auth.css whatever the @import list in application.css says. Scoping
   raises specificity enough to win, and states which pages are meant to be
   glass.

   Each rule declares an opaque background first, so a browser without
   color-mix() simply gets the solid theme.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Home: chrome ────────────────────────────────────────────────────────── */

.home-page-body .home-nav {
  background: var(--bg-chrome);
  background: var(--glass-chrome);
}

/* The hero is where the watermark earns its keep, so this is the thinnest wash
   on the page — just enough to hold the headline off the terrain. */
.home-page-body .home-hero {
  background: var(--bg-chrome);
  background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--bg-chrome) 20%, transparent) 0%,
                color-mix(in srgb, var(--bg-chrome)  8%, transparent) 55%,
                color-mix(in srgb, var(--bg-chrome) 16%, transparent) 100%);
}

.home-page-body .home-dateline {
  background: var(--bg-page);
  background: var(--glass-sunken);
}

/* ── Home: panels ────────────────────────────────────────────────────────── */

/* The 1px grid gaps show this container through as hairlines, so it has to go
   translucent too or the grid reads as a solid slab. */
.home-page-body .home-features,
.home-page-body .home-levels {
  background: var(--border-color);
  background: var(--glass-hairline);
}

.home-page-body .home-feat,
.home-page-body .home-level,
.home-page-body .home-quote {
  background: var(--bg-surface);
  background: var(--glass-panel);
}

/* ── Home: foot ──────────────────────────────────────────────────────────── */

.home-page-body .home-cta-strip {
  background: var(--bg-chrome);
  background: var(--glass-scrim);
}

.home-page-body .home-footer {
  background: var(--bg-chrome);
  background: var(--glass-chrome);
}

/* ── Auth ────────────────────────────────────────────────────────────────── */

.auth-body .auth-main,
.invitation-page .invitation-card {
  background: var(--bg-surface);
  background: var(--glass-panel);
}

.invitation-page .invitation-masthead {
  background: var(--bg-chrome);
  background: var(--glass-chrome);
}

/* Inputs stay solid. A text field is the one place a moving background behind
   the caret is actively unpleasant. */
.auth-body .field__input,
.auth-body .field__select,
.auth-body .field__textarea,
.invitation-page .field__input,
.invitation-page .field__select,
.invitation-page .field__textarea {
  background: var(--bg-sunken);
}