/* 8-bit themed currency icons */

/* Bitcoin Icon */
.icon-bitcoin {
  --icon-color: #f7931a;
  width: 32px;
  height: 32px;
  background-color: var(--icon-color);
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  box-shadow: 0 0 0 2px #000;
}

.icon-bitcoin:before {
  content: '₿';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 20px;
}

/* EBIT Icon */
.icon-ebit {
  --icon-color: #ff5a5f;
  width: 32px;
  height: 32px;
  background-color: var(--icon-color);
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  box-shadow: 0 0 0 2px #000;
}

.icon-ebit:before {
  content: 'E₿';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 16px;
}

/* SEBIT USD Icon */
.icon-sebit-usd {
  --icon-color: #00d26a;
  width: 32px;
  height: 32px;
  background-color: var(--icon-color);
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  box-shadow: 0 0 0 2px #000;
}

.icon-sebit-usd:before {
  content: '$';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 20px;
}

/* SEBIT INR Icon */
.icon-sebit-inr {
  --icon-color: #3a86ff;
  width: 32px;
  height: 32px;
  background-color: var(--icon-color);
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  box-shadow: 0 0 0 2px #000;
}

.icon-sebit-inr:before {
  content: '₹';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 20px;
}

/* Governance token icon */
.icon-governance {
  --icon-color: #9d4edd;
  width: 32px;
  height: 32px;
  background-color: var(--icon-color);
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  box-shadow: 0 0 0 2px #000;
}

.icon-governance:before {
  content: '🛡️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 16px;
}

/* LinkedIn Icon */
.icon-linkedin {
  --icon-color: #0077b5;
  width: 32px;
  height: 32px;
  background-color: var(--icon-color);
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  box-shadow: 0 0 0 2px #000;
}

.icon-linkedin:before {
  content: 'in';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 16px;
}

/* 8-bit animations */
@keyframes coin-spin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.coin-spin {
  animation: coin-spin 2s infinite linear;
  transform-style: preserve-3d;
  display: inline-block;
}

@keyframes power-up {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.power-up {
  animation: power-up 1s infinite;
  display: inline-block;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.float {
  animation: float 2s infinite ease-in-out;
  display: inline-block;
}