/* ==========================================
   GLOBAL
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

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

    overflow:hidden;

    background:#020617;

    color:white;

    width:100vw;

    height:100vh;

}

/* ==========================================
   SKY
========================================== */

#sky{

    position:fixed;

    inset:0;

    overflow:hidden;

    background:

    radial-gradient(circle at top,#14213d,#081120,#020617);

    z-index:-100;

}

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

#stars{

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(white 1px,transparent 1px);

    background-size:45px 45px;

    opacity:.35;

    animation:starMove 90s linear infinite;

}

@keyframes starMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-600px);

    }

}

/* ==========================================
   MOON
========================================== */

#moon{

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

    right:8%;

    top:8%;

    background:#fff6d5;

    box-shadow:

    0 0 50px #fff5c2,

    0 0 120px #fff5c2;

}

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

#particles{

    position:absolute;

    inset:0;

    overflow:hidden;

}

#particles::before{

    content:"";

    position:absolute;

    width:300%;

    height:300%;

    background:

    radial-gradient(rgba(255,255,255,.10) 2px,transparent 2px);

    background-size:60px 60px;

    animation:particleMove 70s linear infinite;

}

@keyframes particleMove{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(-500px,-300px);

    }

}

/* ==========================================
   LANDING PAGE
========================================== */

#landing{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

}

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

.glass{

    width:750px;

    max-width:92%;

    padding:60px;

    border-radius:35px;

    backdrop-filter:blur(18px);

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

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

    text-align:center;

    box-shadow:

    0 0 40px rgba(255,255,255,.08),

    0 0 120px rgba(255,105,180,.10);

}

.glass h3{

    color:#ffd166;

    font-size:24px;

    margin-bottom:10px;

}

.glass h1{

    font-size:72px;

    color:white;

    font-family:'Great Vibes',cursive;

    margin-bottom:20px;

    text-shadow:

    0 0 20px hotpink,

    0 0 50px hotpink;

}

.glass p{

    font-size:22px;

    color:#ededed;

    line-height:1.8;

}

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

#gift{

    position:relative;

    width:180px;

    height:180px;

    margin:45px auto;

    cursor:pointer;

    animation:giftFloat 3s ease-in-out infinite;

    transition:.5s;

}

#gift:hover{

    transform:scale(1.08);

}

/* Gift Box */

.gift-box{

    position:absolute;

    bottom:0;

    width:180px;

    height:120px;

    border-radius:10px;

    background:linear-gradient(135deg,#ff3b6a,#ff6b81);

    box-shadow:

    0 15px 40px rgba(255,0,90,.4);

}

/* Lid */

.gift-lid{

    position:absolute;

    top:18px;

    width:180px;

    height:40px;

    border-radius:10px;

    background:linear-gradient(135deg,#ff2d55,#ff5e7d);

    transform-origin:left bottom;

    transition:1s;

    z-index:5;

}

/* Vertical Ribbon */

.gift-ribbon-v{

    position:absolute;

    left:82px;

    width:16px;

    height:180px;

    background:#ffd60a;

    z-index:10;

}

/* Horizontal Ribbon */

.gift-ribbon-h{

    position:absolute;

    top:55px;

    width:180px;

    height:16px;

    background:#ffd60a;

    z-index:10;

}

/* Floating Animation */

@keyframes giftFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

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

#openGift{

    margin-top:30px;

    padding:16px 38px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-size:20px;

    font-weight:600;

    color:white;

    background:linear-gradient(135deg,#ff3b6a,#ff7b54);

    transition:.35s;

    box-shadow:

    0 10px 30px rgba(255,80,120,.35);

}

#openGift:hover{

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

    box-shadow:

    0 15px 40px rgba(255,80,120,.5);

}

/* Button Click */

#openGift:active{

    transform:scale(.95);

}
/* ==========================================
   EXPERIENCE SECTION
========================================== */

#experience{

    position:absolute;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    overflow:hidden;

}

/* ==========================================
   MESSAGE CARD
========================================== */

.message-card{

    width:900px;

    max-width:92%;

    padding:45px;

    border-radius:30px;

    backdrop-filter:blur(18px);

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

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

    box-shadow:

        0 0 35px rgba(255,255,255,.12),

        0 0 120px rgba(255,105,180,.08);

    text-align:center;

    z-index:20;

}

#title{

    font-family:'Great Vibes',cursive;

    font-size:72px;

    color:#ffd166;

    margin-bottom:25px;

    text-shadow:

        0 0 20px gold,

        0 0 60px gold;

}

#messageBox{

    font-size:28px;

    line-height:2;

    color:white;

    min-height:250px;

    font-weight:300;

    letter-spacing:.5px;

}

/* ==========================================
   FIREWORKS
========================================== */

#fireworks{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:5;

}

/* ==========================================
   CAKE
========================================== */

#cakeArea{

    position:absolute;

    right:60px;

    bottom:40px;

}

