/*
 * Site header (nav) + hero
 * Figma: Desktop Menu 70:53 + hero art/content in frame 70:3 (1440 × 1024)
 *        Mobile  Menu 70:209 + hero art/content in frame 70:187 (390 × 960)
 *
 * The header floats over the top of the hero. The hero background (colour
 * vectors, glow and the 16 "glass panes") sits on z-index -1 so it stays
 * behind all page content; the desktop glow (70:8) deliberately spills down
 * behind the info section. The Figma pointer-repulsion shader on the vectors
 * is not implemented — the static vectors are rendered instead.
 */

/* ======================================================================
   Header
   ====================================================================== */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  color: var(--text-nav);
  /* Frosted band over the glass panes, with a thin light rule underneath */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgb(255 255 255 / 0.3);
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1440px;
  height: 63px; /* 64 incl. border */
  margin-inline: auto;
  padding-inline: 16px;
}

.site-header a {
  color: inherit;
  text-decoration: none;
}

.site-header__wordmark {
  font-weight: 600;
  font-size: var(--core-wordmark-size);
  letter-spacing: var(--core-wordmark-letter-spacing);
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header__links {
  display: none;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__link {
  font-weight: 600;
  font-size: var(--core-nav-link-size);
  letter-spacing: var(--core-nav-link-letter-spacing);
  line-height: normal;
  white-space: nowrap;
}

.site-header__link--cta {
  font-weight: 700;
  font-size: var(--core-nav-cta-size);
  letter-spacing: var(--core-nav-cta-letter-spacing);
}

.site-header__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-header a:focus-visible,
.site-header__menu:focus-visible {
  outline: 2px solid var(--text-nav);
  outline-offset: 4px;
}

.site-header__menu {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-right: -8px; /* keep the 24px icon on the 16px gutter */
  padding: 0;
  border: 0;
  background: none;
  color: var(--icon-nav);
  cursor: pointer;
}

@media (min-width: 768px) {
  .site-header__nav {
    height: 79px; /* 80 incl. border */
    padding-inline: clamp(24px, 4.444vw, 64px);
  }
}

/* The four links need ~740px plus gutters, so they replace the menu button
   a little above the 768px breakpoint. */
@media (min-width: 960px) {
  .site-header__links {
    display: flex;
  }

  .site-header__menu {
    display: none;
  }
}

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

.hero {
  /* No z-index here on purpose: .hero__bg (z-index -1) must join the root
     stacking context so it paints behind the following sections. */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 51px;
  padding-bottom: 84px;
  text-align: center;
}

/* ---------- Background art ---------- */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Opaque page colour so the panes' overlay blend has a black backdrop
     (the z-index makes this an isolated group). */
  background: var(--surface-page);
  pointer-events: none;
}

.hero__art {
  /* Figma frame the shapes are positioned in (mobile) */
  --fw: 390;
  --fh: 960;
  position: absolute;
  inset: 0;
  /* Stands in for the panes' 37.5px background blur (one blur for the whole
     layer instead of 16 backdrop-filters: same look, far cheaper).
     brightness() is half of the panes' overlay blend — see .hero__pane. */
  filter: blur(var(--art-blur, 22.7px)) brightness(1.35);
}

.hero__glow {
  display: none;
}

.hero__shape {
  position: absolute;
  left: calc(var(--x) / var(--fw) * 100%);
  top: calc(var(--y) / var(--fh) * 100%);
  width: calc(var(--w) / var(--fw) * 100%);
  height: calc(var(--h) / var(--fh) * 100%);
  max-width: none;
}

/* Promote the repelled shapes to their own layers so js/hero.js can move them
   without re-blurring the whole art layer on the main thread. Mouse devices
   only: the effect doesn't run on touch, and mobile Safari can composite
   promoted layers under the parent blur differently. */
@media (hover: hover) and (pointer: fine) {
  .hero__art .hero__shape {
    will-change: transform;
  }
}

.hero__shape--orange { --x: -37;  --y: -20; --w: 424;    --h: 293; }
.hero__shape--pink   { --x: -95;  --y: -26; --w: 171;    --h: 146; }
.hero__shape--purple { --x: 229;  --y: -33; --w: 179;    --h: 154; }
/* Mobile 70:188 sits beneath the other vectors (it's on top on desktop) */
.hero__shape--blue   { --x: 196;  --y: -53; --w: 263;    --h: 401;    z-index: -1; }

.hero__shape--white {
  display: none;
}

/* Glass panes (70:14 / 70:192): vertical strips that blur what's behind them
   and overlay a white→black grain gradient, edged with a hairline.
   They run down to just above the rolling banner (banner 46 + 2px gap + 84
   hero padding); Figma's mobile panes stop at 620, extended per review. */
.hero__panes {
  --pane-w: 80.77px;
  position: absolute;
  inset: 0 0 132px;
  display: flex;
  overflow: clip;
}

.hero__pane {
  flex: none;
  width: var(--pane-w);
  height: 100%;
  /* Figma overlays the white→black gradient G on the art. Over a dark
     backdrop B, overlay = 2·B·G, which is reproduced without a blend mode
     (iOS Safari drops mix-blend-mode here and shows the raw grey gradient):
     the art is brightened, then each pane lays black at alpha 0.45·(1−G) on
     top (glass-pane-shade.webp, generated from glass-pane.webp). The exact
     maths (brightness 2, alpha 1−G) crushed bright colours to black at each
     pane's right edge, so both are softened (further than the overlay, per
     review, so no dark gap shows between panes). */
  border: 0.5px solid rgb(255 255 255 / 0.08);
  background: url("../../assets/images/hero/glass-pane-shade.webp") center / 100% 100%;
}

/* ---------- Content ---------- */

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__logo img {
  width: 101px;
  height: auto;
}

.hero__title {
  max-width: 180px;
  margin-top: 22px;
  /* balance the trailing letter-spacing so the text centres optically */
  padding-left: var(--theme-hero-title-letter-spacing);
  color: var(--text-muted);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 29px;
  padding: 12px 24px;
  background: var(--action-primary);
  color: var(--action-on-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.25s ease;
}

/* Glow only on hover, in the button's own blue (Figma's magenta 0 4 40
   drop shadow was dropped per review; blur bumped to match Figma's render). */
.hero__cta:hover {
  box-shadow: 0 4px 64px var(--action-primary);
}

.hero__cta:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 4px;
}

/* ---------- Rolling banner ----------
 * Two identical groups; the track slides one group-width to the left and
 * repeats, so the loop is seamless. js/marquee.js slows it on hover. */

.hero__marquee {
  align-self: stretch;
  margin-top: 134px;
  overflow: clip;
}

.hero__marquee-track {
  display: flex;
  width: max-content;
  padding-block: 12px;
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--core-marquee-size);
  letter-spacing: var(--core-marquee-letter-spacing);
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  animation: hero-marquee 40s linear infinite;
}

