@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background: #000000;
  overflow-x: hidden;
  color: #fff;
}

.overlay {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.3));
}

.gold {
  color: #c9a46c;
}

.border-gold {
  border-color: #c9a46c;
}

.fadeUp {
  animation: fadeUp 1.2s ease forwards;
  opacity: 0;
}

.delay1 {
  animation-delay: 0.3s;
}

.delay2 {
  animation-delay: 0.6s;
}

.delay3 {
  animation-delay: 0.9s;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-animation {
  animation: scrollDown 2s infinite;
}

@keyframes scrollDown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(12px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.gold-btn {
  position: relative;
  padding: 16px 40px;
  color: white;
  background: transparent;
  border: none;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.gold-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a46c);
  animation: animateTop 2s linear infinite;
}

.gold-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #c9a46c);
  animation: animateBottom 2s linear infinite;
}

.gold-btn span::before {
  content: "";
  position: absolute;
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #c9a46c);
  animation: animateRight 2s linear infinite;
  animation-delay: 0.5s;
}

.gold-btn span::after {
  content: "";
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(0deg, transparent, #c9a46c);
  animation: animateLeft 2s linear infinite;
  animation-delay: 1s;
}

@keyframes animateTop {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes animateBottom {
  0% {
    right: -100%;
  }
  100% {
    right: 100%;
  }
}

@keyframes animateRight {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}

@keyframes animateLeft {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 100%;
  }
}

.reveal-left {
  opacity: 0;
  animation: revealLeft 1.2s ease forwards;
}

@keyframes revealLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.gold-glow {
  animation: glow 2s ease infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px #c9a46c;
  }

  to {
    text-shadow:
      0 0 20px #c9a46c,
      0 0 40px #c9a46c;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.35) 35%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.35) 65%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

.gold-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  outline: none;

  background: linear-gradient(to right, #c9a46c 0%, #c9a46c 50%, #2a2a2a 50%, #2a2a2a 100%);
}

/* Chrome */
.gold-range::-webkit-slider-thumb {
  -webkit-appearance: none;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: #c9a46c;

  border: 3px solid #111;

  cursor: pointer;

  transition: 0.3s;

  box-shadow:
    0 0 0 3px rgba(201, 164, 108, 0.25),
    0 0 15px rgba(201, 164, 108, 0.5);
}

.gold-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);

  box-shadow:
    0 0 0 5px rgba(201, 164, 108, 0.35),
    0 0 25px rgba(201, 164, 108, 0.9);
}

/* Firefox */

.gold-range::-moz-range-thumb {
  width: 18px;
  height: 18px;

  border: none;

  border-radius: 50%;

  background: #c9a46c;

  cursor: pointer;
}

.gold-range::-moz-range-track {
  height: 4px;

  background: #2a2a2a;

  border-radius: 999px;
}
.review-scroll {
  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color: #c9a46c #111;
}

.review-scroll::-webkit-scrollbar {
  width: 6px;
}

.review-scroll::-webkit-scrollbar-track {
  background: #111;
}

.review-scroll::-webkit-scrollbar-thumb {
  background: #c9a46c;

  border-radius: 20px;
}
.swiper {
  width: 100%;
  height: 550px;
}

.swiper-slide {
  height: 550px !important;
}

.swiper-wrapper {
  transition-timing-function: linear !important;
}
.min-h-450 {
  min-height: 500px;
}


.swiper {
  width: 100%;
  overflow: hidden;
}

.swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.swiper-slide {
  flex-shrink: 0 !important;
}