/*==================================================
    PART-2A
    BASE + GALAXY + STARS + AURORA + CURSOR
==================================================*/

/*==============================
    RESET
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
    background:#050816;
    color:#fff;
    min-height:100vh;
    position:relative;

}

/*==============================
    VARIABLES
==============================*/

:root{

    --primary:#ff3d81;
    --secondary:#ff7db6;
    --purple:#8a5cff;
    --blue:#49b8ff;
    --cyan:#62f3ff;

    --glass:rgba(255,255,255,.08);

    --glass-border:rgba(255,255,255,.18);

    --shadow:
        0 0 40px rgba(255,61,129,.25);

    --radius:25px;

}

/*==============================
    BODY BACKGROUND
==============================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at 20% 20%,rgba(138,92,255,.35),transparent 35%),

    radial-gradient(circle at 80% 25%,rgba(73,184,255,.25),transparent 30%),

    radial-gradient(circle at 50% 90%,rgba(255,61,129,.22),transparent 30%),

    #040816;

    z-index:-20;

}

/*==============================
    MOVING GRADIENT
==============================*/

body::after{

    content:"";

    position:fixed;

    inset:-50%;

    background:

    conic-gradient(

        from 0deg,

        rgba(255,61,129,.12),

        rgba(138,92,255,.12),

        rgba(73,184,255,.12),

        rgba(255,61,129,.12)

    );

    animation:rotateGradient 25s linear infinite;

    filter:blur(140px);

    z-index:-19;

}

@keyframes rotateGradient{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==============================
    STARS
==============================*/

#stars{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-18;

}

#stars::before,

#stars::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(#ffffff 1px,transparent 1px);

    background-size:55px 55px;

    opacity:.45;

    animation:starMove 80s linear infinite;

}

#stars::after{

    background-size:90px 90px;

    opacity:.25;

    animation-duration:140s;

}

@keyframes starMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(400px);

    }

}

/*==============================
    PARTICLES
==============================*/

#particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-17;

}

#particles::before{

    content:"";

    position:absolute;

    width:220%;

    height:220%;

    left:-60%;

    top:-60%;

    background:

    radial-gradient(circle,#ffffff66 1px,transparent 2px);

    background-size:45px 45px;

    animation:particlesMove 70s linear infinite;

    opacity:.18;

}

@keyframes particlesMove{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

.aurora{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-16;

    pointer-events:none;

}

.aurora span{

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    filter:blur(130px);

    opacity:.32;

}

.aurora span:nth-child(1){

    background:#ff3d81;

    top:-180px;

    left:-100px;

    animation:floatOne 18s ease-in-out infinite;

}

.aurora span:nth-child(2){

    background:#7b6cff;

    right:-150px;

    top:120px;

    animation:floatTwo 22s ease-in-out infinite;

}

.aurora span:nth-child(3){

    background:#39c8ff;

    bottom:-220px;

    left:35%;

    animation:floatThree 20s ease-in-out infinite;

}

@keyframes floatOne{

    50%{

        transform:

        translate(180px,120px)

        scale(1.2);

    }

}

@keyframes floatTwo{

    50%{

        transform:

        translate(-200px,-80px)

        scale(.9);

    }

}

@keyframes floatThree{

    50%{

        transform:

        translate(60px,-170px)

        scale(1.3);

    }

}

/*==============================
    CURSOR GLOW
==============================*/

#cursorGlow{

    width:180px;

    height:180px;

    position:fixed;

    left:0;

    top:0;

    border-radius:50%;

    pointer-events:none;

    background:

    radial-gradient(

        circle,

        rgba(255,61,129,.35),

        rgba(255,61,129,0)

    );

    transform:

    translate(-50%,-50%);

    transition:

    left .08s linear,

    top .08s linear;

    mix-blend-mode:screen;

    z-index:9999;

}

/*==============================
    HEART LAYER
==============================*/

#hearts{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:-15;

}

/*==============================
    INTRO
==============================*/

#intro{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.intro-content{

    max-width:700px;

}

.heart-logo{

    font-size:90px;

    animation:heartbeat 1.5s infinite;

    color:var(--primary);

    text-shadow:

    0 0 20px var(--primary),

    0 0 50px var(--primary);

}

@keyframes heartbeat{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.2);

    }

}

#loveName{

    margin:25px 0;

    font-size:70px;

    font-family:'Great Vibes',cursive;

    color:#fff;

    text-shadow:

    0 0 30px #ff4e96;

}

#intro h4{

    font-weight:300;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#ffd4e6;

}

/*==============================
    GLASS
==============================*/

