/* ============================================================
   心之所向 · 梦之所及
   全屏、无滚动、分层叠加。所有层 pointer-events:none，
   只有真正需要交互的元素单独打开指针事件。
   ============================================================ */

:root{
  --serif: "Source Han Serif SC", "Source Han Serif CN", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --p3-font: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --p3-blue: #0b3cff;
  --p3-bg: #f4f6fa;
  --ice: #eaf5ff;
  --ice-dim: rgba(214, 235, 255, .56);
  --deep: #0a2a5a;
  --ink: #eef5ff;
  --fs-ask: clamp(40px, 10.2vmin, 148px);
  --fs-end: clamp(22px, 6.1vmin, 72px);
  --text-glow: 0 0 18px rgba(198, 222, 255, .52), 0 0 54px rgba(122, 170, 255, .28);
  --ease: cubic-bezier(.22, .61, .24, 1);
  --blue-ink: #1a5ed6;
}

/* 取景框晕开的半径，注册后才能被 CSS 动画插值 */
@property --bloom {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 150%;
}

*, *::before, *::after { box-sizing: border-box; }

html, body{
  height: 100%; margin: 0; overflow: hidden;
  background: #02060f; color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none;
}

button{ font-family: inherit; }
canvas{ display: block; }

#app{ position: fixed; inset: 0; isolation: isolate; }
.layer{ position: fixed; inset: 0; pointer-events: none; }

/* ---------- 蓝底 ---------- */
#l-blue{
  background:
    linear-gradient(180deg, rgba(2, 6, 16, .22) 0%, rgba(2, 6, 16, .04) 38%, rgba(1, 3, 10, .34) 100%),
    radial-gradient(88% 64% at 50% 44%, rgba(86, 148, 235, .12), transparent 70%),
    url("../assets/blue-night.jpg") center / cover no-repeat,
    #02060f;
  z-index: 0;
}
#l-blue::before{
  content: ""; position: absolute; inset: -12%;
  background: radial-gradient(38% 30% at 50% 46%, rgba(126, 180, 255, .17), transparent 70%);
  animation: breathe 12s ease-in-out infinite;
}
@keyframes breathe{
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.06); }
}

/* 开篇的深蓝影像底：极慢的推近 + 横移 */
.opening-media{
  position: absolute; inset: -4%;
  background: url("../assets/blue-scene.jpg") center / cover no-repeat;
  opacity: 0; transform: scale(1.06);
  animation: cameraDrift 30s ease-in-out infinite alternate;
  transition: opacity 1s var(--ease);
  will-change: transform, opacity;
}
body.stage-opening .opening-media{ opacity: 1; }
@keyframes cameraDrift{
  0%   { transform: scale(1.065) translate3d(-1.1%, .5%, 0); }
  100% { transform: scale(1.125) translate3d(1.1%, -1.0%, 0); }
}

/* ---------- 开篇蓝底上浮的光斑 ---------- */
#opening-bokeh{
  z-index: 1; pointer-events: none;
  mix-blend-mode: screen;
  opacity: 1;
  transition: opacity 1.2s var(--ease);
}
body:not(.stage-opening) #opening-bokeh{ opacity: 0; }

/* ---------- p5.js 流动雾 ---------- */
#p5-sky{
  z-index: 0;
  opacity: 1;
  transition: opacity 1.2s var(--ease);
  mix-blend-mode: screen;
}
#p5-sky canvas{ width: 100% !important; height: 100% !important; }
#opening-ripples{
  z-index: 3; pointer-events: none;
  opacity: 1; transition: opacity .6s var(--ease);
}
body:not(.stage-opening) #opening-ripples{ opacity: 0; }

/* ---------- 摄像头 ---------- */
#scene-camera{
  z-index: 1; opacity: 0;
  transition: opacity 1.5s var(--ease);
  background: #050d20;
}
body.stage-camera #scene-camera{ opacity: 1; }

