/* Low-poly WebGL hero (js/low-poly-webgl.js) */

.lowpoly-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.lowpoly-ready > .lowpoly-canvas {
    opacity: 1;
}

/* The photo overlay is far too dark for the animation; once WebGL is running,
   swap it for a light vignette that still keeps the centered text readable. */
#section-home.lowpoly-ready .overlay-bg {
    background: transparent;
}

#section-home.lowpoly-ready .overlay-bg::before {
    background: radial-gradient(ellipse at 50% 48%,
            rgba(7, 17, 31, 0.55) 0%,
            rgba(7, 17, 31, 0.2) 45%,
            rgba(7, 17, 31, 0.1) 70%,
            rgba(7, 17, 31, 0.6) 100%);
    transition: background 1.2s ease;
}

/* Welcome line: the theme's main blue (#2563EB) only reaches 1.2-3:1 contrast
   on the blue hero. #BFDBFE keeps the blue tone and stays above 4.5:1 even
   on the brightest lit facets. Applies with and without the animation. */
#section-home .lead .id-color {
    color: #BFDBFE;
    text-shadow: 0 1px 12px rgba(7, 17, 31, 0.85);
}

/* ---------- tools page hero ---------- */
.tools-hero .container {
    position: relative;
    z-index: 2;
}

/* vignette between animation and text: darker behind the centered copy,
   fades into the #07111f of the section below */
.tools-hero.lowpoly-ready::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 70% at 50% 55%, rgba(7, 17, 31, 0.6) 0%, rgba(7, 17, 31, 0.15) 100%),
        linear-gradient(180deg, rgba(7, 17, 31, 0) 70%, #07111f 100%);
}

.tools-hero .lead .id-color {
    color: #BFDBFE;
    text-shadow: 0 1px 12px rgba(7, 17, 31, 0.85);
}

.tools-hero.lowpoly-ready .lead {
    text-shadow: 0 1px 10px rgba(7, 17, 31, 0.8);
}