/* ================================================
   MOOD ACADEMY — RARITY EFFECTS (UNIFIED)
   Uso:
   - aggiungi class="ma-card" all'elemento carta
   - usa data-rarity="Comune|Silver|Gold|Legends|Rainbow|Full Art|Secret"
   - opzionale: <span class="ma-rarity-badge" data-rarity="Gold">Gold</span>
   ================================================ */

.ma-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  cursor: pointer;
  background: #18152a;
}

.ma-card:hover {
  transform: translateY(-4px) scale(1.03);
}

.ma-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}

/* base foil layer */
.ma-card::before {
  content: "";
  position: absolute;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  border-radius: 13px;
  background: linear-gradient(120deg, #00eaff, #ff00c8, #ffee00, #00eaff);
  background-size: 300% 300%;
  animation: maFoilGlow 4s linear infinite;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ma-card:hover::before { opacity: 0.45; }
}

/* rarity border overlay */
.ma-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 10;
  transition: all 0.3s ease;
}

/* COMUNE */
.ma-card[data-rarity="Comune"]::after {
  border-color: rgba(124,92,191,0.18);
}

/* SILVER */
.ma-card[data-rarity="Silver"] {
  box-shadow: 0 0 8px rgba(176,184,200,0.28);
  border: 1px solid rgba(176,184,200,0.24);
}
.ma-card[data-rarity="Silver"]::before {
  background: linear-gradient(120deg, #d9dde5, #ffffff, #c0c0c0, #d9dde5);
  background-size: 300% 300%;
}
.ma-card[data-rarity="Silver"]::after {
  border-color: rgba(192,192,192,0.45);
}
@media (hover: hover) and (pointer: fine) {
  .ma-card[data-rarity="Silver"]:hover::after {
    border-color: #c0c0c0;
    box-shadow:
      inset 0 0 20px rgba(192,192,192,0.5),
      inset 0 0 36px rgba(192,192,192,0.25),
      0 0 15px rgba(192,192,192,0.45);
    animation: maSilverPulse 1.5s ease-in-out infinite;
  }
}

/* GOLD */
.ma-card[data-rarity="Gold"] {
  box-shadow: 0 0 12px rgba(212,175,55,0.34);
  border: 1px solid rgba(212,175,55,0.3);
}
.ma-card[data-rarity="Gold"]::before {
  background: linear-gradient(120deg, #ffd700, #fff7a1, #ffd700, #ff8c00);
  background-size: 300% 300%;
}
.ma-card[data-rarity="Gold"]::after {
  border-color: rgba(255,215,0,0.55);
}
@media (hover: hover) and (pointer: fine) {
  .ma-card[data-rarity="Gold"]:hover::after {
    border-color: #ffd700;
    box-shadow:
      inset 0 0 20px rgba(255,215,0,0.55),
      inset 0 0 40px rgba(255,215,0,0.28),
      0 0 16px rgba(255,215,0,0.48);
    animation: maGoldPulse 1.5s ease-in-out infinite;
  }
}

/* LEGENDS */
.ma-card[data-rarity="Legends"] {
  box-shadow: 0 0 16px rgba(168,130,240,0.4);
  border: 1px solid rgba(168,130,240,0.36);
}
.ma-card[data-rarity="Legends"]::before {
  background: linear-gradient(120deg, #a882f0, #eeddff, #7c5cbf, #a882f0);
  background-size: 300% 300%;
}
.ma-card[data-rarity="Legends"]::after {
  border-color: rgba(168,130,240,0.55);
}
@media (hover: hover) and (pointer: fine) {
  .ma-card[data-rarity="Legends"]:hover::after {
    border-color: #a882f0;
    box-shadow:
      inset 0 0 24px rgba(168,130,240,0.65),
      inset 0 0 48px rgba(168,130,240,0.35),
      0 0 20px rgba(168,130,240,0.55);
    animation: maLegendsPulse 1.8s ease-in-out infinite;
  }
}

/* RAINBOW */
.ma-card[data-rarity="Rainbow"] {
  box-shadow: 0 0 16px rgba(240,208,96,0.36);
  border: 1px solid rgba(240,208,96,0.28);
}
.ma-card[data-rarity="Rainbow"]::before {
  background: linear-gradient(120deg, #ff00c8, #00eaff, #ffee00, #ff00c8);
  background-size: 400% 400%;
  animation: maFoilGlow 2s linear infinite;
}
.ma-card[data-rarity="Rainbow"]::after {
  border-color: rgba(255,0,200,0.52);
}
@media (hover: hover) and (pointer: fine) {
  .ma-card[data-rarity="Rainbow"]:hover::before {
    opacity: 0.75;
  }
  .ma-card[data-rarity="Rainbow"]:hover::after {
    animation: maRainbowPulse 1.2s linear infinite;
  }
}

/* FULL ART */
.ma-card[data-rarity="Full Art"] {
  box-shadow:
    0 0 20px rgba(255,0,255,0.34),
    0 0 40px rgba(0,255,255,0.18);
  border: 1px solid rgba(255,160,255,0.28);
}
.ma-card[data-rarity="Full Art"]::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,0,255,0.55) 1px, transparent 1px),
    radial-gradient(circle, rgba(0,255,255,0.55) 1px, transparent 1px);
  background-size: 50px 50px, 80px 80px, 100px 100px;
  background-position: 0 0, 40px 40px, 80px 20px;
  animation: maSparkleMove 6s linear infinite;
}
.ma-card[data-rarity="Full Art"]::after {
  border-color: rgba(255,215,0,0.58);
}
@media (hover: hover) and (pointer: fine) {
  .ma-card[data-rarity="Full Art"]:hover::before { opacity: 0.7; }
  .ma-card[data-rarity="Full Art"]:hover::after {
    border-color: #ffd700;
    box-shadow:
      inset 0 0 30px rgba(255,215,0,0.55),
      0 0 25px rgba(255,215,0,0.42);
    animation: maGoldPulse 1.5s ease-in-out infinite;
  }
  .ma-card[data-rarity="Full Art"]:hover {
    animation: maSparkleGlow 2s ease-in-out infinite;
  }
}

/* SECRET */
.ma-card[data-rarity="Secret"] {
  box-shadow:
    0 0 20px rgba(255,215,0,0.38),
    0 0 40px rgba(0,0,0,0.6);
  border: 2px solid rgba(0,0,0,0.58);
}
.ma-card[data-rarity="Secret"]::after {
  border-color: rgba(255,215,0,0.6);
}
@media (hover: hover) and (pointer: fine) {
  .ma-card[data-rarity="Secret"]:hover::after {
    border-color: #000;
    border-width: 3px;
    box-shadow:
      inset 0 0 30px rgba(255,215,0,0.8),
      inset 0 0 50px rgba(255,215,0,0.35),
      0 0 20px rgba(255,215,0,0.5),
      0 0 40px rgba(0,0,0,0.75);
    animation: maSecretPulse 1.8s ease-in-out infinite;
  }
}

/* reveal helper */
.reveal-flash {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
}

.ma-card.is-revealing[data-rarity="Gold"] .reveal-flash     { animation: maRevealGold 0.6s ease-out forwards; }
.ma-card.is-revealing[data-rarity="Silver"] .reveal-flash   { animation: maRevealSilver 0.6s ease-out forwards; }
.ma-card.is-revealing[data-rarity="Legends"] .reveal-flash  { animation: maRevealLegends 0.8s ease-out forwards; }
.ma-card.is-revealing[data-rarity="Rainbow"] .reveal-flash  { animation: maRevealRainbow 0.8s ease-out forwards; }
.ma-card.is-revealing[data-rarity="Full Art"] .reveal-flash { animation: maRevealFullArt 0.8s ease-out forwards; }
.ma-card.is-revealing[data-rarity="Secret"] .reveal-flash   { animation: maRevealSecret 1s ease-out forwards; }

/* badges */
.ma-rarity-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
}

