/* =========================================================
   LEAVE IT PLAYING
   Atmosphere Styles
   File: css/atmosphere.css
   ========================================================= */


/* =========================================================
   BASE ATMOSPHERE
   ========================================================= */

.atmosphere {
    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    overflow: hidden;

    opacity: 1;

    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(255, 255, 255, 0.045),
            transparent 42%
        );

    transition:
        background 1.2s ease,
        opacity 1.2s ease,
        filter 1.2s ease;
}


/* =========================================================
   ATMOSPHERE LAYERS
   ========================================================= */

.atmosphere::before,
.atmosphere::after {

    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0;

    transition:
        opacity 1.2s ease,
        transform 1.2s ease,
        background 1.2s ease;
}


/* =========================================================
   RAIN
   ========================================================= */

.app[data-weather="rain"],
.app.atmosphere-rain {

    --atmosphere-primary:
        rgba(70, 95, 135, 0.18);

    --atmosphere-secondary:
        rgba(35, 55, 85, 0.12);
}


.app[data-weather="rain"] .atmosphere,
.app.atmosphere-rain .atmosphere {

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(75, 100, 145, 0.20),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            rgba(25, 35, 55, 0.18),
            rgba(5, 8, 14, 0.04)
        );
}


.app[data-weather="rain"] .atmosphere::before,
.app.atmosphere-rain .atmosphere::before {

    opacity: 0.45;

    background:
        repeating-linear-gradient(
            105deg,
            transparent 0,
            transparent 7px,
            rgba(170, 190, 220, 0.035) 8px,
            transparent 10px,
            transparent 18px
        );

    animation:
        rainDrift 7s linear infinite;
}


/* =========================================================
   SUMMER
   ========================================================= */

.app[data-weather="summer"],
.app.atmosphere-summer {

    --atmosphere-primary:
        rgba(160, 105, 50, 0.16);

    --atmosphere-secondary:
        rgba(220, 170, 80, 0.08);
}


.app[data-weather="summer"] .atmosphere,
.app.atmosphere-summer .atmosphere {

    background:
        radial-gradient(
            circle at 50% 5%,
            rgba(175, 120, 55, 0.18),
            transparent 46%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(120, 75, 35, 0.07),
            transparent 35%
        );
}


.app[data-weather="summer"] .atmosphere::before,
.app.atmosphere-summer .atmosphere::before {

    opacity: 0.22;

    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255, 220, 150, 0.08),
            transparent 25%
        );

    animation:
        summerPulse 6s ease-in-out infinite;
}


/* =========================================================
   COLD
   ========================================================= */

.app[data-weather="cold"],
.app.atmosphere-cold {

    --atmosphere-primary:
        rgba(90, 125, 155, 0.16);

    --atmosphere-secondary:
        rgba(125, 150, 175, 0.08);
}


.app[data-weather="cold"] .atmosphere,
.app.atmosphere-cold .atmosphere {

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(105, 140, 170, 0.18),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            rgba(65, 90, 110, 0.08),
            transparent 70%
        );
}


.app[data-weather="cold"] .atmosphere::before,
.app.atmosphere-cold .atmosphere::before {

    opacity: 0.18;

    background:
        radial-gradient(
            circle,
            rgba(220, 235, 245, 0.08) 0 1px,
            transparent 2px
        );

    background-size: 45px 45px;

    animation:
        coldFloat 10s linear infinite;
}


/* =========================================================
   MIDNIGHT
   ========================================================= */

.app[data-time="midnight"] .atmosphere,
.app[data-time="late-night"] .atmosphere,
.app.atmosphere-midnight .atmosphere {

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(70, 75, 130, 0.20),
            transparent 45%
        ),
        radial-gradient(
            circle at 20% 75%,
            rgba(45, 55, 100, 0.08),
            transparent 35%
        );
}


.app[data-time="midnight"] .atmosphere::before,
.app[data-time="late-night"] .atmosphere::before,
.app.atmosphere-midnight .atmosphere::before {

    opacity: 0.32;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.15) 0 1px,
            transparent 1.5px
        );

    background-size:
        90px 90px;

    animation:
        starsFloat 14s ease-in-out infinite;
}


/* =========================================================
   ALONE
   ========================================================= */

.app.atmosphere-alone .atmosphere {

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(80, 80, 95, 0.07),
            transparent 45%
        ),
        #080808;
}


.app.atmosphere-alone .atmosphere::after {

    opacity: 0.18;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0, 0, 0, 0.5) 100%
        );
}


/* =========================================================
   ROMANTIC
   ========================================================= */

.app.atmosphere-romantic .atmosphere {

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(125, 65, 85, 0.15),
            transparent 45%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(100, 50, 75, 0.08),
            transparent 35%
        );
}


.app.atmosphere-romantic .atmosphere::before {

    opacity: 0.18;

    background:
        radial-gradient(
            circle at 35% 40%,
            rgba(255, 180, 200, 0.06),
            transparent 20%
        );

    animation:
        romanticPulse 7s ease-in-out infinite;
}


