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

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

:root{

    --bg1:#FFF9F4;
    --bg2:#FCECDD;
    --bg3:#F8E2D4;

    --pink:#F48FB1;
    --darkPink:#EC6B8F;

    --shadow:rgba(0,0,0,.18);

}

html,
body{

    width:100%;
    height:100%;
    opacity:1;
    transition:opacity .8s ease;

}

body{

    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    font-family:'Poppins',sans-serif;

    background:var(--bg1);

}


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

.background{

    position:fixed;

    inset:0;

    background:
    linear-gradient(
        180deg,
        var(--bg1),
        var(--bg2),
        var(--bg3)
    );

    overflow:hidden;

    z-index:-100;

}

/* Glow */

.background::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,230,240,.95),

        rgba(255,190,215,.45),

        transparent

    );

    filter:blur(120px);

}

/* ===========================================
   CONTAINER
=========================================== */

.container{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:100;

    transition:.6s;

}

/* ===========================================
   GIFT
=========================================== */

.gift{

    position:relative;

    width:280px;

    cursor:pointer;

    user-select:none;

    animation:floating 3.5s ease-in-out infinite;

    transition:

        transform .5s,

        filter .5s;

}

/* Image */

.gift img{

    width:100%;

    display:block;

    pointer-events:none;

    transition:

        transform .6s,

        opacity .6s,

        filter .6s;

    filter:

    drop-shadow(0 30px 35px rgba(0,0,0,.18));

}

/* Hover */

.gift:hover{

    transform:scale(1.04);

}

.gift:hover img{

    filter:

    drop-shadow(0 30px 35px rgba(0,0,0,.18))

    drop-shadow(0 0 18px rgba(255,120,170,.45));

}

/* Klik */

.gift:active{

    transform:scale(.96);

}

/* ===========================================
   SHADOW
=========================================== */

.gift::after{

    content:"";

    position:absolute;

    width:190px;
    height:26px;

    left:50%;

    bottom:-26px;

    transform:translateX(-50%);

    background:rgba(0,0,0,.12);

    border-radius:50%;

    filter:blur(12px);

    animation:shadow 3.5s ease-in-out infinite;

}

/* ===========================================
   TAP
=========================================== */

.tap{

    margin-top:60px;

    color:var(--darkPink);

    font-family:'Great Vibes',cursive;

    font-size:34px;

    text-shadow:

    0 0 12px rgba(255,120,170,.25);

    animation:blink 2s infinite;

}

/* ===========================================
   FLOAT
=========================================== */

@keyframes floating{

    0%{

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

    }

    25%{

        transform:
        translateY(-8px)
        rotate(-1deg);

    }

    50%{

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

    }

    75%{

        transform:
        translateY(-8px)
        rotate(2deg);

    }

    100%{

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

    }

}

/* ===========================================
   SHADOW
=========================================== */

@keyframes shadow{

    0%{

        transform:
        translateX(-50%)
        scale(.95);

        opacity:.18;

    }

    50%{

        transform:
        translateX(-50%)
        scale(.70);

        opacity:.08;

    }

    100%{

        transform:
        translateX(-50%)
        scale(.95);

        opacity:.18;

    }

}

/* ===========================================
   BLINK
=========================================== */

@keyframes blink{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.35;

    }

}

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

@media(max-width:768px){

    .gift{

        width:180px;

    }

    .tap{

        font-size:28px;

    }

}
/* =====================================================
   PARTICLE LAYER
===================================================== */

#particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:9999;

}

/* =====================================================
   FLOWERS
===================================================== */

.flower{

    position:fixed;

    left:0;
    top:0;

    width:70px;

    object-fit:contain;

    pointer-events:none;

    transform:translate(-50%,-50%);

    will-change:
        left,
        top,
        transform,
        opacity;

    animation:flowerAppear .35s ease;

}
.flower.small{
    width:80px;
}

.flower.medium{
    width:130px;
}

.flower.large{
    width:190px;
}

/* =====================================================
   FLOWER ANIMATION
===================================================== */

@keyframes flowerAppear{

    from{

        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(.2)
            rotate(0deg);

    }

    to{

        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1)
            rotate(0deg);

    }

}

/* =====================================================
   GIFT GLOW
===================================================== */

.giftGlow{

    position:absolute;

    left:50%;
    top:38%;

    width:140px;
    height:140px;

    border-radius:50%;

    transform:translate(-50%,-50%);

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.98),

            rgba(255,230,240,.95),

            rgba(255,180,220,.45),

            transparent

        );

    filter:blur(14px);

    pointer-events:none;

    animation:giftGlow 1.4s ease-out forwards;

    mix-blend-mode:screen;

    z-index:5;

}

/* =====================================================
   GLOW ANIMATION
===================================================== */

@keyframes giftGlow{

    0%{

        transform:
            translate(-50%,-50%)
            scale(.2);

        opacity:0;

    }

    30%{

        opacity:1;

    }

    100%{

        transform:
            translate(-50%,-50%)
            scale(3);

        opacity:0;

    }

}

/* =====================================================
   SPARKLE
===================================================== */

.sparkle{

    position:fixed;

    width:8px;
    height:8px;

    border-radius:50%;

    background:white;

    box-shadow:

        0 0 12px white,

        0 0 24px #FFD8EA,

        0 0 40px #FFD8EA;

    pointer-events:none;

    animation:sparkle 1s linear forwards;

}

/* =====================================================
   SPARKLE ANIMATION
===================================================== */

@keyframes sparkle{

    from{

        transform:

            scale(.2);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    to{

        transform:

            scale(1.5);

        opacity:0;

    }

}

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

.heart{

    position:fixed;

    width:28px;

    pointer-events:none;

    animation:heartFloat 4s linear forwards;

}

@keyframes heartFloat{

    from{

        opacity:0;

        transform:

            translateY(0)

            scale(.3);

    }

    20%{

        opacity:1;

    }

    to{

        opacity:0;

        transform:

            translateY(-450px)

            rotate(360deg)

            scale(1.5);

    }

}

/* =====================================================
   OPENED GIFT
===================================================== */

.opened{

    animation:none !important;

    transform:

        scale(1.08);

}

.opened img{

    animation:openedGift .5s ease;

}

@keyframes openedGift{

    0%{

        transform:

            scale(.8);

        opacity:0;

    }

    100%{

        transform:

            scale(1);

        opacity:1;

    }

}