/* ==========================================================================
   Reclameworks · waarom
   Twee kruisende banden. Tijdens het scrollen schuiven ze per stap door:
   grijs = wat je bij ons niet krijgt (doorgestreept), blauw = wat wel.
   ========================================================================== */

.rw-waarom {
  --sl: clamp(40px, 6vw, 110px);
  position: relative;
  height: calc(100vh * 3.6);
  margin-top: calc(var(--sl) * -1);
  background: var(--rw-warm-wit);
  color: var(--rw-koolzwart);
  clip-path: polygon(0 var(--sl), 100% 0, 100% 100%, 0 100%);
}

.rw-waarom-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.rw-waarom-head {
  position: absolute;
  z-index: 3;
  top: calc(var(--sl) + clamp(32px, 6vh, 72px));
  left: var(--gut);
  right: var(--gut);
}

.rw-waarom-eyebrow {
  color: var(--rw-diepblauw);
}

.rw-waarom-title {
  margin: 22px 0 0;
  color: var(--rw-koolzwart);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(5.94vw, 9vh);
  line-height: .885;
  letter-spacing: -.05em;
}

.rw-waarom-title span {
  color: var(--rw-diepblauw);
}

/* --------------------------------------------------------------------------
   De banden
   -------------------------------------------------------------------------- */

.rw-waarom-band {
  position: absolute;
  top: var(--top, 54%);
  left: -30vw;
  right: -30vw;
  display: flex;
  align-items: center;
  height: min(16vh, 140px);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: min(6.8vw, 11vh);
  letter-spacing: -.085em;
  white-space: nowrap;
  transform: translateY(-50%) rotate(var(--rot));
  will-change: transform;
}

.rw-waarom-band-nee {
  --rot: -10deg;
  background: var(--rw-koolzwart);
  color: #5f5f5c;
  font-weight: 200;
}

.rw-waarom-band-ja {
  --rot: 9deg;
  background: var(--rw-diepblauw);
  color: rgba(255, 255, 255, .42);
}

.rw-waarom-band-row {
  display: flex;
  align-items: center;
  height: 100%;
  will-change: transform;
}

.rw-waarom-band-row span {
  position: relative;
  flex: none;
  padding: 0 .5em;
  transition: color .35s;
}

.rw-waarom-band-nee span.is-active {
  color: var(--rw-warm-wit);
}

.rw-waarom-band-ja span.is-active {
  color: #fff;
}

/* Rode streep door het actieve "nee"-woord, --strike loopt van 0 naar 1 */
.rw-waarom-band-nee span::after {
  content: "";
  position: absolute;
  top: 56%;
  left: .4em;
  right: .4em;
  height: .06em;
  background: #B5412F;
  transform: scaleX(var(--strike, 0));
  transform-origin: left;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Toelichting en teller onderin
   -------------------------------------------------------------------------- */

.rw-waarom-foot {
  position: absolute;
  z-index: 3;
  left: var(--gut);
  right: var(--gut);
  /* hoog genoeg om vrij te blijven van de schuine rand van aanbod */
  bottom: calc(clamp(40px, 7vh, 72px) + clamp(40px, 6vw, 110px));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.rw-waarom-desc {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
}

.rw-waarom-desc b {
  display: block;
  margin-bottom: 10px;
  color: var(--rw-diepblauw);
  font-weight: 500;
  font-size: 12px;
}

.rw-waarom-count {
  font-size: 12px;
  letter-spacing: .24em;
}

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

@media (min-width: 701px) {
  .rw-waarom-band {
    --top: 52%;
  }
}

@media (max-width: 700px) {
  .rw-waarom-title {
    font-size: 13vw;
    line-height: .88;
  }

  /* Op mobiel zet rw-waarom.js de banden precies tussen titel en tekst */
  .rw-waarom-band {
    height: 17vw;
    font-size: 11.5vw;
  }

  .rw-waarom-band-nee {
    --rot: -5deg;
    --top: 60%;
  }

  .rw-waarom-band-ja {
    --rot: 4deg;
    --top: 69%;
  }

  .rw-waarom-foot {
    bottom: 68px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .rw-waarom-desc {
    font-size: 18px;
    line-height: 1.6;
  }

  .rw-waarom-desc b,
  .rw-waarom-count {
    font-size: 13px;
  }
}