/* =========================================================
   MOUSA PORTFOLIO — ATMOSPHERE
   Stars + Aurora + Parallax + Interactive Wish Star
========================================================= */


/* =========================================================
   MAIN ATMOSPHERE
========================================================= */

.atmosphere{
    position:fixed;

    inset:0;

    z-index:0;

    overflow:hidden;

    pointer-events:none;

    isolation:isolate;

    background:
        radial-gradient(
            900px 600px
            at 76% 13%,
            rgba(var(--accent-rgb),.075),
            transparent 70%
        ),

        radial-gradient(
            800px 600px
            at 12% 73%,
            rgba(105,76,210,.055),
            transparent 72%
        ),

        linear-gradient(
            180deg,
            #07111f 0%,
            #071321 46%,
            #081321 100%
        )
}


/* =========================================================
   REMOVE OLD HERO CLOUDS
========================================================= */

.hero-cloud{
    display:none !important
}


/* =========================================================
   STAR DEPTH
========================================================= */

.star-layer{
    position:absolute;

    inset:-7vh -5vw;

    width:110vw;
    height:114vh;

    will-change:transform;

    transform:
        translate3d(0,0,0)
}


.star-layer-far{
    opacity:.27
}


.star-layer-mid{
    opacity:.50
}


.star-layer-near{
    opacity:.74
}


/* =========================================================
   STAR
========================================================= */

.atmosphere-star{
    position:absolute;

    display:block;

    width:2px;
    height:2px;

    border-radius:50%;

    background:#dbe8fb;

    opacity:.26;

    box-shadow:
        0 0 5px
        rgba(195,220,255,.35)
}


.atmosphere-star.medium{
    width:3px;
    height:3px;

    opacity:.54;

    box-shadow:
        0 0 7px
        rgba(195,220,255,.52)
}


.atmosphere-star.bright{
    width:4px;
    height:4px;

    opacity:.82;

    box-shadow:
        0 0 8px
        rgba(230,241,255,.9),

        0 0 19px
        rgba(var(--accent-rgb),.30)
}


.atmosphere-star.twinkle{
    animation:
        atmosphereTwinkle
        4.6s
        ease-in-out
        infinite
        alternate
}


@keyframes atmosphereTwinkle{

    from{
        opacity:.18;

        transform:
            scale(.86)
    }

    to{
        opacity:.78;

        transform:
            scale(1.2)
    }

}


/* =========================================================
   AURORA BASE
========================================================= */

.aurora-ribbon{
    position:absolute;

    pointer-events:none;

    border-radius:50%;

    will-change:transform;

    filter:
        blur(72px);

    mix-blend-mode:screen;

    transform:
        translate3d(
            var(--aurora-x,0px),
            var(--aurora-y,0px),
            0
        )
        rotate(
            var(--aurora-rotate,0deg)
        );

    transition:
        opacity .4s ease,
        background .4s ease
}


/* =========================================================
   AURORA ONE
========================================================= */

.aurora-one{
    --aurora-rotate:-14deg;

    width:1050px;
    height:310px;

    left:-330px;
    top:14vh;

    opacity:.32;

    background:
        radial-gradient(
            ellipse at center,
            rgba(var(--accent-rgb),.26) 0%,
            rgba(var(--accent-rgb),.14) 28%,
            rgba(105,76,215,.07) 53%,
            transparent 76%
        )
}


/* =========================================================
   AURORA TWO
========================================================= */

.aurora-two{
    --aurora-rotate:11deg;

    width:1180px;
    height:390px;

    right:-390px;
    top:43vh;

    opacity:.27;

    background:
        radial-gradient(
            ellipse at center,
            rgba(122,94,255,.20) 0%,
            rgba(var(--accent-rgb),.12) 37%,
            rgba(65,145,225,.05) 59%,
            transparent 77%
        )
}


/* =========================================================
   AURORA THREE
========================================================= */

.aurora-three{
    --aurora-rotate:-5deg;

    width:1000px;
    height:340px;

    left:18vw;
    bottom:-170px;

    opacity:.28;

    background:
        radial-gradient(
            ellipse at center,
            rgba(var(--accent-rgb),.21) 0%,
            rgba(105,75,225,.08) 42%,
            transparent 76%
        )
}


/* =========================================================
   AMBIENT DUST
========================================================= */