#camera{
  width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1);
  filter: saturate(.95) brightness(1.02) contrast(1.04);
  background: #050d20;
}
#camera-tint{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 26, 64, .20) 0%, rgba(6, 20, 52, .09) 45%, rgba(3, 10, 28, .42) 100%),
    radial-gradient(78% 58% at 50% 42%, rgba(96, 146, 226, .07), transparent 72%);
}

/* ---------- 取景框里的风景 ---------- */
#reveal{
  z-index: 2;
  left: 0; top: 0; width: 12px; height: 12px;
  overflow: hidden; opacity: 0;
  --bloom: 150%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
      #000 calc(var(--bloom) - 16%), transparent var(--bloom));
  mask-image: radial-gradient(circle at 50% 50%,
      #000 calc(var(--bloom) - 16%), transparent var(--bloom));
  will-change: transform, filter, opacity;
}
#reveal.show{ opacity: 1; transition: opacity .45s var(--ease); }
#reveal.bloom{ animation: revealBloom 2.4s var(--ease) forwards; }
/* 手放下：风景向中心轻轻收拢，柔光边框同时向内退去 */
#reveal.closing{
  opacity: 0;
  transform: scale(.965);
  filter: blur(9px) saturate(.8) brightness(1.06);
  transition:
    opacity .95s var(--ease),
    transform .95s var(--ease),
    filter .95s var(--ease);
}
#reveal-canvas{ width: 100%; height: 100%; }
#reveal::after{
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 42px rgba(190, 222, 255, .16), inset 0 0 2px rgba(235, 246, 255, .4);
  /* 框底压一层薄雾，落款压在极光上也读得清 */
  background: linear-gradient(to top,
      rgba(4, 12, 30, .58), rgba(4, 12, 30, .16) 13%, rgba(4, 12, 30, 0) 26%);
  pointer-events: none;
}
@keyframes revealBloom{
  0%   { --bloom: 1%;   filter: blur(30px) saturate(.32) brightness(1.35) contrast(.92); transform: scale(1.16); }
  40%  { --bloom: 55%;  filter: blur(15px) saturate(.72) brightness(1.14);              transform: scale(1.05); }
  100% { --bloom: 150%; filter: blur(0px) saturate(1) brightness(1);                   transform: scale(1); }
}
#reveal-caption{
  position: absolute; left: 0; right: 0; bottom: 3.2%; z-index: 1;
  text-align: center;
  font-size: clamp(11px, 1.45vmin, 16px);
  letter-spacing: .46em; text-indent: .46em;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .78), 0 0 28px rgba(170, 205, 255, .6);
  opacity: 0; transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
#reveal-caption.on{ opacity: 1; }

/* ---------- 雾字 ---------- */
#mist{ z-index: 4; transition: opacity .9s var(--ease); }
#mist-input{ z-index: 5; transition: opacity .45s var(--ease); }
#mist-input.hidden{ opacity: 0; }
#mist.hidden{ opacity: 0; }

/* ---------- 结尾白屏 ---------- */
#ending{
  z-index: 5; opacity: 0; pointer-events: none;
  transition: opacity 1.15s var(--ease);
  background:
    radial-gradient(130% 110% at 50% 36%, #ffffff 0%, #f7fbff 46%, #e8f3ff 100%);
}
#ending.on{ opacity: 1; pointer-events: auto; }
#ripples, #end-mist{
  position: absolute; inset: 0; width: 100%; height: 100%;
}
#end-mist{ pointer-events: none; }

#ending-inner{
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 2vmin, 24px);
  pointer-events: none;
}
#ending-title{
  font-size: var(--fs-end);
  line-height: 1.5;
  letter-spacing: .2em; text-indent: .2em;
  padding: .16em .45em;
  text-align: center; white-space: nowrap;
  color: transparent;                 /* 文字由蓝色雾气粒子呈现 */
  cursor: pointer; pointer-events: auto;
  border-radius: 4px; outline: none;
}
#ending-title.solid{ color: var(--blue-ink); }
#restart{
  width: clamp(42px, 5.4vmin, 62px);
  aspect-ratio: 1 / 1;
  border: 0; background: none; padding: 4px;
  color: var(--blue-ink); cursor: pointer; pointer-events: auto;
  opacity: 0; transform: translateY(8px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), color .4s;
  filter: drop-shadow(0 0 14px rgba(70, 140, 235, .38));
  outline: none;
}
#restart.on{ opacity: .92; transform: none; }
#restart:hover, #restart:focus-visible{ color: #0d4099; }
#restart svg{ width: 100%; height: 100%; animation: spin 14s linear infinite; }
@keyframes spin{ to { transform: rotate(360deg); } }

