/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Remplit l'écran visible sans passer sous l'en-tête fixe. */
  min-height: calc(100vh - var(--header-visual-height));
  min-height: calc(100dvh - var(--header-visual-height));
  padding-block: clamp(28px, 4vh, 36px);
}

.hero-grid {
  width: 100%;
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 960px) {
  .hero {
    min-height: calc(100vh - var(--header-visual-height) + 1px);
    min-height: calc(100dvh - var(--header-visual-height) + 1px);
    flex-direction: column;
    justify-content: center;
  }
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 460px;
  height: 460px;
  right: -230px;
  top: -260px;
  border: 18px solid var(--color-outline);
  border-radius: 50%;
  background: linear-gradient(
    to bottom,
    var(--color-primary) 0 44%,
    var(--color-outline) 44% 56%,
    var(--color-surface) 56% 100%
  );
  opacity: var(--hero-motif-opacity);
  pointer-events: none;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 3px solid var(--color-outline);
  clip-path: var(--notch-sm);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-pixel-sm);
}

.hero-title {
  font-size: 26px;
  color: var(--color-text);
  text-shadow: 3px 3px 0 var(--color-title-shadow);
  margin-bottom: var(--space-3);
}

.hero-title span {
  color: var(--color-primary-light);
}

@media (min-width: 640px) {
  .hero-title {
    font-size: 36px;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 40px;
  }
}

.hero-lede {
  font-size: 19px;
  color: var(--color-secondary);
  max-width: 56ch;
  margin-bottom: var(--space-4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Hero "console screen" mockup */
.hero-screen-frame {
  background: linear-gradient(
    180deg,
    var(--color-primary-dark),
    var(--color-bg-alt)
  );
  border: 4px solid var(--color-outline);
  clip-path: var(--notch);
  box-shadow: var(--shadow-pixel-lg);
  padding: var(--space-2);
}

.hero-screen {
  position: relative;
  background:
    linear-gradient(rgba(248, 250, 252, 0.08), rgba(248, 250, 252, 0.08)),
    url("../assets/battle-arena-background-v2.jpg") center 52% / cover no-repeat;
  border: 3px solid var(--color-primary-dark);
  min-height: 320px;
  padding: var(--space-3);
  overflow: hidden;
}

.hero-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-scanline) 0px,
    var(--color-scanline) 1px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
}

.hero-screen-hud {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--color-primary-light);
  text-shadow: 1px 1px 0 var(--color-surface);
  margin-bottom: var(--space-3);
}

.hero-screen-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: flex-end;
  column-gap: clamp(22px, 5vw, 60px);
  min-height: 180px;
  padding: 18px 0 12px;
  position: relative;
}

.battle-side {
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 1vw, 14px);
  min-width: 0;
}

.battle-side--player {
  justify-content: flex-end;
}

.battle-side--opponent {
  justify-content: flex-start;
}

.hero-mascot {
  width: clamp(62px, 12vw, 104px);
  height: auto;
  animation: float 3s ease-in-out infinite;
}

.hero-mascot--garchomp {
  width: clamp(72px, 11vw, 100px);
  flex-shrink: 0;
}

.battle-trainer {
  width: clamp(36px, 7vw, 64px);
  height: auto;
  max-height: 112px;
  object-fit: contain;
  filter: drop-shadow(2px 3px 0 rgba(32, 32, 32, 0.2));
}

.battle-trainer--player {
  transform: translateY(4px);
}

.battle-trainer--opponent {
  width: clamp(44px, 8.5vw, 78px);
  max-height: 128px;
  transform: translateY(4px);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mascot {
    animation: none;
  }
}

.hero-screen-dialog {
  margin-top: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid var(--color-primary-dark);
  padding: var(--space-2);
  font-size: 16px;
  color: var(--color-secondary);
}

.hero-screen-dialog b {
  color: var(--color-primary-light);
}

@media (min-width: 960px) and (max-height: 760px) {
  .hero {
    padding-block: 20px;
  }

  .hero-grid {
    gap: var(--space-4);
  }

  .hero-badge,
  .hero-title {
    margin-bottom: var(--space-2);
  }

  .hero-title {
    font-size: clamp(30px, 3.4vw, 36px);
  }

  .hero-lede {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
  }

  .hero-screen {
    min-height: 280px;
    padding: var(--space-2);
  }

  .hero-screen-stage {
    min-height: 150px;
    padding-block: 10px 6px;
  }

  .hero-screen-dialog {
    margin-top: var(--space-2);
    font-size: 14px;
  }
}