/* Revolving: animation keyframes from the approved prototypes (reference). */
/* Where mobile and desktop differ, the name ends in -mobile or -desktop. */

/* Spin machine */
/* marquee bulbs: 1.2s idle, 0.24s while spinning, odd bulbs offset by half */
@keyframes chase{0%,49%{background:#ffdb59;box-shadow:0 0 8px #ffdb59}50%,100%{background:#4a5a86;box-shadow:none}}
/* lime payline flicker while spinning */
@keyframes paylineGlow{0%{opacity:.5}100%{opacity:1}}
/* reel strip, mobile (item height 68px, 6 items) */
@keyframes stripM{0%{transform:translateY(0)}100%{transform:translateY(-408px)}}
/* reel strip, home desktop (item height 100px) */
@keyframes stripH{0%{transform:translateY(0)}100%{transform:translateY(-600px)}}
/* reel strip, desktop game-page modal (item height 95px) */
@keyframes stripD{0%{transform:translateY(0)}100%{transform:translateY(-570px)}}
/* reel result landing bounce */
@keyframes land-mobile{0%{transform:translateY(-22px)}55%{transform:translateY(7px)}80%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@keyframes land-desktop{0%{transform:translateY(-28px)}55%{transform:translateY(8px)}80%{transform:translateY(-2px)}100%{transform:translateY(0)}}
/* lever knob pull on the home machine */
@keyframes lever-mobile{0%{transform:translateY(0)}35%{transform:translateY(96px)}55%{transform:translateY(88px)}100%{transform:translateY(0)}}
@keyframes lever-desktop{0%{transform:translateY(0)}35%{transform:translateY(140px)}55%{transform:translateY(128px)}100%{transform:translateY(0)}}
/* SPIN button press on the home machine */
@keyframes press-mobile{0%{transform:translateY(0)}40%{transform:translateY(5px)}100%{transform:translateY(0)}}
@keyframes press-desktop{0%{transform:translateY(0)}40%{transform:translateY(6px)}100%{transform:translateY(0)}}
/* mission card entrance */
@keyframes rise{0%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:1}}
/* white flash over the machine when the result lands (peak opacity .5 to .6 in the prototypes) */
@keyframes flash{0%{opacity:0}25%{opacity:.6}100%{opacity:0}}
/* pulsing ring on the Play button of the mission card */
@keyframes glow{0%{box-shadow:0 5px 0 #d3a238,0 0 0 0 rgba(255,219,89,.55)}100%{box-shadow:0 5px 0 #d3a238,0 0 0 14px rgba(255,219,89,0)}}

/* Spin pill in headers (mini reel) */
/* mini reel idle cycle (8s loop) */
@keyframes mini-mobile{0%,12%{transform:translateY(0)}16.6%,29%{transform:translateY(-30px)}33.3%,45%{transform:translateY(-60px)}50%,62%{transform:translateY(-90px)}66.6%,79%{transform:translateY(-120px)}83.3%,95%{transform:translateY(-150px)}100%{transform:translateY(-180px)}}
@keyframes mini-desktop{0%,12%{transform:translateY(0)}16.6%,29%{transform:translateY(-34px)}33.3%,45%{transform:translateY(-68px)}50%,62%{transform:translateY(-102px)}66.6%,79%{transform:translateY(-136px)}83.3%,95%{transform:translateY(-170px)}100%{transform:translateY(-204px)}}
/* mini reel while pressed/spinning */
@keyframes miniFast-mobile{0%{transform:translateY(0)}100%{transform:translateY(-180px)}}
@keyframes miniFast-desktop{0%{transform:translateY(0)}100%{transform:translateY(-204px)}}
/* idle halo pulse on the SPIN pill */
@keyframes halo-mobile{0%{box-shadow:0 4px 0 #c9574c,0 0 0 0 rgba(255,130,117,.55)}100%{box-shadow:0 4px 0 #c9574c,0 0 0 12px rgba(255,130,117,0)}}
@keyframes halo-desktop{0%{box-shadow:0 4px 0 #c9574c,0 0 0 0 rgba(255,130,117,.55)}100%{box-shadow:0 4px 0 #c9574c,0 0 0 14px rgba(255,130,117,0)}}

/* Spin overlay on game pages */
/* machine entrance on game pages */
@keyframes dropIn-mobile{0%{transform:translateY(-120%)}70%{transform:translateY(12px)}100%{transform:translateY(0)}}
@keyframes dropIn-desktop{0%{transform:translateY(-40px) scale(.9);opacity:0}70%{transform:translateY(8px) scale(1.01);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
/* dark backdrop over the paused game */
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

/* Confetti: burst from the machine (b0-b11) and rain from the top (r0-r2).
   Rain falls the full screen height (the prototypes used a fixed 920/980px for their 844/900px frames). */
@keyframes b0-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(-150px,-230px) rotate(200deg)}85%{opacity:1}100%{opacity:0;transform:translate(-190px,380px) rotate(620deg)}}
@keyframes b0-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(-300px,-260px) rotate(200deg)}85%{opacity:1}100%{opacity:0;transform:translate(-380px,520px) rotate(620deg)}}
@keyframes b1-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(-90px,-300px) rotate(-180deg)}85%{opacity:1}100%{opacity:0;transform:translate(-110px,420px) rotate(-540deg)}}
@keyframes b1-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(-180px,-320px) rotate(-180deg)}85%{opacity:1}100%{opacity:0;transform:translate(-220px,560px) rotate(-540deg)}}
@keyframes b2-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(-30px,-330px) rotate(240deg)}85%{opacity:1}100%{opacity:0;transform:translate(-40px,450px) rotate(700deg)}}
@keyframes b2-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(-60px,-350px) rotate(240deg)}85%{opacity:1}100%{opacity:0;transform:translate(-80px,580px) rotate(700deg)}}
@keyframes b3-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(30px,-320px) rotate(-220deg)}85%{opacity:1}100%{opacity:0;transform:translate(50px,440px) rotate(-650deg)}}
@keyframes b3-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(60px,-340px) rotate(-220deg)}85%{opacity:1}100%{opacity:0;transform:translate(100px,570px) rotate(-650deg)}}
@keyframes b4-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(95px,-290px) rotate(180deg)}85%{opacity:1}100%{opacity:0;transform:translate(120px,410px) rotate(560deg)}}
@keyframes b4-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(190px,-310px) rotate(180deg)}85%{opacity:1}100%{opacity:0;transform:translate(240px,550px) rotate(560deg)}}
@keyframes b5-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(155px,-220px) rotate(-200deg)}85%{opacity:1}100%{opacity:0;transform:translate(200px,370px) rotate(-600deg)}}
@keyframes b5-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(310px,-250px) rotate(-200deg)}85%{opacity:1}100%{opacity:0;transform:translate(400px,520px) rotate(-600deg)}}
@keyframes b6-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(-185px,-120px) rotate(260deg)}85%{opacity:1}100%{opacity:0;transform:translate(-230px,420px) rotate(760deg)}}
@keyframes b6-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(-400px,-140px) rotate(260deg)}85%{opacity:1}100%{opacity:0;transform:translate(-480px,560px) rotate(760deg)}}
@keyframes b7-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(185px,-130px) rotate(-260deg)}85%{opacity:1}100%{opacity:0;transform:translate(235px,430px) rotate(-740deg)}}
@keyframes b7-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(400px,-150px) rotate(-260deg)}85%{opacity:1}100%{opacity:0;transform:translate(490px,570px) rotate(-740deg)}}
@keyframes b8-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(-120px,-170px) rotate(140deg)}85%{opacity:1}100%{opacity:0;transform:translate(-150px,460px) rotate(500deg)}}
@keyframes b8-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(-240px,-190px) rotate(140deg)}85%{opacity:1}100%{opacity:0;transform:translate(-300px,590px) rotate(500deg)}}
@keyframes b9-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(120px,-180px) rotate(-140deg)}85%{opacity:1}100%{opacity:0;transform:translate(160px,450px) rotate(-520deg)}}
@keyframes b9-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(240px,-200px) rotate(-140deg)}85%{opacity:1}100%{opacity:0;transform:translate(320px,590px) rotate(-520deg)}}
@keyframes b10-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(-60px,-250px) rotate(320deg)}85%{opacity:1}100%{opacity:0;transform:translate(-80px,480px) rotate(900deg)}}
@keyframes b10-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(-120px,-280px) rotate(320deg)}85%{opacity:1}100%{opacity:0;transform:translate(-160px,600px) rotate(900deg)}}
@keyframes b11-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(65px,-260px) rotate(-320deg)}85%{opacity:1}100%{opacity:0;transform:translate(85px,470px) rotate(-880deg)}}
@keyframes b11-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{transform:translate(130px,-290px) rotate(-320deg)}85%{opacity:1}100%{opacity:0;transform:translate(170px,600px) rotate(-880deg)}}
@keyframes r0-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:1;transform:translate(34px,calc(100vh + 48px)) rotate(560deg)}}
@keyframes r0-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:1;transform:translate(40px,calc(100vh + 48px)) rotate(560deg)}}
@keyframes r1-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:1;transform:translate(-30px,calc(100vh + 48px)) rotate(-500deg)}}
@keyframes r1-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:1;transform:translate(-36px,calc(100vh + 48px)) rotate(-500deg)}}
@keyframes r2-mobile{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:1;transform:translate(12px,calc(100vh + 48px)) rotate(720deg)}}
@keyframes r2-desktop{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:1;transform:translate(14px,calc(100vh + 48px)) rotate(720deg)}}

