/**
 * Blog background modes — portable styles
 * Modes: legacy | forest | dusk | night | firefly
 * Toggle via body[data-home-bg="..."]
 */

:root {
  --bg-transition: 600ms ease;
  --layer-transition: 700ms ease;
}

body {
  background-color: #f3ebe0;
  color: #2c2622;
  overflow-x: hidden;
  transition:
    background-color var(--bg-transition),
    color var(--bg-transition);
}

/* ── legacy: 宣纸 / 书页质感 ── */
body[data-home-bg="legacy"] {
  background-color: #f2e9da;
  background-image:
    radial-gradient(
      ellipse 125% 95% at 50% 42%,
      transparent 48%,
      rgba(120, 96, 70, 0.055) 80%,
      rgba(90, 70, 48, 0.1) 100%
    ),
    radial-gradient(ellipse 48% 36% at 18% 22%, rgba(196, 150, 90, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse 40% 32% at 82% 18%, rgba(168, 130, 88, 0.08) 0%, transparent 68%),
    radial-gradient(ellipse 55% 40% at 62% 78%, rgba(180, 140, 95, 0.09) 0%, transparent 72%),
    radial-gradient(ellipse 28% 22% at 34% 64%, rgba(150, 112, 72, 0.055) 0%, transparent 70%),
    linear-gradient(168deg, #f8f2e8 0%, #f3eadb 40%, #ede2d0 75%, #e8dcc8 100%),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(110, 88, 60, 0.018) 2px,
      rgba(110, 88, 60, 0.018) 3px
    );
  background-attachment: fixed;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 3px;
  animation: none;
  color: #2a241e;
}

/* ── forest: soft wash + video / light shafts ── */
body[data-home-bg="forest"] {
  background-color: #e8dcc8;
  background-image:
    radial-gradient(circle at 16% 18%, rgba(205, 147, 93, 0.28) 0%, rgba(205, 147, 93, 0) 30%),
    radial-gradient(circle at 74% 16%, rgba(242, 196, 123, 0.18) 0%, rgba(242, 196, 123, 0) 28%),
    radial-gradient(circle at 46% 74%, rgba(170, 112, 74, 0.16) 0%, rgba(170, 112, 74, 0) 38%),
    linear-gradient(180deg, #eee3d1 0%, #e8dcc8 58%, #ddd0bb 100%);
  background-attachment: fixed;
  background-size: 140% 140%, 120% 120%, 135% 135%, 100% 100%;
  animation: bgForestDrift 32s ease-in-out infinite alternate;
  color: #2c2622;
}

/* ── dusk: 暖色 mesh 黄昏 ── */
body[data-home-bg="dusk"] {
  background-color: #2a1a28;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(255, 120, 60, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 70%, rgba(220, 80, 120, 0.28) 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(140, 70, 180, 0.22) 0%, transparent 55%),
    linear-gradient(175deg, #1a1024 0%, #2c1830 35%, #3d2038 65%, #4a2830 100%);
  background-attachment: fixed;
  background-size: 140% 140%, 130% 130%, 150% 150%, 100% 100%;
  animation: bgDuskDrift 28s ease-in-out infinite alternate;
  color: #f5ebe4;
}

/* ── night: 星空 ── */
body[data-home-bg="night"] {
  background-color: #060a14;
  background-image:
    radial-gradient(ellipse 100% 70% at 50% 100%, rgba(40, 55, 100, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(60, 40, 120, 0.18) 0%, transparent 50%),
    linear-gradient(180deg, #02040a 0%, #0a1020 45%, #121a30 100%);
  background-attachment: fixed;
  animation: none;
  color: #e8eef8;
}

/* ── firefly: 夜林 + 萤火 ── */
body[data-home-bg="firefly"] {
  background-color: #0c120e;
  background-image:
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(30, 50, 28, 0.55) 0%, transparent 50%),
    radial-gradient(circle at 20% 30%, rgba(40, 70, 35, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 75% 25%, rgba(50, 60, 30, 0.15) 0%, transparent 35%),
    linear-gradient(180deg, #050807 0%, #0c120e 40%, #121a12 100%);
  background-attachment: fixed;
  animation: none;
  color: #e8f0e4;
}

/* ── Fixed layers (all start hidden) ── */
.home-bg-paper,
.home-bg-fiber,
.home-bg-grain,
.home-bg-noise,
.home-bg-video,
.home-bg-sun,
.home-bg-shaft,
.home-bg-mesh,
.home-bg-stars,
.home-bg-meteor,
.home-bg-fireflies {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--layer-transition);
}

/* 纸浆浓淡（Canvas 注入，这里给 fallback） */
.home-bg-paper {
  z-index: 1;
  background-repeat: repeat;
  background-size: 220px 220px;
  mix-blend-mode: multiply;
}

.home-bg-fiber {
  z-index: 2;
  background-repeat: repeat;
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}

.home-bg-grain {
  z-index: 3;
  background-repeat: repeat;
  background-size: 96px 96px;
  mix-blend-mode: multiply;
  image-rendering: auto;
}

.home-bg-noise {
  z-index: 4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  mix-blend-mode: soft-light;
}

.home-bg-video {
  z-index: 5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  mix-blend-mode: soft-light;
}

.home-bg-sun {
  z-index: 6;
  top: -30%;
  right: -10%;
  left: auto;
  bottom: auto;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 221, 138, 0.34) 0%,
    rgba(255, 189, 84, 0.14) 35%,
    transparent 65%
  );
}

.home-bg-shaft {
  z-index: 7;
}

.home-bg-shaft-1 {
  top: 0;
  right: 5%;
  width: 200px;
  height: 110vh;
  left: auto;
  bottom: auto;
  background: linear-gradient(
    180deg,
    rgba(255, 219, 153, 0.34) 0%,
    rgba(255, 219, 153, 0.1) 60%,
    transparent 100%
  );
  transform: rotate(-8deg);
}

.home-bg-shaft-2 {
  top: -10%;
  right: 15%;
  width: 150px;
  height: 100vh;
  left: auto;
  bottom: auto;
  background: linear-gradient(
    180deg,
    rgba(255, 208, 128, 0.24) 0%,
    rgba(255, 208, 128, 0.06) 50%,
    transparent 100%
  );
  transform: rotate(-15deg);
}

.home-bg-shaft-3 {
  top: -5%;
  right: 25%;
  width: 100px;
  height: 90vh;
  left: auto;
  bottom: auto;
  background: linear-gradient(180deg, rgba(255, 234, 183, 0.18) 0%, transparent 50%);
  transform: rotate(-3deg);
}

/* dusk mesh blobs */
.home-bg-mesh {
  z-index: 5;
  overflow: hidden;
}

.home-bg-mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
}

.home-bg-mesh-blob-1 {
  width: min(55vw, 480px);
  height: min(55vw, 480px);
  top: 8%;
  left: -8%;
  background: radial-gradient(circle, rgba(255, 140, 70, 0.55) 0%, transparent 70%);
  animation: meshDrift1 22s ease-in-out infinite alternate;
}

.home-bg-mesh-blob-2 {
  width: min(50vw, 420px);
  height: min(50vw, 420px);
  bottom: 5%;
  right: -5%;
  background: radial-gradient(circle, rgba(230, 70, 130, 0.45) 0%, transparent 70%);
  animation: meshDrift2 26s ease-in-out infinite alternate;
}

.home-bg-mesh-blob-3 {
  width: min(45vw, 380px);
  height: min(45vw, 380px);
  top: 35%;
  left: 40%;
  background: radial-gradient(circle, rgba(120, 60, 200, 0.4) 0%, transparent 70%);
  animation: meshDrift3 20s ease-in-out infinite alternate;
}

.home-bg-mesh-blob-4 {
  width: min(40vw, 320px);
  height: min(40vw, 320px);
  top: -5%;
  right: 20%;
  background: radial-gradient(circle, rgba(255, 180, 100, 0.35) 0%, transparent 70%);
  animation: meshDrift1 30s ease-in-out infinite alternate-reverse;
}

/* night stars — container; dots injected as box-shadow layers */
.home-bg-stars {
  z-index: 5;
  overflow: hidden;
}

.home-bg-stars-layer {
  position: absolute;
  inset: 0;
  background: transparent;
}

.home-bg-stars-far {
  animation: starsDrift 120s linear infinite;
}

.home-bg-stars-mid {
  animation: starsDrift 80s linear infinite reverse;
}

.home-bg-stars-near {
  animation: starsTwinkle 4s ease-in-out infinite alternate;
}

/* single star pixel used with huge box-shadow lists from JS */
.home-bg-star-seed {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  top: 0;
  left: 0;
}

.home-bg-meteor {
  z-index: 6;
  overflow: hidden;
}

.home-bg-meteor-streak {
  position: absolute;
  left: -12%;
  width: 110px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.9) 35%,
    rgba(180, 210, 255, 0.45) 100%
  );
  opacity: 0;
  will-change: transform, opacity;
  /* duration / delay / top / rotate set inline by JS */
  animation-name: meteorFly;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

/* fireflies */
.home-bg-fireflies {
  z-index: 6;
  overflow: hidden;
}

.home-bg-firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(210, 255, 140, 0.95) 0%,
    rgba(160, 230, 80, 0.5) 40%,
    transparent 70%
  );
  box-shadow:
    0 0 6px 2px rgba(180, 255, 100, 0.45),
    0 0 14px 4px rgba(140, 220, 60, 0.2);
  will-change: transform, opacity;
}

