/* ==========================================================================
   Magengrim — "future of finance" band
   A looping Blender render (assets/video/future_finance.mp4) behind centred
   copy: a two-line heading, a narrow lede, two pills, and a few floating
   node labels. The video is the whole ground, so the section paints
   only what legibility needs on top of it: a soft vignette and the same grain
   the hero carries.
   Scoped under .mg-fut because the theme styles `a`, `p` and `ul` globally.
   ========================================================================== */

.mg-fut {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(84vh, 760px);
  display: flex;
  align-items: center;
  padding: clamp(72px, 9vw, 128px) 0;
  background: #09080f;
  color: #ffffff;
}

/* --- Video ground ------------------------------------------------------- */

.mg-fut .mg-fut__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  pointer-events: none;
}

/* Vignette plus a lift at the top and bottom edges so the copy sits on a
   quieter patch of the render and the band meets its neighbours cleanly. */
.mg-fut::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 62% at 50% 48%, rgba(9, 8, 15, 0) 0%, rgba(9, 8, 15, 0.22) 60%, rgba(9, 8, 15, 0.62) 100%),
    linear-gradient(to bottom, rgba(9, 8, 15, 0.55) 0%, rgba(9, 8, 15, 0) 22%, rgba(9, 8, 15, 0) 78%, rgba(9, 8, 15, 0.6) 100%);
  pointer-events: none;
}

/* The same grain tile as the hero, so the two dark bands share a surface. */
.mg-fut::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../../images/hero-noise.png?v=2") repeat center top / 154px auto;
  pointer-events: none;
}

.mg-fut .mg-fut__inner {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

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

.mg-fut .mg-fut__title {
  margin: 0 auto clamp(16px, 2vw, 22px);
  max-width: 16ch;
  font-family: var(--mg-display);
  font-size: clamp(2.1rem, 4.8vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: #ffffff;
}

.mg-fut .mg-fut__lede {
  margin: 0 auto clamp(26px, 3.4vw, 40px);
  max-width: 52ch;
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.64);
}

/* --- Actions ------------------------------------------------------------ */

.mg-fut .mg-fut__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.mg-fut .mg-fut__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--mg-body);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color 260ms var(--mg-ease),
    border-color 260ms var(--mg-ease),
    color 260ms var(--mg-ease),
    transform 260ms var(--mg-ease);
}

.mg-fut .mg-fut__btn--primary {
  background: #ffffff;
  color: var(--mg-ink);
}

.mg-fut .mg-fut__btn--primary:hover,
.mg-fut .mg-fut__btn--primary:focus-visible {
  background: var(--mg-purple);
  color: #ffffff;
  transform: translateY(-2px);
}

.mg-fut .mg-fut__btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.mg-fut .mg-fut__btn--ghost:hover,
.mg-fut .mg-fut__btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-2px);
}

.mg-fut .mg-fut__btn--ghost svg {
  transition: transform 260ms var(--mg-ease);
}

.mg-fut .mg-fut__btn--ghost:hover svg {
  transform: translate(2px, -2px);
}

/* --- Floating nodes ----------------------------------------------------- */

/* Small labels scattered on the render, like the reference's network nodes.
   Positioned from custom properties set inline so the markup owns the
   composition; hidden on small screens where they would crowd the copy. */
.mg-fut .mg-fut__nodes {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.mg-fut .mg-fut__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(9, 8, 15, 0.42);
  font-family: var(--mg-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 767px) {
  .mg-fut {
    min-height: 0;
    padding: 72px 0 80px;
  }

  .mg-fut .mg-fut__video {
    object-position: 60% 50%;
  }

  /* The arc crosses the copy at this width; a little more ground behind it. */
  .mg-fut::before {
    background:
      radial-gradient(80% 60% at 50% 52%, rgba(9, 8, 15, 0.42) 0%, rgba(9, 8, 15, 0.3) 55%, rgba(9, 8, 15, 0.7) 100%),
      linear-gradient(to bottom, rgba(9, 8, 15, 0.55) 0%, rgba(9, 8, 15, 0) 22%, rgba(9, 8, 15, 0) 78%, rgba(9, 8, 15, 0.6) 100%);
  }

  .mg-fut .mg-fut__nodes {
    display: none;
  }

  .mg-fut .mg-fut__actions .mg-fut__btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The poster stands in; the script pauses playback as well. */
  .mg-fut .mg-fut__btn,
  .mg-fut .mg-fut__btn--ghost svg {
    transition: none;
  }

  .mg-fut .mg-fut__btn--primary:hover,
  .mg-fut .mg-fut__btn--ghost:hover {
    transform: none;
  }
}