/* ==========================================================================
   Zleetz — waitlist placeholder
   Single page. No frameworks, no third-party requests.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts */
/* Self-hosted so the page makes no request to any third party. */

@font-face {
  font-family: "Black Ops One";
  src: url("../fonts/blackopsone-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "Black Ops One";
  src: url("../fonts/blackopsone-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "Allerta Stencil";
  src: url("../fonts/allertastencil-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400-600-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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: "Inter";
  src: url("../fonts/inter-400-600-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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;
}

/* --------------------------------------------------------------- 2. Tokens */

:root {
  --glow-out: var(--pad);
  --lime: #9efe00;
  --lime-dim: #8ca202;
  --ink: #e7f0f0;
  --muted: #c9cbc3;
  --bg: #000000;
  --line: #5e614f;
  --line-dim: #3e4034;

  --display: "Black Ops One", "Impact", system-ui, sans-serif;
  --stencil: "Allerta Stencil", "Black Ops One", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* The portrait column. Below the landscape breakpoint the page is this wide
     and centred, with plain black either side, rather than stretching. */
  --maxw: 52rem;
  --pad: clamp(1.15rem, 4vw, 2rem);

  /* The two big headlines. The section headline is derived from the hero
     headline rather than sized independently, so it is 92 per cent of it at
     every width and can never come out larger. Overriding --h1-fit for the
     landscape layout moves both together. */
  --h1-min: 1.7rem;
  --h1-fit: 8.3cqw;
  --h1-max: 4.1rem;
  --h2-ratio: 0.92;

  /* Both subtitles share one size, as they do in the drafts. */
  --sub-min: 1rem;
  --sub-fit: 3.9cqw;
  --sub-max: 1.75rem;

  /* Bevelled-corner size for the HUD frame. Kept in px so the 45-degree
     cut stays a true 45 degrees at every viewport width. */
  --bevel: 26px;
}

/* --------------------------------------------------------------- 3. Reset */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button,
input {
  font: inherit;
  color: inherit;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* --------------------------------------------------------------- 4. Header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1rem, 2.4vw, 1.9rem);
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.1vw, 0.85rem);
}

.brand__mark {
  width: auto;
  height: clamp(1.4rem, 2.5vw, 2.1rem);
  aspect-ratio: 1094 / 679;
  color: var(--lime);
}

.brand__text {
  width: auto;
  height: clamp(1.05rem, 1.9vw, 1.6rem);
  aspect-ratio: 726 / 163;
}

.header__brain {
  width: auto;
  height: clamp(1.7rem, 3.1vw, 2.7rem);
  aspect-ratio: 402 / 262;
  flex: none;
}

/* ----------------------------------------------------------------- 5. Hero */

.hero {
  position: relative;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.hero__inner {
  position: relative;
  /* Both headlines are measured against this one box, so their sizes stay in a
     fixed ratio no matter which layout is in force. */
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* artwork / headline / sign-up box */
  grid-template-rows: auto auto auto;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: center;
}

/* Mobile / portrait order: artwork, then wordmark copy, then the sign-up box.
   This mirrors the portrait draft. */
.hero__art {
  order: 1;
}
.hero__copy {
  order: 2;
}
.hero__form {
  order: 3;
}

.hero__art {
  justify-self: center;
  width: min(100%, 34rem);
}

.hero__art img {
  width: 100%;
  height: auto;
}

.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(var(--h1-min), var(--h1-fit), var(--h1-max));
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

.hero__subtitle {
  font-family: var(--stencil);
  font-size: clamp(var(--sub-min), var(--sub-fit), var(--sub-max));
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-top: clamp(0.5rem, 1.4vw, 0.9rem);
  text-align: center;
  text-wrap: balance;
}

/* Glow slivers flanking the artwork. Purely decorative.

   The layer is an absolutely positioned grid child pinned to the row the
   artwork occupies, which is what keeps the glows level with the trophy
   automatically instead of relying on a percentage that drifts as the hero
   changes height. The glows then step outward past the page gutter so they sit
   beside the artwork rather than crowding the sign-up box. */
.hero__glows {
  position: absolute;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  inset: 0;
  pointer-events: none;
}

.glow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: clamp(2.4rem, 4.5vw, 4.6rem);
  aspect-ratio: 169 / 204;
  opacity: 0.85;
  display: none;
}
.glow--left {
  left: calc(var(--glow-out, 0px) * -1);
}
.glow--right {
  right: calc(var(--glow-out, 0px) * -1);
}

@media (min-width: 26em) {
  .glow {
    display: block;
  }
}

/* ------------------------------------------------------------- 6. HUD box */

.hud {
  position: relative;
  width: min(100%, 40rem);
  margin-inline: auto;
  padding: 2px;
  background: var(--line);
  clip-path: polygon(
    var(--bevel) 0,
    calc(100% - var(--bevel)) 0,
    100% var(--bevel),
    100% calc(100% - var(--bevel)),
    calc(100% - var(--bevel)) 100%,
    var(--bevel) 100%,
    0 calc(100% - var(--bevel)),
    0 var(--bevel)
  );
}

.hud__inner {
  background: var(--bg);
  padding: clamp(1.6rem, 4.5vw, 2.6rem) clamp(1.2rem, 4vw, 2.9rem)
    clamp(1.3rem, 3.5vw, 2.1rem);
  clip-path: polygon(
    calc(var(--bevel) - 2px) 0,
    calc(100% - var(--bevel) + 2px) 0,
    100% calc(var(--bevel) - 2px),
    100% calc(100% - var(--bevel) + 2px),
    calc(100% - var(--bevel) + 2px) 100%,
    calc(var(--bevel) - 2px) 100%,
    0 calc(100% - var(--bevel) + 2px),
    0 calc(var(--bevel) - 2px)
  );
}

/* The lime bar riding on the top edge. */
.hud__bar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(56%, 24rem);
  height: 11px;
  background: var(--lime);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 14px 100%);
  z-index: 2;
}