/* Home games block */
/* fresh-pick card flip (A/B alternate so the animation restarts) */
@keyframes flipA{0%{transform:rotateY(90deg) scale(.92);opacity:.2}100%{transform:rotateY(0) scale(1);opacity:1}}
/* same as flipA */
@keyframes flipB{0%{transform:rotateY(90deg) scale(.92);opacity:.2}100%{transform:rotateY(0) scale(1);opacity:1}}
/* FRESH PICKS icon rotation */
@keyframes spinSlow{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* All games page */
/* game card entrance on filter/sort/search change */
@keyframes cardIn{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}

/* Active mission inside a game */
/* mission bar/block bump on each step (A/B alternate so it restarts) */
@keyframes bumpA{0%{transform:scale(1)}35%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes bumpB{0%{transform:scale(1)}35%{transform:scale(1.035)}100%{transform:scale(1)}}
/* "+1" floating up on each step */
@keyframes plusA{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
@keyframes plusB{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
/* coral glow pulse when the goal is close (1 s, infinite) */
@keyframes near{0%{box-shadow:0 0 0 0 rgba(255,130,117,.6)}100%{box-shadow:0 0 0 10px rgba(255,130,117,0)}}
/* mission start and missed cards */
@keyframes dropCard{0%{transform:translateY(-40px) scale(.94);opacity:0}70%{transform:translateY(6px) scale(1.01);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
/* lime check stamp on the complete card */
@keyframes stamp{0%{transform:scale(2.2) rotate(-14deg);opacity:0}60%{transform:scale(.9) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
/* progress bar shake on the missed card */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}