/* ============ 字体 ============ */
@font-face {
  font-family: "ZCOOL KuaiLe";
  src: url("../assets/fonts/zcool-kuaile.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============ 基础 ============ */
:root {
  --font-cute: "ZCOOL KuaiLe", "Kaiti SC", "KaiTi", "楷体", sans-serif;
  --candy-pink: #ff9ac6;
  --candy-peach: #ffb38a;
  --candy-gold: #ffe9a8;
  --candy-lav: #c9a7ff;
  --text-lav: #cdb9ff;
  --ink: #1d1545;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--font-cute);
  background: linear-gradient(180deg,
    #241b4d 0%, #3b2a6e 34%,
    #6d4a9e 68%, #a86bb8 100%);
  color: #fdf6ff;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ============ 夜空 ============ */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .45;
}
.nebula-a {
  width: 52vw; height: 52vw;
  left: -14vw; top: -16vw;
  background: radial-gradient(circle, rgba(255,154,198,.55) 0%, transparent 65%);
  animation: driftA 26s ease-in-out infinite alternate;
}
.nebula-b {
  width: 46vw; height: 46vw;
  right: -12vw; top: 4vw;
  background: radial-gradient(circle, rgba(169,139,250,.6) 0%, transparent 65%);
  animation: driftB 30s ease-in-out infinite alternate;
}
.nebula-c {
  width: 40vw; height: 40vw;
  left: 24vw; bottom: -14vw;
  background: radial-gradient(circle, rgba(255,214,165,.45) 0%, transparent 65%);
  animation: driftA 34s ease-in-out infinite alternate-reverse;
}
@keyframes driftA {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6vw, 4vw) scale(1.12); }
}
@keyframes driftB {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-5vw, 5vw) scale(1.08); }
}