/* ── legacy ── */
body[data-home-bg="legacy"] .home-bg-paper {
  opacity: 0.55;
  mix-blend-mode: multiply;
  filter: contrast(1.05) brightness(1.04);
}

body[data-home-bg="legacy"] .home-bg-fiber {
  opacity: 0.7;
  mix-blend-mode: multiply;
}

body[data-home-bg="legacy"] .home-bg-grain {
  opacity: 0.85;
  mix-blend-mode: multiply;
}

body[data-home-bg="legacy"] .home-bg-noise,
body[data-home-bg="legacy"] .home-bg-video,
body[data-home-bg="legacy"] .home-bg-sun,
body[data-home-bg="legacy"] .home-bg-shaft,
body[data-home-bg="legacy"] .home-bg-mesh,
body[data-home-bg="legacy"] .home-bg-stars,
body[data-home-bg="legacy"] .home-bg-meteor,
body[data-home-bg="legacy"] .home-bg-fireflies {
  opacity: 0;
}

/* ── forest ── */
body[data-home-bg="forest"] .home-bg-paper,
body[data-home-bg="forest"] .home-bg-fiber,
body[data-home-bg="forest"] .home-bg-grain,
body[data-home-bg="forest"] .home-bg-mesh,
body[data-home-bg="forest"] .home-bg-stars,
body[data-home-bg="forest"] .home-bg-meteor,
body[data-home-bg="forest"] .home-bg-fireflies {
  opacity: 0;
}

