/*
 * Hero Canvas layer copied from the supplied front(1).zip reference.
 * This file intentionally contains only the Canvas scene/overlay styles.
 * All other frontend styling remains Tailwind utility-first in the PHP views.
 */
#hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-canvas-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        #08080b 0%,
        rgba(8, 8, 11, .98) 15%,
        rgba(8, 8, 11, .88) 36%,
        rgba(8, 8, 11, .38) 58%,
        rgba(8, 8, 11, .08) 76%,
        rgba(8, 8, 11, .48) 100%
    );
}

.hero-canvas-fade {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    height: 28%;
    pointer-events: none;
    background: linear-gradient(
        to top,
        #08080b 0%,
        rgba(8, 8, 11, .72) 38%,
        transparent 100%
    );
}

@media (max-width: 1200px) {
    .hero-canvas-shade {
        background: linear-gradient(
            90deg,
            #08080b 0%,
            rgba(8, 8, 11, .96) 22%,
            rgba(8, 8, 11, .66) 52%,
            rgba(8, 8, 11, .2) 74%,
            rgba(8, 8, 11, .46) 100%
        );
    }
}

@media (max-width: 960px) {
    #hero-canvas {
        opacity: .9;
    }

    .hero-canvas-shade {
        background: linear-gradient(
            180deg,
            rgba(8, 8, 11, .62) 0%,
            rgba(8, 8, 11, .32) 32%,
            rgba(8, 8, 11, .88) 67%,
            #08080b 100%
        );
    }
}

@media (max-width: 620px) {
    #hero-canvas {
        opacity: .78;
    }

    .hero-canvas-shade {
        background: linear-gradient(
            180deg,
            rgba(8, 8, 11, .3) 0%,
            rgba(8, 8, 11, .58) 44%,
            rgba(8, 8, 11, .96) 73%,
            #08080b 100%
        );
    }
}