/* ============================================================================
   1 · HERO — nothing above the H1. Markup: js/render/hero.js.

   The close, mirrored, so the page opens and closes on the same ground:
   purple-900 at the top, settling down the band through violet into the
   aurora along the foot (components/aurora.css, and its §3.7 exception),
   which rises out of the offerings band's light ground below. The
   photograph fills the right-hand side and fades into the violet towards
   the text (§14.2: a purple-700 tint unifies it with the page's other
   photographs), and into the aurora at the bottom.
   Contrast: all text sits on purple-900 to purple-800, clear of the photo's
   visible part and above the aurora. Below 980px the photo moves above the
   text and fades downwards into the violet under the H1.
   A local dark theme context (.theme-dark, base.css), so .btn and every
   text colour follow it.

   Recorded exception, decided by the client: the photographs are a
   slideshow that advances by itself (§8.1 "nothing auto-plays"), with no
   controls, cross-fading over 1.2s (above the {motion.slow} cap). Without
   a pause control this fails WCAG 2.2.2, flagged for the §19 review. It
   stops while the hero is off screen, and never runs under reduced motion
   (the first photograph stays).
   ========================================================================= */
.hero {
  /* tier-3, scoped */
  --hero-text: 610px;   /* holds "GESDA Anticipation" on one line at display size */
  --hero-accent: var(--purple-300);   /* 5.4:1 on purple-900, large text */
  --hero-photo-left: 46%;
  --hero-fade: 2s;   /* the slides' cross-fade: over the {motion.slow} cap, recorded above */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  box-sizing: border-box;
  padding: calc(var(--layout-topbar) + var(--space-12)) 0 calc(var(--space-24) + var(--space-16));
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(0deg, var(--purple-300) 0%, var(--purple-700) 20%, var(--purple-800) 34%, var(--purple-900) 58%);
}

/* The photograph: faded in from the left and from the bottom (the two
   masks intersect), under a purple-700 tint. */
.hero__photo {
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0; right: 0;
  left: var(--hero-photo-left);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(0deg, transparent 0, #000 45%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(0deg, transparent 0, #000 45%);
          mask-composite: intersect;
}
/* The slides, stacked; the current one fades in over the last. */
.hero__slide {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--hero-fade) ease-in-out;
}
.hero__slide.is-on { opacity: 1; }

/* The fine-print caption of the current photograph: bottom right, level
   with the foot of the text column and above the aurora's bright part,
   on a scrim so it reads over any photograph. Below 980px, top right of
   the photograph. */
.hero__credits {
  position: absolute;
  z-index: 1;
  right: var(--space-6);
  bottom: calc(var(--space-24) + var(--space-16));
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  justify-items: end;
}
.hero__credit {
  grid-area: 1 / 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-scrim-strong);   /* purple-100 holds 6:1 on it over a white patch */
  font-size: var(--type-caption);
  line-height: 1.3;
  color: var(--color-body);   /* purple-100 on the scrim */
  opacity: 0;
  transition: opacity var(--hero-fade) ease-in-out;
}
.hero__credit.is-on { opacity: 1; }
.hero__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--color-photo-tint);
}

/* The aurora: the close's seven fields, turned upside down (each field's
   top in the close is its bottom here), in the lower part of the band. */
.hero__aurora {
  top: 50%; left: -10%; right: -10%; bottom: -20%;
  -webkit-mask-image: linear-gradient(0deg, #000 0, #000 30%, rgba(0, 0, 0, 0.55) 55%, transparent 85%);
          mask-image: linear-gradient(0deg, #000 0, #000 30%, rgba(0, 0, 0, 0.55) 55%, transparent 85%);
}
.hero__aurora span:nth-child(1) { --c: var(--radar-dmr);      left: 10%;  bottom: -6%;  width: 48%; height: 100%; }
.hero__aurora span:nth-child(2) { --c: var(--radar-ahp);      left: 64%;  bottom: -44%; width: 56%; height: 140%; }
.hero__aurora span:nth-child(3) { --c: var(--radar-ebs);      left: 42%;  bottom: -35%; width: 60%; height: 90%; }
.hero__aurora span:nth-child(4) { --c: var(--graphic-violet); left: 38%;  bottom: -26%; width: 44%; height: 120%; }
.hero__aurora span:nth-child(5) { --c: var(--radar-cpf);      left: 14%;  bottom: -16%; width: 52%; height: 80%; }
.hero__aurora span:nth-child(6) { --c: var(--radar-esw);      left: -6%;  bottom: -10%; width: 48%; height: 76%; }
.hero__aurora span:nth-child(7) { --c: var(--radar-dmr);      left: -24%; bottom: -5%;  width: 52%; height: 110%; }

/* The join with the offerings band: its light ground runs a short way up,
   so the colours sink into it rather than stop at a line. */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: var(--space-12);
  background: linear-gradient(0deg, var(--purple-050), color-mix(in srgb, var(--purple-050) 40%, transparent) 35%, transparent);
}

.hero__inner { width: 100%; }
.hero__inner > * { max-width: var(--hero-text); }

.hero__title {
  margin: 0;
  font-size: var(--type-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.hero__subhead {
  margin: var(--space-6) 0 0;
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--hero-accent);
}

.hero__lead {
  margin: var(--space-8) 0 0;
  padding-left: var(--space-4);
  max-width: 46ch;
  border-left: 2px solid var(--hero-accent);
  font-size: var(--type-lead);
  line-height: 1.65;
  color: var(--color-body);
}

.hero__actions {
  margin: var(--space-12) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--space-4);
}

/* The funder's lockup, as supplied (never recoloured, §9 applies to partner
   marks too): Wellcome's version for dark grounds. Check the height against
   Wellcome's minimum size. */
.hero__funder { margin: var(--space-12) 0 0; }
.hero__funder img { display: block; height: var(--space-16); width: auto; }

/* ============================================================================
   RESPONSIVE (§13.1) — review at 1440, 1180, 980, 720, 480, 390.
   ========================================================================= */
@media (max-width: 1199px) {
  .hero { --hero-photo-left: 50%; }
}

/* Below 980px: the photo above, fading down into the violet; the text
   starts where the photo has all but gone. */
@media (max-width: 979px) {
  .hero {
    --hero-photo-h: min(75vw, 560px);
    min-height: 0;
    padding-top: calc(var(--layout-topbar) + var(--hero-photo-h) * 0.8);
    padding-bottom: calc(var(--space-24) + var(--space-8));
  }
  .hero__photo {
    top: var(--layout-topbar);   /* clear of the topbar, so no face is cut */
    left: 0;
    bottom: auto;
    height: var(--hero-photo-h);
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 60%);
            mask-image: linear-gradient(0deg, transparent 0, #000 60%);
  }
  .hero__credits {
    top: calc(var(--layout-topbar) + var(--space-4));
    right: var(--space-4);
    bottom: auto;
  }
}

@media (max-width: 719px) {
  .hero__actions .btn { width: 100%; }
}