/* ============================================================
   Capital Mortgages — liquid glass material + dark background system
   Loaded site-wide after shared.css.

   Glass material follows the @samasante/liquid-glass recipe:
   a light frost + a soft BRIGHT edge (top highlight + hairline, never a
   dark bevel) + an outer drop shadow. .glass-lens adds true refraction in
   Chrome/Edge via an SVG displacement map (assets/lens-map.png); Safari and
   Firefox fall back to frost + tint + edge, which still reads as glass.
   ============================================================ */

/* ---------- liquid glass material ---------- */
.glass {
  position: relative;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  border-radius: var(--radius-lg);
  /* soft bright edge — top highlight + faint all-round hairline, NO dark bevel */
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 0 0 1px var(--glass-edge),
    0 24px 56px -28px rgba(0, 0, 0, 0.5);
  isolation: isolate;
}
/* gentle directional sheen pooling toward the top-left light */
.glass::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0) 42%);
}
.glass > * { position: relative; z-index: 1; }

/* light liquid glass — the whole theme is light, so every glass surface frosts
   the (light, gently-tinted) content behind it with a bright top edge. */
.glass, .glass-light, .glass-dark {
  --glass-tint: rgba(255, 253, 249, 0.32);
  --glass-edge: rgba(29, 27, 23, 0.09);
  --glass-hi: rgba(255, 255, 255, 0.72);
  --glass-blur: 13px;
  color: var(--ink);
}

/* ---------- true refraction layer (Chromium) ----------
   js/site.js bakes the Snell's-law squircle-dome physics into a per-size
   displacement map and mounts a .cm-lens-refract layer on the main panels
   (.glass + .card), giving them a backdrop that genuinely bends at the rim.
   The layer sits at z-index:-1 — above the panel's own frost background but
   below all content — so text stays put and fully legible. The class is added
   by JS only when the browser can actually run the filter; Firefox/Safari and
   any unsupported context never get .cm-lens, so they keep the full frost. */
.cm-lens { position: relative; isolation: isolate; }
.cm-lens > .cm-lens-refract {
  position: absolute; inset: 0; border-radius: inherit;
  z-index: -1; pointer-events: none;
  /* backdrop-filter (blur + url(#cm-lens-…)) is set inline per panel by site.js */
}
/* With real refraction carrying the "glass", thin the flat frost so the centre
   reads clear (like the reference) instead of a heavy blur. Falls back to the
   full frost automatically anywhere .cm-lens isn't applied. */
.glass.cm-lens { --glass-blur: 4px; --glass-tint: rgba(255, 253, 249, 0.20); }
.card.cm-lens {
  background: color-mix(in oklab, var(--surface), transparent 52%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  backdrop-filter: blur(6px) saturate(150%);
}

/* ---------- feature sections — light, gently tinted, glassy ----------
   `.darkbg` is kept as the class name (used across the markup) but now styles a
   LIGHT glass section: the former dark-context tokens are remapped to ink, so all
   the per-section text rules flip to dark automatically, and the section gets a
   soft tinted base with colourful glows for the glass cards to frost against. */
.darkbg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --on-dark: var(--ink);
  --on-dark-soft: var(--ink-soft);
  --on-dark-faint: var(--ink-faint);
  --dark-line: var(--line);
  --dark-line-soft: var(--line-soft);
  --sec-base: color-mix(in oklab, var(--accent), var(--surface) 92%);
  --darkbg-fade: var(--sec-base);
  background: var(--sec-base);
  color: var(--ink);
}
.darkbg > * { position: relative; z-index: 2; }
/* soft colour glows; the first layer paints the base colour back over the top and
   bottom edges so stacked sections meet on identical colour (no seam). */
.darkbg::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--darkbg-fade) 0%, transparent 16%, transparent 84%, var(--darkbg-fade) 100%),
    radial-gradient(46% 52% at 18% 36%, color-mix(in oklab, var(--red), transparent 80%), transparent 70%),
    radial-gradient(50% 56% at 86% 46%, color-mix(in oklab, color-mix(in oklab, var(--accent), #ffffff 28%), transparent 80%), transparent 72%),
    radial-gradient(56% 54% at 60% 74%, color-mix(in oklab, var(--accent), transparent 82%), transparent 74%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
/* whisper-faint architectural grid */
.darkbg::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(29, 27, 23, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 27, 23, 0.028) 1px, transparent 1px);
  background-size: 92px 92px, 92px 92px;
}

/* banker-to-broker page is light + glassy too */
body.bb-page {
  background: var(--bg); color: var(--ink);
  --on-dark: var(--ink);
  --on-dark-soft: var(--ink-soft);
  --on-dark-faint: var(--ink-faint);
  --dark-line: var(--line);
  --dark-line-soft: var(--line-soft);
}

/* ---------- aurora hero backdrop (soft colour orbs behind the glass) ---------- */
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(60px); opacity: 0.32; will-change: transform;
}
/* site.js sets .aurora-idle once the hero has scrolled away. Stopping the
   keyframes and dropping will-change releases the promoted layer — a 52vw
   blurred orb is a large chunk of compositor memory to hold for something
   nobody can see. */
.aurora.aurora-idle span { animation-play-state: paused; will-change: auto; }
.aurora .a1 { width: 46vw; height: 46vw; left: -8vw;  top: -14vw;
  background: radial-gradient(circle at 30% 30%, var(--red-bright), var(--red) 58%, transparent 72%);
  animation: cmFloat1 24s ease-in-out infinite; }
.aurora .a2 { width: 40vw; height: 40vw; right: -10vw; top: -6vw;
  background: radial-gradient(circle at 50% 50%, #57b6cf, #2f8aa3 62%, transparent 74%);
  animation: cmFloat2 30s ease-in-out infinite; }
.aurora .a3 { width: 52vw; height: 52vw; right: 4vw; bottom: -26vw;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent), #5cc 40%), transparent 70%);
  opacity: 0.24; animation: cmFloat3 34s ease-in-out infinite; }

@keyframes cmFloat1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(6%, 8%); } }
@keyframes cmFloat2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-7%, 6%); } }
@keyframes cmFloat3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4%,-6%) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .darkbg::before, .aurora span { animation: none !important; }
}

/* the hidden SVG filter defs are injected once by site.js */
.cm-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }