/* ==========================================================
   SAKURA EXPRESS RATING
   style.css
   Part 1
========================================================== */

:root{

    --primary:#4F7CFF;
    --primary2:#6D8EFF;

    --danger:#ff4d4f;
    --warning:#ffb300;
    --success:#2ecc71;

    --text:#222;
    --text2:#666;

    --card:#ffffff;

    --shadow:
        0 20px 45px rgba(0,0,0,.10);

    --radius:24px;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    font-size:16px;

}

body{

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:#eef3ff;

    overflow:hidden;

    min-height:100vh;

}

/*================================================*/

.background{

    position:fixed;

    inset:0;

    background:
        radial-gradient(circle at top left,#8cb4ff 0%,transparent 35%),
        radial-gradient(circle at bottom right,#a8ffd8 0%,transparent 35%),
        linear-gradient(135deg,#eef3ff,#f9fbff);

    z-index:-10;

    transition:1s;

}

/*================================================*/

.container{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:40px;

}

/*================================================*/

.card{

    width:100%;

    max-width:720px;

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

    backdrop-filter:blur(18px);

    border-radius:var(--radius);

    padding:45px;

    box-shadow:var(--shadow);

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

}

/*================================================*/

.top{

    text-align:center;

    margin-bottom:40px;

}

.icon-circle{

    width:75px;

    height:75px;

    border-radius:50%;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    background:linear-gradient(
        135deg,
        #FFD54F,
        #FFB300
    );

    box-shadow:
        0 10px 25px rgba(255,180,0,.35);

    margin-bottom:20px;

}

.top h1{

    font-size:34px;

    color:var(--text);

    margin-bottom:10px;

}

.top p{

    color:var(--text2);

    font-size:17px;

    line-height:1.7;

}

/*================================================*/

.emoji-section{

    margin-top:15px;

}

.emoji-track{

    display:flex;

    justify-content:space-between;

    gap:12px;

}

/*================================================*/

.emoji-item{

    width:120px;

    border:none;

    background:transparent;

    cursor:pointer;

    border-radius:20px;

    padding:18px 8px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.emoji-item:hover{

    background:#f5f8ff;

    transform:translateY(-5px);

}

.emoji-face{

    font-size:60px;
    transition:.35s cubic-bezier(.18,1.5,.45,1);
    display:inline-block;
    filter:drop-shadow(0 8px 12px rgba(0,0,0,.18));

}
.emoji-item span{

    display:block;

    margin-top:12px;

    font-size:15px;

    color:#555;

    transition:.3s;

}

/*================================================*/

.effect{

    position:absolute;

    inset:0;

    border-radius:20px;

    pointer-events:none;

}

/*================================================*/

.emoji-item.active{

    background:linear-gradient(
        180deg,
        #ffffff,
        #edf4ff
    );

    box-shadow:
        0 12px 35px rgba(79,124,255,.25);

}

.emoji-item.active span{

    color:var(--primary);

    font-weight:600;

}

.emoji-item.active .emoji-face{

    transform:scale(2.2);

}

/*================================================*/

.preview{

    margin-top:45px;

    text-align:center;

}

#previewEmoji{

    font-size:90px;

    transition:.4s;

}

#previewTitle{

    margin-top:10px;

    font-size:32px;

    color:#222;

}

#previewDesc{

    margin-top:10px;

    color:#777;

    font-size:17px;

    line-height:1.7;

}

/*================================================*/

.progress-wrapper{

    margin-top:35px;

}

.progress-bg{

    height:14px;

    border-radius:100px;

    background:#e8edf8;

    overflow:hidden;

}

#progressBar{

    width:0;

    height:100%;

    border-radius:100px;

    background:linear-gradient(
        90deg,
        #4F7CFF,
        #74C8FF
    );

    transition:.5s;

}

/*================================================*/

.stars{

    margin-top:28px;

    text-align:center;

    font-size:34px;

    letter-spacing:6px;

    color:#cfcfcf;

    transition:.3s;

}

/*================================================*/

.submit-button{

    margin-top:40px;

    width:100%;

    border:none;

    border-radius:16px;

    padding:18px;

    font-size:18px;

    font-weight:600;

    background:#c7d2ff;

    color:white;

    cursor:not-allowed;

    transition:.35s;

}

