html, body {
  margin: 0;
  padding: 0;
  height: 40vh; /* viewport hoogte */
  display: flex;
  justify-content: center; /* horizontaal centreren */
  align-items: center;     /* verticaal centreren */
  flex-direction: column;  /* zodat meerdere regels netjes onder elkaar komen */
  color: #d394e7;
  font-family: monospace;
  text-align: center;      /* centreren van de tekstregels zelf */
  background: transparent; /* zodat je html achtergrond zichtbaar blijft */
}

body {
  background: transparent;
  position: relative;
}

.background {
  position: fixed; /* blijft op dezelfde plek */
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* iets groter dan viewport voor vloeiend scrollen */
  background-image: url("images/STILL.webp");
  background-size: cover;
  background-position: center;
  z-index: -1; /* onder de tekst */
  transform: translateY(0); /* later met JS aanpassen voor movement */
}

.image-button {
  position: fixed;
  bottom: 20px;
  right: 353px;
  width: 208px;
  height: 380px;

  background-image: url("images/button.test.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;

  pointer-events: none; /* belangrijk */
}

/* kleine zone bovenaan */
.hover-zone {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 50%;
  height: 125px; /* alleen de bovenkant */
  pointer-events: auto;
}

/* hover op de bovenkant → hele afbeelding zichtbaar */
.hover-zone:hover + .image-button,
.image-button:hover {
  opacity: 1;
}
     
.hover-zone {
  background: transparent;
}