/* ==========================================================================
   Liquid Glass surfaces.
   A glass surface declares its look with four variables:
     --lg-tint   the tint painted over the refraction (keep it LOW)
     --lg-inset  inner rim light (warm bottom / cool left edges are deliberate)
     --lg-outer  drop shadows + the iOS 27 darkened outer edge
     --lg-sheen  specular highlights
   Without the engine (or with reduced transparency) the same variables build
   a frosted fallback, so the design never depends on JavaScript.
   ========================================================================== */

/* :where() keeps specificity at zero, so a component's own position
   (e.g. an absolutely placed stats strip) always wins */
:where([data-glass], .lg-ghost) {
  position: relative;
}
[data-glass], .lg-ghost {
  isolation: isolate;
  background: var(--lg-tint);
  box-shadow: var(--lg-inset), var(--lg-outer);
  -webkit-backdrop-filter: var(--lg-frost, blur(24px) saturate(190%) brightness(1.04));
  backdrop-filter: var(--lg-frost, blur(24px) saturate(190%) brightness(1.04));
}
[data-glass]::after, .lg-ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--lg-sheen);
  z-index: -1;
}

/* live refraction: the layer carries tint, sheen and rim above the bent copy */
.lg-live {
  background: transparent !important;
  box-shadow: var(--lg-outer) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.lg-live::after { display: none; }

.lg-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  /* Safari clips transformed/filtered children to the radius only with this */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
}
.lg-refract {
  position: absolute;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
}
.lg-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: paint;
  /* the lens runs on this box; its own layer keeps Safari's result intact */
  will-change: transform;
}
.lg-mirror {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.lg-tint, .lg-sheen, .lg-rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.lg-tint { background: var(--lg-tint); }
.lg-sheen {
  --lg-sx: 0;
  --lg-sy: 0;
  background: var(--lg-sheen);
  transform: translate3d(calc(var(--lg-sx) * 3%), calc(var(--lg-sy) * 4%), 0);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.lg-rim { box-shadow: var(--lg-inset); }

/* the copy never animates, never reveals late, never takes input */
.lg-clone, .lg-clone * {
  will-change: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform-style: flat !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
  caret-color: transparent !important;
}
.lg-clone [data-rise], .lg-clone .rise { opacity: 1 !important; transform: none !important; }
.lg-clone [data-reveal] > span { opacity: 1 !important; max-width: none !important; }
:where(.lg-clone .lg-h1) { font-weight: 500; }

@media (prefers-reduced-transparency: reduce) {
  [data-glass] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--lg-solid, rgba(40,42,45,.96)) !important;
  }
  [data-glass]::after, .lg-ghost::after { display: none; }
}

/* see isMacSafari() in glass.js: keeps Safari's scrolling in step with the glass */
.lg-scroll-sync {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
  background-attachment: fixed;
}