.submit-button.enabled{

    cursor:pointer;

    background:linear-gradient(
        135deg,
        #4F7CFF,
        #6AA9FF
    );

    box-shadow:
        0 10px 25px rgba(79,124,255,.35);

}

.submit-button.enabled:hover{

    transform:translateY(-3px);

    box-shadow:
        0 16px 35px rgba(79,124,255,.45);

}

/*================================================*/

#particleContainer{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:999;

}



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

@keyframes bounce{

0%{

transform:
scale(.4)
translateY(60px)
rotate(-18deg);

}

25%{

transform:
scale(2.45)
translateY(-40px)
rotate(15deg);

}

45%{

transform:
scale(1.95)
translateY(15px);

}

70%{

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

}

100%{

transform:
scale(2.2)
translateY(0);

}

@keyframes shake{

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

}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.15);
}

100%{
transform:scale(1);
}

}

@keyframes glow{

0%{
box-shadow:0 0 0 rgba(79,124,255,0);
}

50%{
box-shadow:0 0 35px rgba(79,124,255,.45);
}

100%{
box-shadow:0 0 0 rgba(79,124,255,0);
}

}

@keyframes floatUp{

0%{
opacity:0;
transform:translateY(15px);
}

30%{
opacity:1;
}

100%{
opacity:0;
transform:translateY(-40px);
}

}

@keyframes ripple{

0%{
transform:scale(.3);
opacity:.5;
}

100%{
transform:scale(2.8);
opacity:0;
}

}

/*==================================================
ACTIVE
==================================================*/

.emoji-item.active{

animation:glow .8s;

}

.emoji-item.active .emoji-face{

animation:bounce .55s;

}

.emoji-item.rate1.active .emoji-face{

animation:shake .45s;

}

.emoji-item.rate2.active .emoji-face{

animation:pulse .5s;

}

.emoji-item.rate3.active .emoji-face{

animation:pulse .35s;

}

.emoji-item.rate4.active .emoji-face{

animation:bounce .45s;

}

.emoji-item.rate5.active .emoji-face{

animation:bounce .7s;

}

/*==================================================
RIPPLE
==================================================*/

.effect{

position:absolute;
left:50%;
top:50%;

width:20px;
height:20px;

border-radius:50%;

background:rgba(79,124,255,.15);

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

opacity:0;

}

.emoji-item.active .effect{

animation:ripple .8s;

}

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

.stars span{

transition:.35s;

display:inline-block;

}

.stars span.active{

color:#FFC107;

transform:scale(1.35);

}

/*==================================================
PREVIEW
==================================================*/

#previewEmoji{

filter:drop-shadow(0 10px 20px rgba(0,0,0,.18));

}

#previewTitle{

transition:.3s;

}

#previewDesc{

transition:.3s;

}

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

.submit-button.enabled:active{

transform:scale(.98);

}

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

.emoji-item:hover .emoji-face{

transform:scale(1.15);

}

.emoji-item:hover span{

color:#4F7CFF;

}




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

.heart{

position:absolute;

font-size:22px;

pointer-events:none;

animation:heartFly 1.8s linear forwards;

z-index:9999;

}

@keyframes heartFly{

0%{

opacity:0;

transform:
translateY(20px)
scale(.3)
rotate(0deg);

}

15%{

opacity:1;

}

100%{

opacity:0;

transform:
translateY(-180px)
translateX(var(--x))
scale(1.5)
rotate(360deg);

}

}

/*==================================================
STAR PARTICLE
==================================================*/

.spark{

position:absolute;

font-size:18px;

pointer-events:none;

animation:sparkFly 1.2s linear forwards;

}

@keyframes sparkFly{

0%{

opacity:1;

transform:
scale(.2);

}

100%{

opacity:0;

transform:
translate(
var(--tx),
var(--ty)
)
scale(1.6)
rotate(360deg);

}

}

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

.confetti{

position:absolute;

width:8px;

height:16px;

border-radius:2px;

animation:confetti 2.4s linear forwards;

}

@keyframes confetti{

0%{

opacity:1;

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

}

100%{

opacity:0;

transform:
translateY(320px)
translateX(var(--x))
rotate(720deg);

}

}

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

