/* Page hero: big title over game art.
   Default: diagonal split of two images (/games/). Slideshow variant: crossfading art (home page). */

.page-hero
{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: clamp(380px, 62vh, 620px);
  padding: clamp(48px, 8vw, 96px) 16px clamp(56px, 8vw, 104px);
  text-align: center;
}

/* Two pieces of art split by a diagonal, slowly zooming */
.page-hero-art
{
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Only the two chosen images are shown (the rest of the pool is never downloaded) */
.page-hero-art img
{
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: banner-zoom 24s ease-in-out infinite alternate;
}

.page-hero-art img.is-left
{
  display: block;
  clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%);
}

.page-hero-art img.is-right
{
  display: block;
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
  animation-direction: alternate-reverse;
}

/* With JavaScript on, nothing shows (or downloads) until main.js has picked the pair */
html.js .page-hero-art img:not(.is-picked)
{
  display: none;
}

/* Darkens the art so the title reads, glows behind it, fades into the page at the bottom */
.page-hero::before
{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, var(--glow), transparent 70%),
    linear-gradient(to bottom, rgba(10, 12, 15, 0.55), rgba(10, 12, 15, 0.7) 55%, var(--bg));
}

/* Thin light along the diagonal seam (same geometry as the split) */
.page-hero::after
{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.28);
  clip-path: polygon(58% 0, calc(58% + 2px) 0, calc(42% + 2px) 100%, 42% 100%);
  pointer-events: none;
}

.page-hero-content
{
  max-width: 820px;
  animation: hero-rise 0.9s var(--ease) both;
}

.page-hero-eyebrow
{
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem);
  letter-spacing: 0.25em;
  color: var(--accent-bright);
}

.page-hero h1
{
  margin: 6px 0 14px;
  font-size: clamp(3.2rem, 2rem + 6vw, 7rem);
  line-height: 1;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, #ffffff 45%, var(--accent-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.6));
}

.page-hero-lead
{
  max-width: 62ch;
  margin: 0 auto;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
  line-height: 1.6;
  color: var(--text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

/* Small stat tiles */
.page-hero-stats
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
  list-style: none;
}

.page-hero-stats li
{
  min-width: 120px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background-color: rgba(6, 7, 8, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-muted);
  font-size: 0.95rem;
}

.page-hero-stats strong
{
  display: block;
  font-size: 1.6rem;
  color: #ffffff;
}

/* Jump buttons: outlined pills that fill with the accent on hover */
.page-hero-actions
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.page-hero-actions a
{
  padding: 0.55em 1.5em;
  border: 1px solid var(--accent-bright);
  border-radius: 999px;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
  background-color: rgba(6, 7, 8, 0.45);
  transition: background-color 0.3s, color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}

.page-hero-actions a:hover
{
  transform: translateY(-2px);
  color: var(--on-accent);
  background-color: var(--accent);
  box-shadow: 0 12px 30px -10px var(--glow);
}

/* Primary action: filled with the accent */
.page-hero-actions a.is-primary
{
  color: var(--on-accent);
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 12px 30px -12px var(--glow);
}

.page-hero-actions a.is-primary:hover
{
  background-color: var(--accent-bright);
  border-color: var(--accent-bright);
}

/* ---------- Slideshow variant (home page) ---------- */

.page-hero--slideshow
{
  min-height: clamp(480px, 82vh, 860px);
}

.page-hero--slideshow h1
{
  font-size: clamp(2.6rem, 1.6rem + 4.5vw, 5.5rem);
}

/* No seam line: the art fills the whole hero */
.page-hero--slideshow::after
{
  content: none;
}

.page-hero--slideshow .page-hero-art img
{
  display: block;
  clip-path: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.page-hero--slideshow .page-hero-art img.is-active
{
  opacity: 1;
}

/* Which game is on screen, linking to its page */
.page-hero-caption
{
  position: absolute;
  left: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 28px);
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 1rem;
  color: #ffffff;
  text-decoration: none;
  background-color: rgba(6, 7, 8, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}

.page-hero-caption::before
{
  content: "Now showing · ";
  color: var(--text-muted);
}

.page-hero-caption:hover
{
  transform: translateY(-2px);
  border-color: var(--accent-bright);
}

.page-hero-caption.is-changing
{
  animation: caption-swap 0.6s var(--ease);
}

/* Slide indicators: bars that fill while each slide is on screen */
.page-hero-dots
{
  position: absolute;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(26px, 3.6vw, 40px);
  display: flex;
  gap: 8px;
}

.page-hero-dots button
{
  position: relative;
  overflow: hidden;
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

/* Bigger invisible hit area for fingers */
.page-hero-dots button::before
{
  content: "";
  position: absolute;
  inset: -12px -2px;
}

.page-hero-dots button::after
{
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  transform-origin: left;
  transform: scaleX(0);
}

.page-hero-dots button.is-active::after
{
  animation: slide-progress var(--slide-duration, 6s) linear forwards;
}

.page-hero-dots.is-paused button.is-active::after
{
  animation: none;
  transform: scaleX(1);
}

@keyframes slide-progress
{
  to { transform: scaleX(1); }
}

@keyframes caption-swap
{
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes hero-rise
{
  from { opacity: 0; transform: translateY(24px); }
}

@media (max-width: 600px)
{
  .page-hero-art img.is-left
  {
    clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%);
  }

  .page-hero-art img.is-right
  {
    clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%);
  }

  .page-hero::after
  {
    clip-path: polygon(62% 0, calc(62% + 2px) 0, calc(38% + 2px) 100%, 38% 100%);
  }

  .page-hero-stats li
  {
    min-width: 96px;
    padding: 10px 14px;
  }

  .page-hero--slideshow
  {
    padding-bottom: 96px;
  }

  .page-hero-caption
  {
    font-size: 0.9rem;
  }

  .page-hero-caption::before
  {
    content: none;
  }

  .page-hero-dots button
  {
    width: 22px;
  }
}