/* ============================================================
   心岛 v1.0 · 屏 2 · 登岸 · 旅人之屋（方案 §2.2）
   ------------------------------------------------------------
   玩家刚上岸，站在自己的岛上，远眺自己的小屋。
   海平线那头是苍鹭岛 —— 它现在只是一个轮廓和一点光。

   全屏只有两处可点，都是光：
     · 门缝里的一线暖光 → 屏 3（进屋点灯）
     · 远处塔尖上的一点光 → 屏 4（直接乘船过去）
   **全作第一抹蜜糖色出现在这里。** 屏 1 一点都没有 —— 所以玩家
   第一次看见暖色，就是第一次看见"有人在等"。

   出图硬要求（真图到位时必须满足）：
     门内全暗、塔尖不亮。两处光都是 CSS 画的，因为它们要能被点、
     能 hover、能呼吸；画进图里就死了。

   呼吸周期故意取 7.4s 与 9.1s 两个不通约的值 —— 同步的呼吸是机械，
   错开的呼吸才是两个各自活着的地方。两者都 ≥ 6s。

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

.s2 {
  --s2-horizon: 46%;
  background-color: var(--ink-deeper);
}

/* ------------------------------------------------------------
   底：天与海
   ------------------------------------------------------------ */

.s2-sky,
.s2-img {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.s2-sky {
  background:
    /* 夜里最后一点天光压在海平线上。冷的。 */
    radial-gradient(ellipse 62% 16% at 50% var(--s2-horizon),
                    var(--air-veil) 0%, transparent 72%),
    linear-gradient(to bottom,
      var(--ink-deeper) 0%,
      var(--ink-deep) 26%,
      var(--ink) calc(var(--s2-horizon) - 3%),
      var(--ink-deep) calc(var(--s2-horizon) + 6%),
      var(--ink-deeper) 100%);
}

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

/* 剪影层：小屋、海岸、远处的苍鹭岛。SVG 里用 fill="var(--…)" 上色。
   v1.0.6：背景图已含小屋 + 苍鹭岛轮廓 → 隐藏 SVG 剪影避免双重叠加。 */
.s2-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
}
.s2-scene svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------
   两处光
   ------------------------------------------------------------
   结构是三层，每层只干一件事：
     .s2-hot   命中区 + hover 的 scale(1.18) 与 opacity ×1.35
     .glow     呼吸（动画独占 opacity，所以 hover 不能也用它）
     ::before  光本身
   嵌套元素的 opacity 是相乘的，所以 .74 → 1 正好是 ×1.35。
   ------------------------------------------------------------ */

.s2-hot {
  position: absolute;
  z-index: 3;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 1;
  transition: opacity var(--t-quick) var(--e-out),
              transform var(--t-quick) var(--e-out);
}
.s2-hot:hover,
.s2-hot:focus-visible {
  opacity: 1;
  transform: scale(1.18);
}

.s2-hot .glow {
  position: absolute;
  inset: 0;
  display: block;
}

/* --- 门缝 --- */
/* 门在 1920×1080 画布上 x 735–785 / y 610–700。
   门缝只有门宽的五分之一 —— 门是"半开"，不是"敞开"。 */
.s2-door {
  left: 38.0%;
  top: 56.4%;
  width: 1.1%;
  height: 8.4%;
  transform-origin: 50% 50%;
}
.s2-door .glow {
  background: linear-gradient(to bottom,
    var(--light-faint) 0%, rgb(255, 200, 150) 22%, rgb(255, 200, 150) 74%, var(--light-faint) 100%);
  box-shadow:
    0 0 30px 7px rgba(212, 165, 116, .65),
    0 0 100px 24px rgba(212, 165, 116, .25);
  animation: s2-breathe-door 7.4s ease-in-out infinite;
}
/* 光落在门口地上的那一小片。它不是光源，是被照到的地面。 */
.s2-door::after {
  content: "";
  position: absolute;
  left: -420%;
  right: -420%;
  bottom: -14%;
  height: 26%;
  background: radial-gradient(ellipse 50% 100% at 50% 0%,
              var(--light-faint) 0%, transparent 78%);
  pointer-events: none;
}

