/** HERO CARDS **/
#content-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;

  padding: 1rem 0.5rem;
}

.content-card {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  background: #090e17;
  cursor: pointer;

  clip-path: polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% 100%,
    20px 100%,
    0 calc(100% - 20px)
  );

  box-shadow:
    0 0 10px rgba(0, 240, 255, 0.2),
    inset 0 0 15px rgba(0, 240, 255, 0.1);

  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.content-card img.zoom {
  height: 450px;
}

/* mesh (HUD Grid) */
.content-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
  background-size: 12px 12px;
  z-index: 1;
  pointer-events: none;
}

.content-card::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 240, 255, 0.15) 50%,
    rgba(0, 240, 255, 0.4) 100%
  );

  border-bottom: 2px solid #00f0ff;

  transform: translateY(-110%);
  opacity: 0;

  transition:
    transform 1.2s ease,
    opacity 0.25s ease;

  pointer-events: none;
}

.content-card:hover::after {
  transform: translateY(100%);
  opacity: 1;
}

.content-card .content-image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform-origin: top center;
  filter: brightness(0.85) contrast(1.1) saturate(0.9);
  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.4s ease;
  z-index: 0;
}

.content-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 38px;
  height: 38px;

  background: rgba(9, 14, 23, 0.85);
  border: 1px solid #00f0ff;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);

  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;

  z-index: 4;
  transition: all 0.3s ease;
}

.content-card-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(0, 240, 255, 0.8));
}

.content-card:hover .content-card-badge {
  border-color: #00f0ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.8);
  transform: scale(1.08);
}

.content-card-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 1.5rem 1.25rem 0.9rem;

  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;

  background: linear-gradient(
    360deg,
    rgba(9, 14, 23, 0.95) 0%,
    rgba(9, 14, 23, 0.7) 60%,
    transparent 100%
  );

  border-top: 1px solid rgba(0, 240, 255, 0.3);

  text-shadow:
    0 0 5px rgba(0, 240, 255, 0.6),
    0 0 10px rgba(0, 240, 255, 0.3);

  z-index: 4;
  transition: all 0.3s ease;
}

/* --- HOVER EFFECTS --- */

.content-card:hover {
  transform: translateY(-6px) scale(1.02);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(0, 240, 255, 0.4),
    inset 0 0 20px rgba(0, 240, 255, 0.25);
}

.content-card:hover img {
  filter: brightness(1) contrast(1.15) saturate(1.1);
  transform: scale(1.05);
}

.content-card:hover .content-card-name {
  color: #00f0ff;
  border-top-color: #00f0ff;
  text-shadow:
    0 0 8px rgba(0, 240, 255, 0.9),
    0 0 15px rgba(0, 240, 255, 0.5);
}

@keyframes scanPass {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}

/* * NEW HERO * */
@keyframes flamePulse {
  0% {
    box-shadow:
      0 0 15px rgba(255, 34, 0, 0.6),
      inset 0 0 15px rgba(255, 102, 0, 0.4);
  }
  50% {
    box-shadow:
      0 0 25px rgba(255, 106, 0, 0.9),
      inset 0 0 25px rgba(255, 51, 0, 0.6);
  }
  100% {
    box-shadow:
      0 0 15px rgba(255, 34, 0, 0.6),
      inset 0 0 15px rgba(255, 102, 0, 0.4);
  }
}

@keyframes tagBurn {
  0% {
    filter: drop-shadow(0 0 5px #ff2200) brightness(1);
  }
  50% {
    filter: drop-shadow(0 0 12px #ffbb00) brightness(1.3);
  }
  100% {
    filter: drop-shadow(0 0 5px #ff2200) brightness(1);
  }
}

@keyframes lavaFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.new-hero-tag {
  display: none;
}

.content-card.new-hero {
  border: 1px solid #ff4400;
  animation: flamePulse 2s infinite ease-in-out;
  background: #110705;
}

.content-card.new-hero .new-hero-tag {
  display: block;
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  font-size: 0.85rem;
  font-weight: 950;
  letter-spacing: 2px;
  color: #ffffff;

  background: linear-gradient(-45deg, #ff0000, #ff5500, #ffcc00, #ff3300);
  background-size: 300% 300%;
  animation:
    lavaFlow 3s ease infinite,
    tagBurn 1.5s infinite ease-in-out;

  padding: 5px 16px;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.content-card.new-hero::before {
  background-image:
    linear-gradient(rgba(255, 34, 0, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 34, 0, 0.08) 1px, transparent 1px);
}

.content-card.new-hero::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 17, 0, 0.3) 70%,
    rgba(255, 204, 0, 0.7) 100__
  );
  border-bottom: 3px solid #ffcc00;
  filter: drop-shadow(0 0 10px #ff4400);
}

.content-card.new-hero .content-card-badge {
  background: rgba(30, 10, 5, 0.9);
  border: 1px solid #ff3300;
  box-shadow: 0 0 10px rgba(255, 51, 0, 0.7);
}

.content-card.new-hero .content-card-badge img {
  filter: drop-shadow(0 0 4px #ff1100) brightness(1.2);
}

.content-card.new-hero .content-card-name {
  background: linear-gradient(
    360deg,
    rgba(25, 5, 0, 0.98) 0%,
    rgba(40, 10, 0, 0.8) 60%,
    transparent 100__
  );
  border-top: 1px solid #ff3300;
  color: #ffcc00;
  text-shadow:
    0 0 8px #ff3300,
    0 0 15px #ff6600;
}

.content-card.new-hero:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: #ffaa00;

  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.9),
    0 0 35px rgba(255, 68, 0, 0.85),
    0 0 15px rgba(255, 204, 0, 0.5),
    inset 0 0 30px rgba(255, 51, 0, 0.5);
}

.content-card.new-hero:hover img {
  filter: brightness(1.15) contrast(1.2) saturate(1.4)
    drop-shadow(0 0 8px rgba(255, 68, 0, 0.3));
}

.content-card.new-hero:hover .content-card-name {
  color: #ffffff;
  border-top-color: #ffcc00;
  text-shadow:
    0 0 10px #ff1100,
    0 0 20px #ff6600,
    0 0 30px #ffcc00;
}

.content-card.new-hero:hover .content-card-badge {
  border-color: #ffcc00;
  box-shadow: 0 0 18px #ff3300;
}