/* 可爱月亮：奶油色 + 腮红 + 微笑 */
.moon {
  position: absolute;
  width: clamp(72px, 10vw, 120px);
  height: clamp(72px, 10vw, 120px);
  right: 10%;
  top: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffdf4 0%, #fff0c8 55%, #ffe3a8 100%);
  box-shadow:
    0 0 46px rgba(255,238,200,.7),
    0 0 130px rgba(255,220,180,.4);
  animation: moonBreathe 6s ease-in-out infinite;
}
.moon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 16% 10% at 26% 62%, rgba(255,154,198,.65) 0 60%, transparent 61%),
    radial-gradient(ellipse 16% 10% at 74% 62%, rgba(255,154,198,.65) 0 60%, transparent 61%),
    radial-gradient(circle at 38% 42%, rgba(220,160,90,.18) 0 7%, transparent 8%),
    radial-gradient(circle at 58% 30%, rgba(220,160,90,.14) 0 5%, transparent 6%);
}
.moon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 22%;
  height: 11%;
  transform: translateX(-50%);
  border-bottom: 3px solid rgba(200,130,80,.55);
  border-radius: 0 0 100% 100%;
}
@keyframes moonBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* 星星（三层 · 粉彩） */
.stars {
  position: absolute;
  width: 1px; height: 1px;
  border-radius: 50%;
  background: transparent;
}
.stars-1 {
  box-shadow:
    2vw 6vh #fff, 4vw 13vh #ffd1e8, 7vw 3vh #fff, 12vw 18vh #d1ccff,
    16vw 8vh #fff, 21vw 25vh #ffd1e8, 25vw 11vh #fff, 29vw 6vh #fff3c4,
    33vw 20vh #fff, 38vw 14vh #d1ccff, 42vw 4vh #fff, 47vw 22vh #ffd1e8,
    52vw 9vh #fff, 56vw 17vh #fff, 61vw 3vh #d1ccff, 65vw 15vh #fff,
    69vw 24vh #ffd1e8, 74vw 7vh #fff, 78vw 19vh #fff, 83vw 5vh #fff3c4,
    87vw 13vh #fff, 91vw 21vh #d1ccff, 96vw 10vh #fff, 99vw 2vh #ffd1e8,
    5vw 30vh #fff, 15vw 35vh #fff, 35vw 32vh #d1ccff, 55vw 28vh #fff,
    75vw 33vh #ffd1e8, 95vw 27vh #fff, 8vw 48vh #fff, 30vw 55vh #d1ccff,
    50vw 62vh #fff, 72vw 50vh #fff, 90vw 60vh #ffd1e8;
  animation: twinkle 3.4s ease-in-out infinite;
}
.stars-2 {
  width: 2px; height: 2px;
  box-shadow:
    2vw 15vh #ffd1e8, 9vw 28vh #fff, 18vw 9vh #d1ccff, 24vw 31vh #fff,
    31vw 13vh #fff, 40vw 26vh #ffd1e8, 48vw 7vh #fff, 57vw 30vh #fff,
    63vw 12vh #d1ccff, 71vw 23vh #fff, 80vw 16vh #fff, 88vw 29vh #ffd1e8,
    94vw 8vh #fff, 20vw 44vh #fff, 45vw 52vh #d1ccff, 68vw 46vh #fff,
    92vw 55vh #ffd1e8;
  animation: twinkle 2.6s ease-in-out .8s infinite;
}
.stars-3 {
  width: 3px; height: 3px;
  box-shadow:
    6vw 22vh #fff, 22vw 12vh #ffd1e8, 37vw 34vh #fff, 53vw 15vh #fff,
    68vw 28vh #d1ccff, 82vw 10vh #fff, 97vw 24vh #ffd1e8, 30vw 68vh #fff,
    60vw 74vh #fff, 85vw 66vh #d1ccff, 12vw 80vh #ffd1e8, 50vw 86vh #fff;
  animation: twinkle 2.1s ease-in-out 1.6s infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* 流星 */
.shooting-star {
  position: absolute;
  top: 16%;
  left: 70%;
  width: 130px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,224,236,.95));
  transform: rotate(-32deg) translateX(0);
  opacity: 0;
  animation: shoot 9s ease-in 3s infinite;
}
@keyframes shoot {
  0%   { transform: rotate(-32deg) translateX(0);     opacity: 0; }
  2%   { opacity: 1; }
  9%   { transform: rotate(-32deg) translateX(-46vw); opacity: 0; }
  100% { transform: rotate(-32deg) translateX(-46vw); opacity: 0; }
}

