/* KASINO INCES88 — animasi + efek (ala TT789 tapi versi kita) */

/* ── ANIMASI MASUK KARTU (stagger) ── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.game-card { animation: cardIn .45s ease both; }
.game-card:nth-child(3n+1) { animation-delay: .02s; }
.game-card:nth-child(3n+2) { animation-delay: .08s; }
.game-card:nth-child(3n)   { animation-delay: .14s; }

/* ── HOVER / PRESS ── */
.game-card:hover { transform: translateY(-3px); }
.game-card:active { transform: scale(.93); }

/* ── SHINE di tombol (efek premium) ── */
@keyframes shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shine 3s ease infinite;
  pointer-events: none;
}

/* ── PULSE saldo / tombol utama ── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,213,79,.5); }
  50%      { box-shadow: 0 0 0 8px rgba(255,213,79,0); }
}
.btn-primary { animation: pulseGlow 2.2s ease infinite; }

/* ── SPLASH: background animasi (gradasi bergerak) ── */
@keyframes splashBg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.splash {
  background: linear-gradient(160deg, #0b3d6e, #0a6ea8, #12b3c8, #f4d06f, #0a6ea8, #0b3d6e);
  background-size: 400% 400%;
  animation: splashBg 8s ease infinite;
}

/* ── LOGO splash: float + glow ── */
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.splash .logo { animation: logoFloat 2.5s ease-in-out infinite; }

/* ── DONUT spinner lebih smooth ── */
.splash .spin {
  border: 5px solid rgba(255,255,255,.25);
  border-top-color: #ffd54f;
  border-right-color: #fff;
  animation: sp 0.9s cubic-bezier(.4,0,.2,1) infinite;
}

/* ── Emoji berterbangan di splash ── */
@keyframes floatUp {
  0%   { transform: translateY(110vh) rotate(0deg); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .6; }
  100% { transform: translateY(-15vh) rotate(360deg); opacity: 0; }
}
.splash .flying { position: absolute; font-size: 1.6rem; animation: floatUp linear infinite; pointer-events: none; }

/* ── TOAST slide-in ── */
@keyframes toastIn {
  from { transform: translate(-50%, -120%); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
.toast { animation: toastIn .3s ease; }

/* ── NOTIF sukses QR ── */
@keyframes popIn {
  from { transform: scale(.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.qrbox img { animation: popIn .4s cubic-bezier(.34,1.56,.64,1); }

/* ── wiggle utk error ── */
@keyframes wiggle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.alert.err { animation: wiggle .35s ease; }

/* ── BANNER PROMO ── */
.banner-box {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 12px 0;
  border: 1px solid rgba(255, 213, 79, .35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.banner-img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: 50% 30%;
}
.banner-badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  color: #1a1a2e;
  font-weight: 800;
  font-size: .85rem;
  padding: 6px 18px;
  border-radius: 30px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  animation: pulseGlow 2s ease infinite;
}

/* ── Reduce motion utk aksesibilitas ── */
@media (prefers-reduced-motion: reduce) {
  .game-card, .splash, .splash .logo, .splash .spin, .btn::after, .btn-primary, .splash .flying { animation: none !important; }
}