/* =============================================================================
 * Rahkar — STANDARD glassmorphism (iOS-style frosted glass).
 *
 * The ONE place the glass look is defined for the whole theme. Header, mobile
 * bottom-nav, modals, sheets, etc. all opt in with the `.rh-glass` class (or by
 * reading the --rh-glass-* tokens). Change it here once → every glass surface
 * updates. Loaded globally (theme.yml assets.css.all).
 *
 * Perf note: backdrop-filter blur is GPU work proportional to the blurred area
 * AND how often it repaints. It's cheap on a static surface, but expensive over
 * a *playing video* — so surfaces that sit over the homepage hero video keep the
 * blur light until the video scrolls away (see header-glass.css / home-hero.css).
 * ========================================================================== */

:root {
  /* Light frosted glass (default — dark text stays readable over it). */
  --rh-glass-bg:        rgba(255, 255, 255, 0.65);
  --rh-glass-bg-strong: rgba(255, 255, 255, 0.78);
  --rh-glass-blur:      20px;
  --rh-glass-blur-soft: 14px;
  --rh-glass-saturate:  180%;
  --rh-glass-border:    rgba(255, 255, 255, 0.30);
  --rh-glass-shadow:    0 8px 30px rgba(0, 0, 0, 0.08);
}

/* The reusable surface. Apply to any element that should be frosted glass. */
.rh-glass {
  background: var(--rh-glass-bg);
  -webkit-backdrop-filter: blur(var(--rh-glass-blur)) saturate(var(--rh-glass-saturate));
  backdrop-filter: blur(var(--rh-glass-blur)) saturate(var(--rh-glass-saturate));
  border: 1px solid var(--rh-glass-border);
  box-shadow: var(--rh-glass-shadow);
}

/* A stronger, more opaque variant (e.g. once scrolled past a hero). */
.rh-glass--strong {
  background: var(--rh-glass-bg-strong);
}

/* Graceful fallback where backdrop-filter is unsupported: a near-opaque panel
 * so text never sits on bare content/video. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rh-glass        { background: rgba(255, 255, 255, 0.94); }
  .rh-glass--strong{ background: #fff; }
}