/* ================================================================
   HERO BACKGROUND BEAMS (Vanilla Adaptation)
   Native SVG implementation without React/Tailwind/Framer Motion
   ================================================================ */

.hero {
    position: relative;
    /* Ensure the existing hero container handles absolute children */
}

.background-beams-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;

    /* Replicate the Tailwind mask: [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] */
    /* We want the center to be slightly transparent so text is legible, and edges to fade */
    -webkit-mask-image: radial-gradient(circle at center, transparent 10%, black 80%);
    mask-image: radial-gradient(circle at center, transparent 10%, black 80%);
}

.background-beams-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Make sure hero content sits above */
.hero .container {
    position: relative;
    z-index: 2;
}