/* ============================================================
   星旅 · 场景层（sky.css）
   —— 与首屏同一套语言：近黑底 + 月白星 + 余烬玫瑰金强调 + 手写体
   第 1 站：双子座（相爱时光的天空）
   真实星位数据见 js/sky-data.js；星图与转场见 js/sky.js
   ============================================================ */

.sky {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4.5vh, 48px);
  overflow: hidden;
  padding: clamp(72px, 12vh, 132px) 24px clamp(76px, 12vh, 120px);
  text-align: center;
  color: #fdf6ef;
  background:
    radial-gradient(ellipse 72% 42% at 50% 112%, rgba(255, 150, 110, 0.11) 0%, rgba(255, 150, 110, 0) 62%),
    radial-gradient(ellipse 86% 54% at 50% -12%, rgba(74, 56, 104, 0.44) 0%, rgba(74, 56, 104, 0) 72%),
    linear-gradient(180deg, #07050a 0%, #100a15 44%, #1a1020 76%, #231328 100%);
}
/* 与首屏的接缝：底部一线暖光，像云海的余晖留在身后 */
.sky::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: min(760px, 86vw); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 190, 150, 0.22), transparent);
}

/* —— 星尘层（程序生成，装饰性微光） —— */
.sky-field { position: absolute; inset: 0; pointer-events: none; }
.sky-field i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #fff6ea;
  opacity: 0.5;
}
.sky-field i.tw { animation: sky-twinkle var(--tw, 5s) ease-in-out var(--td, 0s) infinite; }
@keyframes sky-twinkle {
  0%, 100% { opacity: calc(var(--o, 0.5) * 0.35); }
  50%      { opacity: var(--o, 0.5); }
}

/* —— 星座台面：均匀缩放，标准星位不会被拉变形 —— */
.sky-stage {
  position: relative;
  width: min(94vw, 900px);
  height: clamp(320px, 54vh, 540px);
  max-width: 100%;
}
.sky-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* 恒星：半径随星等、色温随色指数（由 sky.js 直接写入属性/样式） */
.sky-star { opacity: 0.92; }
.sky-main { opacity: 1; }

/* 星座连线：一根玫瑰金发丝 */
.sky-line {
  fill: none;
  stroke: rgba(255, 214, 224, 0.30);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255, 190, 210, 0.22));
}
/* 主星外圈：到达时扩张的柔光 */
.sky-halo {
  fill: none;
  stroke: rgba(255, 224, 200, 0.30);
  stroke-width: 1;
}
/* 名字：与封面同一支书写艺术体 */
.sky-label {
  font-family: var(--font-script);
  font-size: 27px;
  fill: rgba(253, 246, 239, 0.9);
  paint-order: stroke;
  stroke: rgba(8, 5, 10, 0.5);
  stroke-width: 3px;
}
.sky-label-zh {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  fill: rgba(253, 246, 239, 0.46);
}

/* —— 文案 —— */
.sky-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 620px;
}
.sky-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 214, 224, 0.64);
}
.sky-eyebrow::before, .sky-eyebrow::after {
  content: "";
  display: inline-block;
  width: 26px; height: 1px;
  background: rgba(255, 214, 224, 0.36);
  vertical-align: middle;
  margin: 0 14px;
  transform: translateY(-2px);
}
.sky-sentence {
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 2.5vw, 1.4rem);
  letter-spacing: 0.06em;
  color: #fdf6ef;
  text-shadow: 0 2px 20px rgba(8, 5, 10, 0.6);
}
.sky-sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: rgba(253, 246, 239, 0.40);
}

/* 暗色场景里不再有滚动提示（改为右侧细轨导航，见 pages.css） */

@media (max-width: 860px) {
  .sky-stage { height: clamp(280px, 40vh, 380px); }
  .sky-label { font-size: 22px; }
}

/* ============================================================
   转场层：名字化作两颗流星，升入星空
   （固定层，只在首屏 CTA 触发时出现；见 js/sky.js）
   ============================================================ */
