.hero-section{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:#112440;
}

/*
====================================
Content stays above everything
====================================
*/
.hero-section > *{
    position:relative;
    z-index:2;
}

/*
====================================
CSS Aurora Layer
====================================

.hero-section::before{
    content:'';
    position:absolute;
    inset:-30%;
    z-index:0;

    background:
        radial-gradient(circle at 20% 30%, rgba(123,104,238,.25), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(55,47,160,.25), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(123,104,238,.15), transparent 60%);

    filter:blur(140px);

    animation: pirateAurora 20s linear infinite alternate;
}

*/

/*
====================================
Three.js Canvas
====================================
*/
.hero-section canvas{
    position:absolute !important;
    inset:0;
    width:100% !important;
    height:100% !important;
    z-index:1;
    pointer-events:none;
}

/*
====================================
Animation
====================================

@keyframes pirateAurora{

    0%{
        transform:
            translate(-5%,-5%)
            rotate(0deg);
    }

    50%{
        transform:
            translate(5%,3%)
            rotate(5deg);
    }

    100%{
        transform:
            translate(-3%,5%)
            rotate(10deg);
    }

}
*/

.pc-aurora{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}

.pc-aurora canvas{
    width:100% !important;
    height:100% !important;
    display:block;
}