/* ---------- 白雾过渡：先从四边漫进来，再从中心合拢 ---------- */
#wash{
  z-index: 6; opacity: 0;
  background: transparent;
}
#wash::before{
  content: ""; position: absolute; inset: -8%;
  background: radial-gradient(115% 105% at 50% 46%,
    transparent 18%,
    rgba(245, 250, 255, .72) 52%,
    #f7fbff 74%);
  opacity: 0; transform: scale(1.1);
  transition: opacity 1.15s var(--ease), transform 1.5s var(--ease);
}
#wash::after{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 45%,
    #ffffff 0%, #f5faff 68%, #e9f3ff 100%);
  opacity: 0;
  transition: opacity .95s var(--ease) .5s;
}
#wash.veil::before{ opacity: 1; transform: scale(1); }
#wash.veil::after{ opacity: 1; }
#vignette{
  z-index: 7; mix-blend-mode: multiply;
  background: radial-gradient(120% 95% at 50% 48%, transparent 40%, rgba(2, 6, 18, .52) 100%);
  transition: opacity 1s var(--ease);
}
body.stage-ending #vignette{ opacity: 0; }

/* ---------- 颗粒 ---------- */
#grain{
  z-index: 8;
  inset: -60%; width: 220%; height: 220%;
  opacity: .13; mix-blend-mode: overlay;
  background-repeat: repeat;
  animation: grainShift .72s steps(3) infinite;
}
@keyframes grainShift{
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(-1.6%, 1.1%, 0); }
  66%  { transform: translate3d(1.2%, -1.4%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---------- 取景框柔光 ---------- */
#overlay{ z-index: 9; }
#restart-ring{
  z-index: 20; pointer-events: none;
}

/* ---------- 开篇：深蓝影像底 + 冷白字 ---------- */
body.stage-opening #l-blue{ background: #02060f; }
body.stage-opening #l-blue::before{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(1, 5, 16, .88) 0%,
      rgba(1, 5, 16, .55) 38%,
      rgba(1, 5, 16, .12) 66%,
      transparent 84%),
    radial-gradient(58% 50% at 74% 35%, rgba(70, 140, 240, .13), transparent 70%);
  animation: none; opacity: 1;
}
body.stage-opening #p5-sky,
body.stage-opening #mist,
body.stage-opening #mist-input{ opacity: 0; }
body.stage-opening #grain{ opacity: .09; }
body.stage-opening #vignette{ opacity: .35; }
body.stage-restarting #grain,
body.stage-restarting #vignette{ opacity: 0; }
body.stage-restarting .opening-media{
  transition: none;
  opacity: 1;
}

/* ---------- 开篇排版 ---------- */
#ask-wrap{
  z-index: 10;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 4vw 0 max(9vw, 74px);
}
body.stage-opening #ask-wrap::before{ display: none; }
#ask{
  opacity: 0; pointer-events: none; text-align: left;
  width: min(86vw, 1420px);
  position: relative;
  padding-left: clamp(20px, 2.4vw, 40px);
  border-left: 2px solid rgba(190, 225, 255, .45);
  transform: translateY(-5vh);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
