/* 10 樱庭春夜 · 落樱 / 树影 / 氛围
   body[data-sakura="off"] 或 prefers-reduced-motion 时关闭 */

.sakura-layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.sakura-petal {
  position: absolute;
  top: -12vh;
  left: 0;
  width: var(--size, 12px);
  height: calc(var(--size, 12px) * 0.72);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.65), transparent 42%),
    linear-gradient(135deg, var(--sakura-pale), var(--sakura) 55%, var(--sakura-deep));
  border-radius: 80% 0 70% 20% / 70% 0 80% 20%;
  opacity: var(--opacity, 0.72);
  will-change: transform;
  animation-name: petalFall, petalSway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-duration: var(--dur, 14s), var(--sway, 3.2s);
  animation-delay: var(--delay, 0s), var(--delay, 0s);
  filter: drop-shadow(0 2px 4px rgba(201, 120, 144, 0.2));
}

.sakura-petal.is-deep {
  z-index: 1;
  filter: blur(0.4px) drop-shadow(0 2px 6px rgba(201, 120, 144, 0.15));
}

.sakura-petal.is-near {
  z-index: 5;
  filter: drop-shadow(0 3px 8px rgba(201, 120, 144, 0.28));
}

/* 首屏侧 CSS 樱树剪影 */
.sakura-tree {
  position: absolute;
  right: -2%;
  bottom: -4%;
  width: min(42vw, 460px);
  height: min(78%, 560px);
  z-index: 2;
  pointer-events: none;
  opacity: 0.28;
  background:
    /* 树冠簇 */
    radial-gradient(ellipse 42% 28% at 48% 28%, rgba(232, 160, 176, 0.55), transparent 70%),
    radial-gradient(ellipse 36% 24% at 32% 36%, rgba(243, 196, 206, 0.45), transparent 68%),
    radial-gradient(ellipse 34% 22% at 64% 34%, rgba(201, 120, 144, 0.4), transparent 68%),
    radial-gradient(ellipse 30% 20% at 50% 42%, rgba(232, 160, 176, 0.35), transparent 70%),
    /* 树干 */
    linear-gradient(180deg, transparent 0 38%, rgba(42, 30, 36, 0.55) 42%, rgba(30, 22, 28, 0.7) 100%);
  -webkit-mask-image:
    radial-gradient(ellipse 55% 40% at 48% 30%, #000 0 55%, transparent 72%),
    linear-gradient(180deg, transparent 0 36%, #000 44% 100%);
  mask-image:
    radial-gradient(ellipse 55% 40% at 48% 30%, #000 0 55%, transparent 72%),
    linear-gradient(180deg, transparent 0 36%, #000 44% 100%);
  -webkit-mask-composite: source-over;
  animation: treeBreathe 8s ease-in-out infinite alternate;
}

.sakura-tree::before,
.sakura-tree::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(243, 196, 206, 0.25);
  filter: blur(1px);
}

.sakura-tree::before {
  width: 18%;
  height: 12%;
  left: 28%;
  top: 22%;
  animation: crownFloat 6s ease-in-out infinite alternate;
}

.sakura-tree::after {
  width: 22%;
  height: 14%;
  right: 22%;
  top: 26%;
  animation: crownFloat 7.5s ease-in-out infinite alternate-reverse;
}

/* 首屏灯笼光点 */
.lantern-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 184, 109, 0.22), transparent 68%);
  pointer-events: none;
  z-index: 2;
  animation: lanternPulse 4.5s ease-in-out infinite;
}

.lantern-glow.g1 {
  left: 12%;
  bottom: 22%;
}

.lantern-glow.g2 {
  right: 28%;
  bottom: 34%;
  animation-delay: 1.2s;
  width: 90px;
  height: 90px;
}

@keyframes petalFall {
  0% {
    transform: translate3d(0, -10vh, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(var(--drift, 40px), 110vh, 0) rotate(var(--spin, 360deg));
  }
}

@keyframes petalSway {
  0%, 100% {
    margin-left: 0;
  }
  50% {
    margin-left: var(--sway-x, 18px);
  }
}

@keyframes treeBreathe {
  from { opacity: 0.36; transform: scale(1); }
  to { opacity: 0.48; transform: scale(1.02); }
}

@keyframes crownFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

@keyframes lanternPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.08); }
}

/* 复制成功时短促花瓣爆散 */
.burst-layer {
  position: fixed;
  inset: 0;
  z-index: 240;
  pointer-events: none;
  overflow: hidden;
}

.burst-petal {
  position: absolute;
  width: 10px;
  height: 8px;
  border-radius: 80% 0 70% 20% / 70% 0 80% 20%;
  background: linear-gradient(135deg, var(--sakura-pale), var(--sakura-deep));
  animation: burstOut 0.85s var(--ease-out) forwards;
}

@keyframes burstOut {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--bx), var(--by), 0) scale(0.4) rotate(220deg);
  }
}

body[data-sakura="off"] .sakura-layer,
body[data-sakura="off"] .sakura-tree,
body[data-sakura="off"] .lantern-glow,
body[data-sakura="off"] .burst-layer {
  display: none !important;
}

@media (max-width: 720px) {
  .sakura-tree {
    width: min(58vw, 280px);
    height: 55%;
    opacity: 0.32;
    right: -8%;
  }

  .lantern-glow.g2 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sakura-layer,
  .sakura-tree,
  .lantern-glow,
  .burst-layer,
  .hero-mist {
    display: none !important;
  }
}