/*
  Section node fields — the homepage hero language, held inside each section.
  Fixed topology, in-place motion only: no growth, no crossing section edges.
*/

.section,
.section-tint,
.page-hero {
  position: relative;
}

.section > .wrap,
.section-tint > .wrap,
.page-hero > .wrap {
  position: relative;
  z-index: 1;
}

.section-nodes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: clamp(14rem, 34vw, 30rem);
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  opacity: 0;
  transition: opacity 0.9s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  /* Dissolve toward the copy and stop short of the section borders */
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 34%,
      rgba(0, 0, 0, 0.75) 62%,
      #000 100%
    ),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 34%,
      rgba(0, 0, 0, 0.75) 62%,
      #000 100%
    ),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
}

.section-nodes.is-visible {
  opacity: 1;
}

.section-nodes__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.section-nodes__edge {
  fill: none;
  stroke: var(--ink, #1a1a1a);
  stroke-width: 1;
  stroke-linecap: square;
  opacity: 0.14;
  vector-effect: non-scaling-stroke;
}

.section-nodes__node {
  fill: var(--ink, #1a1a1a);
  opacity: 0.3;
}

.section-nodes__node--accent {
  fill: var(--green, #00c853);
  opacity: 0.62;
}

.section-nodes__halo {
  fill: var(--green, #00c853);
  opacity: 0.12;
}

/* Tinted bands sit darker: lift the field slightly */
.section-tint .section-nodes__edge {
  opacity: 0.16;
}

.section-tint .section-nodes__node {
  opacity: 0.34;
}

/* Paper heroes on interior pages */
.page-hero .section-nodes__edge {
  opacity: 0.2;
}

.page-hero .section-nodes__node {
  opacity: 0.4;
}

.page-hero .section-nodes {
  width: clamp(12rem, 30vw, 26rem);
}

@media (max-width: 1023px) {
  .section-nodes {
    width: clamp(9rem, 40vw, 16rem);
    opacity: 0;
  }

  .section-nodes.is-visible {
    opacity: 0.55;
  }
}

/*
  Mobile: no side gutter exists, so the field becomes a small corner mark
  in the section's top-right, above the copy and clear of the borders.
*/
@media (max-width: 720px) {
  .section-nodes {
    top: 0;
    right: 0;
    bottom: auto;
    width: min(52%, 13rem);
    height: clamp(5rem, 17vw, 7.5rem);
    mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 42%,
        #000 100%
      ),
      linear-gradient(180deg, transparent 0%, #000 34%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 42%,
        #000 100%
      ),
      linear-gradient(180deg, transparent 0%, #000 34%, transparent 100%);
    -webkit-mask-composite: source-in;
  }

  .section-nodes.is-visible {
    opacity: 0.7;
  }

  .page-hero .section-nodes {
    width: min(56%, 14rem);
    height: clamp(5.5rem, 19vw, 8rem);
  }

  /* Keep the mark from crowding the first heading */
  .section > .wrap,
  .section-tint > .wrap,
  .page-hero > .wrap {
    padding-top: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-nodes {
    transition: none;
  }
}