/* ============================================================
   心岛 v1.0 · 屏 1 · 启程（方案 §2.1）
   ------------------------------------------------------------
     0.00        纯暗
     0.00→1.20s  海面淡入
     1.20s       船出现 x=34% y=61% scale .28
     1.20s→∞     船 12s 周期漂移 ±1.6% / ±0.4%
     2.00→3.40s  引言淡入 + 上移 14px
     3.40s       「click anywhere」—— 全作唯一一次明示提示，只在这一屏

   蜜糖唯一律自查：**本屏一处 --light 都没有。**
   全作第一抹蜜糖色是屏 2 门缝里的那道光。屏 1 只有月亮，
   而月亮是冷光源（§2.1 明许：它是海自己的光，不是心岛点的灯）。
   玩家第一次看见暖色，就是第一次看见"有人在等"。

   粒子：0 个。真图（sea-departure.png）到位后设 --s1-sea-src 即生效。
   本文件不得出现任何字面 hex 值，全部走 tokens.css 的 var()。
   ============================================================ */

.s1 {
  --s1-horizon: 52%;
  --s1-moon-x: 71%;
  --s1-moon-y: 21%;
  background-color: var(--ink-deeper);
  cursor: pointer;
}

/* ------------------------------------------------------------
   海面（真图层 + CSS 兜底层，两层同位）
   ------------------------------------------------------------ */

.s1-sea,
.s1-sea-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
}

.s1-sea {
  background:
    /* 月亮：本屏唯一光源，冷的 */
    radial-gradient(circle 10px at var(--s1-moon-x) var(--s1-moon-y),
                    var(--paper-dim) 0%, transparent 74%),
    radial-gradient(circle 74px at var(--s1-moon-x) var(--s1-moon-y),
                    var(--paper-ghost) 0%, transparent 68%),
    /* 月光在水上铺的那条路。它是断的 —— 引言里那句话的画面本体。 */
    radial-gradient(ellipse 5% 26% at var(--s1-moon-x) 70%,
                    var(--air-veil) 0%, transparent 76%),
    radial-gradient(ellipse 3% 9%  at var(--s1-moon-x) 92%,
                    var(--air-veil) 0%, transparent 78%),
    /* 天与海 */
    linear-gradient(to bottom,
      var(--ink-deeper) 0%,
      var(--ink-deep) 30%,
      var(--ink) calc(var(--s1-horizon) - 2%),
      var(--ink-deep) calc(var(--s1-horizon) + 1%),
      var(--ink-deeper) 100%);
}

.s1-sea-img {
  background-image: var(--s1-sea-src, none);
  background-size: cover;
  background-position: center center;
}

