/* =====================================================================
   Minerva Rising — site styles
   Layer order (front → back): navbar > logo > head > body > background
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Oxanium";
  src: url("../fonts/static/Oxanium-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oxanium";
  src: url("../fonts/static/Oxanium-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* --nav-h is set by ../css/nav.css (shared navbar) */

  --body-w: 1000px;               /* fixed body width; media queries step it down */
  --logo-w: 615px;                /* fixed logo width; media queries step it down */
  --logo-top: 40px;               /* logo offset below the navbar */
  --logo-gap: 52px;               /* space between logo art and the trailer */
  /* body starts under the visible part of the logo (art occupies ~74% of the image height) */
  --body-top: calc(var(--nav-h) + var(--logo-top) + var(--logo-w) * 0.42 + var(--logo-gap));

  --cyan: #87e7ff;
  --warm-light: #ffd4a3;
  --warm-dark:  #b8671a;
  --btn-main:   #87e7ff;
  --btn-accent: #27546b;
  --btn-main-hover:   var(--warm-light);
  --btn-accent-hover: var(--warm-dark);   /* darker than #e59a46 for readability on the peach */

  --text: #ffffff;
  --font-display: "Oxanium", "Segoe UI", Arial, sans-serif;
  --font-body: "Oxanium", "Segoe UI", Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #000;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
/* plain text links in the body copy (buttons and social chips carry a class and style themselves) */
.content a:not([class]) {
  color: var(--cyan);
  text-decoration-color: rgba(135,231,255,0.45);
  text-underline-offset: 2px;
  -webkit-transition: color .2s ease; transition: color .2s ease;
}
.content a:not([class]):hover, .content a:not([class]):focus-visible {
  color: var(--warm-light);
  text-decoration-color: currentColor;
  outline: none;
}

/* icons from the inline sprite */
.icon { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.125em; }

/* visually hidden but read by screen readers / search engines */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* The navbar lives in the shared ../css/nav.css (one file for every page on gojonny.com). */

/* =====================================================================
   PARALLAX STAGE
   ===================================================================== */
.stage {
  position: relative;
  min-height: 100vh;
  overflow: hidden;            /* clips layers that slide sideways/up */
}

