@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --color-plaster: 244 240 234;
  --color-ink: 26 29 32;
  --color-clay: 184 90 56;
  --color-olive: 60 74 62;
  --color-gold: 212 163 89;
}

body {
  background-color: rgb(var(--color-plaster));
  color: rgb(var(--color-ink));
  font-family: 'Work Sans', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: 'Fraunces', serif;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: rgb(var(--color-plaster));
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--color-olive));
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-clay));
}


/* Custom premium transitions and shapes */
.transition-custom {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.asymmetric-clip-1 {
  clip-path: polygon(0% 0%, 100% 4%, 96% 100%, 0% 96%);
}

.asymmetric-clip-2 {
  clip-path: polygon(4% 0%, 100% 0%, 100% 96%, 0% 100%);
}

.asymmetric-clip-3 {
  clip-path: polygon(0% 8%, 94% 0%, 100% 100%, 4% 92%);
}

@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

/* Hide scrollbars for clean horizontal slider view */
.no-scrollbar::-webkit-scrollbar,
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.no-scrollbar,
.scrollbar-none {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}