/* ==========================================================================
   BrainWash: Zombie Cleanup — page sections
   Layout specific to the game landing page. Shared chrome lives in base.css.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */
.hero {
  padding: var(--space-section) var(--space-gutter);
  text-align: center;
  background: var(--texture-halftone), var(--cream);
}

.hero__badge {
  display: inline-block;
  background: var(--blue);
  color: var(--ink);
  font-weight: 800;
  font-size: var(--fs-2xs);
  letter-spacing: 3px;
  padding: 6px 14px;
  margin-bottom: 18px;
  border: var(--bw-thin) solid var(--ink);
  transform: rotate(-2deg);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1;
  margin-bottom: 14px;
  color: var(--orange);
  text-transform: uppercase;
  /* Load-bearing: orange on cream is only ~2.6:1. The hard ink outline is
     what makes the headline legible, not decoration. Do not remove. */
  text-shadow: 4px 4px 0 var(--ink);
}

.hero__lead {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--body-text);
  max-width: var(--w-narrow);
  margin: 0 auto 34px;
}

/* --- Trailer -------------------------------------------------------------- */
.trailer {
  max-width: var(--w-mid);
  margin: 0 auto 30px;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: var(--bw-thick) solid var(--ink);
  box-shadow: var(--shadow-lg) var(--blue);
  overflow: hidden;
  position: relative;
}
.trailer iframe { width: 100%; height: 100%; border: 0; }

/* Click-to-play facade. The design autoplayed a YouTube iframe on load; this
   swaps the iframe in only on click, so the page costs nothing to load and
   sets no third-party cookies until the visitor asks for the video. */
.trailer__facade {
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: var(--ink);
  cursor: pointer;
  display: block;
  position: relative;
}
.trailer__poster {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.trailer__facade:hover .trailer__poster { opacity: 0.9; transform: scale(1.02); }

.trailer__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--blue);
  pointer-events: none;
}
.trailer__play-ring {
  width: 70px; height: 70px;
  border-radius: 50%;
  border: var(--bw) solid var(--blue);
  background: rgb(51 48 44 / 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.trailer__play-ring::after {
  content: "";
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid var(--blue);
  margin-left: 5px;
}
.trailer__facade:hover .trailer__play-ring {
  transform: scale(1.08);
  background: rgb(51 48 44 / 0.75);
}

.trailer__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 1px;
  color: var(--muted);
  padding-inline: 12px;
  text-align: center;
}

/* --- Countdown ------------------------------------------------------------ */
.countdown {
  background: var(--ink);
  padding: 30px var(--space-gutter);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.countdown__label {
  font-family: var(--font-display);
  color: var(--paper);
  font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);
  letter-spacing: 2px;
  margin-right: 10px;
}
.countdown__parts {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.countdown__part { text-align: center; min-width: 70px; }
.countdown__value {
  font-family: var(--font-display);
  font-size: var(--fs-digit);
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.countdown__unit {
  font-size: var(--fs-3xs);
  letter-spacing: 2px;
  color: var(--muted);
  font-weight: 700;
}

/* Released state — replaces the ticker rather than showing 00:00:00:00. */
.countdown--released .countdown__parts { display: none; }
.countdown__released {
  display: none;
  font-family: var(--font-display);
  font-size: var(--fs-digit);
  color: var(--orange);
  letter-spacing: 2px;
}
.countdown--released .countdown__released { display: block; }

/* --- Screenshots ---------------------------------------------------------- */
.screenshots { padding-block: var(--space-section); }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  color: var(--ink);
  text-align: center;
  margin-bottom: 40px;
}

.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.shot {
  padding: 0;
  aspect-ratio: 16 / 10;
  background: var(--texture-placeholder);
  border: var(--bw) solid var(--ink);
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* <picture> is inline by default, so it has to be told to fill the tile
   before the img inside it can resolve height: 100%. */
.shot picture { display: block; width: 100%; height: 100%; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md) var(--orange); }

/* --- Lightbox (native <dialog>: Esc + focus trap handled by the browser) --- */
.lightbox__inner { position: relative; display: inline-block; line-height: 0; }

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 96vh;
  overflow: visible;
}
.lightbox::backdrop { background: rgb(51 48 44 / 0.92); }
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto; height: auto;
  border: var(--bw-thick) solid var(--ink);
  box-shadow: var(--shadow-lg) var(--orange);
  background: var(--stripe-a);
}
.lightbox__close {
  position: absolute;
  top: -18px; right: -18px;
  width: 44px; height: 44px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  background: var(--orange);
  color: var(--paper);
  border: var(--bw) solid var(--ink);
  font-weight: 800;
}

/* --- Content creator bundle ----------------------------------------------- */
.creators {
  background: rgb(127 168 184 / 0.25);
  padding-block: var(--space-section);
}
.creators__panel {
  max-width: var(--w-mid);
  margin-inline: auto;
  background: var(--cream-light);
  border: var(--bw-thick) solid var(--ink);
  box-shadow: var(--shadow-lg) var(--orange);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  display: flex;
  gap: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  flex-wrap: wrap;
}
.creators__body { flex: 1; min-width: 260px; }
.creators__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  margin-bottom: 14px;
}
.creators__text { line-height: 1.6; color: var(--body-text); margin-bottom: 20px; }
.creators__list {
  list-style: disc;
  padding-left: 20px;
  font-size: var(--fs-sm);
  line-height: 2;
  color: var(--body-text);
}
.creators__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  flex: 1;
}

.download-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
  padding: 24px 32px;
  border: var(--bw) solid var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  text-align: center;
}
.download-tile:hover {
  color: var(--paper);
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-md) var(--blue);
}
.download-tile__icon { font-size: 2rem; line-height: 1; }
.download-tile__label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 1px;
}
.download-tile__meta {
  font-size: var(--fs-3xs);
  color: var(--sand);
  font-family: var(--font-mono);
}

/* --- Follow --------------------------------------------------------------- */
.follow { padding: var(--space-section) var(--space-gutter); text-align: center; }
.follow .section-title { margin-bottom: 24px; }
.follow__links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* Icon-only buttons: square, with the label kept in the DOM (visually hidden)
   so the link still has an accessible name. title= gives sighted users a
   hover tooltip, since the logos alone are not all self-evident. */
.follow__links .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
}
/* Icons inherit the button's text colour, so they flip to paper on ink and on
   orange without a second rule. */
.follow__links .btn__icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .creators__panel { box-shadow: var(--shadow-md) var(--orange); }
  .trailer { box-shadow: var(--shadow-md) var(--blue); }
}

@media (max-width: 600px) {
  .hero__title { text-shadow: 3px 3px 0 var(--ink); }
  .countdown { gap: 12px; }
  .countdown__label { margin-right: 0; }
  .countdown__parts { gap: 8px; }
  /* 4 across is too tight on a phone; 2x2 keeps the digits readable. */
  .countdown__part { min-width: 0; flex: 0 0 calc(50% - 8px); }
  /* Same reasoning as the countdown above: 6 across doesn't fit a phone and
     wraps to a lone orphan, so pin it to 3x2. */
  .follow__links {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    justify-content: center;
  }
  .shot-grid { grid-template-columns: 1fr; }
  .creators__cta { justify-content: stretch; }
  .download-tile { width: 100%; }
  .lightbox__close { top: 8px; right: 8px; }
}