.ma-rarity-badge[data-rarity="Comune"]   { background: rgba(124,92,191,0.2); color: #a882f0; border: 1px solid rgba(124,92,191,0.3); }
.ma-rarity-badge[data-rarity="Silver"]   { background: rgba(176,184,200,0.2); color: #c0c0c0; border: 1px solid rgba(176,184,200,0.4); }
.ma-rarity-badge[data-rarity="Gold"]     { background: rgba(212,175,55,0.2); color: #d4af37; border: 1px solid rgba(212,175,55,0.4); }
.ma-rarity-badge[data-rarity="Legends"]  { background: rgba(168,130,240,0.2); color: #a882f0; border: 1px solid rgba(168,130,240,0.4); }
.ma-rarity-badge[data-rarity="Rainbow"]  { background: rgba(255,0,255,0.1); color: #ff80ff; border: 1px solid rgba(255,0,255,0.3); }
.ma-rarity-badge[data-rarity="Full Art"] { background: rgba(255,0,255,0.12); color: #ffb3ff; border: 1px solid rgba(0,255,255,0.35); }
.ma-rarity-badge[data-rarity="Secret"]   { background: rgba(0,0,0,0.6); color: #ffd700; border: 1px solid rgba(255,215,0,0.4); }

/* animations */
@keyframes maFoilGlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes maSilverPulse {
  0%, 100% {
    border-color: #c0c0c0;
    box-shadow: inset 0 0 20px rgba(192,192,192,0.6), 0 0 15px rgba(192,192,192,0.5);
  }
  50% {
    border-color: #e8e8e8;
    box-shadow: inset 0 0 30px rgba(192,192,192,0.9), 0 0 25px rgba(192,192,192,0.8);
  }
}

@keyframes maGoldPulse {
  0%, 100% {
    border-color: #ffd700;
    box-shadow: inset 0 0 20px rgba(255,215,0,0.6), 0 0 15px rgba(255,215,0,0.5);
  }
  50% {
    border-color: #ffed4e;
    box-shadow: inset 0 0 30px rgba(255,215,0,0.9), 0 0 25px rgba(255,215,0,0.8);
  }
}

@keyframes maLegendsPulse {
  0%, 100% {
    border-color: #a882f0;
    box-shadow: inset 0 0 24px rgba(168,130,240,0.7), 0 0 20px rgba(168,130,240,0.5);
  }
  50% {
    border-color: #d4b8ff;
    box-shadow: inset 0 0 40px rgba(168,130,240,1), 0 0 35px rgba(168,130,240,0.9);
  }
}

@keyframes maRainbowPulse {
  0%   { border-color: #ff00ff; }
  33%  { border-color: #00ffff; }
  66%  { border-color: #ffff00; }
  100% { border-color: #ff00ff; }
}

@keyframes maSparkleMove {
  0%   { background-position: 0 0, 40px 40px, 80px 20px; }
  100% { background-position: 100px 100px, 140px 140px, 180px 120px; }
}

@keyframes maSparkleGlow {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.15) saturate(1.3); }
}

@keyframes maSecretPulse {
  0%, 100% {
    border-color: #000;
    box-shadow: inset 0 0 25px rgba(255,215,0,0.7), 0 0 15px rgba(255,215,0,0.5);
  }
  50% {
    border-color: #1a1a1a;
    box-shadow: inset 0 0 40px rgba(255,215,0,1), 0 0 30px rgba(255,215,0,0.9);
  }
}

@keyframes maRevealGold {
  0%   { opacity: 1; filter: brightness(3) saturate(0); box-shadow: 0 0 40px rgba(255,215,0,0.8); }
  100% { opacity: 0; filter: brightness(1) saturate(1); box-shadow: 0 0 12px rgba(212,175,55,0.35); }
}
@keyframes maRevealSilver {
  0%   { opacity: 1; filter: brightness(2.5) saturate(0); box-shadow: 0 0 30px rgba(192,192,192,0.8); }
  100% { opacity: 0; filter: brightness(1) saturate(1); box-shadow: 0 0 8px rgba(176,184,200,0.3); }
}
@keyframes maRevealLegends {
  0%   { opacity: 1; filter: brightness(3) saturate(0.5); box-shadow: 0 0 50px rgba(168,130,240,1); }
  100% { opacity: 0; filter: brightness(1) saturate(1); box-shadow: 0 0 16px rgba(168,130,240,0.45); }
}
@keyframes maRevealRainbow {
  0%   { opacity: 1; filter: brightness(3); box-shadow: 0 0 50px rgba(255,0,255,0.9); }
  50%  { opacity: 0.7; }
  100% { opacity: 0; filter: brightness(1) saturate(1); box-shadow: 0 0 16px rgba(240,208,96,0.4); }
}
@keyframes maRevealFullArt {
  0%   { opacity: 1; filter: brightness(3) saturate(2); box-shadow: 0 0 60px rgba(255,0,255,0.8), 0 0 60px rgba(0,255,255,0.6); }
  100% { opacity: 0; filter: brightness(1) saturate(1); }
}
@keyframes maRevealSecret {
  0%   { opacity: 1; filter: brightness(0) contrast(2); box-shadow: 0 0 60px rgba(255,215,0,1); }
  30%  { opacity: 1; filter: brightness(2) contrast(1); }
  100% { opacity: 0; filter: brightness(1) saturate(1); }
}