@keyframes s2-breathe-door {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

/* --- 远处塔尖 --- */
.s2-beacon {
  left: 77.6%;
  top: 38.9%;
  width: 0.5%;
  height: 0.9%;
  transform-origin: 50% 50%;
}
.s2-beacon .glow {
  border-radius: 50%;
  background: var(--light);
  box-shadow:
    0 0 18px 5px rgba(212, 165, 116, .65),
    0 0 100px 24px rgba(212, 165, 116, .25);
  animation: s2-breathe-beacon 9.1s ease-in-out infinite;
}
@keyframes s2-breathe-beacon {
  0%, 100% { opacity: .58; }
  50%      { opacity: 1; }
}

/* 命中区要比光大 —— 光只有几个像素宽，照着它的尺寸做热区，
   等于让玩家去穿针。这里用透明外扩，视觉上一点没变。 */
.s2-hot::before {
  content: "";
  position: absolute;
  inset: -22px -26px;
}
.s2-beacon::before { inset: -26px -30px; }

/* ------------------------------------------------------------
   reduced-motion：光不再呼吸，但必须还在，而且亮度取呼吸的高点。
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .s2-door .glow,
  .s2-beacon .glow { animation: none; opacity: 1; }
}

/* ------------------------------------------------------------
   窄屏：命中区再放宽一点（手指比鼠标粗）
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .s2-hot::before { inset: -30px -34px; }
}


/* ------------------------------------------------------------
   明显可发现的"乘船去苍鹭岛"按钮（屏2 右下角）
   不依赖任何热点光圈，玩家一眼就能找到。
   蜜糖色描边 + 衬线字 + 微浮动呼吸 — 古旧招牌感。
   ------------------------------------------------------------ */
.s2-skip {
  position: absolute;
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(20px, 3vh, 32px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: rgba(26, 32, 40, .55);
  border: 1px solid rgba(212, 165, 116, .55);
  border-radius: 999px;
  color: var(--light);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: .12em;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-screen) var(--e-out),
              transform var(--t-quick) var(--e-out),
              background var(--t-quick) var(--e-out);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.s2.active .s2-skip { opacity: 1; animation: s2-skip-in 1.6s var(--e-out) 1.2s both; }

@keyframes s2-skip-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.s2-skip:hover,
.s2-skip:focus-visible {
  background: rgba(26, 32, 40, .82);
  transform: translateY(-1px);
  outline: none;
}

.s2-skip-glyph {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 40%, var(--light) 0%, rgba(212, 165, 116, .0) 70%),
    radial-gradient(circle at 50% 50%, rgba(212, 165, 116, .35) 30%, transparent 75%);
  box-shadow: 0 0 10px 2px rgba(212, 165, 116, .35);
  animation: s2-skip-pulse 3.4s ease-in-out infinite;
}

@keyframes s2-skip-pulse {
  0%, 100% { opacity: .65; }
  50%      { opacity: 1; }
}

.s2-skip-label { line-height: 1; }

/* 隐藏原来的 6×6 beacon（玩家已经不需要找这个点了） */
.s2-beacon { display: none !important; }

/* reduced-motion 下不动 */
@media (prefers-reduced-motion: reduce) {
  .s2-skip { animation: none !important; opacity: 1; }
  .s2-skip-glyph { animation: none !important; }
}

/* v1.0.21 海岛热区：光源本体发光，鼠标经过不显示方框 */
.s2 .s2-hot { outline: 0 !important; box-shadow: none; }
.s2 .s2-hot:hover,
.s2 .s2-hot:focus-visible { outline: 0 !important; box-shadow: none; filter: drop-shadow(0 0 20px var(--light-halo)); }
.s2 .s2-door:hover .glow,
.s2 .s2-door:focus-visible .glow,
.s2 .s2-beacon:hover .glow,
.s2 .s2-beacon:focus-visible .glow { filter: brightness(1.18); }