/*
 * animations.css / marquee.css / announcement.css / priceRangeSlider.css
 * used to be @import-ed here. That serializes their fetch behind this
 * file's own download (an @import can't start until the browser has
 * parsed the importing stylesheet), so every page paid for a 4-deep
 * waterfall before the CSSOM was ready. They're now loaded as sibling
 * <link rel="stylesheet"> tags (in parallel with this file) directly in
 * each page's <head>, right before the link to this file — see index.html
 * / pages/*.html. Keep new colocated feature CSS on that same pattern
 * rather than reintroducing an @import here.
 */

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}



.navbar-light {
  color: var(--color-ink);
}

.navbar-dark {
  color: #fff;
}







/* auth pages  */
@keyframes authZoom {

  from {

    transform: scale(1.05);

  }

  to {

    transform: scale(1.12);

  }

}

.animate-authZoom {

  animation: authZoom 18s ease-in-out infinite alternate;

}

@keyframes authFade {

  from {

    opacity: 0;

    transform: translateY(24px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.animate-authFade {

  animation: authFade .9s ease;

}




@keyframes fadeSlide {

  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  15% {
    opacity: 1;
    transform: translateY(0);
  }

  85% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-12px);
  }

}

.auth-text-animation {
  animation: fadeSlide .6s ease;
}




.video-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.35);
  transition: background .3s ease, transform .3s ease;
}

.video-dot.is-active {
  background: var(--color-primary);
  transform: scale(1.25);
}