.glass{

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(18px);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

/*==============================
    BUTTON
==============================*/

button{

    border:none;

    cursor:pointer;

    padding:18px 45px;

    border-radius:50px;

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--purple)
    );

    color:#fff;

    font-size:18px;

    font-weight:600;

    transition:.4s;

}

button:hover{

    transform:translateY(-5px) scale(1.05);

    box-shadow:

    0 15px 40px rgba(255,61,129,.35);

}

/*==============================
    SCROLLBAR
==============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:

    linear-gradient(var(--primary),var(--purple));

    border-radius:30px;

}

::-webkit-scrollbar-track{

    background:#090f20;

}

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

@media(max-width:768px){

    #loveName{

        font-size:48px;

    }

    .heart-logo{

        font-size:65px;

    }

    button{

        width:100%;

    }

}

/*==================================================
    PART-2B.1A
    MAIN LAYOUT + HERO + GLASS CARD
==================================================*/

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

#main{
    width:100%;
    position:relative;
    z-index:5;
}

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

.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:100px 20px;
    position:relative;
}

.hero::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:radial-gradient(circle,
        rgba(255,61,129,.25),
        transparent 70%);
    border-radius:50%;
    filter:blur(50px);
    animation:heroGlow1 8s ease-in-out infinite alternate;
}

.hero::after{
    content:"";
    position:absolute;
    right:8%;
    bottom:10%;
    width:350px;
    height:350px;
    background:radial-gradient(circle,
        rgba(73,184,255,.20),
        transparent 70%);
    border-radius:50%;
    filter:blur(60px);
    animation:heroGlow2 10s ease-in-out infinite alternate;
}

@keyframes heroGlow1{
    from{
        transform:translate(-80px,-40px) scale(.9);
    }
    to{
        transform:translate(70px,40px) scale(1.25);
    }
}

@keyframes heroGlow2{
    from{
        transform:translate(50px,50px) scale(.8);
    }
    to{
        transform:translate(-60px,-60px) scale(1.2);
    }
}

/*==============================
    HERO GLASS CARD
==============================*/

.hero .glass{

    width:100%;
    max-width:900px;

    padding:70px 60px;

    text-align:center;

    position:relative;

    overflow:hidden;

    transition:.5s;

}

.hero .glass:hover{

    transform:translateY(-10px);

    box-shadow:
        0 25px 70px rgba(255,61,129,.35);

}

/* Animated Border */

.hero .glass::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:
    linear-gradient(
        135deg,
        #ff3d81,
        #8a5cff,
        #49b8ff,
        #62f3ff,
        #ff3d81
    );

    background-size:400% 400%;

    animation:borderMove 10s linear infinite;

    z-index:-2;

}

.hero .glass::after{

    content:"";

    position:absolute;

    inset:2px;

    background:rgba(5,8,22,.78);

    backdrop-filter:blur(25px);

    border-radius:24px;

    z-index:-1;

}

@keyframes borderMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

/*==============================
    SMALL TITLE
==============================*/

.title{

    font-size:20px;

    font-weight:500;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#ffd6e8;

    margin-bottom:25px;

    opacity:.95;

}

/*==============================
    BIG TITLE
==============================*/

.bigTitle{

    font-size:90px;

    font-family:'Great Vibes',cursive;

    color:#fff;

    line-height:1.1;

    margin-bottom:30px;

    text-shadow:
        0 0 15px #ff4d91,
        0 0 40px #ff4d91,
        0 0 80px #ff4d91;

    animation:titleFloat 4s ease-in-out infinite;

}

@keyframes titleFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}

/*==============================
    SUB TITLE
==============================*/

.hero p{

    font-size:20px;

    line-height:1.9;

    color:#f5f5f5;

    max-width:700px;

    margin:auto;

    opacity:.95;

}

/*==============================
    RESPONSIVE
==============================*/

@media(max-width:992px){

    .hero .glass{

        padding:50px 35px;

    }

    .bigTitle{

        font-size:70px;

    }

}

@media(max-width:768px){

    .hero{

        padding:80px 15px;

    }

    .hero .glass{

        padding:40px 25px;

        border-radius:18px;

    }

    .title{

        font-size:15px;

        letter-spacing:2px;

    }

    .bigTitle{

        font-size:52px;

    }

    .hero p{

        font-size:16px;

        line-height:1.7;

    }

}

@media(max-width:480px){

    .bigTitle{

        font-size:42px;

    }

    .title{

        font-size:13px;

    }

}

/*==================================================
    PART-2B.1B
    TYPEWRITER + PREMIUM BUTTONS + HOVER + REVEAL
==================================================*/

