/* Inspired by this pen by Pieter Biesemans https://codepen.io/pieter-biesemans/pen/BQBWXX and My Mother Before Me project http://mymotherbeforeme.com/ */

/* Scope all styles inside the .hp-gallery wrapper to avoid global leakage */
.hp-gallery {
  font-family: Hepta Slab, sans-serif;
  font-weight: 500;
  /* switch to dark background and light text for better contrast */
  background: rgba(0, 0, 0, 0);
  color: #efecdb;
  height: calc(100vh - 60px); /* 减少高度，为顶部按钮留出空间 */
  width: 100vw; /* 使用视口宽度来铺满整个水平方向 */
  margin-left: calc(-50vw + 50%); /* 向左偏移，使其居中并铺满屏幕 */
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
  position: fixed; /* 在激活时固定到视口上 */
  top: 100px; /* 从顶部偏移，为按钮留出空间 */
  left: 0;
  z-index: 100; /* 确保在其他内容之上 */
  opacity: 0; /* 初始不可见 */
  pointer-events: none; /* 初始不响应交互 */
  transition: opacity 0.3s ease;
}

/* remove default page margins and set page background to match gallery
   so there's no white border around .hp-gallery */
html, body {
  height: 100%;
  margin: 0;
  background: #121212;
}

/* 当水平视差画廊处于激活状态时 */
#parallax-gallery.active .hp-gallery {
  opacity: 1;
  pointer-events: all; /* 允许交互 */
}

/* 当水平视差画廊激活时，阻止身体滚动 */
body.parallax-active {
  overflow: hidden;
  height: 100vh;
}

.hp-gallery * {
  box-sizing: border-box;
}

/* hide scrollbar */
.hp-gallery ::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

.hp-gallery ::-webkit-scrollbar-button {
  width: 1px;
  height: 1px;
}
.hp-gallery .hp-gallery-external {
  overflow: hidden;
  height: calc(100vh - 60px); /* 使用调整后的高度 */
  width: 100%; /* 确保宽度占满父容器 */
  position: relative; /* 确保可以正确定位子元素 */
}

.hp-gallery .hp-gallery-horizontal-scroll-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100vh - 60px); /* 使用调整后的高度 */
  transform: rotate(-90deg) translate3d(0,calc(-100vh + 60px),0); /* 调整变换以匹配新高度 */
  transform-origin: right top;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  height: 100vw; /* 使用视口宽度以支持全宽 */
  perspective: 1px;
  transform-style: preserve-3d;
  padding-bottom: 10rem;
  padding-left: 5vw; /* 添加左侧填充以防止内容太靠边 */
  padding-top: 15vh; /* 增加顶部填充以向上移动内容 */
}
.hp-gallery .hp-gallery-img-wrapper {
  position: relative; /* establish stacking context for z-index */
  z-index: 1; /* base layer so neighbors don't overlap by default */
  transform: rotate(90deg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42vh;
  transform-origin: 50% 50%;
  /* base transform: keep original rotation and a subtle scale */
  transform: rotate(90deg) translateZ(.1px) scale(0.9) translateX(0px) translateY(-10vh); /* 向上偏移更多 */
  transition: transform 0.5s cubic-bezier(.2,.9,.2,1), min-height 0.35s ease;
  /* ensure the wrapper allows visible overflow when necessary */
  overflow: visible;
  margin: 0 1.5vh; /* 增加水平间距 */
  cursor: pointer; /* 显示可点击的指针 */
  will-change: transform, z-index; /* hint for smoother hover animation */
}

.hp-gallery .hp-gallery-img-wrapper:hover {
  /* increase the wrapper scale so the container expands with the image */
  transform: rotate(90deg) translateZ(.1px) scale(1.05) translateX(0px) translateY(-10vh); /* 保持与基本状态相同的垂直偏移 */
  min-height: 70vh; /* increase min-height to accommodate larger image */
  z-index: 99999; /* bring hovered element to the very top */
  overflow: visible;
  cursor: pointer; /* reinforce pointer on hover */
}

.hp-gallery .hp-gallery-slower {
  transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(-17vh); /* 向上调整 */
}
.hp-gallery .hp-gallery-slower1 {
  transform: rotate(90deg) translateZ(-.25px) scale(1.05) translateX(0%) translateY(0vh); /* 向上调整 */
}
.hp-gallery .hp-gallery-slower2 {
  transform: rotate(90deg) translateZ(-.3px) scale(1.3) translateX(0%) translateY(-5vh); /* 向上调整 */
}
.hp-gallery .hp-gallery-slower-down {
  transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(8vh); /* 向上调整 */
}
.hp-gallery .hp-gallery-faster {
  transform: rotate(90deg) translateZ(.15px) scale(0.8) translateX(0%) translateY(6vh); /* 向上调整 */
}
.hp-gallery .hp-gallery-faster1 {
  transform: rotate(90deg) translateZ(.05px) scale(0.8) translateX(0%) translateY(2vh); /* 向上调整 */
}
.hp-gallery .hp-gallery-fastest {
  transform: rotate(90deg) translateZ(.22px) scale(0.7) translateX(-10vh) translateY(-23vh); /* 向上调整 */
}
.hp-gallery .hp-gallery-vertical {
   transform: rotate(90deg) translateZ(-.15px) scale(1.15) translateX(0%) translateY(-7vh); /* 向上调整 */
}
.hp-gallery .hp-gallery-last {
  transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(35vh) translateY(-15vh); /* 向上调整 */
  /* 增加偏移量，使整个画廊看起来更宽 */
}

.hp-gallery header {
  position: absolute;
  left: 1rem;
}


.hp-gallery header {
  bottom: 1rem;
}

.hp-gallery a {
  color: inherit;
  font-weight: 500;
  
}
.hp-gallery h1 {
  font-weight: 300;
  font-size: 1rem;
}

.hp-gallery .hp-gallery-img-wrapper a {
  /* allow overflow so enlarged images are not clipped by the anchor */
  overflow: visible;
  display: block;
  padding: 1vh ;
  background: transparent; /* remove hard background on dark theme */
  box-shadow: 0 10px 50px rgba(0,0,0,0.5);
  cursor: pointer; /* anchors inside wrapper should also show pointer even without href */
}

/* make wrapper keyboard-focusable visual (if you add tabindex in HTML) */
.hp-gallery .hp-gallery-img-wrapper:focus {
  outline: 3px solid rgba(255,255,255,0.12);
  outline-offset: 6px;
}
.hp-gallery img {
  max-width: 48vh;
  max-height: 52vh;
  transition: transform 0.45s cubic-bezier(.2,.9,.2,1), filter 0.45s ease;
  vertical-align: top;
  transform-origin: center center;
  /* show images in full color */
  filter: none;
  object-fit: cover; /* 确保图片填充空间 */
}

/* Figure and caption: place caption below image and wrap with dark border */
.hp-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,10,0.55);
  padding: 0.6rem;
  /* semi-transparent border for the figure/frame */
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  backdrop-filter: blur(4px); /* optional: blur behind the overlay for depth */
}

