/* ============ 七夕 · 鹊桥相会 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

body {
  background: linear-gradient(180deg, #030613 0%, #0a1030 42%, #251542 74%, #0a0d24 100%);
  font-family: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
  color: #ffe9b8;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- 画布分层 ---------- */
.layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#skyCanvas { z-index: 1; }
#fxCanvas  { z-index: 3; }
#ambCanvas { z-index: 6; }

/* 四角暗角，营造夜景氛围 */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 7; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(2,3,10,.6) 100%);
}

/* ---------- 满月 ---------- */
.moon {
  position: fixed; z-index: 2; left: 50%; top: 14vh;
  width: 48vmin; height: 48vmin; margin-left: -24vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffdf6 0%, #fbf0cd 45%, #f2dda6 75%, #e9cd93 100%);
  box-shadow:
    0 0 50px 16px rgba(255,238,190,.5),
    0 0 140px 60px rgba(255,216,150,.22),
    0 0 300px 130px rgba(255,200,130,.10);
  animation: moonGlow 7s ease-in-out infinite alternate;
}
.moon::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 62% 56%, rgba(190,158,100,.12) 0 4%, transparent 7%),
    radial-gradient(circle at 36% 60%, rgba(190,158,100,.10) 0 6%, transparent 10%),
    radial-gradient(circle at 56% 30%, rgba(190,158,100,.08) 0 3%, transparent 6%),
    radial-gradient(circle at 73% 38%, rgba(190,158,100,.09) 0 2.5%, transparent 5%),
    radial-gradient(circle at 45% 45%, rgba(190,158,100,.06) 0 10%, transparent 14%);
}
@keyframes moonGlow {
  from { box-shadow: 0 0 50px 16px rgba(255,238,190,.45), 0 0 140px 60px rgba(255,216,150,.20), 0 0 300px 130px rgba(255,200,130,.09); }
  to   { box-shadow: 0 0 60px 22px rgba(255,238,190,.58), 0 0 170px 75px rgba(255,216,150,.28), 0 0 340px 150px rgba(255,200,130,.13); }
}

/* ---------- 牛郎星 / 织女星 ---------- */
.named-star { position: fixed; z-index: 2; width: 0; height: 0; pointer-events: none; }
.named-star i {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 4px rgba(255,240,200,.9), 0 0 30px 10px rgba(255,220,160,.45);
  animation: starPulse 3s ease-in-out infinite;
}
.named-star i::before, .named-star i::after {
  content: ''; position: absolute; top: 3.2px; left: -13px; width: 34px; height: 1.6px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
}
.named-star i::after { transform: rotate(90deg); }
.named-star span {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding-left: .28em;
  font-size: clamp(13px, 1.9vh, 17px); letter-spacing: .28em;
  color: #ffe6b3; text-shadow: 0 0 10px rgba(255,210,140,.8);
}
@keyframes starPulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

/* ---------- 祥云（screen 混合：发光云，避免压暗银河） ---------- */
.cloud { position: fixed; z-index: 2; color: #f2cf8e; pointer-events: none; mix-blend-mode: screen; }
.c1 { top: 10vh; left: 6vw;  width: 24vmin; opacity: .5;  animation: driftA 70s ease-in-out infinite alternate; }
.c2 { top: 36vh; right: 5vw; width: 30vmin; opacity: .35; animation: driftB 90s ease-in-out infinite alternate; }
.c3 { top: 7vh;  left: 38vw; width: 17vmin; opacity: .3;  animation: driftA 60s ease-in-out infinite alternate-reverse; }
@keyframes driftA { from { transform: translateX(-3vw); } to { transform: translateX(3vw); } }
@keyframes driftB { from { transform: scaleX(-1) translateX(-3vw); } to { transform: scaleX(-1) translateX(3vw); } }

/* ---------- 水面 ---------- */
.water {
  position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; height: 10vh;
  pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,22,52,.5), rgba(5,6,15,.96));
}
.water::before {
  content: ''; position: absolute; inset: -8px 0 0 0;
  background: repeating-linear-gradient(180deg, rgba(200,210,255,.06) 0 1px, transparent 1px 8px);
  animation: waterShift 6s linear infinite;
}
@keyframes waterShift { from { transform: translateY(0); } to { transform: translateY(8px); } }
.moon-reflect {
  position: absolute; left: 50%; top: 0; width: 15vmin; height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,240,190,.30), rgba(255,240,190,0) 85%);
  filter: blur(5px);
  animation: shimmer 4.5s ease-in-out infinite alternate;
}
@keyframes shimmer {
  from { opacity: .55; transform: translateX(-50%) scaleX(.9); }
  to   { opacity: 1;   transform: translateX(-50%) scaleX(1.12); }
}

