@keyframes badgeBorderPulse{

0%{
border-color:rgba(255,255,255,0.35);
box-shadow:
0 0 4px rgba(255,255,255,0.2),
0 0 8px rgba(255,255,255,0.15);
}

50%{
border-color:white;
box-shadow:
0 0 12px rgba(255,255,255,0.9),
0 0 24px rgba(255,255,255,0.8),
0 0 36px rgba(255,255,255,0.6);
}

100%{
border-color:rgba(255,255,255,0.35);
box-shadow:
0 0 4px rgba(255,255,255,0.2),
0 0 8px rgba(255,255,255,0.15);
}

}

.badge-ready{

border:10px solid rgba(255,255,255,0.35);
border-radius:32px;
animation:badgeBorderPulse 2s infinite;
position:relative;
overflow:hidden;

}

@keyframes shineWave{

0%{
left:-40%;
}

100%{
left:140%;
}

}

.badge-ready::after{

content:"";
position:absolute;
top:0;
left:-40%;
width:40%;
height:100%;

background:linear-gradient(
90deg,
rgba(255,255,255,0),
rgba(255,255,255,0.9),
rgba(255,255,255,0)
);

animation:shineWave 2s infinite;

}



/* OVERLAY */

.badge_anim_overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:black;

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

overflow:hidden;
z-index:9999;

perspective:1200px;
}


/* SOLEIL */

.badge_sun{

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

width:200vw;
height:200vh;

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

background:repeating-conic-gradient(
#ffffff 0deg 7deg,
#000000 7deg 14deg
);

opacity:0.12;

animation:badgeSunRotate 40s linear infinite;

}

@keyframes badgeSunRotate{

from{transform:translate(-50%,-50%) rotate(0deg);}
to{transform:translate(-50%,-50%) rotate(360deg);}

}


/* BADGE */

.badge_anim_badge{

width:380px;
z-index:2;

transform-style:preserve-3d;

animation:badgeFlip 0.6s linear infinite;

}


/* flip simple */

@keyframes badgeFlip{

from{transform:rotateY(0deg)}
to{transform:rotateY(360deg)}

}


/* rebond final */

@keyframes badgeBounce{

0%{transform:scale(1.3)}
40%{transform:scale(0.85)}
70%{transform:scale(1.1)}
100%{transform:scale(1)}

}

.badge_bounce{
animation:badgeBounce 0.5s ease;
}


/* ETINCELLES */

.spark{

position:absolute;

width:10px;
height:10px;

background:gold;

border-radius:50%;

z-index:3;

pointer-events:none;

animation:sparkAnim 2.2s ease-out forwards;

}

@keyframes sparkAnim{

0%{
opacity:1;
transform:translate(0,0) scale(1);
}

100%{
opacity:0;
transform:translate(var(--x),var(--y)) scale(0.3);
}

}