/* Hikka Shells - Custom Styles (beyond Tailwind utility classes) */

/* Hide scrollbar (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar (Firefox) */
html {
  scrollbar-width: none;
}
/* Hide scrollbar (IE, legacy Edge) */
body {
  -ms-overflow-style: none;
}

/* Gallery hover animation */
.gallery-item {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}
.gallery-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.25);
  z-index: 10; /* pop above neighbor cards so shadow isn't hidden/cut by them */
}

/* Give the scrolling row breathing room at the top AND bottom so the
   lifted card's scale/shadow isn't clipped by the panel's own scroll
   overflow box */
.gallery-panel {
  padding-top: 0.85rem;
  padding-bottom: 1.5rem !important;
}

/* Modal fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.modal-animate {
  animation: fadeIn 0.2s ease-out forwards;
}

/* Side Panel (House Rules Drawer) Animation */
.drawer-overlay {
  transition: opacity 0.3s ease-in-out;
}
.drawer-content {
  transition: transform 0.3s ease-in-out;
}

/* Gallery Category Tabs */
.gallery-tab {
  background-color: #ffffff;
  color: #57534e; /* stone-600 */
  border-color: #e7e5e4; /* stone-200 */
}
.gallery-tab:hover {
  border-color: #059669; /* emerald-600 */
  color: #065f46; /* emerald-800 */
}
.gallery-tab.active-tab {
  background-color: #065f46; /* emerald-800 */
  color: #ffffff;
  border-color: #065f46;
}

/* Keep the tab row scrollable but visually clean */
.no-scrollbar-visible {
  scrollbar-width: none;
}
.no-scrollbar-visible::-webkit-scrollbar {
  display: none;
}

/* Gallery horizontal scroll panels */
.gallery-panel {
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/legacy Edge */
}
.gallery-panel::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}