.background::before{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:

rgba(255,255,255,.25);

left:-100px;

top:-100px;

filter:blur(40px);

animation:blob1 12s infinite ease-in-out;

}

.background::after{

content:"";

position:absolute;

width:280px;

height:280px;

border-radius:50%;

background:

rgba(79,124,255,.15);

right:-80px;

bottom:-80px;

filter:blur(40px);

animation:blob2 14s infinite ease-in-out;

}

@keyframes blob1{

0%{

transform:
translate(0,0);

}

50%{

transform:
translate(60px,30px);

}

100%{

transform:
translate(0,0);

}

}

@keyframes blob2{

0%{

transform:
translate(0,0);

}

50%{

transform:
translate(-60px,-25px);

}

100%{

transform:
translate(0,0);

}

}

/*==================================================
CARD ANIMATION
==================================================*/

.card{

animation:showCard .7s ease;

}

@keyframes showCard{

0%{

opacity:0;

transform:
translateY(40px)
scale(.95);

}

100%{

opacity:1;

transform:
translateY(0)
scale(1);

}

}

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

body.rate1 .background{

background:

linear-gradient(
135deg,
#ffd5d5,
#fff3f3);

}

body.rate2 .background{

background:

linear-gradient(
135deg,
#ffe5c6,
#fff8ef);

}

body.rate3 .background{

background:

linear-gradient(
135deg,
#edf1f8,
#ffffff);

}

body.rate4 .background{

background:

linear-gradient(
135deg,
#dff9e8,
#f7fff8);

}

body.rate5 .background{

background:

linear-gradient(
135deg,
#fff7d4,
#fffef6);

}

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

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#b8c5ff;

border-radius:50px;

}

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

@media(max-width:700px){

.card{

padding:25px;

}

.top h1{

font-size:26px;

}

.emoji-track{

gap:6px;

}

.emoji-item{

width:68px;

padding:10px 4px;

}

.emoji-face{

font-size:38px;

}

.emoji-item span{

font-size:11px;

}

#previewEmoji{

font-size:64px;

}

#previewTitle{

font-size:22px;

}

#previewDesc{

font-size:14px;

}

.submit-button{

font-size:16px;

padding:15px;

}

}

@media(max-width:480px){

.container{

padding:12px;

}

.card{

border-radius:18px;

padding:18px;

}

.progress-bg{

height:10px;

}

.stars{

font-size:26px;

}

}
.emoji-track .emoji-item{
    transition:all .35s cubic-bezier(.18,1.4,.3,1);
}

.emoji-track:hover .emoji-item{
    transform:scale(.65);
    opacity:.25;
    filter:blur(2px);
}

.emoji-track:hover .emoji-item:hover{
    transform:scale(2.2) translateY(-25px) rotate(-8deg);
    opacity:1;
    filter:none;
    z-index:999;
}

.emoji-track .emoji-item:hover{

transform:scale(1.35)!important;
opacity:1;

z-index:20;

}
.emoji-item.active{

box-shadow:

0 0 25px rgba(79,124,255,.4),

0 0 60px rgba(79,124,255,.25),

0 20px 45px rgba(0,0,0,.12);

}


.boom{

position:absolute;

font-size:26px;

animation:boom 1.8s linear forwards;

pointer-events:none;

z-index:99999;

}

@keyframes boom{

0%{

opacity:1;

transform:

scale(.3)

translate(0,0)

rotate(0deg);

}

100%{

opacity:0;

transform:

scale(2.2)

translate(

var(--x),

var(--y)

)

rotate(720deg);

}

}


.card.boom{

animation:cardBoom .45s;

}

@keyframes cardBoom{

0%{
transform:scale(1);
}

20%{
transform:scale(1.04) rotate(-1deg);
}

40%{
transform:scale(.98) rotate(1deg);
}

60%{
transform:scale(1.03);
}

100%{
transform:scale(1);
}

}

body.rate5{

animation:bgFlash .8s;

}

@keyframes bgFlash{

0%{
background:#fff;
}

25%{
background:#ffe36d;
}

60%{
background:#fff7bf;
}

100%{
background:#eef3ff;
}