#ask.on{ opacity: 1; }
body.stage-opening #ask{ pointer-events: auto; }
#ask::before{
  content: ""; position: absolute; left: -7px; top: -22px;
  width: 11px; height: 11px; background: var(--ice);
  box-shadow: 0 0 18px rgba(140, 195, 255, .7);
}
#ask-lines{
  position: relative;
  width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  margin-bottom: clamp(150px, 20vh, 210px);
}
#ask-reflection{
  position: absolute; left: 0; top: 100%;
  width: 100%; height: clamp(100px, 15vmin, 140px);
  overflow: hidden; pointer-events: none;
  opacity: .26;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .3) 62%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .3) 62%, transparent 100%);
}
.ref-inner{
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%;
  transform: scaleY(-1);
  transform-origin: center;
  filter: blur(1.4px);
}
.ref-line{
  font-family: var(--p3-font);
  font-size: var(--fs-ask);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--ice);
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.ref-line.on{ opacity: 1; }
.ref-line[data-ref="2"]{
  margin-left: 2.15em;
  margin-right: 0;
  margin-top: 0.2em;
  align-self: flex-start;
}
.ref-line[data-ref="3"]{
  margin-left: 0;
  margin-top: clamp(56px, 9vh, 104px);
  width: 100%;
  display: flex;
  justify-content: center;
}
.ref-input span{
  display: inline-block;
  width: min(68vw, 900px);
  padding: .02em 0 .08em;
  text-align: center;
  border-bottom: 2px solid rgba(190, 225, 255, .22);
}
.ref-input.is-placeholder span{
  color: rgba(214, 235, 255, .28);
  font-size: .52em;
  letter-spacing: .04em;
}

.ask-line{
  font-family: var(--p3-font);
  font-size: var(--fs-ask);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--ice);
  opacity: 0;
  transform: translateX(-32px);
  clip-path: inset(0 100% 0 0);
  transition:
    opacity .45s var(--ease),
    transform .7s var(--ease),
    clip-path .85s var(--ease);
  text-shadow: 0 0 26px rgba(120, 180, 255, .25), 0 12px 36px rgba(0, 0, 0, .50);
}
.ask-line .small,
.ref-line .small{
  font-size: .52em;
  letter-spacing: .04em;
  opacity: .82;
  vertical-align: baseline;
}
.ask-line.on{
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
.ask-line[data-line="2"]{
  margin-left: 2.15em;
  margin-right: 0;
  margin-top: 0.2em;
  align-self: flex-start;
}
.ask-line[data-line="3"]{
  margin-left: 0;
  margin-top: clamp(56px, 9vh, 104px);
  align-self: stretch;
  justify-content: center;
}

.input-line{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 1.1em;
  pointer-events: none;
}
.input-line.on{ pointer-events: auto; }
#place{
  width: min(68vw, 900px); max-width: 100%;
  background: none; border: 0; outline: 0;
  border-bottom: 2px solid rgba(190, 225, 255, .28);
  padding: .02em 0 .08em;
  font: inherit; letter-spacing: inherit;
  color: var(--ice); text-align: center;
  caret-color: var(--ice);
  transition: border-color .4s var(--ease);
}
#place:focus{ border-bottom-color: rgba(214, 240, 255, .78); }
#place::placeholder{
  color: rgba(214, 235, 255, .30);
  font-size: .52em;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: none;
}

#ask-hint{
  margin-top: 0;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--p3-font);
  font-size: clamp(11px, 1.35vmin, 14px);
  font-weight: 600;
  letter-spacing: .28em; text-indent: 0;
  color: var(--ice-dim);
  opacity: 0; transition: opacity .8s var(--ease);
}
#ask-hint::before{
  content: ""; width: 6px; height: 6px; flex: none;
  background: #9fd0ff;
  box-shadow: 0 0 12px rgba(130, 190, 255, .8);
  animation: cuePulse 2s ease-in-out infinite;
}
@keyframes cuePulse{
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1); }
}
#ask-hint.on{ opacity: 1; }

#ask.leaving{
  opacity: 0;
  transform: translate(-28px, -5vh);
  pointer-events: none;
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
body.stage-camera #ask,
body.stage-ending #ask{ opacity: 0; pointer-events: none; }

