/* =========================================================
   LIQUID GLASS
   iOS-inspired glass effect
   ========================================================= */

.liquid-glass {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.06)
        );

    border: 1px solid rgba(255, 255, 255, 0.22);

    backdrop-filter:
        blur(24px)
        saturate(180%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(180%);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.35),
        inset 0 -1px 1px rgba(255, 255, 255, 0.08),
        0 10px 40px rgba(0, 0, 0, 0.12);

    color: #fff;

    isolation: isolate;
}


/* ---------------------------------------------------------
   LIGHT REFLECTION
   --------------------------------------------------------- */

.liquid-glass::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(255, 255, 255, 0.35),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.12),
            transparent 45%
        );

    opacity: 0.7;

    z-index: -1;
}


/* ---------------------------------------------------------
   INNER GLOW
   --------------------------------------------------------- */

.liquid-glass::after {
    content: "";

    position: absolute;
    inset: 1px;

    border-radius: inherit;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 8px 20px rgba(255, 255, 255, 0.05);

    z-index: -1;
}


/* ---------------------------------------------------------
   ROUNDED VARIANTS
   --------------------------------------------------------- */

.liquid-glass-sm {
    border-radius: 12px;
}

.liquid-glass-md {
    border-radius: 20px;
}

.liquid-glass-lg {
    border-radius: 28px;
}

.liquid-glass-xl {
    border-radius: 36px;
}

.liquid-glass-pill {
    border-radius: 999px;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.liquid-glass-hover {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.liquid-glass-hover:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.23),
            rgba(255, 255, 255, 0.08)
        );

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        0 14px 50px rgba(0, 0, 0, 0.18);
}


/* ---------------------------------------------------------
   DARK GLASS
   --------------------------------------------------------- */

.liquid-glass-dark {
    background:
        linear-gradient(
            135deg,
            rgba(20, 25, 32, 0.55),
            rgba(20, 25, 32, 0.25)
        );

    border-color: rgba(255, 255, 255, 0.12);
}


/* ---------------------------------------------------------
   LIGHT GLASS
   --------------------------------------------------------- */

.liquid-glass-light {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0.20)
        );

    color: #111;
}


/* ---------------------------------------------------------
   LIQUID / FLOATING EFFECT
   --------------------------------------------------------- */

.liquid-glass-float {
    animation: liquidFloat 6s ease-in-out infinite;
}

@keyframes liquidFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}


/* ---------------------------------------------------------
   REDUCE MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .liquid-glass-float {
        animation: none;
    }

    .liquid-glass-hover {
        transition: none;
    }
}