/* Spin88 ,  WebGL luxury caustics background */

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

/* React Bits Lightfall container (replaces legacy canvas.shader-bg) */
.lightfall-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.lightfall-container canvas {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.82;
}

/* Dark scrim over animated background — keeps text readable sitewide */
.lightfall-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 70% at 50% 35%, rgba(7, 5, 16, 0.35) 0%, rgba(7, 5, 16, 0.78) 72%),
        linear-gradient(180deg, rgba(7, 5, 16, 0.62) 0%, rgba(7, 5, 16, 0.82) 45%, rgba(7, 5, 16, 0.92) 100%);
}

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: keep original banner dominant; lightfall stays subtle behind it */
html.shader-bg-active .hero__bg-img {
    opacity: 0.94;
    mix-blend-mode: normal;
}

html.shader-bg-active .hero__gradient {
    background:
        linear-gradient(90deg, rgba(7, 5, 16, 0.9) 0%, rgba(7, 5, 16, 0.64) 40%, rgba(7, 5, 16, 0.2) 70%, rgba(7, 5, 16, 0.1) 100%),
        linear-gradient(180deg, rgba(7, 5, 16, 0.3) 0%, rgba(7, 5, 16, 0.14) 48%, rgba(7, 5, 16, 0.78) 100%);
}

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

/* Stronger text contrast over animated background */
html.shader-bg-active .hero__title,
html.shader-bg-active .page-hero__title,
html.shader-bg-active .section__title {
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.45);
}

html.shader-bg-active .hero__subtitle,
html.shader-bg-active .page-hero__subtitle,
html.shader-bg-active .section__subtitle {
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

/* Subpages & articles: let caustics show through page heroes */
html.shader-bg-active .page-hero {
    background: linear-gradient(
        180deg,
        rgba(7, 5, 16, 0.72) 0%,
        rgba(7, 5, 16, 0.84) 45%,
        rgba(7, 5, 16, 0.94) 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;
    }
}