.hud__heading {
  font-family: var(--stencil);
  font-variant-caps: small-caps;
  font-size: clamp(1.2rem, 5.1vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: 0.035em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}

/* -------------------------------------------------------------- 7. The form */

.signup {
  margin-top: clamp(1.1rem, 3vw, 1.7rem);
}

.field {
  position: relative;
}

.field input {
  width: 100%;
  padding: clamp(0.7rem, 2vw, 0.95rem) clamp(3.1rem, 6vw, 3.9rem)
    clamp(0.7rem, 2vw, 0.95rem) clamp(0.9rem, 2.5vw, 1.35rem);
  background: rgba(0, 0, 0, 0.5);
  color: var(--ink);
  border: 2px solid var(--lime);
  border-radius: 12px;
  font-family: var(--body);
  font-size: clamp(0.95rem, 3.4vw, 1.12rem);
  letter-spacing: 0.01em;
  transition: box-shadow 0.18s ease, background-color 0.18s ease;
}

.field input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field input:focus {
  outline: none;
  background: rgba(158, 254, 0, 0.06);
  box-shadow: 0 0 0 3px rgba(158, 254, 0, 0.25);
}

.field input:user-invalid {
  border-color: #ff6b6b;
}

.field__icon {
  position: absolute;
  top: 50%;
  right: clamp(0.85rem, 2.4vw, 1.3rem);
  translate: 0 -50%;
  width: clamp(1.3rem, 3.4vw, 1.65rem);
  aspect-ratio: 67 / 50;
  color: var(--lime);
  pointer-events: none;
}

.cta {
  display: block;
  width: 100%;
  margin-top: clamp(0.7rem, 2vw, 1rem);
  padding: clamp(0.7rem, 2vw, 0.95rem) 1rem;
  background: var(--lime);
  color: #000;
  border: 2px solid var(--lime);
  border-radius: 12px;
  font-family: var(--display);
  font-size: clamp(0.95rem, 3.5vw, 1.28rem);
  letter-spacing: 0.075em;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    transform 0.09s ease, box-shadow 0.16s ease;
}

.cta:hover:not(.is-done) {
  background: #b4ff33;
  border-color: #b4ff33;
  box-shadow: 0 0 22px rgba(158, 254, 0, 0.32);
}

.cta:active:not(.is-done) {
  transform: translateY(1px);
}

/* Post-click state, per the brief: instant, and reset on reload. */
.cta.is-done {
  background: var(--ink);
  border-color: var(--ink);
  color: #000;
  cursor: default;
}

.signup__note {
  margin-top: clamp(0.7rem, 2vw, 1rem);
  text-align: center;
  font-size: clamp(0.85rem, 3vw, 0.98rem);
  color: var(--muted);
}

.signup__consent {
  margin-top: 0.45rem;
  text-align: center;
  font-size: clamp(0.72rem, 2.4vw, 0.8rem);
  line-height: 1.45;
  color: #8f938c;
}

.signup__consent a {
  display: inline-block;
  margin-top: 0.15rem;
  color: #a8ada4;
  text-underline-offset: 2px;
}

.signup__consent a:hover {
  color: var(--lime);
}

.signup__status {
  margin-top: 0.6rem;
  text-align: center;
  font-size: clamp(0.82rem, 2.8vw, 0.92rem);
  min-height: 1.4em;
  color: var(--muted);
}

.signup__status[data-tone="error"] {
  color: #ff8b8b;
}

/* ------------------------------------------------------- 8. Section 2 */

.players {
  container-type: inline-size;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.section-title {
  font-family: var(--display);
  font-weight: 400;
  /* Always 92 per cent of the hero headline, by construction. */
  font-size: calc(clamp(var(--h1-min), var(--h1-fit), var(--h1-max)) * var(--h2-ratio));
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}

/* Narrow screens get two stacked lines and no bullet; wide screens get one
   line joined by a lime bullet. Same text either way, so screen readers and
   search engines see one consistent headline. */
.section-title > span {
  display: block;
}

.section-title .dot {
  display: none;
  color: var(--lime);
}

.section-subtitle {
  font-family: var(--stencil);
  font-size: clamp(var(--sub-min), var(--sub-fit), var(--sub-max));
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-top: clamp(0.45rem, 1.2vw, 0.8rem);
  text-align: center;
  text-wrap: balance;
}

/* 4 columns, or 2. Never 3. */
.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Equal-height rows, so the two rows of the mobile layout match each other and
     not just the pair beside them. */
  grid-auto-rows: 1fr;
  gap: clamp(1.5rem, 4vw, 2.6rem) clamp(1.2rem, 3.5vw, 2.4rem);
  margin-top: clamp(2rem, 5vw, 3.4rem);
}

.feature {
  display: flex;
  flex-direction: column;
}

.feature__head {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 1.4vw, 0.8rem);
  margin-bottom: clamp(0.4rem, 1.1vw, 0.65rem);
}

