/* Goatexe — poster-led. The hero is the artwork; everything below stays out of
   its way and lives in the same violet dark. */

/* ---------- fonts (self-hosted, see fonts/README.md) ---------- */

@font-face {
  font-family: "Anybody";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("/fonts/anybody-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anybody";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("/fonts/anybody-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */

:root {
  --void:   #070613;
  --deep:   #0C0A1C;
  --panel:  #141029;
  --line:   #241C42;
  --dim:    #7E76A3;
  --mist:   #A79FC7;
  --star:   #ECE9FF;
  --indigo: #5B4BD6;
  --violet: #8B5CF6;
  --orchid: #C084FC;

  /* The gradient off the poster wordmark. Used on "exe" and nowhere else. */
  --exe: linear-gradient(100deg, #7C6BF0, #A855F7 45%, #C77DEE);

  --display: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --shell: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--star);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--orchid);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 40px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 18px;
  background: var(--panel);
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
  z-index: 20;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- hero ---------- */

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Framed on the constellation. Higher and the poster's own wordmark appears,
     which would print the brand twice. */
  object-position: 50% 47%;
  z-index: -2;
  animation: breathe 44s ease-in-out infinite alternate;
}

@keyframes breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.055); }
}

/* Scrim. Dark enough under the type to carry text at contrast, clear enough
   through the middle to leave the artwork alone. */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(7, 6, 19, 0.58) 0%,
      rgba(7, 6, 19, 0.12) 30%,
      rgba(7, 6, 19, 0.80) 76%,
      var(--void) 100%),
    radial-gradient(72% 56% at 50% 40%, transparent 42%, rgba(7, 6, 19, 0.55) 100%);
}

.stage__body {
  position: relative;
  max-width: var(--shell);
  width: 100%;
  margin: 0 auto;
  padding: 0 40px 11vh;
}

.eyebrow {
  margin: 0 0 24px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--orchid);
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.1rem, 9.5vw, 7.2rem);
  line-height: 0.88;
  font-weight: 750;
  letter-spacing: -0.022em;
  font-variation-settings: "wdth" 118, "wght" 750;
  color: var(--star);
}

.wordmark__x { color: var(--orchid); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .wordmark__x {
    background: var(--exe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.tagline {
  margin: 28px 0 0;
  font-size: clamp(1.1rem, 2.1vw, 1.42rem);
  color: var(--star);
}
.tagline__you { color: var(--orchid); }

.subline {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}

.cta {
  display: inline-block;
  margin-top: 36px;
  padding: 14px 30px;
  border: 1px solid rgba(236, 233, 255, 0.30);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--star);
  background: rgba(20, 16, 41, 0.42);
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.cta:hover {
  border-color: var(--orchid);
  background: rgba(139, 92, 246, 0.24);
}

.cta--solid {
  margin-top: 30px;
  border-color: rgba(139, 92, 246, 0.55);
  background: rgba(139, 92, 246, 0.12);
}

.scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}
.scroll span { animation: bob 3.4s ease-in-out infinite; display: inline-block; }
.scroll:hover { color: var(--mist); }

@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ---------- the dark below ---------- */

/* Faint starfield so the page does not fall off a cliff below the artwork. */
main, .foot { position: relative; }

main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(34% 26% at 14% 8%, rgba(139, 92, 246, 0.16), transparent 70%),
    radial-gradient(30% 24% at 88% 42%, rgba(192, 132, 252, 0.10), transparent 72%),
    radial-gradient(40% 30% at 46% 96%, rgba(91, 75, 214, 0.12), transparent 70%);
}

.band, .soon, .foot__inner { position: relative; z-index: 1; }

.band { padding: 118px 0 96px; }

.kicker {
  margin: 0 0 52px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
}

.rows { display: grid; }

.row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 44px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.row:last-child { border-bottom: 1px solid var(--line); }

.row__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 700;
  font-variation-settings: "wdth" 100, "wght" 700;
  color: var(--star);
}

.row__copy {
  margin: 0;
  max-width: 62ch;
  color: var(--mist);
}

/* Reveal on scroll — only with scripting, so the page is never blank without it. */
.js .row {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1);
}
.js .row.is-in { opacity: 1; transform: none; }

/* ---------- coming soon ---------- */

.soon {
  padding: 86px 0 104px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.soon__label {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 750;
  font-variation-settings: "wdth" 112, "wght" 750;
  letter-spacing: -0.01em;
  background: var(--exe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.soon__copy {
  margin: 0 auto;
  max-width: 44ch;
  color: var(--mist);
}

/* ---------- foot ---------- */

.foot {
  padding: 40px 0 56px;
  border-top: 1px solid var(--line);
}

.colophon {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.colophon--dim { margin-top: 8px; color: #59527A; }
.sep { padding: 0 7px; }
.quiet { text-decoration: none; border-bottom: 1px solid var(--line); }
.quiet:hover { color: var(--orchid); border-color: var(--orchid); }

/* ---------- small screens ---------- */

@media (max-width: 860px) {
  body { font-size: 16px; }
  .shell, .stage__body { padding-left: 24px; padding-right: 24px; }

  /* On a portrait screen, cover shows the poster almost whole — including its
     own wordmark and taglines, which would print the brand twice. Oversizing
     the image and pulling it up crops to the constellation instead. Sized so
     the source is never upscaled. */
  .stage__img {
    height: 200%;
    top: -50%;
    object-position: 50% 50%;
  }
  .stage::after {
    background:
      linear-gradient(180deg,
        rgba(7, 6, 19, 0.52) 0%,
        rgba(7, 6, 19, 0.10) 24%,
        rgba(7, 6, 19, 0.86) 68%,
        var(--void) 100%);
  }
  .stage__body { padding-bottom: 13vh; }

  .band { padding: 84px 0 72px; }
  .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 28px 0;
  }
  .soon { padding: 68px 0 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage__img { animation: none; }
  .scroll span { animation: none; opacity: 0.9; }
  .js .row { opacity: 1; transform: none; transition: none; }
  .cta { transition: none; }
}