body[data-home-bg="forest"] .home-bg-noise {
  opacity: 0.018;
  mix-blend-mode: soft-light;
  filter: none;
}

body[data-home-bg="forest"] .home-bg-video {
  opacity: 0.34;
  mix-blend-mode: multiply;
  filter: saturate(0.88) contrast(1.08) brightness(0.94);
}

body[data-home-bg="forest"] .home-bg-sun {
  opacity: 0.48;
  animation: sunBreathe 6s ease-in-out infinite;
}

body[data-home-bg="forest"] .home-bg-shaft {
  opacity: 0.26;
  animation: shaftSway 10s ease-in-out infinite;
}

body[data-home-bg="forest"] .home-bg-shaft-2 {
  animation-delay: 2s;
}

body[data-home-bg="forest"] .home-bg-shaft-3 {
  animation-delay: 4s;
}

/* ── dusk ── */
body[data-home-bg="dusk"] .home-bg-paper,
body[data-home-bg="dusk"] .home-bg-fiber,
body[data-home-bg="dusk"] .home-bg-grain,
body[data-home-bg="dusk"] .home-bg-video,
body[data-home-bg="dusk"] .home-bg-sun,
body[data-home-bg="dusk"] .home-bg-shaft,
body[data-home-bg="dusk"] .home-bg-stars,
body[data-home-bg="dusk"] .home-bg-meteor,
body[data-home-bg="dusk"] .home-bg-fireflies {
  opacity: 0;
}

