/* ============================================================
   虹梁水陌 — Landing Page CSS
   Layered scene · 3D scale zoom · UI overlay
   ============================================================ */

/* ── Scene root ─────────────────────────────────────────── */
.scene-root {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* The zoom container — transform applied by JS */
.scene-zoom {
  position: absolute;
  left: -10%;
  right: -10%;
  top: -15%;
  bottom: 0;
  width: 120%;
  height: 115%;
  transform-origin: bottom center; 
  /* transform: scale(1); */
  will-change: transform;
}

/* ── Layer system ───────────────────────────────────────── */
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: bottom center;
}

.layer-bg {
  z-index: 0;
  background-image: url('../pic/bg.png');
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  transform: scale(calc(1 + (var(--zoom-factor, 1) - 1) * 0.2));
}

/* Mountain — far background */
.layer-mountain {
  z-index: 1;
  background-image: url('../pic/mountain.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  
  /* 强制开启硬件加速，防止掉帧 */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  
  transition: none !important; 

  transform: 
    translateY(80px) 
    scale(calc(1 + (var(--zoom-factor, 1) - 1) * 0.45))
    translate(calc((var(--zoom-factor, 1) - 1) * -60px), calc((var(--zoom-factor, 1) - 1) * -40px))
    translateZ(0); 
    
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 40%);
  mask-image: linear-gradient(to top, transparent 0%, black 40%);
  filter: url(#ink-mist);
}

/* Bridge — centrepiece */
.layer-bridge {
  z-index: 2;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.layer-bridge img {
  display: block;
  width: 100vw; 
  height: auto;
  object-fit: contain;
  position: absolute;
  bottom: -2px; 
  left: 50%;
  /* 核心：保持居中，并根据变量缩放 */
  transform: translateX(-50%) scale(var(--zoom-factor, 1));
  transform-origin: bottom center;
  
  filter: drop-shadow(0 -10px 40px oklch(14% 0.008 260 / 0.4));
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 10%);
  mask-image: linear-gradient(to top, transparent 0%, black 10%);
}

/* Foreground houses */
.layer-houses {
  z-index: 3;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.house {
  position: absolute;
  bottom: -15%; 
  height: 60%; 
  width: auto;
  will-change: transform;
  filter: drop-shadow(0 -5px 25px oklch(14% 0.008 260 / 0.3));
  
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 15%);
  mask-image: linear-gradient(to top, transparent 0%, black 15%);
}

.house-left {
  left: 0; 
  transform-origin: center left;
  transform: 
    translate(calc((var(--zoom-factor, 1) - 1) * -1500px), calc((var(--zoom-factor, 1) - 1) * 200px))
    scale(calc(1 + (var(--zoom-factor, 1) - 1) * 2.5));
}

.house-right {
  right: 0; 
  transform-origin: center right;
  transform: 
    translate(calc((var(--zoom-factor, 1) - 1) * 1400px), calc((var(--zoom-factor, 1) - 1) * 40px))
    scale(calc(1 + (var(--zoom-factor, 1) - 1) * 2.5));
}

/* 针对房屋底部也增加微弱的羽化，防止与地面接触太死板 */
.house-left, .house-right {
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 15%);
  mask-image: linear-gradient(to top, transparent 0%, black 15%);
}

/* Water shimmer at base */
.layer-water {
  z-index: 4;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18%;
  background: linear-gradient(
    to top,
    oklch(36% 0.055 185 / 0.55) 0%,
    oklch(36% 0.055 185 / 0.18) 60%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── Ink vignette ───────────────────────────────────────── */
.vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(
    ellipse 90% 80% at 50% 50%,
    transparent 40%,
    oklch(14% 0.008 260 / 0.55) 100%
  );
  pointer-events: none;
}

/* ── UI overlay ─────────────────────────────────────────── */
.ui-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3xl) var(--space-2xl);
  pointer-events: none;
}

/* Title block — vertical calligraphy */
.title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  pointer-events: none;
  /* animation: title-rise 1.4s var(--ease-out-expo) 0.3s both; */
}

.title-main {
  font-family: var(--font-calligraphy);
  font-size: clamp(3.5rem, 8vw, 7rem);
  color: var(--color-silk);
  letter-spacing: 0.25em;
  line-height: 1.1;
  text-shadow:
    0 2px 12px oklch(14% 0.008 260 / 0.6),
    0 0 60px oklch(36% 0.055 185 / 0.3);
  /* Vertical writing mode for the main title */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 0; /* 初始透明 */
  animation: ink-spread 2.5s var(--ease-out-expo) 0.3s forwards;
}

.title-sub {
  font-family: var(--font-label);
  font-size: clamp(0.7rem, 1.2vw, 0.9rem);
  color: var(--color-stone);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-weight: 300;
  opacity: 0.9;

  text-shadow: 
    0 1px 2px oklch(93% 0.018 82 / 0.8), /* 亮边 */
    0 0 10px oklch(14% 0.008 260 / 0.1);  /* 暗晕 */
  animation: cta-rise 1.5s var(--ease-out-expo) 1.5s both;
}


/* Decorative seal mark — removed */

/* ── CTA button ─────────────────────────────────────────── */
.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  position: relative;
  z-index: 20;
  pointer-events: all; /* 确保容器可以接收交互 */
}

