/* ═══════════════════════════════════════════════════════════
   Pokemon Hero Section — Programmatic hero for set_map page
   Ported cyber-border from experiment_in_boxes_2.html (Trending Now)
   ═══════════════════════════════════════════════════════════ */

.pkm-hero-section {
  position: relative;
  padding: 32px 20px 28px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(26,10,46,0.97) 0%, rgba(45,16,82,0.95) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-left: 1px solid #6200ea;
  border-right: 1px solid #6200ea;
  border-bottom: 1px solid rgba(98,0,234,0.3);
  border-top: none;
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 15px 40px rgba(49,0,122,0.2);
}

/* Dark overlay over BG image (optional, controlled via admin_tools) */
.pkm-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(26,10,46,0.92) 0%, rgba(45,16,82,0.80) 100%);
  border-radius: 12px;
  z-index: 1;
}

/* Top floating line */
.pkm-hero-top-line {
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #6200ea 30%, #6200ea 70%, transparent 100%);
  z-index: 10;
}

/* ── Cyber deco corners ── */
.pkm-hero-section .cyber-deco {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  filter: drop-shadow(0 0 4px rgba(98,0,234,0.6));
}

/* Bottom-left L-shape decoration — follows card's border-radius (12px) */
.pkm-hero-section .deco-bl-large {
  bottom: -3px;
  left: -3px;
  width: 180px;
  height: 120px;
  border-left: 2px solid #aa00ff;
  border-bottom: 2px solid #aa00ff;
  border-radius: 0 0 0 13px;
  -webkit-mask-image: linear-gradient(to top, black 0%, black 20%, transparent 22%, transparent 25%, black 27%, black 60%, transparent 65%, transparent 75%, black 80%, black 100%);
          mask-image: linear-gradient(to top, black 0%, black 20%, transparent 22%, transparent 25%, black 27%, black 60%, transparent 65%, transparent 75%, black 80%, black 100%);
}
.pkm-hero-section .deco-bl-large::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -2px;
  width: 2px;
  height: 50%;
  background: linear-gradient(to bottom, transparent, #fff, #6200ea, transparent);
  animation: pkm-hero-drop 3s cubic-bezier(0.4,0,0.2,1) infinite;
}
.pkm-hero-section .deco-bl-large::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -100%;
  width: 50%;
  height: 2px;
  background: linear-gradient(to right, transparent, #fff, #6200ea, transparent);
  animation: pkm-hero-slide 3s cubic-bezier(0.4,0,0.2,1) infinite;
  animation-delay: 0.5s;
  opacity: 0;
}

