:root {
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "DM Sans", sans-serif;
}
body {
  font-family: var(--font-sans);
  background-color: #fdfbf7; /* A warm, paper-like off-white */
  color: #1a1a1a;
}
.font-serif {
  font-family: var(--font-serif);
}

/* Vertical Slider Custom Overrides */
.vertical-slider .slick-slide {
  outline: none;
}
.vertical-slider .slick-dots {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: auto;
  bottom: auto;
}
.vertical-slider .slick-dots li {
  margin: 0;
  width: 10px;
  height: 10px;
}
.vertical-slider .slick-dots li button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d1d5db; /* Tailwind gray-300 */
  padding: 0;
  color: transparent;
  transition: all 0.3s ease;
}
.vertical-slider .slick-dots li button:before {
  display: none; /* Hide default slick dot character */
}
.vertical-slider .slick-dots li.slick-active button {
  background-color: #000; /* Theme orange */
  transform: scale(1.2);
}

/* Grid Background Pattern */
.bg-grid-pattern {
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

/* Custom Portfolio Animations */
@keyframes portfolio-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-portfolio-spin {
  animation: portfolio-spin 20s linear infinite;
}

#portfolio-active-img,
#portfolio-project-name,
#portfolio-bg-text {
  transition:
    opacity 0.3s ease-in-out,
    transform 0.5s ease-out;
}

/* Genre Slider 3D Effect */
.genre-slider .slick-list {
  /* padding: 80px 0 !important; */
  overflow: visible;
}

.genre-item {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.75) rotateY(35deg); /* Default rotation for side items */
  opacity: 0.4;
  filter: grayscale(80%);
}

/* Focused Center Slide */
.genre-slider .slick-center .genre-item {
  transform: scale(1.2) rotateY(0deg);
  opacity: 1;
  filter: grayscale(0%);
  z-index: 20;
}

/* Inverse rotation for items on the right of center */
.genre-slider .slick-center + .slick-slide .genre-item {
  transform: scale(0.75) rotateY(-35deg);
}

/* FAQ Accordion Transitions */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s ease;
}
.faq-item.active .faq-answer {
  max-height: 200px;
  padding-bottom: 24px;
}
.faq-item.active .faq-icon {
  transform: rotate(180deg);
  color: #000;
}