/* ==========================================================================
   effects.css — Visual effects: cash floats, milestones, confetti, SFX hooks
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Cash Float — "+$500" drifts up and fades out
   --------------------------------------------------------------------------- */
.cash-float {
  position: absolute;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-success);
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
  animation: floatUp 1.4s ease-out forwards;
  z-index: var(--z-toast);
  white-space: nowrap;
}

.cash-float.expense {
  color: var(--color-danger);
  text-shadow: 0 0 10px rgba(255, 87, 87, 0.4);
}

.cash-float.large {
  font-size: 26px;
}

/* ---------------------------------------------------------------------------
   Cash Milestone — gold flash + shimmer for big moments
   --------------------------------------------------------------------------- */
.cash-milestone {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: var(--z-toast);

  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--color-cash);
  text-shadow:
    0 0 20px rgba(255, 215, 0, 0.5),
    0 0 60px rgba(255, 215, 0, 0.2);

  animation: milestoneFlash 2s ease-out forwards;
}

@keyframes milestoneFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60%) scale(1.05);
  }
}

/* Shimmer sweep across the text */
.cash-milestone::after {
  content: '';
  position: absolute;
  inset: -10px -40px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 215, 0, 0.3) 50%,
    transparent 100%
  );
  animation: shimmer 1s ease-in-out 0.3s;
}

/* ---------------------------------------------------------------------------
   Achievement Banner — center-screen celebratory popup
   --------------------------------------------------------------------------- */
.achievement-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 9500;
  pointer-events: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 48px;
  min-width: 340px;
  max-width: 480px;
  text-align: center;

  background: radial-gradient(ellipse at center, rgba(40, 32, 10, 0.95) 0%, rgba(18, 16, 12, 0.97) 100%);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: var(--radius-lg, 12px);
  box-shadow:
    0 0 60px rgba(255, 215, 0, 0.15),
    0 0 120px rgba(255, 215, 0, 0.05),
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 215, 0, 0.15);

  opacity: 0;
  animation: achievementIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.achievement-banner.exit {
  animation: achievementOut 0.4s ease-in forwards;
}

.achievement-banner-icon {
  font-size: 48px;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
  animation: achievementBounce 0.6s ease 0.3s;
}

.achievement-banner-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 215, 0, 0.7);
}

.achievement-banner-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
  line-height: 1.2;
}

.achievement-banner-detail {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-success);
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.3);
}

.achievement-banner-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* Shimmer sweep across banner */
.achievement-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 215, 0, 0.08) 50%,
    transparent 60%
  );
  animation: achievementShimmer 1.2s ease-in-out 0.4s;
  pointer-events: none;
}

@keyframes achievementIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes achievementOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -55%) scale(0.95);
  }
}

@keyframes achievementBounce {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.25); }
  70% { transform: scale(0.95); }
}

@keyframes achievementShimmer {
  0% { background-position: -200% 0; transform: translateX(-100%); }
  100% { background-position: 200% 0; transform: translateX(100%); }
}

/* Threat variant (red) for rivals / bad news */
.achievement-banner.threat {
  background: radial-gradient(ellipse at center, rgba(40, 12, 12, 0.95) 0%, rgba(18, 12, 12, 0.97) 100%);
  border-color: rgba(255, 87, 87, 0.35);
  box-shadow:
    0 0 60px rgba(255, 87, 87, 0.15),
    0 0 120px rgba(255, 87, 87, 0.05),
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 87, 87, 0.15);
}

.achievement-banner.threat .achievement-banner-label {
  color: rgba(255, 87, 87, 0.8);
}

.achievement-banner.threat .achievement-banner-title {
  color: #ff5757;
  text-shadow: 0 0 20px rgba(255, 87, 87, 0.4);
}

.achievement-banner.threat .achievement-banner-detail {
  color: var(--text-secondary);
  text-shadow: none;
}

.achievement-banner.threat::after {
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 87, 87, 0.08) 50%,
    transparent 60%
  );
}

/* ---------------------------------------------------------------------------
   Confetti Burst — container for JS-spawned confetti particles
   --------------------------------------------------------------------------- */
.confetti-burst {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-toast);
  overflow: hidden;
}

.confetti-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 1;
  animation: confettiFall var(--confetti-duration, 2s) ease-in forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform:
      translateY(100vh)
      translateX(var(--confetti-drift, 50px))
      rotate(var(--confetti-spin, 720deg))
      scale(0.5);
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------------
   Number Animate — flash highlight when a value changes
   --------------------------------------------------------------------------- */
.number-animate {
  transition: color var(--transition-fast);
}

.number-animate.flash {
  animation: numberFlash 0.6s ease;
}

.number-animate.flash-up {
  animation: numberFlashUp 0.6s ease;
}

.number-animate.flash-down {
  animation: numberFlashDown 0.6s ease;
}

@keyframes numberFlashUp {
  0% {
    background: rgba(52, 211, 153, 0.3);
    color: var(--color-success);
  }
  100% {
    background: transparent;
  }
}

@keyframes numberFlashDown {
  0% {
    background: rgba(255, 87, 87, 0.3);
    color: var(--color-danger);
  }
  100% {
    background: transparent;
  }
}

/* ---------------------------------------------------------------------------
   Sound Effect Hook Classes
   Used as markers by the audio system — JS listens for these classes
   on click / mount / interaction to trigger corresponding sound effects.
   These are intentionally empty (no visual styles).
   --------------------------------------------------------------------------- */
.sfx-click    { /* click / tap */ }
.sfx-open     { /* panel or modal open */ }
.sfx-close    { /* panel or modal close */ }
.sfx-success  { /* successful action */ }
.sfx-error    { /* error or denied action */ }
.sfx-coin     { /* cash gain */ }
.sfx-build    { /* building placed */ }