/* =========================================================
   PEACE
   ========================================================= */

.app.atmosphere-peace .atmosphere {

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(90, 105, 100, 0.10),
            transparent 48%
        ),
        #080808;
}


.app.atmosphere-peace .atmosphere::after {

    opacity: 0.20;

    background:
        radial-gradient(
            ellipse at center,
            transparent 25%,
            rgba(0, 0, 0, 0.30) 100%
        );
}


/* =========================================================
   ADDA
   ========================================================= */

.app.atmosphere-adda .atmosphere {

    background:
        radial-gradient(
            circle at 30% 35%,
            rgba(120, 90, 55, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 75% 65%,
            rgba(90, 70, 45, 0.08),
            transparent 35%
        );
}


.app.atmosphere-adda .atmosphere::before {

    opacity: 0.15;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 220, 160, 0.05),
            transparent 30%
        );

    animation:
        addaPulse 5s ease-in-out infinite;
}


/* =========================================================
   MASTI
   ========================================================= */

.app.atmosphere-masti .atmosphere {

    background:
        radial-gradient(
            circle at 20% 25%,
            rgba(130, 90, 45, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(110, 75, 40, 0.10),
            transparent 32%
        );
}


.app.atmosphere-masti .atmosphere::before {

    opacity: 0.18;

    background:
        radial-gradient(
            circle at 30% 50%,
            rgba(255, 255, 255, 0.05),
            transparent 20%
        );

    animation:
        mastiMove 4s ease-in-out infinite alternate;
}


/* =========================================================
   HIP-HOP
   ========================================================= */

.app.atmosphere-hiphop .atmosphere {

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(100, 90, 70, 0.14),
            transparent 42%
        ),
        #070707;
}


/* =========================================================
   DESI HIP-HOP
   ========================================================= */

.app.atmosphere-desi-hiphop .atmosphere {

    background:
        radial-gradient(
            circle at 25% 30%,
            rgba(130, 75, 35, 0.15),
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(105, 65, 30, 0.10),
            transparent 34%
        );
}


/* =========================================================
   DUNIYA JAYE VARMEIN
   ========================================================= */

.app.atmosphere-fuck-it .atmosphere {

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(105, 90, 60, 0.13),
            transparent 42%
        ),
        #070707;
}


.app.atmosphere-fuck-it .atmosphere::after {

    opacity: 0.18;

    background:
        radial-gradient(
            ellipse at center,
            transparent 30%,
            rgba(0, 0, 0, 0.42) 100%
        );
}


/* =========================================================
   COMPANY: ALONE
   ========================================================= */

.app[data-company="alone"] .atmosphere {

    filter:
        saturate(0.78);
}


/* =========================================================
   COMPANY: FRIENDS
   ========================================================= */

.app[data-company="friends"] .atmosphere {

    filter:
        saturate(1.08);
}


/* =========================================================
   SITUATION: DRINKING
   ========================================================= */

.app[data-situation="drinking"] .atmosphere::after {

    opacity: 0.12;

    background:
        radial-gradient(
            circle at 50% 75%,
            rgba(150, 105, 60, 0.10),
            transparent 35%
        );
}


/* =========================================================
   SITUATION: THINKING
   ========================================================= */

.app[data-situation="thinking"] .atmosphere {

    filter:
        saturate(0.82);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes rainDrift {

    from {
        transform:
            translate3d(
                -2%,
                -3%,
                0
            );
    }

    to {
        transform:
            translate3d(
                2%,
                3%,
                0
            );
    }

}


@keyframes summerPulse {

    0%,
    100% {
        transform:
            scale(1);

        opacity:
            0.55;
    }

    50% {
        transform:
            scale(1.08);

        opacity:
            1;
    }

}


@keyframes coldFloat {

    from {
        transform:
            translateY(-15px);
    }

    to {
        transform:
            translateY(15px);
    }

}


@keyframes starsFloat {

    0%,
    100% {
        transform:
            translateY(0);

        opacity:
            0.65;
    }

    50% {
        transform:
            translateY(-8px);

        opacity:
            1;
    }

}


@keyframes romanticPulse {

    0%,
    100% {
        transform:
            scale(1);

        opacity:
            0.5;
    }

    50% {
        transform:
            scale(1.12);

        opacity:
            0.9;
    }

}


@keyframes addaPulse {

    0%,
    100% {
        transform:
            scale(0.95);
    }

    50% {
        transform:
            scale(1.08);
    }

}


@keyframes mastiMove {

    from {
        transform:
            translateX(-15px);
    }

    to {
        transform:
            translateX(15px);
    }

}


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

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

    .atmosphere,
    .atmosphere::before,
    .atmosphere::after {

        transition:
            none;

        animation:
            none !important;

    }

}


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

@media (max-width: 480px) {

    .atmosphere::before {

        opacity:
            0.7;

    }

}