/* Custom transitions and scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F5F2EC;
}
::-webkit-scrollbar-thumb {
  background: #C9A84C;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #A68633;
}

html {
  scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Custom Scroll Entrance Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Delay modifiers for scroll animations */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Mobile Menu Transitions */
#mobile-drawer {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-drawer.open {
  transform: translateX(0);
}

/* Ensure gallery text is readable on touch devices where hover is simulated */
@media (max-width: 768px) {
  .group:hover .bg-image,
  .group:focus .bg-image {
    transform: scale(1.03);
  }
}