/* ==============================================
   Liquid Glass feature icons
   Overrides the flat solid-red circle badges
   (#u6637-4 "Stories & Slogams", #u6645-4 "Virtual
   Temple View", #u6650-4 "Nearest Temple") on the
   Tamilnadu Temples homepage with a translucent,
   frosted blue glass treatment (Apple "Liquid Glass"
   style) rather than a solid/glossy fill. Loaded
   after index.css so these rules win the cascade.

   Recipe: mostly-transparent frosted base (real
   backdrop-filter blur, so it genuinely reads
   background content when there is any) + a soft
   cool-blue tint baked into the gradient (so it
   still has presence over the page's flat white
   sections) + a crisp thin rim + a single clean top
   highlight arc + soft ambient bloom for elevation.
   Colors are kept off pure #fff/#000 on purpose —
   less harshly mangled by any browser-level color
   inversion than a true-white highlight would be.

   CSS-level fallback for the color-scheme meta tag in
   temples.html — belt and suspenders against browsers
   that auto-invert light pages ("force dark" on Android
   Chrome/Samsung Internet), which otherwise flips the
   white highlight in this effect into a dark smudge.
   Note: Chrome's experimental desktop flag
   chrome://flags/#enable-force-dark is a blunt, forced
   repaint pass — unlike Android's "Auto Dark", it does
   not reliably honor this opt-out, so it can still look
   wrong specifically with that flag enabled.
   ============================================== */

:root {
    color-scheme: light;
}

#u6637-4,
#u6645-4,
#u6650-4 {
    overflow: hidden;
    border: none;
    background-color: transparent;
    background-image:
        radial-gradient(120% 100% at 50% 12%, rgba(225, 240, 255, 0.85) 0%, rgba(225, 240, 255, 0) 42%),
        radial-gradient(150% 150% at 50% 65%, rgba(100, 180, 255, 0.4) 0%, rgba(10, 132, 255, 0.28) 55%, rgba(4, 82, 168, 0.15) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    backdrop-filter: blur(14px) saturate(200%);
    box-shadow:
        inset 0 1px 1.5px rgba(235, 245, 255, 0.9),
        inset 0 -6px 10px -6px rgba(10, 100, 200, 0.2),
        inset 0 0 0 1px rgba(230, 244, 255, 0.7),
        0 0 0 8px rgba(10, 132, 255, 0.06),
        0 14px 30px -12px rgba(10, 100, 200, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.1);
    color: #0A66CC;
    text-shadow: 0 1px 1px rgba(235, 245, 255, 0.6);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    animation: liquid-glass-breathe 5s ease-in-out infinite;
}

#u6637-4::before,
#u6645-4::before,
#u6650-4::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 22%;
    width: 48%;
    height: 22%;
    background: linear-gradient(180deg, rgba(235, 246, 255, 0.85), rgba(235, 246, 255, 0));
    border-radius: 50% / 60%;
    filter: blur(1.5px);
    pointer-events: none;
}

#u6637-4 p,
#u6645-4 p,
#u6650-4 p {
    position: relative;
    z-index: 2;
}

#u6637-4:hover,
#u6645-4:hover,
#u6650-4:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        inset 0 1px 1.5px rgba(235, 245, 255, 0.95),
        inset 0 -6px 10px -6px rgba(10, 100, 200, 0.28),
        inset 0 0 0 1px rgba(230, 244, 255, 0.8),
        0 0 0 10px rgba(10, 132, 255, 0.08),
        0 18px 36px -12px rgba(10, 100, 200, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.12);
}

@keyframes liquid-glass-breathe {

    0%,
    100% {
        box-shadow:
            inset 0 1px 1.5px rgba(235, 245, 255, 0.9),
            inset 0 -6px 10px -6px rgba(10, 100, 200, 0.2),
            inset 0 0 0 1px rgba(230, 244, 255, 0.7),
            0 0 0 8px rgba(10, 132, 255, 0.06),
            0 14px 30px -12px rgba(10, 100, 200, 0.4),
            0 2px 6px rgba(0, 0, 0, 0.1);
    }

    50% {
        box-shadow:
            inset 0 1px 1.5px rgba(235, 245, 255, 0.95),
            inset 0 -6px 10px -6px rgba(10, 100, 200, 0.25),
            inset 0 0 0 1px rgba(230, 244, 255, 0.78),
            0 0 0 10px rgba(10, 132, 255, 0.08),
            0 16px 34px -12px rgba(10, 100, 200, 0.46),
            0 2px 6px rgba(0, 0, 0, 0.12);
    }
}

@media (prefers-reduced-motion: reduce) {

    #u6637-4,
    #u6645-4,
    #u6650-4 {
        animation: none;
    }
}