.feature__icon {
  width: auto;
  height: clamp(1.4rem, 4vw, 1.9rem);
  color: var(--lime);
  flex: none;
}
.feature__icon--play {
  aspect-ratio: 35 / 21;
}
.feature__icon--compete {
  aspect-ratio: 27 / 23;
}
.feature__icon--climb {
  aspect-ratio: 22 / 25;
}
.feature__icon--connect {
  aspect-ratio: 28 / 21;
}

.feature__label {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.05rem, 4.2vw, 1.55rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lime);
}

/* flex:1 keeps the four blocks the same height; the min-height keeps them at
   the same number of lines at the sizes the type actually renders. */
.feature__text {
  flex: 1;
  min-height: calc(1.5em * 3);
  font-size: clamp(0.82rem, 3.3vw, 1rem);
  line-height: 1.5;
  color: var(--ink);
}

/* ------------------------------------------------------------ 9. Section 3 */

.arena {
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.arena__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
}

.arena__art {
  justify-self: center;
  width: min(100%, 46rem);
}

.arena__art img {
  width: 100%;
  height: auto;
}

.callout {
  text-align: center;
}

.callout__heading {
  font-family: var(--stencil);
  font-variant-caps: small-caps;
  font-size: clamp(1.25rem, 5.3vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: 0.055em;
  color: var(--ink);
  text-wrap: balance;
}

.callout__heading .dot {
  color: var(--lime);
}

.callout__sub {
  margin-top: clamp(0.4rem, 1.2vw, 0.7rem);
  font-size: clamp(0.9rem, 3.2vw, 1.08rem);
  color: var(--muted);
  text-wrap: balance;
}

.callout__signoff {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(1.5rem, 4vw, 2.6rem);
  font-family: var(--display);
  font-size: clamp(1.35rem, 6vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.heart {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    sans-serif;
  font-size: 0.82em;
  line-height: 1;
  color: #ff3b44;
}

/* ------------------------------------------------------------- 10. Footer */

.site-footer {
  padding-bottom: clamp(1.2rem, 3vw, 2rem);
}

/* A plain rule in the same colour as the sign-up box frame, spanning the
   content column. */
.site-footer__rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 clamp(1rem, 2.4vw, 1.6rem);
}

.site-footer__body {
  position: relative;
  padding-top: clamp(0.9rem, 2.2vw, 1.5rem);
}

.site-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 2rem);
}

