/* ==========================================================================
   神社 · 泉涌启程 样式表 (日式景石·青苔·垂樱 · 莫兰迪柔和超写实渲染版)
   ========================================================================== */

:root {
  /* 瀑顶基准水线：神社底部与瀑布顶部严格锚定于此线，彻底杜绝交叠 */
  --water-line: 42%;
  /* 莫兰迪柔和雅致色板 */
  --morandi-sky-top: #96a3a8;
  --morandi-sky-mid: #c8cecc;
  --morandi-sky-warm: #e6dfd5;
  --morandi-water-crest: #687a7f;
  --morandi-water-mid: #38474c;
  --morandi-water-deep: #151d20;
  --morandi-champagne: #e8dac5;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--morandi-water-deep);
  font-family: "Songti SC", "Noto Serif SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", serif;
}

/* 视口容器：莫兰迪柔和晨雾底色 + 电影感柔光暗角 */
.viewport-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: linear-gradient(180deg, var(--morandi-sky-top) 0%, var(--morandi-sky-mid) 38%, var(--morandi-sky-warm) 60%);
}

.viewport-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  background: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0) 54%, rgba(14, 20, 24, 0.35) 100%);
}

.viewport-wrapper:active {
  cursor: grabbing;
}

.layer {
  position: absolute;
  left: 0;
  width: 100%;
}

/* ==========================================================================
   1. 远景天空层 (莫兰迪柔和雾霭与远山)
   ========================================================================== */
.layer-sky {
  top: 0;
  height: calc(100% - var(--water-line) + 24px);
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(180deg,
    #92a0a6 0%,
    #bcc5c4 44%,
    #dfdcd5 78%,
    #e8dfd3 100%
  );
  will-change: transform;
}

.sky-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.76;
  filter: saturate(0.7) contrast(0.95);
  pointer-events: none;
}

.sun-glow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 350px;
  height: 350px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(253, 248, 240, 0.8) 0%,
    rgba(235, 218, 198, 0.36) 45%,
    rgba(218, 200, 182, 0) 75%
  );
  pointer-events: none;
  will-change: transform, opacity;
}

.sky-mountains-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ==========================================================================
   2. 中景：神社建筑本体 (Shrine Body)
   底部严格锚定在 --water-line 瀑顶水线正上方
   ========================================================================== */
.shrine-wrapper {
  position: absolute;
  left: 50%;
  bottom: var(--water-line);
  transform: translate3d(-50%, 0, 0);
  transform-origin: center bottom;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  line-height: 0;
  will-change: transform, filter;
}

.shrine-aura {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 90%;
  height: 90%;
  transform: translateX(-50%) scale(0.92);
  background: radial-gradient(ellipse at center,
    rgba(244, 228, 204, 0.68) 0%,
    rgba(216, 190, 158, 0.25) 45%,
    rgba(195, 168, 135, 0) 72%
  );
  opacity: 0;
  filter: blur(22px);
  pointer-events: none;
  z-index: -1;
}

.shrine-body {
  position: relative;
  line-height: 0;
}

.shrine-body img {
  display: block;
  width: auto;
  height: auto;
  max-width: 76vw;
  max-height: 50vh;
  object-fit: contain;
  filter: saturate(0.84) contrast(1.01) drop-shadow(0 12px 28px rgba(22, 30, 34, 0.26));
}

/* ==========================================================================
   3. 前景：纵向山泉、飞瀑与日式山石青苔樱花层 (Layer Water)
   顶部严格对齐 --water-line，overflow: hidden 绝不越界
   ========================================================================== */
.layer-water {
  bottom: 0;
  height: var(--water-line);
  z-index: 3;
  overflow: hidden;
  will-change: height, transform;
  box-shadow: inset 0 20px 38px -12px rgba(238, 242, 240, 0.35);
}

/* 3.1 莫兰迪柔和矿石青灰基底 + 纵向瀑布丝光纹理 (z-index: 1) */
.water-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(228, 232, 230, 0.44) 0%,
      rgba(148, 164, 168, 0.18) 15%,
      rgba(0, 0, 0, 0) 36%
    ),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.058) 18px,
      rgba(18, 28, 32, 0.055) 38px,
      rgba(255, 255, 255, 0.02) 64px
    ),
    linear-gradient(180deg,
      #64777c 0%,
      #44555b 25%,
      #29373c 62%,
      #141c20 100%
    );
}

