/* ===== SpiderGift · анимации и эффекты ===== */

@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(.88); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes toast-in {
  0%   { opacity: 0; transform: translateY(-22px) scale(.94); }
  60%  { opacity: 1; transform: translateY(3px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-14px) scale(.95); filter: blur(2px); }
}
/* полоска жизни уведомления утекает слева направо */
@keyframes toast-drain {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}
@keyframes boot-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(310%); }
}
@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.06); opacity: .82; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-.6deg); }
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,59,92,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(255,59,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,92,0); }
}
@keyframes live-in {
  from { opacity: 0; transform: translateX(-16px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes float-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, 30px); }
}
@keyframes float-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-36px, 46px); }
}
@keyframes float-c {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(28px, -40px); }
}

/* ---------- выигрыш ---------- */
@keyframes prize-in {
  0%   { opacity: 0; transform: scale(.55) rotate(-8deg); filter: blur(10px); }
  55%  { opacity: 1; transform: scale(1.12) rotate(2deg); filter: blur(0); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes ring-burst {
  0%   { opacity: .9; transform: scale(.4); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes ray-spin {
  to { transform: rotate(360deg); }
}
@keyframes confetti-fall {
  0%   { opacity: 1; transform: translate3d(0, -20px, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0), 320px, 0) rotate(var(--rot, 540deg)); }
}
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
@keyframes flash-win {
  0%   { box-shadow: 0 0 0 0 var(--flash, rgba(69,214,127,.7)); }
  100% { box-shadow: 0 0 0 26px rgba(0,0,0,0); }
}

.prize-pop { animation: prize-in .7s var(--ease-spring) both; }
.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97) both; }

.burst {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.burst i {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 2px solid var(--flash, rgba(255,255,255,.55));
  animation: ring-burst .9s var(--ease-out) forwards;
}
.burst i:nth-child(2) { animation-delay: .12s; }
.burst i:nth-child(3) { animation-delay: .24s; }
.rays {
  position: absolute;
  width: 300px; height: 300px;
  background: repeating-conic-gradient(from 0deg,
    var(--flash, rgba(255,255,255,.18)) 0deg 3deg,
    transparent 3deg 15deg);
  filter: blur(2px);
  opacity: .28;
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 55%, transparent 78%);
  mask: radial-gradient(circle, transparent 28%, #000 55%, transparent 78%);
  animation: ray-spin 14s linear infinite;
  pointer-events: none;
}
.confetti {
  position: absolute;
  top: 0; left: 50%;
  width: 8px; height: 12px;
  border-radius: 2px;
  animation: confetti-fall 1.4s ease-in forwards;
  pointer-events: none;
}

/* ---------- утилиты движения ---------- */
.glow-soft { filter: drop-shadow(0 0 14px var(--rar, rgba(61,139,255,.6))); }
.blur-in { animation: blur-in .5s var(--ease-out) both; }
@keyframes blur-in {
  from { filter: blur(12px); opacity: 0; }
  to   { filter: blur(0); opacity: 1; }
}

.stagger > * { animation: view-in .4s var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .1s; }
.stagger > *:nth-child(4) { animation-delay: .14s; }
.stagger > *:nth-child(5) { animation-delay: .18s; }
.stagger > *:nth-child(6) { animation-delay: .22s; }
.stagger > *:nth-child(7) { animation-delay: .26s; }
.stagger > *:nth-child(8) { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}