/* Achtergrondfoto met fade-in voor de hero/aanvraag-sectie (#vergelijk) */

#vergelijk {
  isolation: isolate;
}

/* Decoratief bolletje rechtsboven verwijderen */
#vergelijk > [aria-hidden="true"][class*="-top-24"] {
  display: none;
}

#vergelijk::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center 35%;
  background-size: 100% 100%, cover;
  background-image: linear-gradient(
      to bottom,
      transparent 55%,
      #f7f3ec 92%
    ),
    url("/images/onderzoeker.jpg");
  filter: grayscale(15%) contrast(1.05);
  -webkit-mask-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.75) 40%,
    rgba(0, 0, 0, 0.15) 68%,
    rgba(0, 0, 0, 0) 85%
  );
  mask-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.75) 40%,
    rgba(0, 0, 0, 0.15) 68%,
    rgba(0, 0, 0, 0) 85%
  );
  opacity: 0;
  transform: translateX(-60px);
  animation: heroPhotoIn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
}

@keyframes heroPhotoIn {
  to {
    opacity: 0.4;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #vergelijk::before {
    animation: none;
    opacity: 0.4;
    transform: none;
  }
}

/* Op mobiel weg: te weinig ruimte, gaat ten koste van leesbaarheid */
@media (max-width: 767px) {
  #vergelijk::before {
    display: none;
  }
}

/* Subpixel-naad dichten tussen de schuine divider en de navy CTA-sectie(s) */
div.leading-\[0\]:has(+ section.bg-navy) {
  margin-bottom: -1px;
}
section.bg-navy + div.leading-\[0\] {
  margin-top: -1px;
}