/* 画廊背景的流动暗纹和邮票的动效 */
.gallery-home .bg-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.gallery-home .bg-drift {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.gallery-home .bg-drift i {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(30px);
}
.gallery-home .bg-drift i:first-child {
  left: 5%;
  top: 0;
  background: radial-gradient(circle, rgba(255, 250, 235, 0.16), transparent 65%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.gallery-home .bg-drift i:last-child {
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(16, 24, 20, 0.13), transparent 65%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
@keyframes drift-a {
  to {
    transform: translate(28vw, 22vh) scale(1.15);
  }
}
@keyframes drift-b {
  to {
    transform: translate(-30vw, -18vh) scale(0.9);
  }
}
.gallery-home .hero::after {
  animation: shadow-sway 18s ease-in-out infinite alternate;
}
@keyframes shadow-sway {
  to {
    background-position: calc(50% + 40px) calc(50% - 25px);
  }
}

/* dotted walking path: marches continuously and redraws on every stamp change */
.gallery-home .hero-path {
  z-index: 1;
  animation: path-march 1.6s linear infinite;
}
.gallery-home .hero-path.draw {
  animation:
    path-march 1.6s linear infinite,
    path-draw 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) both;
}
@keyframes path-march {
  to {
    stroke-dashoffset: -52;
  }
}

/* big titles: letters rise one by one */
.gallery-home .hero-heading {
  z-index: 1;
}
.gallery-home .title-line {
  display: inline-block;
  overflow: hidden;
  padding: 0.06em 0.04em 0.1em;
  margin: -0.06em -0.04em -0.1em;
  white-space: pre;
}
.gallery-home .title-line .ch {
  display: inline-block;
  transform: translateY(110%);
  animation: ch-up 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 38ms) forwards;
}
.gallery-home .bottom-name .title-line .ch {
  animation-delay: calc(120ms + var(--i, 0) * 38ms);
}
@keyframes ch-up {
  to {
    transform: none;
  }
}

/* stamps: idle float, 3D tilt and a soft light that follows the pointer */
.gallery-home .stamp-float {
  position: absolute;
  inset: 0;
  animation: stamp-float 6.5s ease-in-out infinite;
}
.gallery-home .stamp-card:nth-child(2n) .stamp-float {
  animation-duration: 7.4s;
  animation-delay: -2s;
}
.gallery-home .stamp-card:nth-child(3n) .stamp-float {
  animation-duration: 8.1s;
  animation-delay: -4s;
}
@keyframes stamp-float {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(0, -9px) rotate(-0.6deg);
  }
}
.gallery-home .stamp-paper {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
}
.gallery-home .stamp-card.tilting .stamp-paper {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.025);
  transition-duration: 0.25s;
}
.gallery-home .stamp-glare {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.34), transparent 55%);
  mix-blend-mode: soft-light;
}
.gallery-home .stamp-card.tilting .stamp-glare {
  opacity: 1;
}
.gallery-home .stamp-card {
  transition:
    transform 0.8s cubic-bezier(0.22, 0.8, 0.2, 1),
    opacity 0.45s,
    filter 0.6s;
}
.gallery-home .stamp-card.zooming .stamp-art {
  visibility: hidden;
}

/* nav links: letters roll up on hover */
.gallery-home .gallery-nav-links a.flip-link {
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3;
  text-decoration: none;
}
.gallery-home .gallery-nav-links a.flip-link span {
  display: inline-block;
  text-shadow: 0 1.3em currentColor;
  transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.gallery-home .gallery-nav-links a.flip-link:hover span {
  transform: translateY(-1.3em);
}

/* pill cursor */
.drag-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  pointer-events: none;
}
.drag-cursor span {
  position: absolute;
  left: 18px;
  top: 14px;
  display: block;
  padding: 9px 15px;
  border-radius: 30px;
  background: #f4e9cf;
  color: #1d2a24;
  font:
    700 11px/1 Neue,
    "Microsoft YaHei",
    sans-serif;
  letter-spacing: 0.12em;
  white-space: nowrap;
  transform: scale(0);
  transform-origin: 0 0;
  transition:
    transform 0.35s cubic-bezier(0.3, 1.4, 0.4, 1),
    background 0.3s;
  box-shadow: 0 6px 18px #0002;
}
.drag-cursor.show span {
  transform: scale(1);
}
.drag-cursor[data-mode="drag"] span {
  background: #f6ca67;
}
.drag-cursor[data-mode="view"] span {
  background: #1d2a24;
  color: #f4e9cf;
}

/* zoom into detail page */
.zoom-veil {
  position: fixed;
  z-index: 400;
  overflow: hidden;
  transition:
    left 0.7s cubic-bezier(0.7, 0, 0.2, 1),
    top 0.7s cubic-bezier(0.7, 0, 0.2, 1),
    width 0.7s cubic-bezier(0.7, 0, 0.2, 1),
    height 0.7s cubic-bezier(0.7, 0, 0.2, 1);
}
.zoom-veil img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zoom-veil.go {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}