.layer {
  position: absolute;
  will-change: transform;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

/* Placeholder wrappers: the inline thumbnail is the background; the real image fades in over it */
.lqip { background-size: cover; background-position: center top; background-repeat: no-repeat; }
.js .lqip img { opacity: 0; -webkit-transition: opacity .45s ease; transition: opacity .45s ease; }
.js .lqip.is-loaded img { opacity: 1; }
/* once the real image is in, the blurry thumbnail must go: on images with transparency
   (the head) it would otherwise show as a pale halo outside the alpha edge */
.lqip.is-settled { background-image: none !important; }

/* Layer 1 — background (deepest). One copy at the top fading DOWN to black,
   one copy at the bottom fading UP from black. Same file, so one download. */
.layer--bg {
  z-index: 0;
  left: 0;
  width: 100%;
  height: 56.33vw;             /* 810 / 1438: matches the image aspect when fit to width */
  background-color: #000;
}
/* The top copy stacks ABOVE the bottom copy. Where they ever overlap mid-scroll, the top image
   (with its own fade to black) wins, so the bottom copy's black box can't cut a hard edge into it.
   The vw heights are capped against the page height (the % values are what 1920px wide works out
   to), so on a wide/zoomed-out 4K viewport the two copies keep their 1920 proportions instead of
   the top one swallowing the whole page. The image is a texture, so the extra crop is harmless. */
.layer--bg-top    { top: 0; z-index: 1; height: min(56.33vw, 50%); }
.layer--bg-bottom {
  z-index: 0;
  bottom: -10vw;               /* pinned to the page end, pushed partly off the edge on wide screens */
  bottom: max(-10vw, -9%);
  height: 50vw;
  height: min(50vw, 44%);
  background-position: center bottom;
}
.layer--bg picture, .layer--bg img {
  width: 100%; height: 100%;
  -o-object-fit: cover; object-fit: cover;
  -o-object-position: center top; object-position: center top;
}
.layer--bg-bottom img { -o-object-position: center bottom; object-position: center bottom; }
.layer--bg::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.layer--bg-top::after    { background: linear-gradient(to bottom, rgba(0,0,0,0) 48%, rgba(0,0,0,0.88) 82%, #000 100%); }
/* mostly black: image only shows through in the bottom ~40%, so it can never meet the top copy */
.layer--bg-bottom::after { background: linear-gradient(to top,    rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.92) 50%, #000 62%); }

/* Layer 2 — page body (see .content below, z-index 10) */

/* Layer 3 — Minerva's head, full left & top, in front of the body */
.layer--head {
  z-index: 30;
  top: 0; left: 0;
  width: clamp(220px, 30vw, 540px);
  pointer-events: none;
}
.layer--head img { width: 100%; }

/* Layer 4 — title logo (H1), centered, in front of the head */
.layer--logo {
  z-index: 40;
  top: calc(var(--nav-h) + var(--logo-top));
  left: 50%;
  width: var(--logo-w);
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  pointer-events: none;
}
.logo { margin: 0; }
.logo img { width: 100%; filter: drop-shadow(0 0 18px rgba(135,231,255,0.35)); }

/* Layer 2 — the body */
.content {
  position: relative;
  z-index: 10;
  width: var(--body-w);
  max-width: 100%;
  margin: 0 auto;
  padding: var(--body-top) 0 72px;
}

/* ---------- Trailer ---------- */
.trailer {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(135,231,255,0.15);
}
.trailer__media { width: 100%; }

/* temporary "coming soon" strip just above the bottom edge of the placeholder */
.trailer__banner {
  position: absolute;
  left: 0; right: 0;
  bottom: 40%;                 /* sits over the cover's own "First Look Trailer" title */
  margin: 0;
  padding: 0.8em 1em;
  background: var(--warm-light);
  color: var(--warm-dark);
  border-top: 3px solid var(--warm-dark);
  border-bottom: 3px solid var(--warm-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.3vw, 1.05rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}

/* ---------- Pitch section ---------- */
.pitch {
  margin-top: 72px;
  text-align: center;
}
/* "Build an underground city": live text in the cyan of the old header art, with the flare
   (img/flare_web.webp, 4096×430) drawn beneath it. Sized from --body-w so it tracks the column. */
.pitch__heading {
  margin: 0 auto 14px;
  color: var(--cyan);
  font-weight: 400;
  font-size: calc(var(--body-w) * 0.056);
  line-height: 1;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  text-shadow: 0 3px 5px rgba(0,0,0,0.75), 0 0 14px rgba(135,231,255,0.25);
}
.pitch__heading::after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 6.3%;           /* the art is 430/4096 = 10.5% tall; 6.3% squashes it to ~60% height */
  margin-top: -0.14em;         /* keeps the bright line a little under the baseline */
  background: url("../img/flare_web.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}

.pitch__text {
  color: var(--text);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  max-width: 62ch;
  margin: 0 auto 36px;
  text-align: left;
}

/* ---------- Feature tags + swiping blurb ---------- */
.features { max-width: 62ch; margin: 0 auto 56px; }

.tags {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  margin: 0 0 22px;
}
.tag {
  margin: 5px;
  padding: 6px 16px;
  border: 1px solid rgba(135,231,255,0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--cyan);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
          transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tag:hover, .tag:focus-visible, .tag.is-active {
  background: var(--cyan);
  color: #0b1a24;
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(135,231,255,0.45);
  outline: none;
}

.features__stage {
  position: relative;
  overflow: hidden;
  min-height: 4.5em;           /* JS sets the exact height to the tallest blurb */
}
.feature {
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: 0;
  color: rgba(255,255,255,0.82);
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: opacity .32s ease, -webkit-transform .38s cubic-bezier(.22,.8,.3,1);
          transition: opacity .32s ease, transform .38s cubic-bezier(.22,.8,.3,1);
}
.feature.is-active { opacity: 1; pointer-events: auto; }
.feature.to-left    { -webkit-transform: translateX(-70px); transform: translateX(-70px); }
.feature.to-right   { -webkit-transform: translateX(70px);  transform: translateX(70px); }
.feature.is-parked  { -webkit-transition: none; transition: none; }
.feature.from-right { -webkit-transform: translateX(70px);  transform: translateX(70px); }
.feature.from-left  { -webkit-transform: translateX(-70px); transform: translateX(-70px); }

/* ---------- Wishlist button ---------- */
.wishlist {
  --main:   var(--btn-main);
  --accent: var(--btn-accent);
  position: relative;
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 0.75em 1.9em;
  border-radius: 14px;
  background-color: var(--main);
  color: var(--accent);
  border: 3px solid var(--accent);
  box-shadow:
    0 0 0 0 rgba(135,231,255,0),
    0 14px 40px rgba(135,231,255,0.30),
    inset 0 -4px 0 rgba(39,84,107,0.35);
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
  -webkit-transition: background-color .25s ease, color .25s ease, border-color .25s ease,
                      box-shadow .25s ease, -webkit-transform .18s ease;
          transition: background-color .25s ease, color .25s ease, border-color .25s ease,
                      box-shadow .25s ease, transform .18s ease;
  cursor: pointer;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.wishlist__icon { width: 1.7em; height: 1.7em; margin-right: 0.6em; -ms-flex-negative: 0; flex-shrink: 0; }

/* shine sweep */
.wishlist::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  -webkit-transform: skewX(-20deg); transform: skewX(-20deg);
  pointer-events: none;
}
.wishlist:hover::before, .wishlist:focus-visible::before {
  -webkit-animation: shine .7s ease forwards; animation: shine .7s ease forwards;
}
@-webkit-keyframes shine { to { left: 160%; } }
        @keyframes shine { to { left: 160%; } }

.wishlist:hover, .wishlist:focus-visible {
  --main:   var(--btn-main-hover);
  --accent: var(--btn-accent-hover);
  outline: none;
  box-shadow:
    0 0 0 4px rgba(184,103,26,0.25),
    0 18px 48px rgba(255,212,163,0.45),
    inset 0 -4px 0 rgba(184,103,26,0.45);
  -webkit-transform: translateY(-3px) scale(1.03);
          transform: translateY(-3px) scale(1.03);
}
/* click: invert the warm palette and press it in */
.wishlist:active {
  background-color: var(--btn-accent-hover);
  color: var(--btn-main-hover);
  border-color: var(--btn-main-hover);
  box-shadow:
    0 0 0 6px rgba(184,103,26,0.18),
    0 6px 18px rgba(255,212,163,0.35),
    inset 0 4px 10px rgba(0,0,0,0.25);
  -webkit-transform: translateY(1px) scale(0.98);
          transform: translateY(1px) scale(0.98);
  -webkit-transition-duration: .06s; transition-duration: .06s;
}

/* ---------- Socials ---------- */
.mr-follow {
  margin-top: 160px;           /* same distance the button used to sit from the page bottom */
  text-align: center;
}
.mr-follow__title {
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin: 0 0 22px;
}
.mr-links {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.chip {
  --brand: var(--cyan);
  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  margin: 0 9px;
  padding: 12px 22px 12px 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.45);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, -webkit-transform .18s ease;
          transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .18s ease;
}
.chip .icon { width: 1.6em; height: 1.6em; margin-right: 12px; }
.chip:hover, .chip:focus-visible {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 24px var(--brand);
  -webkit-transform: translateY(-2px); transform: translateY(-2px);
  outline: none;
}
.chip--dc   { --brand: #5865f2; }
.chip--ig { --brand: #e1306c; }
/* Written by parallax.js only when an ad blocker has hidden a chip: a non-link twin with the same
   icon and the handle as its text. It keeps the chip look but none of the hover motion. */
.chip--plain, .chip--plain:hover, .chip--plain:focus-visible {
  cursor: text;
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.45);
  box-shadow: none;
  -webkit-transform: none; transform: none;
  text-transform: none;
  letter-spacing: 0.04em;
}
.chip--plain .icon { color: var(--brand); }
/* the same twin for a plain text link (no chip class) just reads as text in its sentence */
.chip--plain:not(.chip) { background: none; color: inherit; letter-spacing: inherit; }
.plain-handles {
  margin: 16px 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.78);
}
.plain-handles .chip--plain { margin: 0 9px; }

/* ---------- Footer ---------- */
.footer {
  margin-top: 64px;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
.footer p { margin: 0; }
/* deliberately quiet: same colour as the footer text, only the underline gives it away */
.footer__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.35);
  text-underline-offset: 2px;
  margin-left: 0.5em;
  -webkit-transition: color .2s ease; transition: color .2s ease;
}
.footer__link:hover, .footer__link:focus-visible { color: rgba(255,255,255,0.85); text-decoration-color: currentColor; outline: none; }

/* ---------- Toast (gated links: "the Steam page goes live…") ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px;
  z-index: 60;
  -webkit-transform: translate(-50%, 20px); transform: translate(-50%, 20px);
  max-width: calc(100vw - 32px);
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--warm-light);
  color: var(--warm-dark);
  border: 2px solid var(--warm-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 24px rgba(255,212,163,0.35);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity .25s ease, -webkit-transform .25s ease; transition: opacity .25s ease, transform .25s ease;
}
.toast.is-on { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }

/* =====================================================================
   RESPONSIVE
   Body column: 1000px, then 700px below 1200px, then fluid below 760px (phones)
   ===================================================================== */
@media (max-width: 1199px) {
  :root { --body-w: 700px; --logo-w: 460px; --logo-top: 32px; --logo-gap: 40px; }
  .layer--head { width: clamp(200px, 28vw, 400px); }
  .pitch { margin-top: 56px; }
}
@media (max-width: 759px) {
  :root { --body-w: 92vw; --logo-w: 88vw; --logo-top: 24px; --logo-gap: 32px; }
  .layer--head { width: 44vw; }
  /* On a tall narrow screen a width-fit image would be a thin strip, so cover instead. The page is
     only ~2 screens tall here, so each copy is also capped to its share of the page: otherwise the
     two 100vh boxes overlap and the top copy's edge cuts a hard line across the bottom one. */
  .layer--bg-top    { height: min(100vh, 55%); min-height: 640px; }
  .layer--bg-bottom { bottom: 0; height: min(100vh, 45%); min-height: 640px; }
  .pitch { margin-top: 44px; }
  .pitch__text { font-size: 1.05rem; }
  .mr-follow { margin-top: 110px; }
  .trailer__banner { letter-spacing: 0.12em; }
}
@media (max-width: 520px) {
  :root { --logo-top: 20px; }           /* --nav-h steps to 50px in ../css/nav.css */
  .layer--head { width: 48vw; }
  .wishlist { font-size: 1.05rem; padding: 0.8em 1.3em; }
  .tag { font-size: 0.7rem; padding: 5px 11px; margin: 4px; }
  .trailer__banner { font-size: 0.7rem; padding: 0.6em 0.6em; border-width: 2px; }
}

/* Users who prefer less motion get a static layout (JS also checks this) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .layer { will-change: auto; }
  .wishlist, .wishlist::before, .chip, .feature, .tag, .toast { -webkit-transition: none; transition: none; -webkit-animation: none; animation: none; }
}