/*
 * 2026-10-17 homepage hero composition pass 5.
 *
 * Use the hero's existing artwork as a low-contrast visual bridge instead of
 * adding a new card, badge or decorative module to the middle. The duplicate
 * artwork is masked into a soft lower transition so the copy remains the
 * reading anchor while the existing lines and platforms continue toward the
 * right-side visual. Slide 4 has a quieter source image, so it receives its
 * own, slightly wider bridge crop.
 *
 * Mobile has a separate Swiper composition and is intentionally untouched.
 */

@media screen and (min-width: 769px) {
  #root .tpm-portal-hero__item-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 1680px;
    height: auto;
    margin: 0 auto;
    padding-left: 248px;
    padding-right: clamp(32px, 4vw, 96px);
    background: linear-gradient(
      90deg,
      rgba(247, 251, 253, .68) 0%,
      rgba(247, 251, 253, .48) 26%,
      rgba(247, 251, 253, .18) 43%,
      rgba(247, 251, 253, 0) 61%
    );
  }

  #root .tpm-portal-hero__item-title {
    max-width: min(680px, 50vw);
  }

  #root .tpm-portal-hero__item-desc {
    max-width: min(640px, 48vw);
  }

  /*
   * The source artwork intentionally leaves room for copy on its left. A
   * small scale-up plus a controlled left shift lets its nearest structures
   * enter the copy-to-visual gap without covering the headline.
   */
  #root .tpm-portal-hero__bg {
    background-repeat: no-repeat;
    background-size: 128% auto;
    background-position: 66% center !important;
  }

  /*
   * Continue the existing artwork through the copy-to-visual gap. This is a
   * masked copy of the current dynamic background, not a new visual module;
   * keeping it low contrast preserves headline and control readability.
   */
  #root .tpm-portal-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-repeat: no-repeat;
    background-size: 88% auto;
    background-position: 2% bottom;
    opacity: .18;
    filter: blur(.45px) saturate(.76);
    pointer-events: none;
    mask-image: radial-gradient(
      ellipse 58% 60% at 54% 78%,
      #000 0%,
      rgba(0, 0, 0, .88) 33%,
      rgba(0, 0, 0, .42) 62%,
      transparent 90%
    );
    -webkit-mask-image: radial-gradient(
      ellipse 58% 60% at 54% 78%,
      #000 0%,
      rgba(0, 0, 0, .88) 33%,
      rgba(0, 0, 0, .42) 62%,
      transparent 90%
    );
  }

  /* Keep the centered third slide quieter so its headline stays dominant. */
  #root .tpm-portal-hero__bg[data-slide-index="2"]::after {
    opacity: .08;
    background-size: 78% auto;
    background-position: 0 bottom;
  }

  /* The network artwork has less structure on the left, so widen its bridge. */
  #root .tpm-portal-hero__bg[data-slide-index="3"]::after {
    opacity: .11;
    background-size: 92% auto;
    background-position: 4% 88%;
    filter: blur(.65px) saturate(.58);
  }

  /* The fourth source has the least contrast in the left half. Crop it a bit
   * more so its network lines arrive in the middle without touching the copy. */
  #root .tpm-portal-hero__bg[data-slide-index="3"] {
    background-size: 180% auto;
    background-position: 100% center !important;
  }

  /* Preserve a usable right visual area when a slide has fg_image configured. */
  #root .tpm-portal-hero__theme {
    width: min(650px, 42vw);
    right: 0;
  }
}

/* At very wide widths the control rail is positioned against the centered
 * 1680px canvas, so its 240px width needs a slightly smaller copy offset. */
@media screen and (min-width: 1808px) {
  #root .tpm-portal-hero__item-content {
    padding-left: 240px;
  }
}