/* ==========================================================================
   Anmol Digital — Premium Liquid Light Flow V1
   Subtle site-wide water/light movement with no external dependency.
   ========================================================================== */

:root {
    --liquid-flow-opacity: .18;
    --liquid-flow-blur: 72px;
}

/*
 * The flow layer sits above public surfaces but never receives interaction.
 * Soft-light blending keeps text, forms and buttons readable.
 */
.site-liquid-flow {
    position: fixed;
    inset: 0;
    z-index: 9998;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    opacity: var(--liquid-flow-opacity);
    mix-blend-mode: soft-light;
    isolation: isolate;
    contain: strict;
}

.site-liquid-flow__orb,
.site-liquid-flow__caustics,
.site-liquid-flow__shine {
    position: absolute;
    display: block;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Large liquid-light fields */

.site-liquid-flow__orb {
    width: 72vw;
    height: 72vw;
    min-width: 760px;
    min-height: 760px;
    border-radius: 42% 58% 64% 36% / 47% 36% 64% 53%;
    filter: blur(var(--liquid-flow-blur));
    transform: translate3d(0, 0, 0);
}

.site-liquid-flow__orb--one {
    top: -34vw;
    left: -24vw;
    background:
        radial-gradient(
            circle at 38% 38%,
            rgba(255, 255, 255, .92) 0%,
            rgba(185, 220, 235, .45) 22%,
            rgba(255, 255, 255, .12) 48%,
            transparent 70%
        );
    animation:
        liquid-flow-one 28s
        cubic-bezier(.45, .05, .55, .95)
        infinite alternate;
}

.site-liquid-flow__orb--two {
    top: 12vh;
    right: -34vw;
    background:
        radial-gradient(
            circle at 42% 44%,
            rgba(255, 255, 255, .76) 0%,
            rgba(155, 198, 220, .34) 28%,
            rgba(255, 255, 255, .10) 52%,
            transparent 72%
        );
    animation:
        liquid-flow-two 34s
        cubic-bezier(.42, 0, .58, 1)
        infinite alternate;
}

.site-liquid-flow__orb--three {
    bottom: -42vw;
    left: 18vw;
    background:
        radial-gradient(
            circle at 46% 38%,
            rgba(255, 255, 255, .68) 0%,
            rgba(180, 214, 230, .30) 26%,
            rgba(255, 255, 255, .08) 52%,
            transparent 72%
        );
    animation:
        liquid-flow-three 38s
        cubic-bezier(.4, 0, .2, 1)
        infinite alternate;
}

/* Fine moving water-caustic texture */

.site-liquid-flow__caustics {
    inset: -18%;
    opacity: .16;
    background:
        repeating-radial-gradient(
            ellipse at 22% 36%,
            transparent 0 28px,
            rgba(255, 255, 255, .34) 31px 33px,
            transparent 37px 72px
        ),
        repeating-radial-gradient(
            ellipse at 78% 68%,
            transparent 0 36px,
            rgba(255, 255, 255, .22) 40px 42px,
            transparent 46px 88px
        );
    filter: blur(6px);
    transform: rotate(-8deg) scale(1.12);
    animation:
        liquid-caustics 44s
        linear
        infinite;
}

/* Very subtle travelling highlight */

.site-liquid-flow__shine {
    top: -35%;
    bottom: -35%;
    left: -38%;
    width: 34%;
    opacity: .20;
    background:
        linear-gradient(
            112deg,
            transparent 0%,
            rgba(255, 255, 255, .03) 28%,
            rgba(255, 255, 255, .52) 49%,
            rgba(255, 255, 255, .03) 70%,
            transparent 100%
        );
    filter: blur(26px);
    transform: rotate(7deg);
    animation:
        liquid-shine 21s
        cubic-bezier(.4, 0, .2, 1)
        infinite;
}

/*
 * Keep interactive and high-contrast elements visually stable.
 */
.site-header,
.mobile-menu,
.cookie-consent,
.modal,
.admin-preview-bar {
    isolation: isolate;
}

/* Keyframes */

@keyframes liquid-flow-one {
    0% {
        border-radius: 42% 58% 64% 36% / 47% 36% 64% 53%;
        transform:
            translate3d(-4vw, -2vh, 0)
            rotate(-8deg)
            scale(.92);
    }

    45% {
        border-radius: 58% 42% 40% 60% / 38% 57% 43% 62%;
        transform:
            translate3d(22vw, 20vh, 0)
            rotate(12deg)
            scale(1.10);
    }

    100% {
        border-radius: 34% 66% 58% 42% / 62% 40% 60% 38%;
        transform:
            translate3d(38vw, 5vh, 0)
            rotate(24deg)
            scale(.98);
    }
}

@keyframes liquid-flow-two {
    0% {
        border-radius: 58% 42% 34% 66% / 42% 64% 36% 58%;
        transform:
            translate3d(0, -10vh, 0)
            rotate(4deg)
            scale(.90);
    }

    50% {
        border-radius: 36% 64% 62% 38% / 58% 40% 60% 42%;
        transform:
            translate3d(-36vw, 28vh, 0)
            rotate(-18deg)
            scale(1.08);
    }

    100% {
        border-radius: 62% 38% 46% 54% / 34% 58% 42% 66%;
        transform:
            translate3d(-16vw, 56vh, 0)
            rotate(-30deg)
            scale(.96);
    }
}

@keyframes liquid-flow-three {
    0% {
        border-radius: 46% 54% 66% 34% / 58% 38% 62% 42%;
        transform:
            translate3d(-18vw, 8vh, 0)
            rotate(8deg)
            scale(.90);
    }

    52% {
        border-radius: 64% 36% 44% 56% / 34% 62% 38% 66%;
        transform:
            translate3d(24vw, -32vh, 0)
            rotate(-16deg)
            scale(1.12);
    }

    100% {
        border-radius: 38% 62% 58% 42% / 64% 40% 60% 36%;
        transform:
            translate3d(48vw, -8vh, 0)
            rotate(24deg)
            scale(.98);
    }
}

@keyframes liquid-caustics {
    0% {
        transform:
            translate3d(-6%, -3%, 0)
            rotate(-8deg)
            scale(1.10);
    }

    50% {
        transform:
            translate3d(5%, 4%, 0)
            rotate(4deg)
            scale(1.18);
    }

    100% {
        transform:
            translate3d(-2%, 7%, 0)
            rotate(12deg)
            scale(1.12);
    }
}

@keyframes liquid-shine {
    0% {
        left: -44%;
        opacity: 0;
    }

    16% {
        opacity: .18;
    }

    52% {
        opacity: .24;
    }

    84% {
        opacity: .12;
    }

    100% {
        left: 118%;
        opacity: 0;
    }
}

/* Tablet */

@media (max-width: 991px) {
    :root {
        --liquid-flow-opacity: .145;
        --liquid-flow-blur: 62px;
    }

    .site-liquid-flow__orb {
        width: 96vw;
        height: 96vw;
        min-width: 620px;
        min-height: 620px;
    }

    .site-liquid-flow__caustics {
        opacity: .11;
    }

    .site-liquid-flow__shine {
        opacity: .14;
    }
}

/* Mobile: intentionally restrained for readability and performance */

@media (max-width: 576px) {
    :root {
        --liquid-flow-opacity: .10;
        --liquid-flow-blur: 54px;
    }

    .site-liquid-flow__orb {
        width: 130vw;
        height: 130vw;
        min-width: 520px;
        min-height: 520px;
    }

    .site-liquid-flow__orb--three,
    .site-liquid-flow__caustics {
        display: none;
    }

    .site-liquid-flow__shine {
        width: 48%;
        filter: blur(22px);
        animation-duration: 28s;
    }
}

/* Accessibility and battery safety */

@media (prefers-reduced-motion: reduce) {
    .site-liquid-flow {
        opacity: .06;
    }

    .site-liquid-flow__orb,
    .site-liquid-flow__caustics,
    .site-liquid-flow__shine {
        animation: none !important;
    }

    .site-liquid-flow__orb--one {
        transform:
            translate3d(10vw, 8vh, 0)
            scale(1.02);
    }

    .site-liquid-flow__orb--two {
        transform:
            translate3d(-18vw, 30vh, 0)
            scale(.95);
    }

    .site-liquid-flow__orb--three {
        transform:
            translate3d(10vw, -12vh, 0)
            scale(1);
    }
}

@media print {
    .site-liquid-flow {
        display: none !important;
    }
}