#ask.shake{ animation: shake .45s ease; }
@keyframes shake{
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* ---------- 摄像头引导 ---------- */
#hint{
  z-index: 11;
  display: grid; place-items: end center;
  padding-bottom: 8.5vh;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
#hint.on{ opacity: 1; }
#hint-box{ text-align: center; }
#hint-icon{
  width: clamp(36px, 5vmin, 56px); height: auto;
  margin: 0 auto clamp(10px, 1.6vmin, 18px);
  color: rgba(226, 240, 255, .8);
  filter: drop-shadow(0 0 12px rgba(140, 190, 255, .7));
  animation: hintPulse 3.4s ease-in-out infinite;
}
@keyframes hintPulse{
  0%, 100% { opacity: .55; transform: scale(.97); }
  50%      { opacity: 1;   transform: scale(1.03); }
}
#hint-text{
  font-size: clamp(11px, 1.5vmin, 16px);
  letter-spacing: .3em; text-indent: .3em;
  color: rgba(236, 245, 255, .8);
  text-shadow: 0 0 18px rgba(150, 195, 255, .7);
}

/* ---------- 状态文字 ---------- */
#status{
  z-index: 12;
  display: grid; place-items: end center;
  padding-bottom: 16vh;
  font-size: clamp(11px, 1.35vmin, 15px);
  letter-spacing: .22em;
  color: rgba(220, 235, 255, .62);
  opacity: 0; transition: opacity .6s var(--ease);
}
#status.on{ opacity: 1; }

/* ---------- 跳过 / 继续 ---------- */
#skip{
  position: fixed; z-index: 15;
  right: 5vw; bottom: 6vh;
  padding: 10px 20px;
  border: 1px solid rgba(200, 227, 255, .35);
  border-radius: 2px;
  background: rgba(3, 12, 30, .45);
  color: rgba(232, 245, 255, .82);
  font-family: var(--p3-font);
  font-size: 12px; font-weight: 600;
  letter-spacing: .24em;
  opacity: 0; pointer-events: none;
  cursor: pointer;
  transition: opacity .4s var(--ease), background .3s;
  backdrop-filter: blur(6px);
}
#skip.on{ opacity: 1; pointer-events: auto; }
#skip:hover{ background: rgba(10, 30, 70, .7); color: #fff; }
body.stage-ending #skip{ opacity: 0; pointer-events: none; }

/* ---------- 直接双击打开时的提示 ---------- */
#server-note, #noscript-note{
  display: none;
  position: fixed; left: 50%; bottom: 8vh; transform: translateX(-50%);
  width: min(86vw, 560px); z-index: 30;
  padding: 14px 20px; border: 1px solid rgba(214, 232, 255, .28);
  border-radius: 10px;
  background: rgba(4, 14, 34, .78);
  backdrop-filter: blur(8px);
  color: rgba(238, 245, 255, .88);
  font-size: 13px; line-height: 1.75; letter-spacing: .08em;
  text-align: center;
}
body.file-mode #server-note{ display: block; }
#noscript-note{ display: block; }
body.file-mode #noscript-note{ display: none; }

/* ---------- 窄屏（手机竖屏）按比例重排 ---------- */
@media (max-width: 600px){
  :root{
    --fs-ask: clamp(34px, 11vmin, 46px);
  }
  #ask-wrap{
    padding: 0 6vw 0 7vw;
  }
  #ask{
    padding-left: clamp(12px, 3.4vw, 18px);
    transform: translateY(-3vh);
  }
  #ask-lines{
    margin-bottom: 15vh;
  }
  #ask-reflection{
    height: 13vmin;
  }
  .ask-line,
  .ref-line{
    line-height: 1.28;
  }
  .ask-line[data-line="2"],
  .ref-line[data-ref="2"]{
    margin-left: 1em;
  }
  .ask-line[data-line="3"],
  .ref-line[data-ref="3"]{
    margin-top: 8vh;
  }
  #place,
  .ref-input span{
    width: 78vw;
  }
  #ask-hint{
    justify-content: center;
  }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce){
  #grain{ animation: none; }
  #l-blue::before{ animation: none; }
  #hint-icon{ animation: none; }
  #restart svg{ animation: none; }
}