/* 第一幕 · 大厅（文档 3.1）。
   三件东西垂直居中：标题、"寻求占卜"大按钮、今日水域预告。
   背景是一个跑着的低密度鱼缸——大厅本身就是活的水族箱。 */

.title-stage {
  position: relative;
  /* 高度跟着视口走，上下都有闸。
     原来是 `min(70vh, 520px)`——**那个 520 的上限在高屏上会留下一大片空白**：
     1345×1270 的窗口里舞台只有 567px，底下 624px 什么都没有，
     整个大厅像浮在页面上半截。
     clamp 的三个值分别是：矮屏保底、正常情况跟随视口、超高屏封顶
     （再高就变成一条竖着的空水槽了）。 */
  min-height: clamp(400px, 76vh, 780px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--lift-3);
}

/* 水面在上、深渊在下。一层纵向渐变就能把这个方框变成"一段水体"——
   上面透出光，下面沉进黑。 */
.title-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(126, 232, 224, 0.09), transparent 26%),
    linear-gradient(0deg, rgba(3, 8, 14, 0.75), transparent 45%);
}

/* 四角压暗。没有暗角的话画面是平的，有了之后视线自然收到中间的标题上。 */
.title-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(3, 8, 14, 0.62) 100%);
}

.title-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 背景鱼要退到标题后面去，不能抢注意力 */
  opacity: 0.42;
}

.title-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--sp-6) calc(var(--sp-6) * 2);
  /* 中间压一层暗底，保证标题在游动的鱼上面也读得清。
     **衰减要拉得比元素本身大**：椭圆渐变画在一个矩形元素上，如果 100% 的
     透明点正好落在元素边缘，四个角就会露出一条可见的直边——画面上看是
     "标题后面有个方块"。把渐变推到 130%，边缘早就淡光了。 */
  background: radial-gradient(
    ellipse 70% 60% at center,
    rgba(6, 12, 22, 0.88) 0%,
    rgba(6, 12, 22, 0.55) 45%,
    rgba(6, 12, 22, 0.12) 82%,
    transparent 100%
  );
}

.title-logo {
  font-size: clamp(34px, 7vw, 52px);
  margin: 0 0 var(--sp-2);
  letter-spacing: 3px;
  /* 从荧光青到玩家粉的渐变字：这两个色就是全站的主色，
     标题上并置一次，等于把配色主张先说出来。 */
  background: linear-gradient(100deg, var(--glow) 0%, #cfe8f0 42%, var(--accent-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  filter: drop-shadow(0 0 24px rgba(126, 232, 224, 0.28));
}

/* 水面倒影：底下一层被压扁翻转的同名文字。
   倒影要**比本体更糊更淡**，而且随水波轻微晃——不晃的倒影看着像影子，
   晃起来才像映在水面上。 */
.title-logo::after {
  content: 'promptfish';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  transform: scaleY(-0.5);
  transform-origin: top;
  opacity: 0.13;
  filter: blur(2px);
  background: none;
  -webkit-text-fill-color: var(--glow);
  color: var(--glow);
  pointer-events: none;
  animation: title-ripple 6s ease-in-out infinite;
}

@keyframes title-ripple {
  0%, 100% { transform: scaleY(-0.5) skewX(0deg); opacity: 0.13; }
  50% { transform: scaleY(-0.44) skewX(1.4deg); opacity: 0.09; }
}

.title-tagline {
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0 0 20px;
  line-height: 1.6;
}

.title-daily {
  display: inline-block;
  padding: 7px 14px;
  margin-bottom: 22px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(232, 184, 75, 0.4);
  background: rgba(232, 184, 75, 0.1);
  font-size: 12px;
  color: #f0d090;
  line-height: 1.5;
}

.title-cta {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 13px 42px;
  font-size: var(--fs-lg);
  font-weight: 600;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--accent), #a83c92);
  border: 1px solid var(--accent-bright);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(204, 79, 176, 0.32), var(--lift-2);
  /* 缓动模仿水：长尾 ease-out，不用弹跳 */
  transition:
    box-shadow var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}

/* 一道极慢扫过的高光。它的作用是让这个按钮**看起来是活的**——
   大厅上只有它一个主行动点，值得一点吸引力。慢到 4.5 秒是刻意的：
   快了就成了促销横幅。 */
.title-cta::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.26), transparent);
  animation: cta-sheen 4.5s ease-in-out infinite;
}
@keyframes cta-sheen {
  0%, 62% { left: -50%; }
  100% { left: 130%; }
}

.title-cta:hover {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  box-shadow: 0 0 40px rgba(204, 79, 176, 0.55), var(--lift-2);
  transform: translateY(-2px);
}
.title-cta:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .title-cta::after,
  .title-logo::after { animation: none; }
}

.title-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.title-link {
  flex: 0 0 auto;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: var(--r-pill);
  background: transparent;
  border-color: var(--line);
  color: var(--ink-dim);
}

.title-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}

/* 死亡静帧（文档 3.4 第二幕的"关键时刻"） */
.death-frame {
  width: 100%;
  max-width: 300px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  display: block;
}

.death-frame[hidden] { display: none; }

@media (max-width: 768px) {
  .title-stage { min-height: clamp(360px, 62vh, 560px); }
  .title-logo { font-size: 32px; }
  .title-canvas { display: none; } /* 移动端省电，见 titleView.start() */
}