/*
  style.css
  - Custom styles to complement Tailwind CSS.
  - Page transition animations.
  - Component-specific styling.
  - Responsive design helpers.
*/

:root {
  --color-bg: #F5F0E8;
  --color-text-main: #1E2A3A;
  --color-text-subtle: #6b7280;
  --color-accent: #1E2A3A;
  --color-light-gray: #E5E5E5;
}

/*
  Base font setup. For best results, embed specific web fonts like '思源宋体'.
  This stack provides a graceful fallback.
*/
body {
  font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page container for fade transitions */
.page {
  display: none;
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out;
}

.page.active {
  display: block;
  opacity: 1;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Navigation link subtle underline effect */
.nav-link {
  position: relative;
  padding-bottom: 4px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s ease-in-out;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* Hero button hover effect */
.hero-button {
  transition: background-color 0.3s, color 0.3s;
}

.hero-button:hover {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* Hide scrollbar for the horizontal scroll container on the inspiration page */
.horizontal-scroll-wrapper {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.horizontal-scroll-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Lightbox for image popups */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(30, 42, 58, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}

.lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

/* Utility class to hide elements */
.hidden {
  display: none !important;
}