/* ---------- 鹊桥场景 ---------- */
#scene {
  position: fixed; z-index: 5; left: 50%; bottom: 3vh;
  height: 56vh; width: calc(56vh * 1000 / 420);
  transform: translateX(-50%); pointer-events: none;
}
.fig path, .fig circle, .fig rect {
  fill: #070b18; stroke: rgba(255,215,150,.16); stroke-width: .8;
}
.perch {
  animation: perchBob 2.6s ease-in-out infinite alternate;
  transform-box: fill-box; transform-origin: center;
}
@keyframes perchBob { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }
.ribbon {
  transform-box: fill-box; transform-origin: 0% 20%;
  animation: ribbonSway 3.6s ease-in-out infinite alternate;
}
@keyframes ribbonSway { from { transform: rotate(-3deg); } to { transform: rotate(7deg); } }
#coupleGlowC { animation: glowBreathe 5s ease-in-out infinite alternate; }
@keyframes glowBreathe { from { opacity: .55; } to { opacity: 1; } }
#meetHeartG.pulse path {
  animation: heartBeat 1.6s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes heartBeat { 0%,100% { transform: scale(1); } 30% { transform: scale(1.18); } }

/* ---------- 红灯笼 ---------- */
.lantern-wrap { position: fixed; z-index: 8; top: 0; pointer-events: none; }
.sway { transform-origin: 50% 0; animation: sway 5.2s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.6deg); } to { transform: rotate(2.6deg); } }
.string { width: 2px; height: 9vh; margin: 0 auto; background: linear-gradient(rgba(255,210,140,0), rgba(255,210,140,.7)); }
.lantern { position: relative; width: 76px; margin: 0 auto; text-align: center; }
.lantern::before {
  content: ''; position: absolute; left: 50%; top: 38%; width: 180px; height: 180px;
  transform: translate(-50%,-50%); z-index: -1;
  background: radial-gradient(circle, rgba(255,150,70,.30), transparent 65%);
}
.cap { width: 36px; height: 9px; margin: 0 auto; border-radius: 3px; background: linear-gradient(#ffe2a0, #d79b3a); }
.lbody {
  position: relative; width: 70px; height: 56px; margin: 1px auto; border-radius: 50%/46%;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(122,15,15,.38) 9px 11px),
    radial-gradient(circle at 50% 40%, #ff8a5c, #e03030 55%, #a11d1d 100%);
  box-shadow: inset 0 0 20px rgba(255,190,100,.85), 0 0 26px rgba(255,110,60,.5);
  animation: flick 3.2s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
}
.lbody::after {
  content: attr(data-char);
  color: #ffe9b8; font-size: 26px; line-height: 1;
  text-shadow: 0 0 6px rgba(255,220,150,.8);
}
@keyframes flick {
  0%,100% { box-shadow: inset 0 0 20px rgba(255,190,100,.85), 0 0 26px rgba(255,110,60,.5); }
  50%     { box-shadow: inset 0 0 26px rgba(255,200,110,.95), 0 0 34px rgba(255,130,70,.62); }
}
.tassel { position: relative; width: 4px; height: 26px; margin: 1px auto 0; border-radius: 2px; background: linear-gradient(#e23b4e, #8f1d2c); }
.tassel::before {
  content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe2a0, #d79b3a);
}

/* ---------- 自桥心飘出的照片（无边框圆角，居于桥影之后） ---------- */
.moon-photo {
  position: fixed; z-index: 4; cursor: zoom-in;
  will-change: transform, opacity;
}
.moon-photo img {
  display: block; width: 100%; border-radius: 14px;
  box-shadow: 0 10px 44px rgba(0,0,0,.5), 0 0 36px rgba(255,224,160,.30);
}
.mp-cap {
  margin-top: 10px; text-align: center;
  font-size: clamp(14px, 2vh, 19px); letter-spacing: .22em; padding-left: .22em;
  color: #ffe9b8; text-shadow: 0 0 12px rgba(255,200,110,.5), 0 1px 3px rgba(0,0,0,.65);
}
.pf-card {
  position: relative;
  padding: 10px 10px 6px;
  background: linear-gradient(150deg, #4a2c18, #2b180c 60%, #3a2113);
  border: 1px solid rgba(246,196,83,.55);
  box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 26px rgba(246,196,83,.14);
}
.pf-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(95deg, rgba(0,0,0,.14) 0 2px, transparent 2px 7px);
}
.pf-corner {
  position: absolute; width: 11px; height: 11px; z-index: 1;
  border: 2px solid #f6c453;
}
.pf-corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.pf-corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.pf-corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.pf-corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.pf-mat { position: relative; background: #f5ecd7; padding: 6px; overflow: hidden; }
.pf-mat img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  filter: saturate(1.02);
}
.pf-caption {
  position: relative; margin-top: 7px; padding-bottom: 2px;
  display: flex; align-items: center; justify-content: center; gap: .55em;
  font-size: clamp(13px, 1.9vh, 17px); letter-spacing: .18em; color: #f6d488;
  text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap;
}
.mini-seal {
  background: linear-gradient(160deg, #c0272d, #8f1d2c); color: #fff8ec;
  font-size: .72em; line-height: 1; padding: .2em .24em; border-radius: 2px; letter-spacing: 0;
}

/* ---------- 照片放大查看（lightbox） ---------- */
.lb-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(4,5,14,.82);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden; cursor: zoom-out;
}
.lb { position: fixed; z-index: 41; visibility: hidden; }
.lb .pf-card { cursor: zoom-out; }
.lb .pf-caption { font-size: clamp(15px, 2.2vh, 20px); }

/* ---------- 背景音乐开关 ---------- */
.music-btn {
  position: fixed; z-index: 30; left: 3vw; bottom: 4vh;
  width: 52px; height: 52px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #a3232f, #5c1018);
  border: 1px solid rgba(246,196,83,.7);
  color: #ffe9b8; font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  transition: box-shadow .4s, transform .3s;
}
.music-btn:hover { transform: scale(1.06); }
.music-btn .bars { display: none; gap: 3px; align-items: flex-end; height: 16px; }
.music-btn .bars i { width: 3px; height: 5px; background: #ffe9b8; border-radius: 1.5px; }
.music-btn.playing { animation: btnBreath 3.2s ease-in-out infinite; }
.music-btn.playing .note { display: none; }
.music-btn.playing .bars { display: flex; }
.music-btn.playing .bars i { animation: barBounce 0.9s ease-in-out infinite; }
.music-btn.playing .bars i:nth-child(2) { animation-delay: .15s; }
.music-btn.playing .bars i:nth-child(3) { animation-delay: .3s; }
@keyframes btnBreath {
  0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 14px rgba(246,196,83,.35); }
  50%     { box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 26px rgba(246,196,83,.6); }
}
@keyframes barBounce { 0%,100% { height: 5px; } 50% { height: 15px; } }

/* ---------- 文案 ---------- */
.title-block {
  position: fixed; z-index: 9; left: 9vw; top: 15vh;
  display: flex; align-items: flex-start; gap: 1.6vw; pointer-events: none;
}
.title-block .col { display: flex; flex-direction: column; align-items: center; }
.vertical { writing-mode: vertical-rl; }
h1.vertical {
  font-size: clamp(52px, 10.5vh, 110px); font-weight: 400; letter-spacing: .14em;
  background: linear-gradient(180deg, #fff6dc 10%, #f6c453 55%, #e09a35 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(246,196,83,.45));
}
.seal {
  margin-top: 2.2vh; padding: .45em .32em; border-radius: 4px;
  background: linear-gradient(160deg, #c0272d, #8f1d2c); color: #fff8ec;
  font-size: clamp(13px, 2vh, 19px); letter-spacing: .12em;
  writing-mode: vertical-rl; transform: rotate(-5deg);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.date {
  margin-top: 1vh; padding-top: .32em;
  font-size: clamp(13px, 2vh, 18px); letter-spacing: .32em;
  color: rgba(255,230,180,.85);
  text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 8px rgba(255,200,120,.4);
}
.poem {
  position: fixed; z-index: 9; top: 3.6vh; left: 50%; transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font-size: clamp(15px, 2.5vh, 25px); letter-spacing: .22em; color: #ffe9b8;
  text-shadow: 0 0 14px rgba(255,205,115,.45);
}
.hint {
  position: fixed; z-index: 9; bottom: 11.5vh; left: 50%; transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font-size: clamp(11px, 1.7vh, 15px); letter-spacing: .24em;
  color: rgba(255,238,205,.8);
  animation: hintPulse 2.8s ease-in-out infinite;
}
@keyframes hintPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* ---------- 移动端适配 ---------- */
@media (max-width: 640px) {
  .title-block { left: 6vw; top: 12vh; }
  .poem { top: 5vh; font-size: 14px; letter-spacing: .12em; }
  .lantern { transform: scale(.78); transform-origin: top center; }
  .named-star span { font-size: 11px; }
  .hint { bottom: 12.5vh; letter-spacing: .14em; }
  .mp-cap { font-size: 13px; }
  #starZN { left: 76% !important; top: 56% !important; }
}