/*!
Theme Name: design_hu 2025
Theme URI: https://www.design-hu.com/
Author: design_hu by Peter Chen
Author URI: https://www.design-hu.com/
Description: Description
Version: 1.0.0
Tested up to: 6.0
Requires PHP: 8.0
*/

/* ================================================================= */

/* header 導航列 */
#webNavigation ul {
  display: flex;
  gap: 40px;
}

.hero-nav-menu {
  list-style: none;
}

/* --- 匯集頁 pagination 樣式 ---  */
.page-numbers {
  width: 40px;
  height: 40px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #404040;
  line-height: 120%;
  border-radius: 99px;
  border: 1px solid #b9b9a5;
}
/* 當前頁 */
.page-numbers.current {
  color: white;
  border-radius: 99px;
  border: 1px solid #8d8d73;
  background: #8d8d73;
}
.prev,
.next {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  border: 1px solid #b9b9a5;
}
.hu-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hu-pagination .page-numbers.disabled {
  pointer-events: none;
  opacity: 0.3;
  border-radius: 99px;
  border: 1px solid #b9b9a5;
}
/* --- 匯集頁 pagination 樣式 end --- */

/* --- header 手機版漢堡線 --- */
.hamberger .line {
  display: block;
  width: 29px;
  height: 1px;
  background-color: #8d8d73;
  border-radius: 9999px; /* round cap */
  transition: all 0.3s ease;
}

/* ========== 首頁 照片牆動畫 ========== */
.photo-item {
  filter: grayscale(100%); /* 預設黑白 */
  transition: filter 1.2s ease;
}

.photo-item.is-color {
  filter: grayscale(0%); /* 隨機變彩色時移除濾鏡 */
}
@keyframes scrollUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-1 * var(--scroll-distance, 1000px)));
  }
}
@keyframes scrollDown {
  from {
    transform: translateY(calc(-1 * var(--scroll-distance, 1000px)));
  }
  to {
    transform: translateY(0);
  }
}
.photo-col.scroll-up {
  animation: scrollUp 40s linear infinite;
}
.photo-col.scroll-down {
  animation: scrollDown 40s linear infinite;
}
/* 首頁 典藏類進度軸閃動動畫 */
@keyframes dotPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
.dot-inner.dot-pulse {
  animation: dotPulse 0.6s ease;
  transform-origin: center;
}

/* 作品列表匯集頁 swiper progress bar */
.works-carousel-progress {
  --swiper-pagination-color: #8d8d73; /* 對應 accent-olive 的色碼 */
}
/* active 時變成 X */
.hamberger.active .top {
  transform: translateY(11px) rotate(45deg);
}
.hamberger.active .middle {
  opacity: 0;
}
.hamberger.active .bottom {
  transform: translateY(-11px) rotate(-45deg);
}
/* --- header 手機版漢堡線 end--- */

/* --- header 手機版選單 --- */
.web_nav_m.open {
  transform: translateX(0);
  opacity: 1;
}
/* 手機選單背景模糊 */
.menu-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.4); /* 背景遮罩 */
}
.no-scroll {
  overflow: hidden;
  width: 100%;
}