/* Liquid Glass Engine — CSS
 * Faithful adaptation of rdev/liquid-glass-react structure (MIT).
 * Layout: a single .lg-glass container holds a .lg-warp backdrop layer
 * (the only element that gets the SVG filter) and a content layer
 * (the user's original children, on top via z-index).
 */

:root {
  --lg-blur: 12px;
  --lg-saturation: 140%;
  --lg-displacement: 42;
  --lg-aberration: 1;
  --lg-elasticity: 0.15;
  --lg-radius: 24px;
  --lg-mx: 0;
  --lg-my: 0;
  --lg-fade: 0;
}

/* Root container — owns the rounded shape. */
.lg-root {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 24px 32px;
  border-radius: var(--lg-radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-out;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  isolation: isolate;
  /* rdev uses transform-origin via JS — keep neutral */
  transform-origin: center center;
}

.lg-root.lg-overlight {
  box-shadow: 0 16px 70px rgba(0, 0, 0, 0.75);
}

/* Backdrop layer — gets the SVG displacement filter.
 * Position absolute so the content (next sibling) sits visually above it. */
.lg-warp {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  will-change: transform, filter;
  /* Elasticity transform is applied via inline style by the engine */
  transform-origin: center center;
}

/* Content layer — the user's original markup stays here, above the warp.
 * z-index 1 + relative keeps it painted on top without breaking layout. */
.lg-content {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  color: #fff;
  font: 500 20px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.lg-root.lg-overlight .lg-content {
  text-shadow: none;
}

/* Border ring — rdev style: a single box-shadow inset ring.
 * Shimmer is applied via the overlay layer below. */
.lg-root::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.5),
    inset 0 1px 3px rgba(255, 255, 255, 0.25),
    inset 0 1px 4px rgba(0, 0, 0, 0.35);
  mix-blend-mode: screen;
  opacity: 0.2;
}

/* Border gradient overlay — adds the dynamic shimmer that follows the mouse.
 * Uses mask-composite: exclude to render only the 1.5px ring, not a filled rect. */
.lg-border-gradient {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  padding: 1.5px;
  background: linear-gradient(
    calc(135deg + var(--lg-mx) * 1.2),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, calc(0.32 + abs(var(--lg-mx)) * 0.008)) calc(33% + var(--lg-my) * 0.3),
    rgba(255, 255, 255, calc(0.6 + abs(var(--lg-mx)) * 0.012)) calc(66% + var(--lg-my) * 0.4),
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.5),
    inset 0 1px 3px rgba(255, 255, 255, 0.25),
    inset 0 1px 4px rgba(0, 0, 0, 0.35);
  mix-blend-mode: overlay;
}

/* Over-light darkening layer — used for light backgrounds */
.lg-over {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lg-over.bg { background: black; mix-blend-mode: normal; }
.lg-over.fx { background: black; mix-blend-mode: overlay; }
.lg-root.lg-overlight .lg-over.bg { opacity: 0.2; }
.lg-root.lg-overlight .lg-over.fx { opacity: 1; }

/* Interactive overlays (hover / active) — rdev style */
.lg-hover,
.lg-active,
.lg-active-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  mix-blend-mode: overlay;
}
.lg-hover {
  background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%);
}
.lg-active {
  background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 80%);
}
.lg-active-glow {
  background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.lg-root.lg-interactive:hover .lg-hover { opacity: 0.5; }
.lg-root.lg-interactive.lg-pressed .lg-active { opacity: 0.5; }
.lg-root.lg-interactive.lg-pressed .lg-active-glow { opacity: 0.5; }
.lg-root.lg-interactive:hover .lg-active-glow { opacity: 0.4; }
.lg-root.lg-interactive.lg-pressed .lg-active-glow { opacity: 0.8; }

/* Firefox fallback — no SVG filter on the warp layer.
 * The blur+saturate still gives a frosted-glass look. */
@-moz-document url-prefix() {
  .lg-warp { filter: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lg-root,
  .lg-warp,
  .lg-border-gradient,
  .lg-over,
  .lg-hover,
  .lg-active,
  .lg-active-glow { transition: none !important; animation: none !important; }
}

/* No backdrop-filter fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg-warp {
    background: rgba(255, 255, 255, 0.1);
  }
}