@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Wix+Madefor+Display:wght@400..800&display=swap');

.font-wix-made-for-display {
  font-family: 'Wix Madefor Display', sans-serif;
}

@property --border-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@keyframes border-angle-rotate {
  to {
    --border-angle: 360deg;
  }
}

.rotating-border {
  --border-angle: 0deg;
  --colors-interactive-interactiveBg: 25 25 25;
  --colors-interactive-primary: 239 190 132;
  
  background: 
    linear-gradient(
      rgb(var(--colors-interactive-interactiveBg)), 
      rgb(var(--colors-interactive-interactiveBg))
    ) padding-box,
    conic-gradient(
      from var(--border-angle), 
      rgb(var(--colors-interactive-interactiveBg)) 50%, 
      rgb(var(--colors-interactive-primary))
    ) border-box;
  
  border: 1px solid transparent;
  animation: border-angle-rotate 3s linear infinite;
}

@keyframes slide-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.animate-slide {
  animation: slide-left 10s linear infinite;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInDesktop {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInMobile {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-scale-in {
  animation: scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (min-width: 1024px) {
  .animate-slide-in {
    animation: slideInDesktop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

@media (max-width: 1023px) {
  .animate-slide-in {
    animation: slideInMobile 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

::-webkit-scrollbar {
  width: 6px;
  scrollbar-width: thin;
  scrollbar-color: #3f3f3f #181818;
}

::-webkit-scrollbar-track {
  background: #181818;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #3f3f3f;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4f4f4f;
}