.sponsors-area {
  --width: 90vw;
  width: var(--width);
  height: calc(var(--width) * 0.66);
  margin: 2rem auto;

  /* grandparent image */
}

.nebo-wrapper,
.nebo-container,
.nebo-add {
  width: 100%;
  height: 100%;
  background-color: rgb(40, 40, 40);
}

.nebo-add {
  position: relative;
  cursor: pointer;
  background: url("") center / 100% auto no-repeat;
}

/* SVG mask fills the parent */
.nebo-mask {
  width: 100%;
  height: 100%;
  display: block;
}

.nebo-mask text {
  font-size: 250px;
  font-weight: bolder;
  content: "coffee";
  animation: font-change 1s linear 0s infinite forwards normal;
}

.nebo-mask #svg-bg {
  fill: rgba(10, 10, 10, 1);
  opacity: 0.65;
}

.nebo-final-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
}

.nebo-final-mask text {
  font-size: 250px;
  font-weight: bolder;
  content: "coffee";
  animation: font-change 1s linear 0s infinite forwards normal;
}

.nebo-add .nebo-final-slide {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  background: url("../../img/slider/nebo-photo.webp") center / 100% auto
    no-repeat;
  z-index: 6;
  top: 0;

  justify-content: center;
  align-items: center;
}

.nebo-add .nebo-final-slide::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
}

.nebo-add .nebo-final-slide .nebo-logo-container {
  background: url("../../img/slider/nebo-logo-bg.webp") center / 100% 100%
    no-repeat;
  overflow: hidden;
  width: 48%;
  height: 55%;
  transform: translate(0, -10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nebo-add .nebo-final-slide .nebo-logo-container > img {
  width: 50%;
  z-index: 3;
}

.nebo-add .nebo-final-slide .nebo-logo-container > img.nebo-add-text {
  transform: translate(0, -100%);
  animation: logo-slide 1.5s ease-out 1.5s forwards normal;
  z-index: 1;
}

@keyframes font-change {
  0% {
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
  }
  20% {
    font-family: "Leckerli One", cursive;
    font-weight: 400;
    font-style: normal;
  }

  40% {
    font-family: "Oi", serif;
    font-weight: 400;
    font-style: normal;
  }
  60% {
    font-family: "UnifrakturCook", cursive;
    font-weight: 700;
    font-style: normal;
  }
  80% {
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-style: normal;
  }
  100% {
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
  }
}

@keyframes logo-slide {
  0% {
    transform: translate(0, -100%);
  }
  100% {
    transform: translate(0, 25%);
  }
}