/* ============================================================
   Sakura Converter — 氛围背景
   超浅粉渐变 + 远山轮廓 + 湖面倒影 + 日式塔影 + 轻雾
   所有氛围元素透明度 5%~10%，绝不喧宾夺主
   樱花花瓣极低频率飘落（纯 transform/opacity，低 CPU）
   ============================================================ */

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ---- 浅色：樱花粉渐变 + 远山 + 塔影 + 湖面 + 轻雾 ---- */
.light-mode {
  background-color: #fff9fc;
  background-image:
    /* 顶部轻雾 */
    radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%),
    /* 底部湖面倒影带 */
    linear-gradient(180deg, rgba(255, 255, 255, 0) 78%, rgba(255, 214, 232, 0.22) 92%, rgba(255, 200, 224, 0.3) 100%),
    /* 远山前景（樱花粉，透明度 ~8%） */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220 L0 150 Q150 95 300 130 T600 115 T900 135 T1200 105 L1200 220 Z' fill='%23ffb6d9' fill-opacity='0.35'/%3E%3C/svg%3E") repeat-x bottom / auto 180px,
    /* 远山远景（更淡更高） */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220 L0 170 Q220 120 440 145 T880 135 T1200 155 L1200 220 Z' fill='%23ffc2dd' fill-opacity='0.3'/%3E%3C/svg%3E") repeat-x bottom / auto 220px,
    /* 日式塔影（右下，透明度 ~6%） */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cpath d='M52 160 L52 40 L48 40 L60 14 L72 40 L68 40 L68 160 Z M40 52 L80 52 L84 46 L36 46 Z M38 74 L82 74 L86 68 L34 68 Z M36 96 L84 96 L88 90 L32 90 Z' fill='%23d88aad' fill-opacity='0.35'/%3E%3C/svg%3E") no-repeat bottom right / 90px auto,
    /* 基础樱花粉渐变 */
    linear-gradient(135deg, #fff9fc 0%, #ffeef5 50%, #ffd9ea 100%);
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
}

/* ---- 深色：深紫梅子渐变 + 远山塔影 ---- */
.dark-mode {
  background-color: #1a1030;
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(80, 50, 110, 0.5) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 78%, rgba(60, 35, 85, 0.4) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220 L0 150 Q150 95 300 130 T600 115 T900 135 T1200 105 L1200 220 Z' fill='%235a3a78' fill-opacity='0.4'/%3E%3C/svg%3E") repeat-x bottom / auto 180px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220 L0 170 Q220 120 440 145 T880 135 T1200 155 L1200 220 Z' fill='%234a2e68' fill-opacity='0.35'/%3E%3C/svg%3E") repeat-x bottom / auto 220px,
    linear-gradient(135deg, #1a1030 0%, #241433 50%, #1e1535 100%);
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

/* 彻底隐藏原 three.js 画布容器 */
#canvas-show,
#canvas {
  display: none !important;
}

/* 樱花花瓣点缀（极低频率，低 CPU，纯 transform/opacity） */
.light-mode::before {
  content: "🌸";
  position: fixed;
  top: -60px;
  left: 10%;
  font-size: 26px;
  opacity: 0.1;
  animation: sakuraFall 22s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.light-mode::after {
  content: "🌸";
  position: fixed;
  top: -80px;
  left: 78%;
  font-size: 20px;
  opacity: 0.08;
  animation: sakuraFall 30s linear 8s infinite;
  pointer-events: none;
  z-index: 0;
}
.dark-mode::before {
  content: "✿";
  position: fixed;
  top: -50px;
  left: 14%;
  font-size: 22px;
  opacity: 0.06;
  animation: sakuraFall 28s linear 5s infinite;
  pointer-events: none;
  z-index: 0;
}
.dark-mode::after {
  content: "✿";
  position: fixed;
  top: -70px;
  left: 72%;
  font-size: 18px;
  opacity: 0.05;
  animation: sakuraFall 36s linear 14s infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes sakuraFall {
  0% { transform: translateY(0) translateX(0) rotate(0deg); }
  50% { transform: translateY(55vh) translateX(30px) rotate(180deg); }
  100% { transform: translateY(110vh) translateX(-15px) rotate(360deg); }
}

/* 尊重系统“减少动态效果”设置：关闭飘落动画 */
@media (prefers-reduced-motion: reduce) {
  .light-mode::before,
  .light-mode::after,
  .dark-mode::before,
  .dark-mode::after {
    animation: none;
  }
}