.dust-layer{
    position:absolute;

    inset:0;

    z-index:3;

    pointer-events:none;

    will-change:transform
}


.space-dust{
    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        rgba(
            var(--accent-rgb),
            .30
        );

    opacity:.11;

    filter:
        blur(1px);

    box-shadow:
        0 0 13px
        rgba(var(--accent-rgb),.25)
}


.space-dust.large{
    width:8px;
    height:8px;

    opacity:.15;

    filter:
        blur(2px)
}


/* =========================================================
   METEORS
========================================================= */

.meteor-layer{
    position:absolute;

    inset:0;

    z-index:5;

    overflow:hidden;

    pointer-events:none
}


.shooting-star{
    --meteor-x:320px;
    --meteor-y:45px;
    --meteor-angle:-14deg;

    position:absolute;

    width:115px;
    height:1.5px;

    opacity:0;

    border-radius:999px;

    transform-origin:right center;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(130,185,245,.08) 20%,
            rgba(205,228,255,.78) 72%,
            #fff 100%
        );

    filter:
        drop-shadow(
            0 0 5px
            rgba(120,185,255,.70)
        );

    animation:
        shootingStar
        1.12s
        cubic-bezier(.2,.72,.28,1)
        forwards
}


.shooting-star.reverse{
    transform-origin:left center;

    background:
        linear-gradient(
            270deg,
            transparent 0%,
            rgba(130,185,245,.08) 20%,
            rgba(205,228,255,.78) 72%,
            #fff 100%
        )
}


.shooting-star:after{
    content:"";

    position:absolute;

    right:-2px;
    top:50%;

    width:4px;
    height:4px;

    border-radius:50%;

    background:#fff;

    transform:
        translateY(-50%);

    box-shadow:
        0 0 8px #fff,
        0 0 14px
        rgba(110,180,255,.88)
}


.shooting-star.reverse:after{
    right:auto;
    left:-2px
}


@keyframes shootingStar{

    0%{
        opacity:0;

        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(
                var(--meteor-angle)
            )
            scaleX(.55)
    }

    12%{
        opacity:.90
    }

    72%{
        opacity:.82
    }

    100%{
        opacity:0;

        transform:
            translate3d(
                var(--meteor-x),
                var(--meteor-y),
                0
            )
            rotate(
                var(--meteor-angle)
            )
            scaleX(1)
    }

}


/* =========================================================
   VIGNETTE
========================================================= */

.atmosphere-vignette{
    position:absolute;

    inset:0;

    z-index:8;

    pointer-events:none;

    background:
        radial-gradient(
            circle at center,
            transparent 41%,
            rgba(2,8,18,.13) 100%
        )
}


/* =========================================================
   INTERACTIVE WISH STAR LAYER
========================================================= */

.wish-layer{
    position:fixed;

    inset:0;

    z-index:45;

    pointer-events:none
}


/* =========================================================
   WISH STAR
========================================================= */

.wish-star{
    position:absolute;

    width:44px;
    height:44px;

    padding:0;

    border:0;

    background:transparent;

    color:#fff;

    cursor:pointer;

    pointer-events:auto;

    display:grid;

    place-items:center;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,255,255,.78)
        )
        drop-shadow(
            0 0 18px
            rgba(var(--accent-rgb),.65)
        );

    animation:
        wishStarDrift
        7.5s
        ease-in-out
        forwards
}


.wish-star:hover{
    animation-play-state:paused;

    transform:
        scale(1.18)
}


.wish-star:focus-visible{
    outline:
        2px solid
        var(--accent);

    outline-offset:5px;

    border-radius:50%
}


.wish-star-core{
    position:relative;

    z-index:2;

    display:block;

    font-size:27px;

    line-height:1;

    text-shadow:
        0 0 8px #fff,
        0 0 18px
        rgba(var(--accent-rgb),.85);

    animation:
        wishPulse
        1.15s
        ease-in-out
        infinite
        alternate
}


.wish-star-tail{
    position:absolute;

    width:64px;
    height:2px;

    right:25px;

    top:21px;

    border-radius:999px;

    transform:
        rotate(-18deg);

    transform-origin:right center;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--accent-rgb),.15),
            rgba(255,255,255,.60)
        )
}


@keyframes wishPulse{

    from{
        transform:
            scale(.90);

        opacity:.78
    }

    to{
        transform:
            scale(1.13);

        opacity:1
    }

}


