/* ==========================================================
   SweetLife UI Framework v2
   particle.css
   ========================================================== */

/* ---------------------------------
   Canvas
--------------------------------- */

#sl-particle-canvas{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:-9;

}

/* ---------------------------------
   Base Particle
--------------------------------- */

.sl-particle{

    position:absolute;

    pointer-events:none;

    user-select:none;

    opacity:.8;

    will-change:
        transform,
        opacity;

}

/* ---------------------------------
   Circle
--------------------------------- */

.sl-particle-circle{

    border-radius:50%;

    background:

        rgba(255,255,255,.85);

    box-shadow:

        0 0 12px
        rgba(255,255,255,.6);

}

/* ---------------------------------
   Light
--------------------------------- */

.sl-particle-light{

    border-radius:50%;

    background:

        radial-gradient(

            rgba(255,255,255,.95),

            rgba(255,255,255,0)

        );

}

/* ---------------------------------
   Petal
--------------------------------- */

.sl-particle-petal{

    width:18px;
    height:14px;

    background:#FFD8EA;

    border-radius:

        60% 40%
        60% 40%;

    transform:

        rotate(45deg);

}

/* ---------------------------------
   Leaf
--------------------------------- */

.sl-particle-leaf{

    width:18px;
    height:12px;

    background:#8FD88C;

    border-radius:

        100% 0
        100% 0;

}

/* ---------------------------------
   Maple
--------------------------------- */

.sl-particle-maple{

    width:16px;
    height:16px;

    background:#E79B41;

    transform:

        rotate(45deg);

    border-radius:2px;

}

/* ---------------------------------
   Snow
--------------------------------- */

.sl-particle-snow{

    width:6px;
    height:6px;

    border-radius:50%;

    background:#FFFFFF;

    box-shadow:

        0 0 8px
        rgba(255,255,255,.9);

}

/* ---------------------------------
   Firefly
--------------------------------- */

.sl-firefly{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#FFF59D;

    box-shadow:

        0 0 16px
        rgba(255,245,157,.95);

    animation:

        fireflyBlink
        2.6s
        ease-in-out
        infinite;

}

/* ---------------------------------
   Floating
--------------------------------- */

.sl-particle-float{

    animation:

        particleFloat
        linear
        infinite;

}

@keyframes particleFloat{

    0%{

        transform:

            translate3d(0,0,0)
            rotate(0deg);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    90%{

        opacity:1;

    }

    100%{

        transform:

            translate3d(180px,110vh,0)
            rotate(720deg);

        opacity:0;

    }

}

/* ---------------------------------
   Firefly Blink
--------------------------------- */

@keyframes fireflyBlink{

    0%{

        opacity:.2;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1.4);

    }

    100%{

        opacity:.2;

        transform:scale(.8);

    }

}

/* ---------------------------------
   Glow Pulse
--------------------------------- */

.sl-particle-glow{

    animation:

        glowPulse
        3.5s
        ease-in-out
        infinite;

}

@keyframes glowPulse{

    0%{

        filter:

            brightness(1);

    }

    50%{

        filter:

            brightness(1.6);

    }

    100%{

        filter:

            brightness(1);

    }

}

/* ---------------------------------
   Wind
--------------------------------- */

.wind-soft{

    animation:

        windSoft
        8s
        ease-in-out
        infinite;

}

.wind-medium{

    animation:

        windMedium
        6s
        ease-in-out
        infinite;

}

.wind-strong{

    animation:

        windStrong
        4.5s
        ease-in-out
        infinite;

}

@keyframes windSoft{

    0%{

        transform:
            translateX(0);

    }

    50%{

        transform:
            translateX(24px);

    }

    100%{

        transform:
            translateX(0);

    }

}

@keyframes windMedium{

    0%{

        transform:
            translateX(0);

    }

    50%{

        transform:
            translateX(42px);

    }

    100%{

        transform:
            translateX(0);

    }

}

@keyframes windStrong{

    0%{

        transform:
            translateX(0);

    }

    50%{

        transform:
            translateX(70px);

    }

    100%{

        transform:
            translateX(0);

    }

}

/* ---------------------------------
   Season Visibility
--------------------------------- */

body.season-spring .sl-particle-petal{

    display:block;

}

body.season-summer .sl-particle-leaf{

    display:block;

}

body.season-autumn .sl-particle-maple{

    display:block;

}

body.season-winter .sl-particle-snow{

    display:block;

}

/* Hidden by Default */

.sl-particle-petal,
.sl-particle-leaf,
.sl-particle-maple,
.sl-particle-snow{

    display:none;

}