/* NAVBAR */
.main-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  transition: height 0.3s ease, background-color 0.3s ease;
  z-index: 1000;
}

.main-navbar.scrolled {
  height: 8vh;
  background-color: rgba(136, 203, 191, 0.92);
}

.logo-wrapper {
  position: relative;
}

.logo-wrapper::before {
  content: "";
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  z-index: -1;

  background: repeating-conic-gradient(
    from 0deg,
    rgba(255,255,255,0.35) 0deg 1deg,
    transparent 1deg 14deg
  );

  mask-image: radial-gradient(circle, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle, black 40%, transparent 75%);

  animation:
    rays-pulse 3s ease-in-out infinite,
    rays-rotate 12s linear infinite;
}

.navbar-logo {
  height: 15vh;
  transition: height 0.3s ease;
  animation: logo-scale 3s ease-in-out infinite;
  opacity: 1;
}

/* STOP AU SCROLL */
.main-navbar.scrolled .logo-wrapper::before {
  background: none !important;
  animation: none;
  opacity: 0 !important;
}


.main-navbar.scrolled .navbar-logo {
  opacity: 1 !important;
}

@keyframes scroll-bounce{
  0%   { transform: translate(-50%, 0); }
  40%  { transform: translate(-50%, 10px); }
  80%  { transform: translate(-50%, 0); }
  100% { transform: translate(-50%, 0); }
}

@keyframes rays-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  12% {
    transform: scale(1.05);
    opacity: 0.5;
  }
  20% {
    transform: scale(1.05);
    opacity: 0.20;
  }
  100% {
    transform: scale(0.6);
    opacity: 0;
  }
}

@keyframes rays-rotate {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@keyframes logo-scale {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.03); }
  45%  { transform: scale(1); }
  100% { transform: scale(1); }
}