.sky-gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.sky-gate.on { opacity: 1; }
.sky-gate .gate-veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 62% 52% at 50% 44%, rgba(6, 4, 9, 0.90) 0%, rgba(6, 4, 9, 0.97) 68%);
}

.gate-meteor {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  transform-origin: 100% 50%;
  opacity: 0;
  will-change: transform, opacity;
}
.gate-meteor::after {
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
}
/* 她的流星：暖（去往 Pollux，橙巨星） */
.gate-meteor.warm { background: linear-gradient(90deg, rgba(255, 205, 150, 0) 0%, rgba(255, 224, 186, 0.5) 58%, rgba(255, 242, 220, 0.95) 100%); }
.gate-meteor.warm::after { background: #ffe6bd; box-shadow: 0 0 13px 4px rgba(255, 205, 150, 0.6); }
/* 他的流星：冷（去往 Castor，蓝白 A 型星） */
.gate-meteor.cool { background: linear-gradient(90deg, rgba(206, 226, 255, 0) 0%, rgba(224, 238, 255, 0.48) 58%, rgba(246, 251, 255, 0.95) 100%); }
.gate-meteor.cool::after { background: #f0f6ff; box-shadow: 0 0 13px 4px rgba(206, 226, 255, 0.5); }

/* 转场期间锁滚动 */
html.sky-busy { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sky-field i.tw { animation: none; }
  .sky-gate { display: none; }
}

/* ============================================================
   第 5 站：黑洞 · 未来之门（结尾页）
   —— 先用 CSS 近似做出"事件视界 + 吸积环 + 引力透镜弧"，
      待 Blender 真 3D 渲染出片后 replace（接口不变：.hole-field 内的这组 span）
   —— 流星坠入黑洞 → 「爱在进行时」在进入这一页时浮现
   ============================================================ */
#ending.ending {
  background:
    radial-gradient(ellipse 78% 56% at 50% 42%, #181113 0%, #0a070c 56%, #050407 100%);
  color: #fdf6ef;
}
.ending .ending-content { position: relative; z-index: 2; }
.ending .ending-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 214, 224, 0.6);
  margin-bottom: var(--sp-4);
}
.ending .ending-line { color: #fdf6ef; letter-spacing: 0.06em; }
.ending .ending-content p { color: rgba(253, 246, 239, 0.6); }
.ending .ending-heart { background: var(--rose-deep); box-shadow: 0 0 24px rgba(232, 90, 130, 0.5); }
.ending .ending-cat { color: rgba(253, 246, 239, 0.72); }

/* —— 黑洞本体（纯 CSS 近似） —— */
.hole-field {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.hole-field > span { position: absolute; border-radius: 50%; display: block; }
.hole-glow {
  width: min(128vw, 980px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(150, 190, 255, 0.15), rgba(150, 190, 255, 0) 72%);
  filter: blur(18px);
}
.hole-ring {
  width: min(52vw, 368px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side,
    rgba(0, 0, 0, 0) 56%,
    rgba(214, 232, 255, 0.92) 62%,
    rgba(150, 185, 240, 0.38) 67%,
    rgba(0, 0, 0, 0) 74%);
  filter: blur(1.2px);
}
.hole-ring.two {
  width: min(58vw, 414px);
  opacity: 0.4;
  filter: blur(5px);
}
.hole-photon {
  width: min(47vw, 336px);
  aspect-ratio: 1;
  border-top: 1.6px solid rgba(226, 240, 255, 0.78);
  border-right: 1px solid rgba(200, 222, 255, 0.22);
  transform: rotate(-12deg) scaleY(0.4);
  filter: blur(0.7px);
  opacity: 0.82;
}
.hole-core {
  width: min(37vw, 252px);
  aspect-ratio: 1;
  background: #000;
  box-shadow: 0 0 72px 28px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(200, 222, 255, 0.07);
}
.hole-meteor {
  width: 3px; height: 3px;
  background: #fff6e8;
  box-shadow: 0 0 10px 3px rgba(255, 232, 200, 0.72), 36px -19px 22px -7px rgba(255, 224, 190, 0.45);
  opacity: 0;
}
@keyframes hole-spin { to { transform: rotate(360deg); } }
@keyframes hole-spin-rev { to { transform: rotate(-360deg); } }
@keyframes hole-fall {
  0%   { opacity: 0; transform: translate3d(-40vw, -30vh, 0); }
  14%  { opacity: 1; }
  76%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); }
}
@keyframes hole-breathe {
  0%, 100% { filter: blur(1.2px) brightness(0.94); }
  50%      { filter: blur(1.2px) brightness(1.12); }
}
/* 进入这一页时才播（每次回到这页都会重来一次） */
#ending.page-active .hole-ring { animation: hole-spin 48s linear infinite, hole-breathe 7.5s ease-in-out infinite; }
#ending.page-active .hole-ring.two { animation: hole-spin-rev 68s linear infinite; }
#ending.page-active .hole-photon { animation: hole-breathe 9s ease-in-out infinite; }
#ending.page-active .hole-meteor { animation: hole-fall 3.1s cubic-bezier(0.5, 0, 0.86, 0.52) 0.7s both; }
.ending .ending-eyebrow,
.ending .ending-line,
.ending .ending-content p {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 760ms var(--ease-out) 340ms, transform 760ms var(--ease-out) 340ms;
}
#ending.page-active .ending-eyebrow,
#ending.page-active .ending-line,
#ending.page-active .ending-content p { opacity: 1; transform: none; }
#ending.page-active .ending-line { transition-delay: 620ms; }
#ending.page-active .ending-content p { transition-delay: 900ms; }

