@keyframes badgeBorderPulse{

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

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

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

}

.badge-ready{
border:calc(10px * var(--scale)) solid rgba(255,255,255,0.35);
border-radius:calc(32px * var(--scale));
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:calc(1200px * var(--scale));
}

/* =========================
   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:calc(380px * var(--scale));
max-width:90vw; /* sécurité mobile */
z-index:2;

transform-style:preserve-3d;

animation:badgeFlip 0.6s linear infinite;

}

/* flip */

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

/* rebond */

@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:calc(10px * var(--scale));
height:calc(10px * var(--scale));

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);
}

}

/* =========================
   MOBILE ADAPTATION
========================= */

@media (max-width:700px){

.badge_anim_badge{
width:min(calc(340px * var(--scale)), 85vw);
}

.badge-ready{
border-width:calc(8px * var(--scale));
border-radius:calc(26px * var(--scale));
}

.spark{
width:calc(9px * var(--scale));
height:calc(9px * var(--scale));
}

}