/* Cairnley liquid glass — one material for every page (cairnley.com, the
   pro portal, pro pages, legal pages). Modeled on Apple's Liquid Glass:
   a translucent, slightly brightened fill that blurs AND saturates what's
   behind it; a bright specular rim that catches light on the top-left and
   bottom-right edges; a soft highlight that follows the pointer; and, in
   Chromium, a gentle lens refraction (liquid-glass.js adds .lg-refract to
   <html> only where backdrop-filter:url() actually renders).

   Usage: class="glass" on any surface. Optional modifiers:
     .glass.lg-strong   more opaque fill (menus, sheets, text-heavy cards)
     .glass.lg-lens     refracts the backdrop (hero-level pieces only)
     .glass.lg-tint     brand-green tinted glass (bands, featured cards)
   Page rules always win: everything positional here is in :where() (zero
   specificity), so a page's own position/radius/padding is untouched.

   Accessibility: prefers-reduced-transparency swaps glass for solid
   surfaces; prefers-reduced-motion turns off the moving highlight. */

:root {
  --lg-blur: 26px;
  --lg-sat: 185%;
  --lg-bright: 1.06;
  --lg-fill-top: rgba(255, 255, 255, .70);
  --lg-fill: rgba(255, 255, 255, .46);
  --lg-fill-strong: rgba(255, 255, 255, .82);
  --lg-rim: rgba(255, 255, 255, .95);
  --lg-rim-soft: rgba(255, 255, 255, .28);
  --lg-edge: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.45) 22%, rgba(255,255,255,0) 48%, rgba(255,255,255,.12) 70%, rgba(255,255,255,.75) 100%);
  --lg-spec: rgba(255, 255, 255, .85);
  --lg-shadow: 0 1px 1px rgba(10, 30, 20, .05), 0 10px 26px -12px rgba(10, 30, 20, .22), 0 34px 64px -40px rgba(10, 30, 20, .38);
  --lg-tint-fill-top: rgba(38, 104, 74, .78);
  --lg-tint-fill: rgba(14, 45, 33, .72);
  --lg-tint-ink: #f4efe4;
  --lg-solid: #fbf9f5;
  /* The ambient color field behind everything: Cairnley's own palette
     (rope green, tennis-ball lime, duck yellow, bone cream). */
  --lg-amb-1: rgba(120, 178, 140, .34);
  --lg-amb-2: rgba(214, 232, 96, .26);
  --lg-amb-3: rgba(255, 214, 110, .26);
  --lg-amb-4: rgba(206, 186, 156, .30);
}
@media not all /* dark mode off: light only */ {
  :root {
    --lg-bright: 1.1;
    --lg-fill-top: rgba(58, 66, 62, .52);
    --lg-fill: rgba(26, 31, 29, .40);
    --lg-fill-strong: rgba(30, 35, 33, .86);
    --lg-rim: rgba(255, 255, 255, .26);
    --lg-rim-soft: rgba(255, 255, 255, .06);
    --lg-edge: linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 24%, rgba(255,255,255,0) 50%, rgba(255,255,255,.04) 70%, rgba(255,255,255,.26) 100%);
    --lg-spec: rgba(255, 255, 255, .22);
    --lg-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 12px 28px -12px rgba(0, 0, 0, .55), 0 34px 64px -40px rgba(0, 0, 0, .7);
    --lg-tint-fill-top: rgba(40, 110, 78, .55);
    --lg-tint-fill: rgba(12, 40, 28, .62);
    --lg-solid: #1a1e1c;
    --lg-amb-1: rgba(46, 110, 78, .30);
    --lg-amb-2: rgba(150, 170, 40, .12);
    --lg-amb-3: rgba(190, 140, 40, .12);
    --lg-amb-4: rgba(90, 80, 64, .20);
  }
}

/* ---- Ambient field: glass needs color behind it to read as glass. ---- */
.lg-ambient {
  position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 12% 18%, var(--lg-amb-1), transparent 70%),
    radial-gradient(30vmax 26vmax at 88% 12%, var(--lg-amb-3), transparent 70%),
    radial-gradient(34vmax 30vmax at 78% 78%, var(--lg-amb-2), transparent 72%),
    radial-gradient(40vmax 30vmax at 18% 88%, var(--lg-amb-4), transparent 72%);
  filter: saturate(115%);
}

/* ---- The material ---- */
.glass {
  background: linear-gradient(180deg, var(--lg-fill-top), var(--lg-fill));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  border: 0;
  box-shadow:
    inset 0 1px 0 var(--lg-rim),
    inset 0 -1px 0 var(--lg-rim-soft),
    inset 0 0 0 .5px rgba(255, 255, 255, .22),
    var(--lg-shadow);
}
:where(.glass) { position: relative; isolation: isolate; }
.glass.lg-strong { background: linear-gradient(180deg, var(--lg-fill-strong), var(--lg-fill-strong)); }
.glass.lg-tint { background: linear-gradient(180deg, var(--lg-tint-fill-top), var(--lg-tint-fill)); color: var(--lg-tint-ink); }

/* Specular rim: a 1px light-catching edge, brightest top-left and
   bottom-right, the way light wraps a curved glass edge. */
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
  background: var(--lg-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Pointer highlight: a soft bloom of light where the finger or cursor is
   (position from liquid-glass.js; sits at the top edge by default). */
.glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(180px circle at var(--lg-x, 30%) var(--lg-y, -40%), var(--lg-spec), transparent 62%);
  opacity: .55; mix-blend-mode: soft-light; transition: opacity .35s ease;
}
.glass:hover::after, .glass:focus-within::after { opacity: 1; }
/* The rim and highlight sit at z-index -1 inside the glass's own stacking
   context (isolation: isolate): above its fill, below its content, so they
   never cover text or a page's own positioned children. */

/* Press: glass "gives" a little, springs back. */
:where(button, a).glass, .glass:where(button, a) { transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s ease; }
:where(button, a).glass:active { transform: scale(.97); }

/* Lens refraction (Chromium only; see liquid-glass.js). */
.lg-refract .glass.lg-lens {
  -webkit-backdrop-filter: url(#lg-refract) blur(calc(var(--lg-blur) * .7)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter: url(#lg-refract) blur(calc(var(--lg-blur) * .7)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
}

/* Liquid buttons: solid brand color with a glass gloss on top. */
.lg-button {
  background-image: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.04) 48%, rgba(0,0,0,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.18), 0 10px 22px -12px rgba(14,45,33,.8);
}

/* ---- Accessibility ---- */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass.lg-strong, .lg-refract .glass.lg-lens {
    background: var(--lg-solid); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .glass.lg-tint { background: #0e2d21; }
  .glass::after, .lg-ambient { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glass::after { transition: none; }
  :where(button, a).glass:active { transform: none; }
}