/* ===================================================================
   MTG Hero Section — Programmatic hero for set_map page
   Adapted from pkm_hero.css with blue/cyan palette + BG image support
   =================================================================== */

.mtg-hero-section {
  position: relative;
  padding: 32px 20px 28px;
  margin-bottom: 24px;
  /* Fallback gradient when no BG image */
  background-color: #0a0f1e;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-left: 1px solid #1a73e8;
  border-right: 1px solid #1a73e8;
  border-bottom: 1px solid rgba(26,115,232,0.3);
  border-top: none;
  border-radius: 8px;
  overflow: visible;
  box-shadow: 0 15px 40px rgba(10,30,80,0.3);
}

/* Dark overlay over BG image */
.mtg-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(10,10,30,0.88) 0%, rgba(10,15,35,0.75) 100%);
  border-radius: 8px;
  z-index: 1;
}

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

/* -- Cyber deco corners (blue/cyan variant) -- */
.mtg-hero-section .cyber-deco-mtg {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  filter: drop-shadow(0 0 4px rgba(26,115,232,0.6));
}

/* Bottom-left L-shape */
.mtg-hero-section .deco-bl-large {
  bottom: -3px;
  left: -3px;
  width: 180px;
  height: 120px;
  border-left: 2px solid #00bcd4;
  border-bottom: 2px solid #00bcd4;
  border-radius: 0 0 0 8px;
  -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%);
}
.mtg-hero-section .deco-bl-large::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -2px;
  width: 2px;
  height: 50%;
  background: linear-gradient(to bottom, transparent, #fff, #1a73e8, transparent);
  animation: mtg-hero-drop 3s cubic-bezier(0.4,0,0.2,1) infinite;
}
.mtg-hero-section .deco-bl-large::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -100%;
  width: 50%;
  height: 2px;
  background: linear-gradient(to right, transparent, #fff, #1a73e8, transparent);
  animation: mtg-hero-slide 3s cubic-bezier(0.4,0,0.2,1) infinite;
  animation-delay: 0.5s;
  opacity: 0;
}

/* Top-right L-shape */
.mtg-hero-section .deco-tr-small {
  top: -8px;
  right: -8px;
  width: 100px;
  height: 60px;
  border-top: 2px solid #00bcd4;
  border-right: 2px solid #00bcd4;
  border-radius: 0 8px 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%);
}
.mtg-hero-section .deco-tr-small::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 100%;
  width: 40%;
  height: 2px;
  background: linear-gradient(to right, transparent, #1a73e8, #fff, transparent);
  animation: mtg-hero-slide-top 4s cubic-bezier(0.4,0,0.2,1) infinite;
  animation-delay: 1s;
}
.mtg-hero-section .deco-tr-small::after {
  content: '';
  position: absolute;
  top: 0;
  right: -2px;
  width: 2px;
  height: 60%;
  background: linear-gradient(to bottom, #fff, #1a73e8, transparent);
  animation: mtg-hero-drop-side 4s cubic-bezier(0.4,0,0.2,1) infinite;
  animation-delay: 1.8s;
  opacity: 0;
}

/* -- Keyframes -- */
@keyframes mtg-hero-drop {
  0%   { top: -50%; opacity: 0; }
  10%  { opacity: 1; }
  50%  { top: 100%; opacity: 0; }
  100% { top: 100%; opacity: 0; }
}
@keyframes mtg-hero-slide {
  0%   { left: 0; opacity: 0; }
  40%  { opacity: 0; }
  45%  { opacity: 1; left: 0; }
  100% { left: 100%; opacity: 0; }
}
@keyframes mtg-hero-slide-top {
  0%   { right: 100%; opacity: 0; }
  10%  { opacity: 1; }
  40%  { right: 0; opacity: 1; }
  41%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes mtg-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) -- */
.mtg-hero-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.mtg-hero-logo {
  width: 100%;
  max-width: 320px;
  display: flex;
  justify-content: center;
}
.mtg-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 -- */
.mtg-hero-fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 280px;
  margin: 4px 0;
}

.mtg-hero-fan-card {
  position: absolute;
  width: 150px;
  height: 209px; /* MTG card ratio ~0.718 */
  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;
}
.mtg-hero-fan-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

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

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

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

/* Desktop: full fan of 6 cards */
@media (min-width: 992px) {
  .mtg-hero-section { padding: 28px 26px 24px; }
  .mtg-hero-content { gap: 10px; }
  .mtg-hero-logo img { max-height: 80px; }

  .mtg-hero-fan { height: 395px; }
  .mtg-hero-fan-card { width: 234px; height: 326px; display: block; }
  .mtg-hero-fan-card[data-index="0"] { width: 234px; height: 326px; }
  .mtg-hero-fan-card[data-index="4"],
  .mtg-hero-fan-card[data-index="5"] { display: block; }

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

/* Hover effect: subtle blue glow (no transform) */
.mtg-hero-fan-card:hover {
  box-shadow: 0 12px 32px rgba(26,115,232,0.6), 0 0 0 2px rgba(0,188,212,0.6);
}

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