/* ============================================
   peach.css — 奏桃园 · 桃花装饰元素
   月下疏影桃花，透明度不超过 30%
   ============================================ */

:root {
  --peach-1: #E8D5DC;       /* 灰调粉 */
  --peach-2: #F0E6EA;       /* 雾粉 */
}

/* =============================================
   1. 页面加载 — 旋转桃花图标（唯一加载状态）
   ============================================= */
.peach-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  pointer-events: all;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.peach-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.peach-loader svg {
  width: 22px;
  height: 22px;
  color: var(--peach-1);
  opacity: 0.6;
  animation: peach-spin 2.4s linear infinite;
}
@keyframes peach-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* =============================================
   2. 首页 — 左下角疏影桃花枝
   ============================================= */
.peach-branch {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(160px, 28vw, 340px);
  height: clamp(200px, 42vh, 420px);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: branch-in 2s ease 0.4s forwards;
}
.peach-branch svg {
  width: 100%;
  height: 100%;
}
@keyframes branch-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .peach-branch {
    width: 140px;
    height: 180px;
  }
}

/* =============================================
   3. 悬停飘瓣 — 半透明桃花花瓣
   ============================================= */
.peach-petal {
  position: fixed;
  width: 11px;
  height: 11px;
  pointer-events: none;
  z-index: 9999;
  animation: petal-fall 3s ease-out forwards;
}
@keyframes petal-fall {
  0%   { opacity: 0.28; transform: translateY(0) translateX(0) rotate(0deg); }
  100% { opacity: 0;    transform: translateY(110px) translateX(30px) rotate(200deg); }
}

/* =============================================
   4. 404 页 — 落花装饰
   ============================================= */
.peach-fallen {
  position: absolute;
  bottom: 12%;
  right: 6%;
  width: 40px;
  height: 40px;
  pointer-events: none;
  opacity: 0;
  animation: fallen-drift 1.6s ease 0.6s forwards;
}
.peach-fallen svg {
  width: 100%;
  height: 100%;
  transform: rotate(-15deg);
}
@keyframes fallen-drift {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 0.22; transform: translateY(0); }
}

/* =============================================
   5. Footer 桃花访客计数器
   ============================================= */
.peach-counter {
  width: 100%;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--peach-1);
  opacity: 0.4;
  letter-spacing: 0.12em;
  padding-top: 14px;
  border-top: 1px solid rgba(232, 213, 220, 0.07);
  margin-top: 8px;
}
.peach-counter-num {
  font-variant-numeric: tabular-nums;
  color: var(--peach-2);
}

/* =============================================
   Light mode — 浅色模式适配
   ============================================= */
body.light-mode .peach-loader {
  background: var(--bg);
}
body.light-mode .peach-loader svg {
  opacity: 0.35;
}
body.light-mode .peach-petal {
  opacity: 0.18;
}
body.light-mode .peach-counter {
  opacity: 0.28;
}