/* Shared playful micro-interactions */
.fun-particle {
  position: fixed;
  z-index: 10001;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  pointer-events: none;
  animation: funParticleBurst 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes funParticleBurst {
  from {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.4);
    opacity: 0;
  }
}

.game-toast-root {
  position: fixed;
  inset-block-end: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10002;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.game-toast {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-game, var(--font-sans));
  font-size: var(--text-sm);
  font-weight: 800;
  color: #050810;
  background: linear-gradient(135deg, #ffd23f, #ffe566);
  border: 2px solid #0f172a;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #1d4ed8;
  white-space: nowrap;
  animation: gameToastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.game-toast--cyan {
  color: #050810;
  background: linear-gradient(135deg, #22d3ee, #67e8f9);
  box-shadow: 4px 4px 0 #0e7490;
}

.game-toast.is-out {
  animation: gameToastOut 0.3s ease-in forwards;
}

@keyframes gameToastIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gameToastOut {
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.9);
  }
}

.game-float-xp {
  position: fixed;
  z-index: 10001;
  font-family: var(--font-game, var(--font-sans));
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--game-cyan, #22d3ee);
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
  pointer-events: none;
  animation: floatXp 0.9s ease-out forwards;
}

@keyframes floatXp {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-48px) scale(1.15);
  }
}

.contact-success.is-celebrating .contact-success-icon {
  animation: successPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-success.is-celebrating .contact-success-title {
  animation: successFadeUp 0.5s ease-out 0.1s both;
}

@keyframes successPop {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes successFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fun-particle,
  .game-toast,
  .game-float-xp,
  .contact-success.is-celebrating .contact-success-icon,
  .contact-success.is-celebrating .contact-success-title {
    animation: none;
  }
}