/* ==========================================================================
   Hero — Full-width video background with bouncing arrow
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: var(--hero-height);
  overflow: hidden;
  background-color: var(--color-primary);
}

.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bouncing arrow at bottom */
.hero__arrow {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  border: 1px solid var(--color-light);
  animation: bounce 1.5s linear infinite;
  z-index: 10;
}

.hero__arrow img {
  width: 20px;
  height: auto;
}

@keyframes bounce {
  0% {
    transform: translateX(-50%) translateY(-25px);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
  100% {
    transform: translateX(-50%) translateY(-24px);
  }
}