/*==============================
    TYPEWRITER
==============================*/

#typing{

    display:inline-block;

    min-height:65px;

    max-width:760px;

    margin:25px auto 0;

    color:#ffffff;

    font-size:22px;

    line-height:1.8;

    font-weight:300;

    overflow:hidden;

    white-space:nowrap;

    border-right:3px solid #ff4f95;

    animation:
        blinkCursor .8s infinite;

}

@keyframes blinkCursor{

    0%,50%{
        border-color:#ff4f95;
    }

    51%,100%{
        border-color:transparent;
    }

}

/*==============================
    PREMIUM BUTTONS
==============================*/

#startBtn,
#surpriseBtn{

    position:relative;

    overflow:hidden;

    margin-top:35px;

    padding:18px 55px;

    border:none;

    outline:none;

    border-radius:60px;

    cursor:pointer;

    color:#fff;

    font-size:18px;

    font-weight:600;

    letter-spacing:1px;

    background:linear-gradient(
        135deg,
        #ff3d81,
        #a855f7,
        #3b82f6
    );

    background-size:300% 300%;

    animation:buttonGradient 8s linear infinite;

    transition:.45s;

    box-shadow:
        0 10px 35px rgba(255,61,129,.35);

}

@keyframes buttonGradient{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

#startBtn:hover,
#surpriseBtn:hover{

    transform:translateY(-8px) scale(1.06);

    box-shadow:
        0 20px 60px rgba(255,61,129,.45);

}

/* Glow Ring */

#startBtn::before,
#surpriseBtn::before{

    content:"";

    position:absolute;

    width:30px;
    height:220%;

    left:-60px;
    top:-60%;

    background:

    rgba(255,255,255,.9);

    transform:rotate(25deg);

    filter:blur(8px);

    transition:.8s;

}

#startBtn:hover::before,
#surpriseBtn:hover::before{

    left:140%;

}

/* Pulse */

#startBtn::after,
#surpriseBtn::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:60px;

    border:2px solid rgba(255,255,255,.25);

    animation:pulseBorder 2s infinite;

}

@keyframes pulseBorder{

    0%{

        transform:scale(1);

        opacity:.8;

    }

    70%{

        transform:scale(1.12);

        opacity:0;

    }

    100%{

        transform:scale(1);

        opacity:0;

    }

}

/*==============================
    HERO HOVER
==============================*/

.hero .glass{

    transition:
        transform .5s,
        box-shadow .5s;

}

.hero .glass:hover{

    transform:
        perspective(1200px)
        rotateX(3deg)
        rotateY(-3deg)
        translateY(-10px);

}

/*==============================
    TITLE HOVER
==============================*/

.bigTitle{

    transition:.45s;

}

.bigTitle:hover{

    letter-spacing:4px;

    text-shadow:

    0 0 20px #ff3d81,

    0 0 45px #ff3d81,

    0 0 90px #ff3d81,

    0 0 120px #ff3d81;

}

/*==============================
    FLOATING ICONS
==============================*/

.hero::before{

    animation-duration:10s;

}

.hero::after{

    animation-duration:14s;

}

/*==============================
    SCROLL REVEAL
==============================*/

.reveal{

    opacity:0;

    transform:

    translateY(80px);

    transition:

    opacity .9s ease,

    transform .9s ease;

}

.reveal.active{

    opacity:1;

    transform:

    translateY(0);

}

/* Left */

.reveal-left{

    opacity:0;

    transform:translateX(-80px);

    transition:1s;

}

.reveal-left.active{

    opacity:1;

    transform:none;

}

/* Right */

.reveal-right{

    opacity:0;

    transform:translateX(80px);

    transition:1s;

}

.reveal-right.active{

    opacity:1;

    transform:none;

}

/* Zoom */

.reveal-zoom{

    opacity:0;

    transform:scale(.8);

    transition:1s;

}

.reveal-zoom.active{

    opacity:1;

    transform:scale(1);

}

/*==============================
    IMAGE HOVER
==============================*/

.gallery img{

    transition:.5s;

}

.gallery img:hover{

    transform:

        scale(1.08)

        rotate(-2deg);

    box-shadow:

        0 15px 45px rgba(255,61,129,.35);

}

/*==============================
    LINK
==============================*/

a{

    color:#ff9cc5;

    transition:.3s;

    text-decoration:none;

}

a:hover{

    color:#fff;

}

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