/* Ensure the inner figure can be brought above siblings when its wrapper is hovered */
.hp-figure {
  position: relative;
  z-index: 2; /* slightly above wrapper base layer */
}

.hp-figure:hover {
  z-index: 100000; /* place the figure well above everything when hovered */
}

.hp-gallery .hp-gallery-img-wrapper:hover .hp-figure:hover {
  z-index: 100000; /* place the figure well above everything when hovered */
}

.hp-figure a {
  display: block;
}

.hp-caption {
  margin-top: 0.6rem;
  /* make caption smaller and more translucent */
  color: rgba(230,230,230,1);
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.2;
  max-width: 45vh; /* match image width so caption wraps under the image */
  word-wrap: break-word;

}

/* Ensure overlay scales with transform without noisy borders */
.hp-gallery .hp-gallery-img-wrapper.is-hover .hp-figure {
  /* keep same semi-transparent overlay when hovered */
  background: rgba(10,10,10,0.55);
  border-color: rgba(255,255,255,0.06);
}
.hp-gallery a:hover img {
  /* image itself no longer scales; wrapper handles the enlargement
     keep filter none for full color */
  transform: none;
  filter: none;
}
.hp-gallery p {
  margin: 0;
}


@media (max-width: 768px) {
  .hp-gallery {
    top: 72px;
    height: calc(100vh - 72px);
  }

  .hp-gallery .hp-gallery-external {
    height: calc(100vh - 72px);
  }

  .hp-gallery .hp-gallery-horizontal-scroll-wrapper {
    padding-left: 7vw;
    padding-top: 11vh;
    width: calc(100vh - 72px);
  }

  .hp-gallery .hp-gallery-img-wrapper {
    min-height: 32vh;
    margin: 0 0.9vh;
  }

  .hp-gallery .hp-gallery-img-wrapper:hover {
    min-height: 38vh !important;
    z-index: 100;
  }

  .hp-gallery img {
    max-width: 37vh;
    max-height: 39vh;
  }


  .hp-gallery .hp-gallery-img-wrapper {
    transition: transform 0.32s cubic-bezier(.25,.8,.25,1), min-height 0.24s ease;
  }
}

/* On touch devices: disable hover enlargement and prevent image link clicks */
@media (hover: none) and (pointer: coarse) {
  .hp-gallery .hp-gallery-img-wrapper,
  .hp-gallery .hp-gallery-img-wrapper:hover {
    /* keep wrapper at a smaller base size on touch screens */
    min-height: 30vh !important;
    margin: 0 1vh !important;
    z-index: auto !important;
    overflow: visible !important;
  }

  .hp-gallery .hp-gallery-horizontal-scroll-wrapper {
    padding-left: 6vw !important;
    padding-top: 12vh !important;
    width: calc(100vh - 70px) !important;
  }


  /* disable link clicks on images for touch devices to avoid accidental navigation */
  .hp-gallery .hp-gallery-img-wrapper a {
    pointer-events: none !important;
    cursor: default !important;
  }

  /* remove transitions on images for a static touch experience */
  .hp-gallery img {
    max-width: 32vh !important;
    max-height: 34vh !important;
    transition: none !important;
    transform: none !important;
  }
}