/* ==========================================
   CINEMATIC BACKGROUND
========================================== */

.site-bg{
    position:fixed;
    inset:0;
    z-index:-10;
    overflow:hidden;
    background:#030303;
    pointer-events:none;
}

.bg-gradient{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% calc(20% + (var(--scroll-progress, 0) * 35%)), rgba(255,106,0,.18), transparent 36%),
        radial-gradient(circle at calc(15% + (var(--scroll-progress, 0) * 30%)) 70%, rgba(255,38,63,.12), transparent 32%),
        linear-gradient(180deg, #050505 0%, #0b0402 38%, #020202 100%);
}

.bg-orb{
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    filter:blur(90px);
    opacity:.38;
    transform:translate3d(0,0,0);
}

.bg-orb-one{
    left:-180px;
    top:18%;
    background:rgba(255,106,0,.55);
    transform:translateY(calc(var(--scroll-progress, 0) * 260px));
}

.bg-orb-two{
    right:-160px;
    top:45%;
    background:rgba(255,38,63,.35);
    transform:translateY(calc(var(--scroll-progress, 0) * -220px));
}

.bg-orb-three{
    left:35%;
    bottom:-260px;
    background:rgba(255,106,0,.26);
    transform:translateY(calc(var(--scroll-progress, 0) * -180px));
}

.bg-grid{
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:90px 90px;
    opacity:.28;
    transform:translateY(calc(var(--scroll-progress, 0) * -90px));
    mask-image:linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

.bg-scanlines{
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.025) 0px,
        rgba(255,255,255,.025) 1px,
        transparent 1px,
        transparent 6px
    );
    opacity:.13;
    mix-blend-mode:screen;
}

.bg-vignette{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.9) 100%),
        linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.55));
}