body[data-home-bg="dusk"] .home-bg-mesh {
  opacity: 1;
}

body[data-home-bg="dusk"] .home-bg-noise {
  opacity: 0.04;
  mix-blend-mode: soft-light;
}

/* ── night ── */
body[data-home-bg="night"] .home-bg-paper,
body[data-home-bg="night"] .home-bg-fiber,
body[data-home-bg="night"] .home-bg-grain,
body[data-home-bg="night"] .home-bg-video,
body[data-home-bg="night"] .home-bg-sun,
body[data-home-bg="night"] .home-bg-shaft,
body[data-home-bg="night"] .home-bg-mesh,
body[data-home-bg="night"] .home-bg-fireflies {
  opacity: 0;
}

body[data-home-bg="night"] .home-bg-stars {
  opacity: 1;
}

body[data-home-bg="night"] .home-bg-meteor {
  opacity: 1;
}

body[data-home-bg="night"] .home-bg-noise {
  opacity: 0.03;
  mix-blend-mode: soft-light;
}

/* ── firefly ── */
body[data-home-bg="firefly"] .home-bg-paper,
body[data-home-bg="firefly"] .home-bg-fiber,
body[data-home-bg="firefly"] .home-bg-grain,
body[data-home-bg="firefly"] .home-bg-video,
body[data-home-bg="firefly"] .home-bg-sun,
body[data-home-bg="firefly"] .home-bg-shaft,
body[data-home-bg="firefly"] .home-bg-mesh,
body[data-home-bg="firefly"] .home-bg-meteor {
  opacity: 0;
}

body[data-home-bg="firefly"] .home-bg-stars {
  opacity: 0.35;
}

body[data-home-bg="firefly"] .home-bg-fireflies {
  opacity: 1;
}

body[data-home-bg="firefly"] .home-bg-noise {
  opacity: 0.025;
  mix-blend-mode: soft-light;
}

/* ── keyframes ── */
@keyframes sunBreathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.72;
  }
}

@keyframes shaftSway {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-8deg);
  }
  50% {
    transform: translate3d(10px, 0, 0) rotate(-4deg);
  }
}

@keyframes bgForestDrift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 50% 50%;
  }
  100% {
    background-position: 12% 8%, 88% 4%, 46% 92%, 50% 50%;
  }
}

@keyframes bgDuskDrift {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 30%, 50% 50%;
  }
  100% {
    background-position: 10% 8%, 90% 90%, 45% 40%, 50% 50%;
  }
}

@keyframes meshDrift1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(40px, 30px, 0) scale(1.12);
  }
}

@keyframes meshDrift2 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(-50px, -20px, 0) scale(1.08);
  }
}

@keyframes meshDrift3 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(25px, -35px, 0) scale(1.15);
  }
}

@keyframes starsDrift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-40px, 20px, 0);
  }
}

@keyframes starsTwinkle {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

@keyframes meteorFly {
  0%,
  82% {
    opacity: 0;
    transform: rotate(var(--meteor-angle, -28deg)) translate3d(0, 0, 0);
  }
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--meteor-angle, -28deg))
      translate3d(115vw, 52vh, 0);
  }
}

@keyframes fireflyFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  25% {
    transform: translate3d(var(--fx1, 12px), var(--fy1, -18px), 0) scale(1.05);
  }
  50% {
    transform: translate3d(var(--fx2, -10px), var(--fy2, -8px), 0) scale(0.9);
  }
  75% {
    transform: translate3d(var(--fx3, 8px), var(--fy3, 14px), 0) scale(1.1);
  }
}

@keyframes fireflyGlow {
  0%,
  100% {
    opacity: var(--fmin, 0.2);
  }
  50% {
    opacity: var(--fmax, 0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
  }

  .home-bg-sun,
  .home-bg-shaft,
  .home-bg-mesh-blob,
  .home-bg-stars-layer,
  .home-bg-meteor-streak,
  .home-bg-firefly {
    animation: none !important;
  }

  body[data-home-bg="night"] .home-bg-stars-near,
  body[data-home-bg="firefly"] .home-bg-firefly {
    opacity: 0.75;
  }
}