/* Coin Shop name colors, fonts and effects. Nameplate drops the paint class of any axis a coin style fills. */
@font-face { font-family: 'Ratz Coin Cherry'; src: url('./fonts/coin-cherry.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Mochiy'; src: url('./fonts/coin-mochiy.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Dela'; src: url('./fonts/coin-dela.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Pixel'; src: url('./fonts/coin-pixel.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Chewy'; src: url('./fonts/coin-chewy.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin DotGothic'; src: url('./fonts/coin-dotgothic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Potta'; src: url('./fonts/coin-potta.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Reggae'; src: url('./fonts/coin-reggae.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Yusei'; src: url('./fonts/coin-yusei.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Hachi'; src: url('./fonts/coin-hachi.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Daruma'; src: url('./fonts/coin-daruma.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Pacifico'; src: url('./fonts/coin-pacifico.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Rampart'; src: url('./fonts/coin-rampart.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Train'; src: url('./fonts/coin-train.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Shrikhand'; src: url('./fonts/coin-shrikhand.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Ratz Coin Modak'; src: url('./fonts/coin-modak.woff2') format('woff2'); font-display: swap; }

/* Every file is the 400 cut, so a bold row would otherwise smear it with faux bold. */
.rz-np[class*='rz-coin-font-'] { font-weight: 400; }
.rz-np.rz-coin-font-cherry { font-family: 'Ratz Coin Cherry', system-ui, sans-serif; }
.rz-np.rz-coin-font-mochiy { font-family: 'Ratz Coin Mochiy', system-ui, sans-serif; }
.rz-np.rz-coin-font-dela { font-family: 'Ratz Coin Dela', system-ui, sans-serif; }
.rz-np.rz-coin-font-pixel { font-family: 'Ratz Coin Pixel', system-ui, sans-serif; }
.rz-np.rz-coin-font-chewy { font-family: 'Ratz Coin Chewy', system-ui, sans-serif; }
.rz-np.rz-coin-font-dotgothic { font-family: 'Ratz Coin DotGothic', system-ui, sans-serif; }
.rz-np.rz-coin-font-potta { font-family: 'Ratz Coin Potta', system-ui, sans-serif; }
.rz-np.rz-coin-font-reggae { font-family: 'Ratz Coin Reggae', system-ui, sans-serif; }
.rz-np.rz-coin-font-yusei { font-family: 'Ratz Coin Yusei', system-ui, sans-serif; }
.rz-np.rz-coin-font-hachi { font-family: 'Ratz Coin Hachi', system-ui, sans-serif; }
.rz-np.rz-coin-font-daruma { font-family: 'Ratz Coin Daruma', system-ui, sans-serif; }
.rz-np.rz-coin-font-pacifico { font-family: 'Ratz Coin Pacifico', system-ui, sans-serif; }
.rz-np.rz-coin-font-rampart { font-family: 'Ratz Coin Rampart', system-ui, sans-serif; }
.rz-np.rz-coin-font-train { font-family: 'Ratz Coin Train', system-ui, sans-serif; }
.rz-np.rz-coin-font-shrikhand { font-family: 'Ratz Coin Shrikhand', system-ui, sans-serif; }
.rz-np.rz-coin-font-modak { font-family: 'Ratz Coin Modak', system-ui, sans-serif; }

.rz-np.rz-coin-color-hotpink { color: #ff7ac6; }
.rz-np.rz-coin-color-cheese { color: #ffd84d; }
.rz-np.rz-coin-color-cyan { color: #7fe9ff; }
.rz-np.rz-coin-color-lilac { color: #c9a2ff; }
.rz-np.rz-coin-color-cheddar { color: #ffa62b; }
.rz-np.rz-coin-color-tailpink { color: #ff9db8; }
.rz-np.rz-coin-color-earblue { color: #8fb8ff; }
.rz-np.rz-coin-color-wandgold { color: #f2cf7a; }
.rz-np.rz-coin-color-apple { color: #9be564; }
.rz-np.rz-coin-color-plum { color: #c58bea; }
.rz-np.rz-coin-color-blush { color: #ffd4ea; }
.rz-np.rz-coin-color-snow { color: #f3f0ff; }
.rz-np.rz-coin-color-brie { color: #fff3c9; }
.rz-np.rz-coin-color-ratgrey { color: #b8bcc8; }
.rz-np.rz-coin-color-moonlight { color: #cfd8ff; }

.rz-np.rz-coin-color-melt,
.rz-np.rz-coin-color-magical,
.rz-np.rz-coin-color-ribbon,
.rz-np.rz-coin-color-stardust,
.rz-np.rz-coin-color-candy,
.rz-np.rz-coin-color-hoard,
.rz-np.rz-coin-color-henshin,
.rz-np.rz-coin-color-galaxy {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* First stop equals last so the epic drift loops without a seam. */
.rz-np.rz-coin-color-melt { color: #ffb830; background-image: linear-gradient(90deg, #fff0a8, #ffb830, #fff0a8); }
.rz-np.rz-coin-color-magical { color: #ff9ce0; background-image: linear-gradient(90deg, #ff9ce0, #b58cff, #ff9ce0); }
.rz-np.rz-coin-color-ribbon { color: #ff7ac6; background-image: linear-gradient(90deg, #ff7ac6, #ffd4ea, #ff7ac6); }
.rz-np.rz-coin-color-stardust { color: #cfd8ff; background-image: linear-gradient(90deg, #cfd8ff, #8fa0ff, #f3f0ff, #8fa0ff, #cfd8ff); }
.rz-np.rz-coin-color-candy { color: #7fffd4; background-image: linear-gradient(90deg, #7fffd4, #ff9ce0, #7fffd4); }

.rz-np.rz-coin-color-hoard,
.rz-np.rz-coin-color-henshin,
.rz-np.rz-coin-color-galaxy {
  background-size: 260% 100%;
  animation: rz-coin-drift 6s linear infinite;
}
.rz-np.rz-coin-color-hoard { color: #ffc83d; background-image: linear-gradient(90deg, #fff6cf, #ffc83d, #d88f22, #ffc83d, #fff6cf); }
.rz-np.rz-coin-color-henshin { color: #ff7ac6; background-image: linear-gradient(90deg, #ff7ac6, #ffd84d, #7fe9ff, #c9a2ff, #ff7ac6); }
.rz-np.rz-coin-color-galaxy { color: #8fa0ff; background-image: linear-gradient(90deg, #8fa0ff, #d08bff, #7fe9ff, #d08bff, #8fa0ff); }

@keyframes rz-coin-drift {
  to { background-position: -260% 0; }
}

.rz-np.rz-coin-effect-cheese-glow { filter: drop-shadow(0 0 1px #ffd84d) drop-shadow(0 0 5px rgba(255, 216, 77, 0.7)); }
.rz-np.rz-coin-effect-moon-halo { filter: drop-shadow(0 0 1px #f3f0ff) drop-shadow(0 0 6px rgba(143, 160, 255, 0.85)); }

.rz-np.rz-coin-effect-squeak { animation: rz-coin-squeak 3.2s ease-in-out infinite; }
@keyframes rz-coin-squeak {
  0%, 70%, 100% { transform: none; }
  76% { transform: translateY(-14%) scale(1.04, 0.97); }
  84% { transform: translateY(0) scale(0.98, 1.03); }
  90% { transform: translateY(-5%); }
}

.rz-np.rz-coin-effect-wobble { transform-origin: 50% 100%; animation: rz-coin-wobble 2.6s ease-in-out infinite; }
@keyframes rz-coin-wobble {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(1.6deg); }
}

.rz-np.rz-coin-effect-shine {
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.72) 42%, #000 50%, rgba(0, 0, 0, 0.72) 58%);
  mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.72) 42%, #000 50%, rgba(0, 0, 0, 0.72) 58%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  animation: rz-coin-shine 3s linear infinite;
}
@keyframes rz-coin-shine {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

.rz-np.rz-coin-effect-henshin { animation: rz-coin-henshin 5s linear infinite; }
@keyframes rz-coin-henshin {
  from { filter: hue-rotate(0deg) drop-shadow(0 0 4px currentColor); }
  to { filter: hue-rotate(360deg) drop-shadow(0 0 4px currentColor); }
}

.rz-np.rz-coin-effect-sparkle,
.rz-np.rz-coin-effect-crumbs {
  position: relative;
  isolation: isolate;
}

.rz-np.rz-coin-effect-sparkle::before,
.rz-np.rz-coin-effect-sparkle::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 0.5em;
  height: 0.5em;
  background: #fff1b8;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: rz-coin-twinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.rz-np.rz-coin-effect-sparkle::before { top: 0; right: 0.05em; }
.rz-np.rz-coin-effect-sparkle::after { bottom: 0; left: 0.05em; animation-delay: 1.2s; }
@keyframes rz-coin-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

.rz-np.rz-coin-effect-crumbs::before,
.rz-np.rz-coin-effect-crumbs::after {
  content: '';
  position: absolute;
  top: 0;
  z-index: 1;
  width: 0.14em;
  height: 0.14em;
  background: #ffd84d;
  box-shadow: 0.42em 0.18em 0 #ffb830, 0.86em 0.06em 0 #fff0a8;
  animation: rz-coin-crumb 2.2s ease-in infinite;
  pointer-events: none;
}
.rz-np.rz-coin-effect-crumbs::before { left: 8%; }
.rz-np.rz-coin-effect-crumbs::after { right: 1em; animation-delay: 1.1s; }
@keyframes rz-coin-crumb {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(0.85em); }
}

@media (prefers-reduced-motion: reduce) {
  .rz-np.rz-coin-color-hoard,
  .rz-np.rz-coin-color-henshin,
  .rz-np.rz-coin-color-galaxy,
  .rz-np.rz-coin-effect-squeak,
  .rz-np.rz-coin-effect-wobble,
  .rz-np.rz-coin-effect-shine,
  .rz-np.rz-coin-effect-henshin {
    animation: none;
  }

  .rz-np.rz-coin-effect-sparkle::before,
  .rz-np.rz-coin-effect-sparkle::after,
  .rz-np.rz-coin-effect-crumbs::before,
  .rz-np.rz-coin-effect-crumbs::after {
    animation: none;
    opacity: 0.85;
  }
}