.cake{

    position:relative;

    width:180px;

    height:200px;

}

/* Bottom Layer */

.cake-bottom{

    position:absolute;

    bottom:0;

    width:180px;

    height:60px;

    background:#d2691e;

    border-radius:12px;

}

/* Middle Layer */

.cake-middle{

    position:absolute;

    bottom:60px;

    left:15px;

    width:150px;

    height:50px;

    background:#f4a261;

    border-radius:12px;

}

/* Top Layer */

.cake-top{

    position:absolute;

    bottom:110px;

    left:30px;

    width:120px;

    height:40px;

    background:#ffcad4;

    border-radius:12px;

}

/* Icing */

.icing{

    position:absolute;

    bottom:145px;

    left:25px;

    width:130px;

    height:18px;

    background:white;

    border-radius:25px;

}

/* Candle */

.candle{

    position:absolute;

    left:84px;

    bottom:160px;

    width:12px;

    height:45px;

    background:#00b4d8;

}

/* Flame */

.flame{

    position:absolute;

    top:-26px;

    left:-3px;

    width:18px;

    height:28px;

    background:gold;

    border-radius:50%;

    box-shadow:

        0 0 12px gold,

        0 0 35px orange,

        0 0 60px yellow;

    animation:flicker .25s infinite alternate;

}

@keyframes flicker{

    from{

        transform:rotate(-3deg);

    }

    to{

        transform:rotate(3deg) scale(1.08);

    }

}

/* ==========================================
   ENDING SCREEN
========================================== */

#ending{

    position:absolute;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    z-index:100;

}

.ending-card{

    width:700px;

    max-width:92%;

}

.ending-card h1{

    font-size:72px;

    line-height:1.3;

    color:#ffd166;

}

.ending-card p{

    margin-top:25px;

    font-size:22px;

}

#replay{

    margin-top:35px;

    padding:18px 45px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-size:20px;

    font-weight:600;

    color:white;

    background:linear-gradient(135deg,#ff4d6d,#ff7b54);

    transition:.35s;

}

#replay:hover{

    transform:scale(1.05);

    box-shadow:0 0 25px hotpink;

}

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

#hearts{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:2;
}

.heart{
    position:absolute;
    bottom:-100px;
    color:#ff4d88;
    opacity:.8;
    animation:heartFloat linear forwards;
    filter:drop-shadow(0 0 10px hotpink);
}

@keyframes heartFloat{

    0%{
        transform:translateY(0) rotate(0deg) scale(.6);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    100%{
        transform:translateY(-120vh) rotate(360deg) scale(1.3);
        opacity:0;
    }

}

/* ==========================================
   BALLOONS
========================================== */

#balloons{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:3;
}

.balloon{

    position:absolute;

    bottom:-150px;

    width:70px;

    height:90px;

    border-radius:50%;

    opacity:.9;

    animation:balloonFloat linear forwards;

}

.balloon::after{

    content:"";

    position:absolute;

    width:2px;

    height:80px;

    background:white;

    left:50%;

    top:90px;

}

.red{
    background:#ff4d6d;
}

.blue{
    background:#4dabf7;
}

.green{
    background:#40c057;
}

.yellow{
    background:#ffd43b;
}

.purple{
    background:#9775fa;
}

@keyframes balloonFloat{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-130vh);
    }

}

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

.sparkle{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:gold;

    box-shadow:

    0 0 15px gold,

    0 0 35px yellow;

    animation:sparkle 2s ease forwards;

}

@keyframes sparkle{

    from{

        transform:scale(.2);

        opacity:0;

    }

    40%{

        opacity:1;

    }

    to{

        transform:scale(2);

        opacity:0;

    }

}

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

.fadeIn{

    animation:fadeIn 1.5s forwards;

}

.fadeOut{

    animation:fadeOut 1s forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

/* ==========================================
   GLOW EFFECT
========================================== */

.glow{

    animation:glow 2s infinite alternate;

}

@keyframes glow{

    from{

        box-shadow:

        0 0 10px hotpink;

    }

    to{

        box-shadow:

        0 0 30px hotpink,

        0 0 70px deeppink;

    }

}

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

@media(max-width:900px){

.glass{

width:95%;

padding:35px;

}

.glass h1{

font-size:50px;

}

.glass p{

font-size:18px;

}

#title{

font-size:46px;

}

#messageBox{

font-size:20px;

line-height:1.8;

}

#cakeArea{

right:10px;

bottom:10px;

transform:scale(.7);

}

.ending-card h1{

font-size:46px;

}

}

@media(max-width:600px){

#gift{

transform:scale(.8);

}

#openGift{

font-size:18px;

padding:14px 28px;

}

.glass h1{

font-size:40px;

}

.glass h3{

font-size:18px;

}

.glass p{

font-size:16px;

}

#title{

font-size:36px;

}

#messageBox{

font-size:18px;

}

#cakeArea{

display:none;

}

}

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

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#ff4d88;

border-radius:20px;

}