/**
 * Land beat + FX canvas for the wallet-juice engine on the live lobby.
 *
 * Lifted verbatim from public/POCs/wallet-juice-lab/css/wallet-juice-host.css.
 * Does not restyle chip chrome — only the receiving glow, the bump, the receipt
 * chip, the count-up colour and the fullscreen canvas. `.resource--tags` already
 * supplies --resource / --resource-rgb from the topbar sheet, so the glow picks
 * up the Tags cyan without a second palette here.
 *
 * `.resource__glow` is injected into #wallet-tags by the objectives binder; the
 * lobby's own markup does not carry it, and everything below degrades to "no
 * glow, still bumps" when it is absent.
 */

#fx {
  position: fixed;
  inset: 0;
  z-index: 2400;
  pointer-events: none;
  contain: strict;
}

#fx.is-idle {
  visibility: hidden;
}

.resource {
  --recv: 0.55;
  --bump: 1.08;
}

.resource.is-receiving::before {
  background: linear-gradient(
    180deg,
    rgba(var(--resource-rgb), calc(0.2 + 0.5 * var(--recv))),
    rgba(var(--resource-rgb), calc(0.065 + 0.14 * var(--recv))) 48%,
    rgba(var(--resource-rgb), calc(0.13 + 0.32 * var(--recv)))
  );
}

.resource__glow {
  position: absolute;
  z-index: 0;
  inset: 1px;
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease-out, cubic-bezier(0.2, 0.75, 0.25, 1));
}

.resource.is-receiving .resource__glow {
  opacity: 1;
}

.resource.is-bumped .resource__glow {
  animation: wallet-land-flare var(--bump-ms, 500ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

.resource__glow::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--resource-rgb), calc(0.42 * var(--recv))), transparent 62%),
    radial-gradient(120% 150% at 50% 108%, rgba(var(--resource-rgb), calc(0.34 * var(--recv))), transparent 70%);
  content: "";
}

.resource.is-anticipating .resource__glow::before {
  animation: wallet-charge var(--hold-ms, 300ms) ease-in-out both;
}

@keyframes wallet-charge {
  0% { opacity: 0.42; transform: scaleX(0.5); }
  55% { opacity: 0.82; transform: scaleX(0.82); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes wallet-land-flare {
  0% { opacity: 0.5; transform: scale(0.92); }
  22% { opacity: 1; transform: scale(var(--bump, 1.08)); }
  100% { opacity: 1; transform: scale(1); }
}

.resource__glow::after {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(255, 255, 255, calc(0.16 + 0.26 * var(--recv))) 50%,
    transparent 62%
  );
  transform: translateX(-70%);
  content: "";
}

.resource:has(.is-filling) .resource__glow::after {
  animation: wallet-sweep 900ms var(--ease-out, cubic-bezier(0.2, 0.75, 0.25, 1)) infinite;
}

@keyframes wallet-sweep {
  from { transform: translateX(-70%); }
  to { transform: translateX(70%); }
}

.resource.is-bumped {
  animation: wallet-juice-bump var(--bump-ms, 460ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

@keyframes wallet-juice-bump {
  0% { transform: scale(1); }
  18% { transform: scale(var(--bump), calc(2 - var(--bump))); }
  46% { transform: scale(calc(1 + (var(--bump) - 1) * 0.45)); }
  100% { transform: scale(1); }
}

.resource.is-settled {
  animation: wallet-juice-settle 520ms var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

@keyframes wallet-juice-settle {
  0%, 100% { transform: scale(1); }
  28% { transform: scale(1.035); }
  62% { transform: scale(0.992); }
}

.resource__balance {
  position: relative;
}

.resource__balance::after {
  position: absolute;
  top: calc(100% + 2px);
  right: 12px;
  color: var(--resource, var(--cyan, #39aef2));
  content: attr(data-incoming);
  font-family: Rajdhani, "Arial Narrow", sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.035em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(0.92);
  transform-origin: right center;
  white-space: nowrap;
}

.resource.is-receiving .resource__balance::after {
  animation: wallet-receipt var(--receipt-ms, 760ms) var(--ease-out, cubic-bezier(0.2, 0.75, 0.25, 1)) both;
}

@keyframes wallet-receipt {
  0% { opacity: 0; transform: translateY(-5px) scale(0.92); }
  18%, 68% { opacity: 0.95; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(3px) scale(0.98); }
}

.resource__value.is-filling {
  color: var(--resource, var(--cyan, #39aef2));
}

.collect-button.is-firing,
.pack.is-firing,
.cc-coin-package-card.is-firing,
.coin-pkg.is-firing {
  animation: origin-fire 620ms var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

@keyframes origin-fire {
  0% { transform: scale(1); filter: brightness(1); }
  14% {
    transform: scale(calc(1 - 0.05 * var(--fire-pow, 1)), calc(1 + 0.035 * var(--fire-pow, 1)));
    filter: brightness(1.35);
  }
  34% {
    transform: scale(calc(1 + 0.06 * var(--fire-pow, 1)), calc(1 - 0.03 * var(--fire-pow, 1)));
    filter: brightness(1.9);
  }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .collect-button.is-firing,
  .pack.is-firing,
  .cc-coin-package-card.is-firing,
  .coin-pkg.is-firing,
  .resource:has(.is-filling) .resource__glow::after,
  .resource.is-anticipating .resource__glow::before,
  .resource.is-bumped,
  .resource.is-bumped .resource__glow,
  .resource.is-receiving .resource__balance::after,
  .resource.is-settled {
    animation: none;
  }
}