/* ═══════════════════════════════════════════════════════════════════════
   星河 · 真实银河背景层  galaxy-real.css  (v9)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   老叶钦点：用 NASA/ESO 拍的【真实银河带】做背景，一眼能看出是真银河。
   素材：ESO eso0932a —— Serge Brunier / ESO 拍的 360° 全天银河全景
         （CC BY 4.0），那条横贯天空的真实银河带 + 真实星场 + 尘埃带 +
         发光的银心。6000×3000 真照片，不是粒子假旋涡。

   做法：
   1. 一张超宽真实银河带铺在画面【中上部】(老叶嫌 v8 偏下 → 上提)。
   2. 染成【金墨调】：filter sepia+hue-rotate+对比，再叠一层金色 overlay
      (mix-blend-mode)，把原本偏蓝紫的银河染成融入墨黑底的金墨银河，
      但保留真实星场/尘埃带质感（这是"真"的关键，不能磨平）。
   3. 缓缓流淌：极慢横向漂移(让银河"在流动") + 轻微 scale 呼吸。
   4. 可读性：标题区压暗幕 + 描边，字稳稳浮在银河上。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 真实银河背景容器：全屏 fixed，压在所有内容下 ── */
#galaxy-real{
  position:fixed;
  inset:0;
  z-index:-5;            /* 最底层 */
  pointer-events:none;
  overflow:hidden;
  background:#0E0D0B;     /* 墨黑底，银河带之外全是真黑 */
}

/* 真实银河带本体：一张超宽真照片，横向铺满，定位在画面中上部。
   用两个并排的图层做无缝横向流淌（首尾相接的全天全景图天然可平铺）。 */
#galaxy-real .gx-band{
  position:absolute;
  /* ★ 位置上移：银河带中心放在视口约 34% 高度处（v8 偏下，这里上提） */
  top:-4%;
  left:0;
  width:300%;            /* 超宽，留出横向漂移空间 */
  height:78vh;
  background-image:url('galaxy/eso0932a_milkyway_panorama.jpg');
  background-repeat:repeat-x;
  /* 真实银河带在原图垂直居中，这里让那条亮带落在容器上 1/3 */
  background-position:center 42%;
  background-size:auto 130%;
  /* ★ 金墨调染色：真实银河偏蓝紫 → sepia 打底转暖 → hue-rotate 微调到金，
     提对比保住星场颗粒，压一点亮度融入墨黑。保留真实质感不磨平。 */
  filter:
    sepia(0.62)
    hue-rotate(347deg)
    saturate(1.18)
    brightness(0.96)
    contrast(1.16);
  opacity:0.92;
  /* 极慢横向漂移：银河"在流淌" */
  animation:gx-drift 150s linear infinite;
  transform:translate3d(0,0,0);
  will-change:transform;
}

/* 金色 overlay：薄薄一层金箔色，用 mix-blend 把真实银河进一步染成金墨调，
   不盖死星场（透明度低 + overlay 混合）。 */
#galaxy-real .gx-gold{
  position:absolute;
  top:-4%;
  left:0;
  width:300%;
  height:78vh;
  background:linear-gradient(
    180deg,
    rgba(196,151,73,0.00) 0%,
    rgba(210,165,90,0.16) 38%,
    rgba(196,151,73,0.20) 50%,
    rgba(150,108,48,0.12) 62%,
    rgba(196,151,73,0.00) 100%);
  mix-blend-mode:overlay;
  opacity:0.85;
  pointer-events:none;
}

/* 轻微缩放呼吸：让银河有"活着"的微动（叠在漂移之上，作用于整个容器） */
#galaxy-real .gx-breathe{
  position:absolute;
  inset:0;
  animation:gx-breathe 38s ease-in-out infinite;
  transform-origin:50% 30%;
  will-change:transform;
}

/* 边缘羽化：让银河带上下边缘柔和融进墨黑，不出现硬切边 */
#galaxy-real::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    /* 上：nav 区压暗 */
    linear-gradient(180deg, rgba(14,13,11,0.55) 0%, rgba(14,13,11,0.0) 16%),
    /* 下：银河带下缘柔和淡出到墨黑 */
    linear-gradient(180deg, rgba(14,13,11,0.0) 52%, rgba(14,13,11,0.78) 78%, rgba(14,13,11,0.96) 100%),
    /* 左右羽化 */
    linear-gradient(90deg, rgba(14,13,11,0.5) 0%, rgba(14,13,11,0.0) 14%, rgba(14,13,11,0.0) 86%, rgba(14,13,11,0.5) 100%);
}

/* ── 关键帧：横向漂移 + 缩放呼吸 ── */
@keyframes gx-drift{
  0%   { transform:translate3d(0,0,0); }
  100% { transform:translate3d(-33.333%,0,0); }  /* 平移一个图块宽度，无缝循环 */
}
@keyframes gx-breathe{
  0%,100% { transform:scale(1.00) translateY(0); }
  50%     { transform:scale(1.045) translateY(-0.6%); }
}

/* ── 可读性蒙层（关键）：在真实银河之上、内容之下，
   标题区压一层暗渐变，让字稳稳浮在银河上清晰可读。 ── */
.galaxyreal-on body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    /* 中央径向罩住 hero 标题带（局部暗底保字），四周透出真实银河 */
    radial-gradient(ellipse 64% 30% at 50% 52%,
      rgba(14,13,11,0.86) 0%,
      rgba(14,13,11,0.66) 42%,
      rgba(14,13,11,0.22) 68%,
      rgba(14,13,11,0.0) 82%),
    /* 整页向下渐暗，正文区回到纯墨黑好读 */
    linear-gradient(to bottom,
      rgba(14,13,11,0.10) 0%,
      rgba(14,13,11,0.05) 30%,
      rgba(14,13,11,0.4) 64%,
      rgba(14,13,11,0.92) 88%,
      rgba(14,13,11,1) 100%);
}

/* 文字对比增强：标题/正文加深色描边阴影，任何时刻清晰可读 */
.galaxyreal-on h1,
.galaxyreal-on h2,
.galaxyreal-on h3{
  text-shadow:
    0 1px 2px rgba(0,0,0,0.92),
    0 2px 14px rgba(0,0,0,0.8),
    0 0 36px rgba(14,13,11,0.7);
}
.galaxyreal-on .hero p,
.galaxyreal-on [class*="hero"] p{
  text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 0 12px rgba(14,13,11,0.6);
}

/* 减少动效：停止漂移/呼吸，仍显示真实银河静态图 */
@media(prefers-reduced-motion:reduce){
  #galaxy-real .gx-band{animation:none;}
  #galaxy-real .gx-breathe{animation:none;}
}

/* 移动端：银河带高度收一点，定位仍上移 */
@media(max-width:640px){
  #galaxy-real .gx-band,
  #galaxy-real .gx-gold{height:60vh;top:-2%;}
  .galaxyreal-on body::after{
    background:
      radial-gradient(ellipse 92% 26% at 50% 48%,
        rgba(14,13,11,0.88) 0%, rgba(14,13,11,0.5) 50%, rgba(14,13,11,0.0) 80%),
      linear-gradient(to bottom,
        rgba(14,13,11,0.12) 0%, rgba(14,13,11,0.45) 60%, rgba(14,13,11,0.95) 86%, rgba(14,13,11,1) 100%);
  }
}