.hero__marquee-group {
  display: flex;
  gap: 34px;
  margin: 0;
  padding-right: 34px;
}

@keyframes hero-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__marquee-track { animation: none; }
}

/* ---------- Desktop (1440 frame) ---------- */

@media (min-width: 768px) {
  .hero {
    padding-top: 132px;
    padding-bottom: 135px;
  }

  .hero__art,
  .hero__glow {
    --fw: 1440;
    --fh: 1024;
    --art-blur: 37.5px;
  }

  .hero__glow {
    display: block;
    position: absolute;
    inset: 0;
  }

  .hero__shape--orange { --x: 46;   --y: -42;  --w: 849;    --h: 587.5; }
  .hero__shape--pink   { --x: -71;  --y: -54;  --w: 343.5;  --h: 292.5; }
  .hero__shape--purple { --x: 578;  --y: -69;  --w: 361;    --h: 308; }
  .hero__shape--blue   { --x: 923;  --y: -41;  --w: 528.5;  --h: 804.5; z-index: auto; }
  /* Blur Gradients (70:8): the SVG includes its 135px blur bleed */
  .hero__shape--glow   { --x: -353; --y: 427;  --w: 2062.5; --h: 1372.5; }
  .hero__shape--white  { --x: 176;  --y: -131; --w: 1186;   --h: 885.5;  display: block; }

  /* Figma 70:14 is 828 tall: the panes stop just above the rolling banner
     (banner 59 + 2px gap + 135 hero padding below it). */
  .hero__panes {
    --pane-w: 133.33px;
    bottom: 196px;
  }

  .hero__logo img {
    width: min(1101px, 76.5vw);
  }

  .hero__title {
    max-width: none;
    margin-top: -2px;
  }

  .hero__cta {
    margin-top: 66px;
  }

  .hero__marquee {
    margin-top: 146px;
  }

  .hero__marquee-track {
    padding-block: 16px;
  }
}