/* ==========================================================================
   Hero

   The LCP element is the h1. Nothing above it may block paint, which is why
   the atmospheric plate is pure CSS rather than canvas or video.
   ========================================================================== */

.gx-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--gx-space-m);
  /* Deliberately under one screen. The single job of this page is to get a
     founder onto a call, so the primary button has to be visible without
     scrolling, including on a 900px laptop with browser chrome. */
  min-block-size: min(100svh, 46rem);
  padding-block: 7rem var(--gx-space-m);
  overflow: hidden;
}

.gx-hero__inner { flex: 1 1 auto; display: flex; align-items: center; }
.gx-hero__inner .gx-split { inline-size: 100%; }

/* --- Copy column --------------------------------------------------------- */

.gx-hero__eyebrow { margin-block-end: var(--gx-space-m); }

.gx-hero__title {
  color: var(--gx-press);
  margin-block-end: var(--gx-space-m);
  /* Reserve the block so the masked-line rebuild cannot shift the page.
     2.7 = three lines at the 0.9 line-height set on display-xl. */
  min-block-size: calc(var(--gx-size-display-xl) * 2.7);
}

.gx-hero__lead {
  margin-block-end: var(--gx-space-l);
  max-inline-size: 46ch;
}

.gx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gx-space-m);
}

.gx-hero__secondary {
  font-family: var(--gx-font-utility);
  font-size: var(--gx-size-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Ink bleed plate ----------------------------------------------------- */

.gx-hero__plate {
  position: relative;
  aspect-ratio: 4 / 5;
  inline-size: 100%;
  border-radius: var(--gx-radius-plate);
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--gx-paper) 60%, #fff);
}

/* Halftone screen.

   Without this the drifting inks read as a soft mesh gradient, which is
   exactly the generic look the design plan committed to avoiding. A printed
   dot screen over the top makes the plate read as ink on stock instead of
   light on a display, and it is the same idea the service stack runs on. */
.gx-hero__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: radial-gradient(circle at center, var(--gx-ink) 0.9px, transparent 1px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
}

.gx-hero__ink {
  position: absolute;
  inline-size: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* Tighter blur than a glow. These are meant to look like wet ink spreading
     on stock, not like a light source. */
  filter: blur(22px);
  /* The whole concept in one declaration: overlapping inks resolve to a
     third colour rather than stacking as translucent layers. */
  mix-blend-mode: multiply;
  will-change: transform;
}

.gx-hero__ink--press {
  inset-block-start: -6%;
  inset-inline-start: -12%;
  background: var(--gx-press);
  animation: gx-drift-a 34s var(--gx-ease-enter) infinite alternate;
}

.gx-hero__ink--turmeric {
  inset-block-end: -14%;
  inset-inline-end: -16%;
  background: var(--gx-turmeric);
  animation: gx-drift-b 41s var(--gx-ease-enter) infinite alternate;
}

.gx-hero__ink--deep {
  inline-size: 52%;
  inset-block-end: 8%;
  inset-inline-start: 18%;
  background: var(--gx-ink);
  opacity: 0.55;
  animation: gx-drift-c 47s var(--gx-ease-enter) infinite alternate;
}

@keyframes gx-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14%, 18%, 0) scale(1.12); }
}

@keyframes gx-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-18%, -12%, 0) scale(1); }
}

@keyframes gx-drift-c {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(22%, -20%, 0); }
}

/* Engines without multiply get flat, separated inks rather than muddy stacks. */
@supports not (mix-blend-mode: multiply) {
  .gx-hero__ink { mix-blend-mode: normal; opacity: 0.7; }
  .gx-hero__ink--deep { background: var(--gx-overprint); }
}

/* --- Utility row --------------------------------------------------------- */

.gx-hero__utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-space-s);
  padding-block-start: var(--gx-space-m);
  border-block-start: var(--gx-hairline) solid color-mix(in srgb, var(--gx-ink) 14%, transparent);
  font-family: var(--gx-font-utility);
  font-size: var(--gx-size-label);
  letter-spacing: 0.12em;
  color: var(--gx-halftone);
}

.gx-hero__clock {
  display: inline-flex;
  gap: 0.75rem;
  margin: 0;
}

.gx-hero__clock time {
  font-variant-numeric: tabular-nums;
  color: var(--gx-ink);
}

.gx-hero__copyemail {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--gx-ink);
  cursor: pointer;
  text-align: start;
}

.gx-hero__copyicon { color: var(--gx-halftone); transition: color var(--gx-dur-micro) linear; }
.gx-hero__copyemail:hover .gx-hero__copyicon { color: var(--gx-press); }
.gx-hero__copyemail.is-copied { color: var(--gx-press); }

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .gx-hero__ink { animation: none; }
  .gx-hero__title { min-block-size: 0; }
}

/* --- Breakpoints --------------------------------------------------------- */

@media (max-width: 63.99rem) {
  .gx-hero { min-block-size: auto; padding-block-start: 7rem; }
  .gx-hero__plate { aspect-ratio: 16 / 10; order: -1; }
}

@media (min-width: 64rem) {
  .gx-hero { padding-block-start: 8rem; }
  .gx-hero__inner .gx-split { align-items: center; }
  /* The plate is decoration. It must never be the reason the CTA is pushed
     off screen, so it takes its height from the copy column. */
  .gx-hero__plate { aspect-ratio: auto; block-size: min(30rem, 58svh); }
}

/* Short laptop screens: shed the plate rather than the call to action. */
@media (min-width: 64rem) and (max-height: 44rem) {
  .gx-hero { min-block-size: auto; padding-block-start: 7rem; }
  .gx-hero__plate { block-size: 22rem; }
}