/* ===========================================================================
   Coin update effect
   Plays whenever the coin balance changes (driven by cwlSetCoins in main.js):
   the number pops larger then settles back with a gold glow, and the coin icon
   flips with a shine. Classes are added on change and removed on animationend
   so the effect can re-trigger on every update.
   =========================================================================== */

/* Number: scale up then bounce back to original size + gold glow */
@keyframes cwl-coin-pop {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.5); }
  55%  { transform: scale(0.9); }
  78%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes cwl-coin-glow {
  0%   { color: inherit; text-shadow: none; }
  28%  {
    color: #ffd84a;
    text-shadow: 0 0 8px rgba(255, 216, 74, 0.95), 0 0 16px rgba(255, 196, 0, 0.6);
  }
  100% { color: inherit; text-shadow: none; }
}

.cwl-coin-pop {
  /* inline spans need inline-block for transform: scale to apply */
  display: inline-block;
  transform-origin: center center;
  will-change: transform;
  animation:
    cwl-coin-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    cwl-coin-glow 0.6s ease-out;
}

/* Coin icon: a quick flip with a brightness/shine bump */
@keyframes cwl-coin-icon-shine {
  0% {
    transform: rotateY(0deg) scale(1);
    filter: brightness(1);
  }
  45% {
    transform: rotateY(180deg) scale(1.3);
    filter: brightness(1.7) drop-shadow(0 0 7px rgba(255, 216, 74, 0.95));
  }
  100% {
    transform: rotateY(360deg) scale(1);
    filter: brightness(1);
  }
}

.cwl-coin-icon-shine {
  display: inline-block;
  transform-style: preserve-3d;
  will-change: transform, filter;
  animation: cwl-coin-icon-shine 0.65s ease-in-out;
}

/* Diagonal shine stripe that sweeps across the coin badge, left -> right.
   Implemented as a clipped ::after background sweep so it does NOT need
   overflow:hidden on the badge (which would clip the popping number). The
   pseudo-element's background is naturally clipped to its own (badge-sized) box,
   while the number — a child of the badge, not of the pseudo — is untouched. */
.cwl-coin-badge-sweep {
  position: relative;
}

.cwl-coin-badge-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.45) 46%,
    rgba(255, 240, 170, 0.85) 50%,
    rgba(255, 255, 255, 0.45) 54%,
    transparent 62%
  );
  background-repeat: no-repeat;
  background-size: 300% 100%;
  animation: cwl-coin-badge-sweep 0.7s ease-out;
}

@keyframes cwl-coin-badge-sweep {
  0% {
    background-position-x: 120%;
  }
  100% {
    background-position-x: -20%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cwl-coin-pop,
  .cwl-coin-icon-shine,
  .cwl-coin-badge-sweep::after {
    animation: none;
  }
}