/* Spin88 ,  WebGL luxury caustics background */

.shader-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    display: block;
}

html.shader-bg-active body {
    background: transparent;
    background-image: none;
}

html.shader-bg-fallback body {
    background: var(--bg-darkest);
    background-image: var(--gradient-mesh);
}

/* Hero: let golden caustics show through */
html.shader-bg-active .hero__bg-img {
    opacity: 0.14;
    mix-blend-mode: luminosity;
}

html.shader-bg-active .hero__gradient {
    background: linear-gradient(
        180deg,
        rgba(12, 10, 9, 0.35) 0%,
        rgba(28, 25, 23, 0.55) 45%,
        rgba(12, 10, 9, 0.82) 100%
    );
}

html.shader-bg-active .hero__glow {
    opacity: 0.2;
}

/* Subpages & articles: let caustics show through page heroes */
html.shader-bg-active .page-hero {
    background: linear-gradient(
        180deg,
        rgba(12, 10, 9, 0.35) 0%,
        rgba(28, 25, 23, 0.55) 45%,
        rgba(12, 10, 9, 0.82) 100%
    );
}

html.shader-bg-active .page-hero::before {
    opacity: 0.14;
    mix-blend-mode: luminosity;
}

@media (prefers-reduced-motion: reduce) {
    .shader-bg {
        display: none !important;
    }
}