/* 3.2 神社倒影舞台 (位于水底渐变之上 z-index: 2，始终映于瀑面之上) */
.water-reflection-stage {
  position: absolute;
  top: 2px; /* 与上方神社本体严格分离，0 交叠 */
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.42) 48%,
    rgba(0, 0, 0, 0.14) 78%,
    rgba(0, 0, 0, 0) 96%
  );
  mask-image: linear-gradient(180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.42) 48%,
    rgba(0, 0, 0, 0.14) 78%,
    rgba(0, 0, 0, 0) 96%
  );
}

.shrine-reflection {
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: top center;
  transform: translate3d(-50%, 0, 0) scaleY(-1);
  opacity: 0.46;
  filter: url(#waterDistortion) saturate(0.62) brightness(0.93) blur(1px);
  line-height: 0;
  will-change: transform, opacity;
}

.shrine-reflection img {
  display: block;
  width: auto;
  height: auto;
  max-width: 76vw;
  max-height: 50vh;
  object-fit: contain;
}

/* 3.3 中远景日式浸水山石层 (位于水幕后方 z-index: 3) */
.waterfall-rocks-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.9;
  will-change: transform;
}

/* 3.4 纵向山泉、飞瀑与撞石飞沫超写实流体 Canvas (z-index: 4) */
.water-flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

/* 3.5 近景超写实日式山石、杉苔与垂樱层 (z-index: 5) */
.waterfall-rocks-front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  will-change: transform;
}

.rock-cluster {
  will-change: transform;
}

/* 3.6 随纵向泉水漂落的莫兰迪浮叶与落樱层 (z-index: 6) */
.water-leaves-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

.water-leaves-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  filter: saturate(0.72);
}

.water-leaves-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 3.7 瀑顶跌水口柔光水雾冠 (z-index: 7) */
.water-foam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9px;
  z-index: 7;
  background: linear-gradient(180deg,
    rgba(246, 243, 238, 0.86) 0%,
    rgba(228, 234, 232, 0.44) 48%,
    rgba(205, 215, 216, 0) 100%
  );
  box-shadow: 0 2px 16px rgba(244, 241, 235, 0.65);
}

/* ==========================================================================
   4. 高级感交互提示与进度环 (Pull Hint)
   ========================================================================== */
.pull-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(244, 240, 234, 0.9);
  font-size: 12px;
  letter-spacing: 3px;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(10, 18, 22, 0.72);
  transition: opacity 0.35s ease;
}

.pull-progress-ring {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pull-progress-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-bg {
  fill: rgba(22, 32, 36, 0.42);
  stroke: rgba(235, 230, 220, 0.25);
  stroke-width: 2;
}

.ring-bar {
  fill: none;
  stroke: var(--morandi-champagne);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  stroke-dashoffset: 113.1;
}

.pull-hint .arrow {
  font-size: 15px;
  color: #f4efe6;
  animation: floatArrow 2s infinite ease-in-out;
}

@keyframes floatArrow {
  0%, 100% { transform: translateY(-2px); opacity: 0.55; }
  50% { transform: translateY(4px); opacity: 0.95; }
}

/* ==========================================================================
   5. 入场完成后的覆盖层 (Entered Overlay)
   ========================================================================== */
.entered-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(46, 58, 64, 0.92) 0%, rgba(18, 26, 30, 0.98) 100%);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease;
}

.entered-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.entered-card {
  text-align: center;
  color: #f2eee6;
  padding: 50px 60px;
  border: 1px solid rgba(232, 218, 197, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  transform: translateY(20px);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.entered-overlay.active .entered-card {
  transform: translateY(0);
}

.entered-badge {
  display: inline-block;
  padding: 5px 16px;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--morandi-champagne);
  border: 1px solid rgba(232, 218, 197, 0.35);
  border-radius: 999px;
  margin-bottom: 18px;
}

.entered-card h1 {
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 8px;
  margin-bottom: 14px;
}

.entered-card p {
  font-size: 13px;
  color: rgba(242, 238, 230, 0.72);
  letter-spacing: 1.5px;
  margin-bottom: 30px;
}

.reset-btn {
  padding: 11px 30px;
  font-size: 13px;
  letter-spacing: 3px;
  color: #1c262b;
  background: linear-gradient(135deg, #ede3d2 0%, #d4bfa2 100%);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.reset-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

/* 隐藏 SVG 滤镜占位 */
.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}