.video-background {
  opacity: 0;
  animation: fadeInVideo 5s ease-in-out forwards;
}

@keyframes fadeInVideo {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.video-background video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  z-index: -1;
  /* opcional si no quieres que tape el contenido */
}


.fade-title,
.fade-paragraph {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.fade-title.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-paragraph.visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}