/*==============================
    SCROLL HERO
==============================*/

#laser-scroll{

    position:relative;

    width:100%;

    height:300vh;

    background:#050505;

}

#laser-scroll canvas{

    position:sticky;

    top:0;

    width:100%;

    height:100vh;

    display:block;

    object-fit:contain;

    background:
    radial-gradient(circle at center,
    rgba(0,180,255,.08),
    transparent 60%),
    #050505;

}

.laser-wrapper{

    position:sticky;

    top:0;

    width:100%;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.laser-wrapper::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(34,211,238,.15),
    transparent 70%);

    filter:blur(80px);

    z-index:-1;

}

@media(min-width:1600px){

#laser-scroll canvas{

width:85%;

margin:auto;

}

}

@media(max-width:768px){

#laser-scroll{

height:220vh;

}

#laser-scroll canvas{

width:100%;

}

.laser-wrapper::before{

width:450px;

height:450px;

}

}