.site-footer__tagline {
  font-family: var(--display);
  font-size: clamp(0.66rem, 2.45vw, 1.32rem);
  line-height: 1.2;
  letter-spacing: clamp(0.01em, 0.28vw, 0.13em);
  text-wrap: balance;
  text-transform: uppercase;
  color: var(--ink);
  text-align: right;
  margin-left: auto;
}

/* ---------------------------------------------- 11. The landscape layout

   Deliberately late. Between roughly 900 and 1600 pixels the two-column
   arrangement looked wrong: the trophy could not be squared up against the
   left-hand group until the headline, subtitle and sign-up box had all
   collapsed to single lines, and the glow slivers ended up beside the sign-up
   box instead of the artwork. Below 1600 the page therefore stays in the
   portrait arrangement, centred, with black either side.
   -------------------------------------------------------------------------- */

@media (min-width: 100em) {
  :root {
    --maxw: 1400px;
    --pad: clamp(2rem, 4vw, 4rem);
    --bevel: 32px;

    /* Sized to the hero's left-hand column, which is the narrower of the two
       boxes either headline has to fit. The section headline follows at 92 per
       cent of whatever this resolves to. */
    --h1-fit: 4.35cqw;
    --h1-max: 4.6rem;
    --sub-fit: 1.95cqw;
    --sub-max: 2.05rem;

    /* Clear of the content column, so the glows flank the page rather than
       press against the sign-up box. */
    --glow-out: calc(var(--pad) + 2.5rem);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    /* headline / sign-up box, with the artwork spanning both */
    grid-template-rows: auto auto;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    row-gap: clamp(1.5rem, 3vw, 2.4rem);
    align-items: center;
    padding-top: clamp(1rem, 2.5vw, 2.5rem);
  }

  /* Landscape draft: copy above the sign-up box on the left, trophy right. */
  .hero__copy {
    order: 0;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }
  .hero__form {
    order: 0;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  .hero__art {
    order: 0;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 100%;
  }

  /* The artwork now spans both rows, so the glows track the whole hero. */
  .hero__glows {
    grid-row: 1 / -1;
  }

  .hero__title,
  .hero__subtitle,
  .section-title,
  .section-subtitle {
    text-align: left;
  }

  .hud {
    width: 100%;
    margin-inline: 0;
  }
  .hud__heading {
    font-size: clamp(1.35rem, 2.5vw, 2.15rem);
  }
  .field input {
    font-size: clamp(1rem, 1.2vw, 1.12rem);
  }
  .cta {
    font-size: clamp(1rem, 1.35vw, 1.28rem);
  }

  .section-title > span {
    display: inline;
  }
  .section-title .dot {
    display: inline;
    margin-inline: 0.2em;
  }

  .features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .feature__label {
    font-size: clamp(1.15rem, 1.85vw, 1.55rem);
  }
  .feature__text {
    font-size: clamp(0.9rem, 1.1vw, 1rem);
  }

  .arena__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .arena__art {
    width: 100%;
  }
  .callout__heading {
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  }
  .callout__signoff {
    font-size: clamp(1.6rem, 2.9vw, 2.3rem);
  }
}

/* --------------------------------------------------- 12. Motion, print, etc. */

/* The only ambient motion on the page: the edge glows breathe very slowly.
   Everything else moves solely in response to a click or a focus. */
@keyframes breathe {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .glow {
    animation: breathe 7s ease-in-out infinite;
  }
  .glow--right {
    animation-delay: -3.5s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Very wide screens: let the landscape column grow a little further. */
@media (min-width: 120em) {
  :root {
    --maxw: 1520px;
  }
}