/* —— 真 3D 黑洞成片（Blender Cycles 渲染，DSP 风格冷雾漩涡，见 work/blender/blackhole.py 与 gen_tex.py
       144 帧 1280×720@24fps（6.0s 整圈无缝循环）→ assets/vid/blackhole.mp4；径向遮罩融入夜色） —— */
.hole-video {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, 0);
  width: min(96vw, 780px);
  height: auto;
  z-index: 1;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
  pointer-events: none;
  max-width: none;              /* 全局 img,svg,video{max-width:100%} 会钳住它 */
  /* 径向遮罩：把视频方框的边缘化开，只留黑洞本身融进夜色 */
  -webkit-mask-image: radial-gradient(ellipse 60% 56% at 50% 52%, #000 40%, rgba(0, 0, 0, 0.55) 66%, transparent 88%);
  mask-image: radial-gradient(ellipse 60% 56% at 50% 52%, #000 40%, rgba(0, 0, 0, 0.55) 66%, transparent 88%);
}
#ending.page-active .hole-video { opacity: 1; }
/* 有片子时藏掉 CSS 近似三件套（冷光晕与流星保留）——
   特异性要压过上面的 .hole-field > span{display:block} */
.hole-field > .hole-ring,
.hole-field > .hole-photon,
.hole-field > .hole-core { display: none; }
/* 文案上移，给"门"留出下半屏 */
.ending .ending-content { padding-bottom: 22vh; }
.hole-meteor { z-index: 3; }

@media (max-width: 860px) {
  /* 手机端：漩涡亮核落在「Made with love」与站尾按钮之间的空档里（不压字） */
  .hole-video { width: 138vw; top: 52%; }
}

@media (prefers-reduced-motion: reduce) {
  /* 不做动画时回到静态版：海报/无视频也能看 */
  .hole-video { display: none; }
  .hole-ring, .hole-photon, .hole-core { display: block; }
  .hole-ring, .hole-photon, .hole-meteor { animation: none !important; }
  .ending .ending-eyebrow, .ending .ending-line, .ending .ending-content p { opacity: 1 !important; transform: none !important; }
}