.cta-block.is-visible .btn-enter {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transform: translateY(0);
}

/* --- 拾级登桥：新中式数字交互重构 --- */
.btn-enter {
  position: relative;
  overflow: hidden; 
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-2xl);
  
  background: oklch(14% 0.008 260 / 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  border: 1px solid oklch(93% 0.018 82 / 0.4);
  color: var(--color-silk);
  
  font-family: var(--font-label);
  transition: all 0.6s var(--ease-out-expo);
  
  box-shadow: 
    inset 0 0 15px oklch(93% 0.018 82 / 0.05),
    0 10px 30px oklch(14% 0.008 260 / 0.3);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(10px); /* 初始微下沉 */
  
  /* 平滑过渡：当 is-visible 类添加时，按钮会浮现 */
  transition: 
    opacity 1s var(--ease-out-quart),
    visibility 1s var(--ease-out-quart),
    transform 1s var(--ease-out-quart),
    letter-spacing 0.4s; 
}

/* 装饰：四角“雀替”元素，增加古建细节感 */
.btn-enter::before {
  content: '';
  position: absolute;
  top: 5px; left: 5px;
  width: 10px; height: 10px;
  border-top: 1px solid var(--color-silk);
  border-left: 1px solid var(--color-silk);
  opacity: 0.3;
  transition: all 0.4s;
}

/* 交互：悬停状态 */
.btn-enter:hover {
  border-color: var(--color-silk);
  transform: translateY(-3px); 
  box-shadow: 
    0 20px 40px oklch(14% 0.008 260 / 0.5),
    inset 0 0 20px oklch(93% 0.018 82 / 0.15);
}

/* 核心特效：水墨晕染层 */
.btn-ink {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--color-ink-green) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.8s var(--ease-out-expo), opacity 0.4s;
  pointer-events: none;
  z-index: 0;
}

.btn-enter:hover .btn-ink {
  transform: scale(2.5);
  opacity: 0.25;
}

/* 核心特效：扫过的流光 */
.btn-light {
  position: absolute;
  top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    oklch(93% 0.018 82 / 0.15),
    transparent
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

.btn-enter:hover .btn-light {
  left: 150%;
  transition: 0.8s var(--ease-out-expo);
}

/* 确保文字在特效之上 */
.btn-zh, .btn-en, .btn-divider {
  position: relative;
  z-index: 2;
  transition: letter-spacing 0.4s;
}

.btn-enter:hover .btn-zh {
  letter-spacing: 0.2em; /* 悬停时文字微微舒展 */
}


.btn-enter:active {
  transform: scale(0.98);
}

.btn-enter .btn-zh {
  font-family: var(--font-calligraphy);
  font-size: 1.1em;
  letter-spacing: 0.15em;
  color: oklch(97% 0.012 82);
}

.btn-enter .btn-divider {
  width: 1px;
  height: 1em;
  background: oklch(93% 0.018 82 / 0.4);
}

.btn-enter .btn-en {
  font-size: 0.82em;
  letter-spacing: 0.28em;
  color: oklch(85% 0.018 82);
}

/* Scroll hint */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  opacity: 0.8;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--color-silk);
  animation: cta-rise 1.5s var(--ease-out-expo) 1s both;
}

.scroll-hint-line {
  width: 1px;
  height: 32px;
  background: var(--color-silk);
  animation: scroll-pulse 2.5s ease-in-out infinite;
}

/* ── Animations ─────────────────────────────────────────── */
@keyframes title-rise {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cta-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
  50%       { opacity: 1;   transform: scaleY(1);   }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .title-block,
  .cta-block {
    animation: none;
  }
  .scroll-hint-line {
    animation: none;
  }
  .scene-zoom {
    transition: none !important;
  }
}

/* --- 公共样式：所有云都遵循的逻辑 --- */
.cloud {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  will-change: transform;
  opacity: 0.5; /* 保持半透明，增加透气感 */
  z-index: 2.5; /* 放在山和桥之间，或者根据你喜欢的层次调整 */
}

.cloud-1 {
  background-image: url('../pic/cloud_ink.png');
  top: 15%;
  left: 10%;
  width: 40%;
  height: 20%;
  
  /* 基础缩放系数 0.3 */
  transform: scale(calc(1 + (var(--zoom-factor, 1) - 1) * 0.3));
  
  /* 引用动画：慢速漂浮 */
  animation: 
    cloud-drift 20s ease-in-out infinite,
    cloud-waft 10s ease-in-out infinite;
}

.cloud-2 {
  background-image: url('../pic/cloud_ink2.png'); 
  top: 20%; /* 高度错开，增加错落感 */
  right: -5%; /* 定位在右边 */
  width: 45%;
  height: 25%;
  
  /* 关键：给右边的云一个稍大的视差系数 (0.4)，产生远近差 */
  transform: scale(calc(1 + (var(--zoom-factor, 1) - 1) * 0.4));
  
  /* 引用动画：方向相反或速度不同，避免同步感 */
  animation: 
    cloud-drift 25s ease-in-out infinite reverse, /* reverse 让它反向飘 */
    cloud-waft 12s ease-in-out infinite;
}