/* ==========================================================================
   World — between "Jak pracujemy" and "Kontakt"
   The signal at its largest: a globe drawn in dots, like everything else on
   the page. The footage is white on pure black, so the band has no visible
   frame; only the sides of the globe, cut off by the portrait video, fade into
   the page. A thread of dots runs from the globe down into the spark of
   "Kontakt", the way the hero's thread runs into "Co robimy".
   ========================================================================== */

.world {
  --world-tail: clamp(1.5rem, 1rem + 2vw, 3rem);

  padding-bottom: var(--world-tail);
  text-align: center;
}

.world__header {
  max-width: 52rem;
  margin-inline: auto;
}

.world__title {
  margin-top: 0;
}

/* the answer gets its own line */
.world__title .title-dim {
  display: block;
}

.world__header .section-lead {
  margin-inline: auto;
}

/* ---- The globe --------------------------------------------------------------------
   The video is portrait (9:16) with the globe in the middle; this 6:7 box keeps
   rows 220–1060 of 1280, which is all there is to see. The poster is the first
   frame cropped the same way, so the two line up exactly. */

.world__globe {
  position: relative;
  width: min(42.5rem, 72vh, 100%);
  aspect-ratio: 6 / 7;
  margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto 0;
}

@supports (height: 1svh) {
  .world__globe {
    width: min(42.5rem, 72svh, 100%);
  }
}

.world__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent),
    linear-gradient(transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent),
    linear-gradient(transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}

/* From the globe's south pole into the spark of "Kontakt": it crosses the edge of
   the contact panel, so it sits above it. */
.world__thread {
  position: absolute;
  top: 94%;
  left: calc(50% - 1px);
  z-index: 1;
  width: 2px;
  height: calc(6% + var(--world-tail) + var(--section-space) - 0.75rem);
}

/* the spark stands above "Kontakt", where the thread ends */
.world + .contact .eyebrow {
  flex-direction: column;
  gap: 1rem;
}