/* ===== CYBERGROKR — homepage hero: official GTA VI screenshot backdrop =====
   Add class "hero--gtavi" to the homepage <section class="hero"> and place
   hero.jpg at /assets/gtavi/screenshots/hero.jpg.
   The ::before layer paints the screenshot full-bleed with a dark gradient
   so the headline and countdown stay readable. Content is lifted above it
   with position/z-index. Screenshot © Rockstar Games. */

.hero--gtavi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 18px;
}

.hero--gtavi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(100deg, rgba(5, 5, 12, .88) 0%, rgba(5, 5, 12, .55) 42%, rgba(5, 5, 12, .18) 100%),
    linear-gradient(to top, rgba(5, 5, 12, .82) 0%, transparent 34%),
    url("/assets/gtavi/screenshots/hero.jpg");
  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
  /* gentle slow zoom for cinematic feel; remove if distracting */
  animation: cg-hero-drift 36s ease-in-out infinite alternate;
}

@keyframes cg-hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* neon edge to separate the photo from the page */
.hero--gtavi::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 46, 136, .28),
              inset 0 -60px 90px rgba(5, 5, 12, .55);
}

/* keep hero text crisp over the photo */
.hero--gtavi .hero-copy,
.hero--gtavi .hero-board {
  position: relative;
  z-index: 1;
}
.hero--gtavi .hero-copy { text-shadow: 0 2px 18px rgba(0, 0, 0, .65); }

/* photo credit chip, bottom-right of the hero */
.hero--gtavi .hero-photo-credit {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 1;
  font: 500 11px/1.4 ui-monospace, monospace;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .62);
  background: rgba(5, 5, 12, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 5px 10px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  /* on mobile the copy stacks above the art: darken more for legibility */
  .hero--gtavi::before {
    background-image:
      linear-gradient(180deg, rgba(5, 5, 12, .82) 0%, rgba(5, 5, 12, .45) 55%, rgba(5, 5, 12, .78) 100%),
      url("/assets/gtavi/screenshots/hero.jpg");
    animation: none;
  }
}

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