/* Motion: floating click rewards and purchase feedback. */
@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); }
  15% { opacity: 1; transform: translate(-50%, -60%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(1); }
}
.floater { animation: float-up .9s ease-out forwards; }

@keyframes bought {
  0% { box-shadow: 0 0 0 0 rgba(255,215,122,.55); background: #3a3020; }
  100% { box-shadow: 0 0 0 10px rgba(255,215,122,0); }
}
.building.bought { animation: bought .45s ease-out; }

@keyframes denied {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.building.denied { animation: denied .22s ease-in-out; }

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); color: var(--gold-2); }
  100% { transform: scale(1); }
}
.b-owned.bump { animation: bump .3s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .floater { animation-duration: .5s; }
  .building.denied, .building.bought, .b-owned.bump { animation: none; }
  .b-progress span { transition: none; }
  .mint { transition: none; }
}

/* upgrades */
@keyframes fresh {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,122,0); }
  30% { box-shadow: 0 0 0 3px rgba(255,215,122,.6), 0 0 18px rgba(255,215,122,.35); }
}
.upgrade.fresh { animation: fresh 1.2s ease-out 2; }
.upgrade.bought { animation: bought .45s ease-out; }
.upgrade.denied { animation: denied .22s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .upgrade.fresh, .upgrade.bought, .upgrade.denied { animation: none; }
}

/* notifications and the skyline */
@keyframes toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.toast { animation: toast-in .25s ease-out; }
.toast.leaving { opacity: 0; transform: translateX(30px); transition: opacity .25s, transform .25s; }
@keyframes smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  30% { opacity: .5; }
  100% { opacity: 0; transform: translate(6px, -16px) scale(1.6); }
}
.skyline .smoke { animation: smoke 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.skyline .smoke.s2 { animation-delay: 1.6s; }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .skyline .smoke { animation: none; }
}

/* achievements: sparkles, a pulse on the top-bar button, a sheen across the toast */
@keyframes sparkle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}
.sparkle { animation: sparkle .8s ease-out forwards; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,215,122,.7); }
  100% { box-shadow: 0 0 0 14px rgba(255,215,122,0); }
}
.top-btn.pulse { animation: pulse .7s ease-out 2; }
@keyframes sheen { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.toast-achievement { position: relative; overflow: hidden; }
.toast-achievement::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255,240,190,.18) 50%, transparent 60%) no-repeat;
  background-size: 200% 100%; animation: sheen 1.4s ease-out .1s;
}
@media (prefers-reduced-motion: reduce) {
  .sparkle { display: none; }
  .top-btn.pulse, .toast-achievement::after { animation: none; }
}
.legacy-card.bought { animation: bought .45s ease-out; }
.legacy-card.denied { animation: denied .22s ease-in-out; }