@media(max-width:768px){

    #typing{

        white-space:normal;

        border-right:none;

        min-height:auto;

        font-size:17px;

        line-height:1.7;

    }

    #startBtn,
    #surpriseBtn{

        width:100%;

        font-size:16px;

        padding:16px 20px;

    }

    .hero .glass:hover{

        transform:translateY(-6px);

    }

}

/*==================================================
    PART-2B.2
    GALLERY + COUNTER + STORY + FOOTER
==================================================*/

/*==============================
    SECTION
==============================*/

.gallery,
.counter,
.story,
.surprise,
#final{

    width:100%;

    padding:110px 20px;

    position:relative;

}

.gallery h2,
.counter h2,
.story h2{

    text-align:center;

    font-size:42px;

    margin-bottom:60px;

    font-family:'Great Vibes',cursive;

    color:#fff;

    text-shadow:
        0 0 18px rgba(255,61,129,.7);

}

/*==============================
    GALLERY
==============================*/

.slider{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:28px;

}

.slider img{

    width:100%;

    height:340px;

    object-fit:cover;

    border-radius:24px;

    border:2px solid rgba(255,255,255,.15);

    transition:.5s;

    box-shadow:
        0 15px 35px rgba(0,0,0,.35);

}

.slider img:hover{

    transform:
        translateY(-10px)
        scale(1.04);

    box-shadow:
        0 20px 60px rgba(255,61,129,.35);

    border-color:#ff4f95;

}

/*==============================
    LOVE COUNTER
==============================*/

.time{

    max-width:1000px;

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:25px;

}

.time div{

    padding:35px 20px;

    border-radius:24px;

    text-align:center;

    backdrop-filter:blur(20px);

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    transition:.45s;

    position:relative;

    overflow:hidden;

}

.time div::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:
        linear-gradient(
            135deg,
            #ff3d81,
            #8a5cff,
            #49b8ff
        );

    z-index:-2;

}

.time div::after{

    content:"";

    position:absolute;

    inset:2px;

    background:#08101d;

    border-radius:22px;

    z-index:-1;

}

.time div:hover{

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 50px rgba(255,61,129,.3);

}

.time span{

    display:block;

    font-size:58px;

    font-weight:700;

    color:#fff;

    margin-bottom:10px;

}

.time small{

    font-size:17px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#ffd6e8;

}

/*==============================
    STORY
==============================*/

.story .glass{

    max-width:900px;

    margin:auto;

    padding:60px;

    text-align:center;

    line-height:2;

}

.story p{

    font-size:20px;

    color:#eeeeee;

    margin-bottom:18px;

}

.story p:last-child{

    margin-bottom:0;

}

/*==============================
    SURPRISE BUTTON
==============================*/

.surprise{

    text-align:center;

}

/*==============================
    FINAL CARD
==============================*/

.finalCard{

    max-width:850px;

    margin:auto;

    padding:80px 60px;

    text-align:center;

}

.finalCard h1{

    font-size:90px;

    margin-bottom:15px;

    animation:heartBeat 1.3s infinite;

}

.finalCard h2{

    font-size:68px;

    font-family:'Great Vibes',cursive;

    margin-bottom:20px;

    color:#fff;

}

.finalCard h3{

    font-size:26px;

    margin-bottom:25px;

    color:#ffd6e8;

}

.finalCard p{

    font-size:22px;

    line-height:2;

    color:#f5f5f5;

}

@keyframes heartBeat{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

}

/*==============================
    FOOTER
==============================*/

footer{

    padding:45px 20px;

    text-align:center;

    color:#ffffff99;

    letter-spacing:2px;

    border-top:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(10px);

}

/*==============================
    RESPONSIVE
==============================*/

@media(max-width:992px){

    .time{

        grid-template-columns:
            repeat(2,1fr);

    }

}

@media(max-width:768px){

    .gallery h2,
    .counter h2,
    .story h2{

        font-size:30px;

    }

    .slider{

        gap:18px;

    }

    .slider img{

        height:260px;

    }

    .time{

        grid-template-columns:1fr;

    }

    .time span{

        font-size:44px;

    }

    .story .glass{

        padding:35px 25px;

    }

    .story p{

        font-size:17px;

    }

    .finalCard{

        padding:50px 25px;

    }

    .finalCard h1{

        font-size:70px;

    }

    .finalCard h2{

        font-size:48px;

    }

    .finalCard h3{

        font-size:22px;

    }

    .finalCard p{

        font-size:18px;

    }

}

/*==================================================
    PART-2C
    HEARTS + PETALS + METEOR + FINAL EFFECTS
==================================================*/

/*==============================
    FLOATING HEARTS
==============================*/