/* ============ 漂浮爱心 ============ */
.floaties {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.floaties span {
  position: absolute;
  bottom: -6%;
  color: #ffb6d9;
  text-shadow: 0 0 12px rgba(255,154,198,.6);
  animation: rise linear infinite;
}
.floaties span:nth-child(1) { left: 6%;  font-size: 20px; animation-duration: 15s; animation-delay: 0s; }
.floaties span:nth-child(2) { left: 16%; font-size: 14px; color: #ffd6a5; animation-duration: 19s; animation-delay: 3s; }
.floaties span:nth-child(3) { left: 27%; font-size: 24px; color: #d1ccff; animation-duration: 13s; animation-delay: 6s; }
.floaties span:nth-child(4) { left: 38%; font-size: 15px; animation-duration: 21s; animation-delay: 1.5s; }
.floaties span:nth-child(5) { left: 49%; font-size: 22px; color: #ff9ac6; animation-duration: 16s; animation-delay: 8s; }
.floaties span:nth-child(6) { left: 60%; font-size: 16px; color: #ffd6a5; animation-duration: 18s; animation-delay: 4s; }
.floaties span:nth-child(7) { left: 71%; font-size: 25px; color: #d1ccff; animation-duration: 14s; animation-delay: 10s; }
.floaties span:nth-child(8) { left: 82%; font-size: 15px; animation-duration: 20s; animation-delay: 2s; }
.floaties span:nth-child(9) { left: 92%; font-size: 21px; color: #ff9ac6; animation-duration: 17s; animation-delay: 5.5s; }
@keyframes rise {
  0%   { transform: translateY(0) rotate(0deg) scale(.9); opacity: 0; }
  8%   { opacity: .75; }
  50%  { transform: translateY(-52vh) rotate(18deg) scale(1); opacity: .55; }
  92%  { opacity: .15; }
  100% { transform: translateY(-108vh) rotate(-14deg) scale(.95); opacity: 0; }
}

/* ============ 鹊桥 ============ */
.bridge {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: clamp(150px, 36vh, 330px);
  z-index: 1;
  pointer-events: none;
}
.bridge svg { width: 100%; height: 100%; display: block; }
.bridge-body { fill: var(--ink); }

.light { animation: lightGlow 2.6s ease-in-out infinite; }
@keyframes lightGlow {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

.fly { animation: flyFloat 5.5s ease-in-out infinite; }
.fly-a { animation-delay: 0s; }
.fly-b { animation-delay: 1.2s; }
.fly-c { animation-delay: 2.1s; }
.fly-d { animation-delay: .6s; }
.fly-e { animation-delay: 3s; }
@keyframes flyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ============ 内容 ============ */
.content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(185px, 31vh, 310px) 20px clamp(90px, 12vh, 130px);
  text-align: center;
}

.eyebrow {
  color: var(--text-lav);
  font-size: clamp(13px, 2.2vw, 18px);
  letter-spacing: .5em;
  text-indent: .5em;
  text-shadow: 0 0 14px rgba(205,185,255,.6);
}

/* 糖果色弹跳标题 */
.art-title {
  margin-top: clamp(14px, 2.5vh, 26px);
  display: flex;
  justify-content: center;
  gap: .04em;
  font-size: clamp(58px, 14.5vw, 136px);
  font-weight: 400;
}
.ch {
  background: linear-gradient(135deg,
    #ff9ac6 0%, #ffb38a 28%, #ffe9a8 52%, #c9a7ff 78%, #ff9ac6 100%);
  background-size: 260% 260%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 22px rgba(255,154,198,.45),
    0 0 55px rgba(201,167,255,.3);
  animation:
    chShimmer 6s linear infinite,
    chBounce 3.8s cubic-bezier(.45,1.45,.55,1) infinite;
  animation-delay: calc(var(--i) * .16s), calc(var(--i) * .14s);
}
@keyframes chShimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 260% 260%; }
}
@keyframes chBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  28% { transform: translateY(-16px) rotate(-3deg); }
  55% { transform: translateY(3px) rotate(2deg); }
  75% { transform: translateY(-4px) rotate(0deg); }
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(340px, 62vw);
  margin: clamp(18px, 3vh, 30px) 0 clamp(26px, 4vh, 42px);
}
.divider .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,182,217,.85));
}
.divider .line:last-child {
  background: linear-gradient(90deg, rgba(255,182,217,.85), transparent);
}
.divider .heart {
  color: var(--candy-pink);
  font-size: 17px;
  text-shadow: 0 0 12px rgba(255,154,198,.9);
}
.divider .spark {
  color: var(--candy-gold);
  font-size: 13px;
  text-shadow: 0 0 12px rgba(255,233,168,.9);
}

/* ============ 拍立得相框 ============ */
.photo-card {
  position: relative;
  padding: 16px 16px 20px;
  background: linear-gradient(170deg, #fffef9 0%, #fff6ee 100%);
  border-radius: 18px;
  box-shadow:
    0 22px 60px rgba(48,16,84,.5),
    0 0 70px rgba(255,154,198,.22),
    inset 0 0 0 1px rgba(255,255,255,.6);
  transform: rotate(-2.4deg);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
  animation: cardGlow 7s ease-in-out infinite;
}
.photo-card:hover {
  transform: rotate(0deg) scale(1.03);
}
.carousel {
  position: relative;
  width: min(560px, 86vw);
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
}
.carousel .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.1s ease;
}
.carousel .slide.active {
  opacity: 1;
  transform: scale(1.07);
  transition: opacity 1.1s ease, transform 6s linear;
}

/* 轮播指示点 */
.dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(29,21,69,.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.dot {
  width: 9px;
  height: 9px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  cursor: pointer;
  padding: 0;
  transition: width .35s ease, background .35s ease;
}
.dot.active {
  width: 24px;
  background: #fff;
}
.photo-card figcaption {
  padding-top: 15px;
  color: #9b7bd0;
  font-size: clamp(17px, 2.6vw, 22px);
  letter-spacing: .14em;
}

/* 和纸胶带 */
.tape {
  position: absolute;
  top: -14px;
  width: clamp(72px, 12vw, 104px);
  height: 30px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,182,217,.85) 0 10px,
      rgba(255,198,226,.85) 10px 20px);
  box-shadow: 0 3px 10px rgba(48,16,84,.25);
  opacity: .92;
}
.tape-l { left: 7%;  transform: rotate(-38deg); border-radius: 3px; }
.tape-r { right: 7%; transform: rotate(36deg);  border-radius: 3px; }

@keyframes cardGlow {
  0%, 100% {
    box-shadow:
      0 22px 60px rgba(48,16,84,.5),
      0 0 52px rgba(255,154,198,.16),
      inset 0 0 0 1px rgba(255,255,255,.6);
  }
  50% {
    box-shadow:
      0 26px 70px rgba(48,16,84,.55),
      0 0 92px rgba(255,154,198,.34),
      inset 0 0 0 1px rgba(255,255,255,.7);
  }
}

.blessing {
  margin-top: clamp(26px, 4.5vh, 44px);
  color: #ffe0ec;
  font-size: clamp(17px, 3vw, 25px);
  letter-spacing: .26em;
  text-indent: .26em;
  text-shadow: 0 0 18px rgba(255,154,198,.55);
}

.badge {
  margin-top: clamp(22px, 3.5vh, 32px);
  padding: 9px 26px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffd9e8;
  font-size: clamp(13px, 1.8vw, 16px);
  letter-spacing: .3em;
  text-indent: .3em;
  box-shadow: 0 4px 22px rgba(48,16,84,.3);
}

/* ============ 入场动画 ============ */
.reveal { animation: fadeUp 1s cubic-bezier(.22,.8,.36,1) both; }
.d1 { animation-delay: .18s; }
.d2 { animation-delay: .34s; }
.d3 { animation-delay: .5s; }
.d4 { animation-delay: .68s; }
.d5 { animation-delay: .84s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ 音乐按钮 ============ */
.music-btn {
  position: fixed;
  right: clamp(16px, 4vw, 34px);
  bottom: clamp(16px, 4vh, 34px);
  z-index: 10;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255,182,217,.9);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 24px rgba(48,16,84,.45), 0 0 30px rgba(255,154,198,.3);
  transition: transform .3s ease, box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.music-btn:hover {
  transform: scale(1.1) rotate(-6deg);
  box-shadow: 0 8px 30px rgba(48,16,84,.5), 0 0 44px rgba(255,154,198,.5);
}
.music-btn .disc {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      #3a2560 0 14%, #2a1a4e 15% 30%,
      #3a2560 31% 46%, #2a1a4e 47% 62%,
      #3a2560 63% 78%, #2a1a4e 79% 100%);
}
.music-btn .disc::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 13px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #ffe0ec 0 40%, #ff9ac6 100%);
}
.music-btn.playing .disc { animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.music-btn .icon {
  position: relative;
  color: var(--candy-pink);
  font-size: 21px;
  text-shadow: 0 0 12px rgba(255,154,198,.8);
}
.music-btn .icon-pause { display: none; }
.music-btn.playing .icon-note { display: none; }
.music-btn.playing .icon-pause { display: inline; }
.music-btn.playing { border-color: rgba(255,154,198,.95); }

.music-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255,182,217,.6);
  opacity: 0;
}
.music-btn.playing::after { animation: pulseRing 2.2s ease-out infinite; }
@keyframes pulseRing {
  0%   { transform: scale(.9); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ============ 减少动态偏好 ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}