/* =========================================================
   XevoNet — Liquid Glass material
   Inspired by iOS Liquid Glass (iOS 26 / visionOS).
   A real-feeling translucent material:
     - backdrop blur + saturation lift
     - hairline edge highlight (top-left bright, bottom-right dark)
     - specular sheen that follows the cursor (set via JS — CSS vars)
     - subtle inner shadow for depth

   Usage:
     <div class="lg" data-lg-glow>
       <div class="lg-body">…content…</div>
     </div>

   For mouse-tracked sheen, leave [data-lg-glow] and load the
   liquid-glass.js helper.
   ========================================================= */

.lg {
    --lg-x: 50%;
    --lg-y: 50%;
    --lg-bend: 12px;

    position: relative;
    background: var(--lg-tint, rgba(255, 255, 255, 0.55));
    border-radius: var(--lg-radius, 22px);
    border: 1px solid var(--lg-edge, rgba(255, 255, 255, 0.55));
    box-shadow:
        inset 0 1px 0 var(--lg-edge-inner, rgba(255, 255, 255, 0.85)),
        inset 0 -1px 0 var(--lg-edge-outer, rgba(0, 0, 0, 0.06)),
        var(--lg-shadow, 0 20px 40px -12px rgba(0, 0, 0, 0.15));
    backdrop-filter: blur(var(--lg-blur, 24px)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--lg-blur, 24px)) saturate(180%);
    isolation: isolate;
    overflow: hidden;
}

/* Specular highlight (the "glassy" gleam) */
.lg::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(
            220px circle at var(--lg-x) var(--lg-y),
            var(--lg-spec, rgba(255, 255, 255, 0.55)) 0%,
            transparent 60%
        );
    pointer-events: none;
    opacity: 0.9;
    mix-blend-mode: overlay;
    z-index: 0;
    transition: opacity 0.6s ease;
}

/* Edge refraction (subtle gradient on the bottom) */
.lg::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.04) 100%
        );
    pointer-events: none;
    z-index: 0;
}

.lg-body {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* Larger blur variant for bigger surfaces */
.lg.lg-xl { --lg-blur: 36px; --lg-radius: 32px; }
.lg.lg-sm { --lg-blur: 14px; --lg-radius: 14px; }

/* =========================================================
   Stand-alone liquid-glow — attach to any container with
   [data-lg-glow] (e.g. .m-tile) without forcing the whole
   liquid-glass surface treatment.  A soft cursor-tracked
   sheen drifts inside the element.
   ========================================================= */
[data-lg-glow]:not(.lg) {
    --lg-x: 50%;
    --lg-y: 50%;
    position: relative;
    isolation: isolate;
}
[data-lg-glow]:not(.lg)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(
            260px circle at var(--lg-x) var(--lg-y),
            rgba(124, 92, 255, 0.10) 0%,
            transparent 60%
        );
    opacity: 0;
    transition: opacity 0.4s ease;
    /* Negative z-index so the pseudo-element paints behind static
       text children (which use painting order, not z-index) and
       below absolute children with z-index: -1 like .m-tile-viz. */
    z-index: -2;
}
[data-lg-glow]:not(.lg):hover::before { opacity: 1; }

/* =========================================================
   Liquid Blob — animated background element
   Use for hero scenes / decorative depth.
   ========================================================= */

.liquid-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px) saturate(140%);
    opacity: 0.7;
    pointer-events: none;
    will-change: transform, border-radius;
    animation: blobMorph 18s ease-in-out infinite;
}
@keyframes blobMorph {
      0% { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; transform: translate(0,0) scale(1); }
     33% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; transform: translate(20px,-10px) scale(1.06); }
     66% { border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%; transform: translate(-15px,15px) scale(0.96); }
    100% { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; transform: translate(0,0) scale(1); }
}

/* =========================================================
   Mouse-tracked liquid sheen for hero stages
   (consumers set --sheen-x / --sheen-y via JS)
   ========================================================= */

.liquid-sheen {
    --sheen-x: 50%;
    --sheen-y: 50%;
    --sheen-color: rgba(255, 255, 255, 0.45);

    position: relative;
    isolation: isolate;
}
.liquid-sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            420px circle at var(--sheen-x) var(--sheen-y),
            var(--sheen-color) 0%,
            transparent 70%
        );
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.9;
    border-radius: inherit;
    z-index: 0;
    transition: opacity 0.4s ease;
}
.liquid-sheen > * { position: relative; z-index: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .liquid-blob { animation: none; }
}