.heart{

    position:fixed;

    bottom:-60px;

    font-size:18px;

    color:#ff4f95;

    pointer-events:none;

    opacity:.9;

    z-index:-5;

    animation:floatHeart linear forwards;

}

@keyframes floatHeart{

    0%{

        transform:
            translateY(0)
            scale(.6)
            rotate(0deg);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    100%{

        transform:
            translateY(-120vh)
            translateX(var(--move))
            scale(1.5)
            rotate(360deg);

        opacity:0;

    }

}

/*==============================
    ROSE PETALS
==============================*/

.petal{

    position:fixed;

    top:-40px;

    width:18px;

    height:18px;

    border-radius:50% 0 50% 50%;

    background:
        linear-gradient(
            #ff5f98,
            #ff2f72
        );

    transform:rotate(45deg);

    pointer-events:none;

    z-index:-4;

    animation:fallPetal linear forwards;

}

@keyframes fallPetal{

    from{

        transform:
            translateY(-20px)
            rotate(0deg);

        opacity:1;

    }

    to{

        transform:
            translateY(120vh)
            translateX(150px)
            rotate(720deg);

        opacity:0;

    }

}

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

.meteor{

    position:fixed;

    width:180px;

    height:2px;

    background:
        linear-gradient(
            to right,
            #ffffff,
            transparent
        );

    transform:rotate(-35deg);

    box-shadow:
        0 0 20px white;

    pointer-events:none;

    z-index:-6;

    animation:meteorMove 1.8s linear forwards;

}

@keyframes meteorMove{

    from{

        transform:
            translate(0,0)
            rotate(-35deg);

        opacity:1;

    }

    to{

        transform:
            translate(-700px,700px)
            rotate(-35deg);

        opacity:0;

    }

}

/*==============================
    CONFETTI
==============================*/

.confetti{

    position:fixed;

    top:-30px;

    width:10px;

    height:18px;

    pointer-events:none;

    z-index:999;

    animation:confettiFall linear forwards;

}

@keyframes confettiFall{

    to{

        transform:

            translateY(120vh)

            rotate(720deg);

        opacity:0;

    }

}

/*==============================
    SPARKLES
==============================*/

.spark{

    position:fixed;

    width:5px;

    height:5px;

    border-radius:50%;

    background:white;

    pointer-events:none;

    box-shadow:

        0 0 15px white;

    animation:sparkAnim 1.4s linear forwards;

}

@keyframes sparkAnim{

    from{

        transform:scale(0);

        opacity:1;

    }

    to{

        transform:scale(4);

        opacity:0;

    }

}

/*==============================
    LOADER
==============================*/

.loader{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#030712;

    z-index:99999;

    transition:1s;

}

.loader.hide{

    opacity:0;

    visibility:hidden;

}

.loader-heart{

    font-size:80px;

    color:#ff3d81;

    animation:loaderBeat 1s infinite;

}

@keyframes loaderBeat{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.3);

    }

}

/*==============================
    FINAL SHOW
==============================*/

#final{

    opacity:0;

    visibility:hidden;

    transform:scale(.8);

    transition:1s;

}

#final.show{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}

/*==============================
    GLOW TEXT
==============================*/

.glow-text{

    animation:textGlow 2s infinite alternate;

}

@keyframes textGlow{

    from{

        text-shadow:

        0 0 10px #ff4f95,

        0 0 20px #ff4f95;

    }

    to{

        text-shadow:

        0 0 25px #ff4f95,

        0 0 60px #ff4f95,

        0 0 100px #ff4f95;

    }

}

/*==============================
    SHAKE
==============================*/

.shake{

    animation:shake .6s;

}

@keyframes shake{

    0%{transform:translateX(0);}
    20%{transform:translateX(-8px);}
    40%{transform:translateX(8px);}
    60%{transform:translateX(-6px);}
    80%{transform:translateX(6px);}
    100%{transform:translateX(0);}

}

/*==============================
    FADE
==============================*/

.fade-up{

    animation:fadeUp 1s forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==============================
    SCALE IN
==============================*/

.scale-in{

    animation:scaleIn .8s;

}

@keyframes scaleIn{

    from{

        transform:scale(.5);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/*==============================
    BACKGROUND PULSE
==============================*/

body.pulse::before{

    animation:bgPulse 5s infinite;

}

@keyframes bgPulse{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.2);

    }

    100%{

        filter:brightness(1);

    }

}

/*==============================
    RESPONSIVE
==============================*/

@media(max-width:768px){

    .loader-heart{

        font-size:55px;

    }

    .heart{

        font-size:14px;

    }

    .meteor{

        width:120px;

    }

}