/* Liquid-glass treatment for nav, cards and hero.
   Additive only: linked AFTER site.css so these rules win on the elements they touch.
   CSS backdrop-filter (blur + saturate) only: no JS, no WebGL, no dependencies.
   Respects prefers-reduced-motion, prefers-contrast and forced-colors. */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

  .site-head{
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--paper) 62%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset,
                0 8px 24px -18px #000000a6;
  }

  .xcard, .mcard{
    background: color-mix(in srgb, var(--card) 58%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
    position: relative;
    box-shadow: var(--elev-1),
                inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  }
  /* a thin specular sheen along the top edge, like light catching a glass rim */
  .xcard::before, .mcard::before{
    content:"";
    position:absolute; inset:0 0 auto 0; height:1px;
    background: linear-gradient(90deg,
      transparent, color-mix(in srgb, #fff 55%, transparent), transparent);
    pointer-events:none;
  }

  .hero.landing-hero{
    position: relative;
    isolation: isolate;
  }
  .hero.landing-hero::before{
    content:"";
    position:absolute; z-index:-1; inset:-10% 0 auto 0; /* v4.3.1: no sideways bleed, so the page never scrolls sideways */ height:340px;
    background:
      radial-gradient(60% 100% at 20% 0%, color-mix(in srgb, var(--accent, #fc0) 16%, transparent), transparent 60%),
      radial-gradient(45% 90% at 85% 10%, color-mix(in srgb, var(--ser-1, #3987e5) 14%, transparent), transparent 65%);
    filter: blur(38px);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 40px;
    pointer-events:none;
  }
}

/* hover sheen: motion-gated */
@media (prefers-reduced-motion: no-preference){
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .xcard, .mcard{ transition: transform .18s ease, box-shadow .18s ease; }
    .xcard:hover, .mcard:hover{ transform: translateY(-1px); }
  }
}

/* accessibility: never let the glass reduce contrast when the platform asks for more,
   and never rely on it for information (nav/card text keeps its solid --ink colour) */
@media (prefers-contrast: more), (forced-colors: active){
  .site-head, .xcard, .mcard{
    background: var(--paper) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hero.landing-hero::before{ display:none; }
}

/* backdrop-filter unsupported: plain solid surfaces, unchanged from site.css */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head{ background: var(--paper); }
}