/* 水纹：SVG 只当 mask，颜色仍由 tokens 的 var() 供给 */
.s1-ripple {
  position: absolute;
  left: 0; right: 0;
  top: var(--s1-horizon);
  bottom: 0;
  z-index: 2;
  opacity: 0;
  background-color: var(--air);
  --s1-rp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='84' viewBox='0 0 360 84'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M0 14 q45 -6 90 0 t90 0 t90 0 t90 0'/%3E%3Cpath d='M0 40 q60 8 120 0 t120 0 t120 0'/%3E%3Cpath d='M0 68 q40 -6 80 0 t80 0 t80 0 t80 0'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: var(--s1-rp),
                      linear-gradient(to bottom, transparent 0%, black 16%, transparent 88%);
          mask-image: var(--s1-rp),
                      linear-gradient(to bottom, transparent 0%, black 16%, transparent 88%);
  -webkit-mask-repeat: repeat, no-repeat;
          mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* ------------------------------------------------------------
   船
   剪影，逆着月光。它是"离开"这个动作的全部内容，所以画面里
   除了它没有任何别的主体。
   ------------------------------------------------------------ */

.s1-boat {
  position: absolute;
  z-index: 3;
  left: 34%;
  top: 61%;
  width: min(30vw, 420px);
  margin-left: calc(min(30vw, 420px) / -2);
  color: var(--ink-deeper);
  opacity: 0;
  /* 月亮在右上，所以船的右上沿有一线冷色的边光 */
  filter: drop-shadow(1px -1px 0 var(--air-veil));
}
.s1-boat svg { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------
   文字带（下 26%）
   ------------------------------------------------------------ */

.s1-text {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: 11%;
  width: min(var(--measure), 76vw);
  margin-left: calc(min(var(--measure), 76vw) / -2);
  text-align: center;
  pointer-events: none;
}

.s1-quote {
  opacity: 0;
  transform: translateY(14px);
  white-space: pre-line;
}

.s1-welcome {
  margin-bottom: var(--sp-2);
  color: var(--light);
  font-size: var(--fs-meta);
  letter-spacing: .08em;
  opacity: .78;
}

/* 全作唯一一次明示提示。它必须弱到"像是自己想起来的"。 */
.s1-hint {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .16em;
  color: var(--air);
  opacity: 0;
}

/* 应用标题「心岛」
   ZCOOL KuaiLe 的笼子：本屏用掉的是"应用标题"那一处，
   所以屏 1 不再另设屏标题。屏 2–6 各一处，全作共 6 处，仍在笼子里。 */
.s1-title {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  text-indent: var(--ls-app-title);
  pointer-events: none;
  opacity: 0;
}

/* ------------------------------------------------------------
   时间线：只在 .begun 时跑
   ------------------------------------------------------------ */

.s1.begun .s1-sea,
.s1.begun .s1-sea-img { animation: s1-fade 1200ms var(--e-out) both; }
.s1.begun .s1-ripple  { animation: s1-fade-soft 1600ms var(--e-out) 400ms both; }

@keyframes s1-fade      { from { opacity: 0 } to { opacity: 1 } }
@keyframes s1-fade-soft { from { opacity: 0 } to { opacity: .5 } }

/* 船：1.20s 出现，之后 12s 周期漂移，永不停 */
.s1.begun .s1-boat {
  animation:
    s1-boat-in 900ms var(--e-out) 1200ms both,
    s1-drift 12s ease-in-out 2100ms infinite;
}
@keyframes s1-boat-in {
  from { opacity: 0; transform: scale(.24) translateY(6px); }
  to   { opacity: 1; transform: scale(.28) translateY(0); }
}
/* ±1.6% 横 / ±0.4% 纵，叠在 scale(.28) 上。
   周期 12s ≥ 6s，符合呼吸律。 */
@keyframes s1-drift {
  0%, 100% { transform: scale(.28) translate(-1.6%, .4%); }
  50%      { transform: scale(.28) translate(1.6%, -.4%); }
}

.s1.begun .s1-title { animation: s1-fade-title 2000ms var(--e-out) 600ms both; }
@keyframes s1-fade-title {
  from { opacity: 0;   letter-spacing: .42em; }
  to   { opacity: .82; letter-spacing: var(--ls-app-title); }
}

/* 2.00→3.40s */
.s1.begun .s1-quote { animation: s1-quote-in 1400ms var(--e-out) 2000ms both; }
@keyframes s1-quote-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 3.40s 起，10s 呼吸 */
.s1.begun .s1-hint {
  animation: s1-hint-in 900ms linear 3400ms both,
             s1-hint-breathe 10s ease-in-out 4300ms infinite;
}
@keyframes s1-hint-in      { from { opacity: 0 }        to { opacity: .34 } }
@keyframes s1-hint-breathe { 0%,100% { opacity: .34 }   50% { opacity: .12 } }

/* ------------------------------------------------------------
   reduced-motion：动画被压到 .01ms，带 both 的会把首帧/末帧钉死。
   这里把全部元素直接落到终态 —— 内容一个不少，只是不再有过程。
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .s1.begun .s1-sea,
  .s1.begun .s1-sea-img,
  .s1.begun .s1-quote { animation: none; opacity: 1; transform: none; }
  .s1.begun .s1-ripple { animation: none; opacity: .5; }
  .s1.begun .s1-boat   { animation: none; opacity: 1; transform: scale(.28); }
  .s1.begun .s1-title  { animation: none; opacity: .82; }
  .s1.begun .s1-hint   { animation: none; opacity: .34; }
}

/* ------------------------------------------------------------
   窄屏 / 矮屏
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .s1-boat  { width: 52vw; margin-left: -26vw; }
  .s1-title { font-size: 46px; top: 13%; }
  .s1-text  { bottom: 9%; }
}