/* ============================================================
   IX7 GAME — Animations
   ============================================================ */

/* ---- KEYFRAMES ---- */
@keyframes float-slow{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
@keyframes float-slow-r{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-16px) rotate(3deg)}
}
@keyframes glow-pulse{
  0%,100%{box-shadow:0 0 20px rgba(204,0,0,0.3),0 0 40px rgba(204,0,0,0.15)}
  50%{box-shadow:0 0 40px rgba(204,0,0,0.6),0 0 80px rgba(204,0,0,0.30)}
}
@keyframes glow-text-pulse{
  0%,100%{filter:drop-shadow(0 0 8px rgba(204,0,0,0.4))}
  50%{filter:drop-shadow(0 0 20px rgba(204,0,0,0.9))}
}
@keyframes gradient-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes spin-slow{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes bounce-in{
  0%{transform:scale(0.3);opacity:0}
  50%{transform:scale(1.05)}
  70%{transform:scale(0.9)}
  100%{transform:scale(1);opacity:1}
}
@keyframes slide-up{
  from{transform:translateY(40px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes slide-down{
  from{transform:translateY(-20px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes fade-in{
  from{opacity:0}to{opacity:1}
}
@keyframes scale-in{
  from{transform:scale(0.85);opacity:0}
  to{transform:scale(1);opacity:1}
}
@keyframes particle-drift{
  0%{transform:translate(0,0) scale(1);opacity:0.8}
  100%{transform:translate(var(--dx,0),var(--dy,-100px)) scale(0);opacity:0}
}
@keyframes btn-shine{
  0%{left:-60%}
  100%{left:150%}
}
@keyframes border-glow-anim{
  0%,100%{border-color:rgba(204,0,0,0.25)}
  50%{border-color:rgba(204,0,0,0.65)}
}
@keyframes count-up{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes wave-line{
  0%,100%{transform:scaleX(0.8);opacity:.5}
  50%{transform:scaleX(1.2);opacity:1}
}
@keyframes ripple{
  0%{transform:scale(0);opacity:.8}
  100%{transform:scale(4);opacity:0}
}
@keyframes orbit{
  from{transform:rotate(0deg) translateX(180px) rotate(0deg)}
  to{transform:rotate(360deg) translateX(180px) rotate(-360deg)}
}
@keyframes neon-flicker{
  0%,100%{opacity:1}
  92%{opacity:1}
  93%{opacity:0.3}
  96%{opacity:1}
  97%{opacity:0.4}
  98%{opacity:1}
}
@keyframes scroll-hint{
  0%,100%{transform:translateY(0);opacity:1}
  50%{transform:translateY(8px);opacity:.4}
}

/* ---- PARTICLE CANVAS ---- */
#particle-canvas{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:1;
}

/* ---- FLOATING SHAPES (decorative) ---- */
.deco-shape{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(60px);
  opacity:.25;
}
.deco-1{
  width:400px;height:400px;
  background:radial-gradient(circle,#CC0000,transparent);
  top:-100px;right:10%;
  animation:float-slow 8s ease-in-out infinite;
}
.deco-2{
  width:300px;height:300px;
  background:radial-gradient(circle,#8B5CF6,transparent);
  bottom:10%;left:5%;
  animation:float-slow 10s ease-in-out infinite reverse;
}
.deco-3{
  width:200px;height:200px;
  background:radial-gradient(circle,#4D7CFE,transparent);
  top:50%;left:50%;
  animation:float-slow 7s ease-in-out infinite;
}

/* ---- ANIMATED GRADIENT BORDER ---- */
.animated-border{
  position:relative;
}
.animated-border::before{
  content:'';
  position:absolute;inset:-1px;
  border-radius:inherit;
  background:var(--grad-primary);
  background-size:200% 200%;
  animation:gradient-shift 4s ease infinite;
  z-index:-1;
  opacity:.6;
}
.animated-border::after{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  background:var(--bg-surface);
  z-index:-1;
}

/* ---- GLOW BORDER ANIMATE ---- */
.glow-border-anim{
  animation:border-glow-anim 3s ease-in-out infinite;
}

/* ---- SHINE BUTTON ---- */
.shine-btn{position:relative;overflow:hidden}
.shine-btn::before{
  content:'';
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transform:skewX(-20deg);
  animation:btn-shine 3s ease-in-out infinite;
}

/* ---- FLOAT ANIMATION CLASSES ---- */
.animate-float{animation:float-slow 4s ease-in-out infinite}
.animate-float-r{animation:float-slow-r 5s ease-in-out infinite}
.animate-glow{animation:glow-pulse 2.5s ease-in-out infinite}
.animate-glow-text{animation:glow-text-pulse 2s ease-in-out infinite}
.animate-spin{animation:spin-slow 20s linear infinite}
.animate-neon{animation:neon-flicker 4s ease-in-out infinite}

/* ---- STAGGER CHILDREN ---- */
.stagger-children > *:nth-child(1){animation-delay:0s}
.stagger-children > *:nth-child(2){animation-delay:.1s}
.stagger-children > *:nth-child(3){animation-delay:.2s}
.stagger-children > *:nth-child(4){animation-delay:.3s}
.stagger-children > *:nth-child(5){animation-delay:.4s}
.stagger-children > *:nth-child(6){animation-delay:.5s}

/* ---- SCROLL REVEAL ANIMATION (applied via JS) ---- */
.reveal-up{
  animation:slide-up .8s var(--ease-out) both;
}
.reveal-scale{
  animation:scale-in .8s var(--ease-out) both;
}
.reveal-fade{
  animation:fade-in .8s ease both;
}

/* ---- HERO ENTRY ANIMATIONS ---- */
.hero-left .hero-eyebrow{animation:slide-up .6s .1s var(--ease-out) both}
.hero-left .hero-title{animation:slide-up .7s .2s var(--ease-out) both}
.hero-left .hero-subtitle{animation:slide-up .6s .35s var(--ease-out) both}
.hero-left .hero-bonus-card{animation:slide-up .6s .45s var(--ease-out) both}
.hero-left .hero-actions{animation:slide-up .6s .5s var(--ease-out) both}
.hero-left .hero-trust{animation:slide-up .6s .6s var(--ease-out) both}
.hero-right{animation:fade-in .8s .3s both}

/* ---- SCROLL INDICATOR ---- */
.scroll-indicator{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  z-index:3;
}
.scroll-indicator span{font-size:.72rem;font-weight:600;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase}
.scroll-mouse{
  width:22px;height:36px;
  border:2px solid rgba(255,255,255,0.2);
  border-radius:12px;
  position:relative;
  display:flex;justify-content:center;
  padding-top:6px;
}
.scroll-wheel{
  width:3px;height:8px;
  background:var(--gold);
  border-radius:2px;
  animation:scroll-hint 1.5s ease-in-out infinite;
}

/* ---- GAME CARD HOVER GLOW ---- */
.game-card-glow{
  transition:box-shadow .3s;
}
.game-card-glow:hover{
  box-shadow:
    0 0 0 1px rgba(204,0,0,0.4),
    0 8px 40px rgba(204,0,0,0.2),
    0 20px 60px rgba(0,0,0,0.5);
}

/* ---- COUNTER ANIMATED NUMBER ---- */
.count-wrap{overflow:hidden;display:inline-block;vertical-align:middle}
.count-digit{display:inline-block}

/* ---- LIVE DOT ---- */
.live-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--red);
  margin-right:6px;
  animation:pulse-dot 1.2s infinite;
}

/* ---- TROPHY / WIN ANIMATION ---- */
.win-flash{
  animation:bounce-in .5s var(--ease-bounce) both;
}

/* ---- MOUSE GLOW (applied via JS) ---- */
#mouse-glow{
  position:fixed;
  width:300px;height:300px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(204,0,0,0.06),transparent 70%);
  pointer-events:none;
  z-index:0;
  transform:translate(-50%,-50%);
  transition:transform .1s,opacity .3s;
}

/* ---- NOTIFICATION BADGE ---- */
.notif-badge{
  position:absolute;
  top:-4px;right:-4px;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--red);
  font-size:.6rem;font-weight:800;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg-primary);
  animation:glow-pulse 1.5s infinite;
}