/* Top-right L-shape decoration */
.pkm-hero-section .deco-tr-small {
  top: -8px;
  right: -8px;
  width: 100px;
  height: 60px;
  border-top: 2px solid #aa00ff;
  border-right: 2px solid #aa00ff;
  border-radius: 0 12px 0 0;
  -webkit-mask-image: linear-gradient(to left, black 0%, black 30%, transparent 35%, transparent 40%, black 45%, black 70%, rgba(0,0,0,0.2) 80%, transparent 100%);
          mask-image: linear-gradient(to left, black 0%, black 30%, transparent 35%, transparent 40%, black 45%, black 70%, rgba(0,0,0,0.2) 80%, transparent 100%);
}
.pkm-hero-section .deco-tr-small::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 100%;
  width: 40%;
  height: 2px;
  background: linear-gradient(to right, transparent, #6200ea, #fff, transparent);
  animation: pkm-hero-slide-top 4s cubic-bezier(0.4,0,0.2,1) infinite;
  animation-delay: 1s;
}
.pkm-hero-section .deco-tr-small::after {
  content: '';
  position: absolute;
  top: 0;
  right: -2px;
  width: 2px;
  height: 60%;
  background: linear-gradient(to bottom, #fff, #6200ea, transparent);
  animation: pkm-hero-drop-side 4s cubic-bezier(0.4,0,0.2,1) infinite;
  animation-delay: 1.8s;
  opacity: 0;
}

/* ── Keyframes ── */
@keyframes pkm-hero-drop {
  0%   { top: -50%; opacity: 0; }
  10%  { opacity: 1; }
  50%  { top: 100%; opacity: 0; }
  100% { top: 100%; opacity: 0; }
}
@keyframes pkm-hero-slide {
  0%   { left: 0; opacity: 0; }
  40%  { opacity: 0; }
  45%  { opacity: 1; left: 0; }
  100% { left: 100%; opacity: 0; }
}
@keyframes pkm-hero-slide-top {
  0%   { right: 100%; opacity: 0; }
  10%  { opacity: 1; }
  40%  { right: 0; opacity: 1; }
  41%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes pkm-hero-drop-side {
  0%   { top: 0; opacity: 0; }
  40%  { opacity: 0; }
  41%  { opacity: 1; top: 0; }
  100% { top: 100%; opacity: 0; }
}

/* ── Content layout (mobile-first) ── */
.pkm-hero-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pkm-hero-logo {
  width: 100%;
  max-width: 320px;
  display: flex;
  justify-content: center;
}
.pkm-hero-logo img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

/* ── Card fan ── */
.pkm-hero-fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 280px;
  margin: 4px 0;
}

.pkm-hero-fan-card {
  position: absolute;
  width: 150px;
  height: 206px; /* 150 / 0.727 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  will-change: transform;
  display: none;
}
.pkm-hero-fan-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Mobile (default): show only the first (top-rarity) card centered */
.pkm-hero-fan-card[data-index="0"] {
  display: block;
  transform: translateX(0) translateY(0) rotate(0deg);
  z-index: 10;
  width: 170px;
  height: 234px; /* 170 / 0.727 */
}

/* Tablet: fan of 4 cards */
@media (min-width: 576px) {
  .pkm-hero-fan { height: 300px; }
  .pkm-hero-fan-card { width: 140px; height: 193px; display: block; } /* 140 / 0.727 */
  .pkm-hero-fan-card[data-index="0"] { width: 140px; height: 193px; } /* override mobile */
  .pkm-hero-fan-card[data-index="4"],
  .pkm-hero-fan-card[data-index="5"] { display: none; }

  .pkm-hero-fan-card[data-index="0"] { transform: translateX(-165px) translateY(10px) rotate(-18deg); z-index: 1; }
  .pkm-hero-fan-card[data-index="1"] { transform: translateX(-55px)  translateY(-5px)  rotate(-6deg); z-index: 2; }
  .pkm-hero-fan-card[data-index="2"] { transform: translateX(55px)   translateY(-5px)  rotate(6deg);  z-index: 2; }
  .pkm-hero-fan-card[data-index="3"] { transform: translateX(165px)  translateY(10px)  rotate(18deg); z-index: 1; }
}

/* Desktop: full fan of 6 cards (cards at +30% size, hero -20% overall) */
@media (min-width: 992px) {
  .pkm-hero-section { padding: 28px 26px 24px; }
  .pkm-hero-content { gap: 10px; }
  .pkm-hero-logo img { max-height: 80px; }

  .pkm-hero-fan { height: 395px; }
  .pkm-hero-fan-card { width: 234px; height: 322px; display: block; } /* 234 / 0.727 */
  .pkm-hero-fan-card[data-index="0"] { width: 234px; height: 322px; } /* override mobile */
  .pkm-hero-fan-card[data-index="4"],
  .pkm-hero-fan-card[data-index="5"] { display: block; }

  .pkm-hero-fan-card[data-index="0"] { transform: translateX(-400px) translateY(45px)  rotate(-22deg); z-index: 1; }
  .pkm-hero-fan-card[data-index="1"] { transform: translateX(-245px) translateY(10px)  rotate(-13deg); z-index: 2; }
  .pkm-hero-fan-card[data-index="2"] { transform: translateX(-85px)  translateY(-15px) rotate(-4deg);  z-index: 3; }
  .pkm-hero-fan-card[data-index="3"] { transform: translateX(85px)   translateY(-15px) rotate(4deg);   z-index: 3; }
  .pkm-hero-fan-card[data-index="4"] { transform: translateX(245px)  translateY(10px)  rotate(13deg);  z-index: 2; }
  .pkm-hero-fan-card[data-index="5"] { transform: translateX(400px)  translateY(45px)  rotate(22deg);  z-index: 1; }
}

/* Hover effect: subtle glow only (no transform — keeps fan stable) */
.pkm-hero-fan-card:hover {
  box-shadow: 0 12px 32px rgba(98,0,234,0.6), 0 0 0 2px rgba(170,0,255,0.6);
}

/* CTA button */
.pkm-hero-cta {
  margin-top: 8px;
}
.pkm-hero-cta .btn {
  background: linear-gradient(135deg, #6200ea, #aa00ff);
  border: none;
  color: #fff;
  padding: 10px 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(98,0,234,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pkm-hero-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(98,0,234,0.6);
  color: #fff;
}