:root{
    --bg1:#efe9ff;
    --bg2:#dcd0ff;
    --primary:#5a2ca0;
    --accent:#7b3fe4;
    --glow:#9c6bff;
    --text:#2d1a55;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

body{
    background: linear-gradient(140deg,var(--bg1),var(--bg2));
    color:var(--text);
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    position:relative;
}

.container{
    text-align:center;
    opacity:0;
    transform:translateY(20px);
    animation:fadeIn 1s ease forwards;
    animation-delay:1.6s;
    z-index:2;
}

h1{
    font-size:2.5rem;
    margin-bottom:12px;
    letter-spacing:1px;
}

p{
    opacity:.8;
    font-size:1.05rem;
}

.loader-wrapper{
    position:absolute;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    animation:hideLoader .5s ease forwards;
    animation-delay:1.4s;
    z-index:3;
}

.ring{
    width:80px;
    height:80px;
    border-radius:50%;
    border:4px solid transparent;
    border-top:4px solid var(--accent);
    border-right:4px solid var(--primary);
    animation:spin 1s linear infinite;
    margin-bottom:16px;
    box-shadow:0 0 14px var(--glow);
}

.loading-text{
    font-size:.9rem;
    opacity:.7;
    letter-spacing:2px;
}

.accent{
    color:var(--accent);
}

.snacks{
    position:absolute;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
}

.snacks span{
    position:absolute;
    font-size:28px;
    opacity:.35;
    animation:fall linear infinite;
}

.snacks span:nth-child(1){ left:5%;  animation-duration:14s; }
.snacks span:nth-child(2){ left:15%; animation-duration:18s; }
.snacks span:nth-child(3){ left:30%; animation-duration:12s; }
.snacks span:nth-child(4){ left:45%; animation-duration:20s; }
.snacks span:nth-child(5){ left:60%; animation-duration:16s; }
.snacks span:nth-child(6){ left:70%; animation-duration:22s; }
.snacks span:nth-child(7){ left:80%; animation-duration:15s; }
.snacks span:nth-child(8){ left:90%; animation-duration:19s; }
.snacks span:nth-child(9){ left:50%; animation-duration:17s; }

@keyframes fall{
    from{
        transform:translateY(-120px) rotate(0deg);
    }
    to{
        transform:translateY(110vh) rotate(360deg);
    }
}

@keyframes spin{
    to{ transform: rotate(360deg); }
}

@keyframes hideLoader{
    to{
        opacity:0;
        visibility:hidden;
    }
}

@keyframes fadeIn{
    to{
        opacity:1;
        transform:translateY(0);
    }
}