@keyframes wishStarDrift{

    0%{
        opacity:0;

        transform:
            translate3d(
                -18px,
                10px,
                0
            )
    }

    12%{
        opacity:1
    }

    82%{
        opacity:1
    }

    100%{
        opacity:0;

        transform:
            translate3d(
                38px,
                -16px,
                0
            )
    }

}


.wish-star.caught{
    animation:none;

    pointer-events:none;

    transform:
        scale(.9);

    opacity:0;

    transition:
        opacity .45s ease,
        transform .45s ease
}


/* =========================================================
   WISH SPARKS
========================================================= */

.wish-spark{
    position:fixed;

    z-index:46;

    width:5px;
    height:5px;

    border-radius:50%;

    pointer-events:none;

    background:#fff;

    box-shadow:
        0 0 10px
        rgba(var(--accent-rgb),.85);

    animation:
        wishSpark
        .8s
        ease-out
        forwards
}


@keyframes wishSpark{

    from{
        opacity:1;

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1)
    }

    to{
        opacity:0;

        transform:
            translate3d(
                var(--spark-x),
                var(--spark-y),
                0
            )
            scale(.2)
    }

}


/* =========================================================
   LIGHT THEME
========================================================= */

[data-theme="light"] .atmosphere{
    background:
        radial-gradient(
            680px 500px
            at 82% 10%,
            rgba(255,203,120,.22),
            transparent 72%
        ),

        radial-gradient(
            850px 620px
            at 7% 76%,
            rgba(var(--accent-rgb),.11),
            transparent 73%
        ),

        linear-gradient(
            180deg,
            #f6faff 0%,
            #edf5ff 48%,
            #f7faff 100%
        )
}


[data-theme="light"] .star-layer-far{
    opacity:.07
}


[data-theme="light"] .star-layer-mid{
    opacity:.11
}


[data-theme="light"] .star-layer-near{
    opacity:.15
}


[data-theme="light"] .atmosphere-star{
    background:#6684aa;

    box-shadow:
        0 0 4px
        rgba(75,110,155,.12)
}


[data-theme="light"] .aurora-ribbon{
    mix-blend-mode:multiply;

    filter:
        blur(78px)
}


[data-theme="light"] .aurora-one{
    opacity:.34;

    background:
        radial-gradient(
            ellipse at center,
            rgba(var(--accent-rgb),.19),
            rgba(120,175,240,.10) 45%,
            transparent 76%
        )
}


[data-theme="light"] .aurora-two{
    opacity:.30;

    background:
        radial-gradient(
            ellipse at center,
            rgba(175,145,255,.16),
            rgba(var(--accent-rgb),.09) 43%,
            transparent 76%
        )
}


[data-theme="light"] .aurora-three{
    opacity:.32;

    background:
        radial-gradient(
            ellipse at center,
            rgba(var(--accent-rgb),.14),
            rgba(115,176,232,.08) 44%,
            transparent 75%
        )
}


[data-theme="light"] .space-dust{
    opacity:.13;

    background:
        rgba(
            var(--accent-rgb),
            .38
        )
}


[data-theme="light"] .atmosphere-vignette{
    background:
        radial-gradient(
            circle at center,
            transparent 54%,
            rgba(100,135,175,.045) 100%
        )
}


[data-theme="light"] .wish-star{
    color:
        rgb(
            var(--accent-rgb)
        );

    filter:
        drop-shadow(
            0 0 7px
            rgba(var(--accent-rgb),.55)
        )
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

    .wish-layer{
        display:none
    }


    .aurora-one{
        width:800px;

        left:-410px
    }


    .aurora-two{
        width:900px;

        right:-480px
    }


    .aurora-three{
        width:760px;

        left:-80px
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .star-layer-near{
        opacity:.45
    }


    .aurora-one{
        width:650px;
        height:270px;

        left:-450px
    }


    .aurora-two{
        width:700px;
        height:300px;

        right:-500px
    }


    .aurora-three{
        width:640px;
        height:260px;

        left:-190px
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .star-layer,
    .aurora-ribbon,
    .dust-layer{
        transform:none !important
    }


    .shooting-star,
    .wish-star{
        display:none !important
    }


    .atmosphere-star.twinkle{
        animation:none !important
    }

}