/* Transparent daylight scenery driven by the current solar term. */
#shayu-season-backdrop,
#shayu-season-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  visibility: hidden;
  clip-path: inset(60px 0 0 0);
  pointer-events: none;
  transition: opacity 650ms ease, visibility 0ms step-end 650ms;
  will-change: opacity;
}

#shayu-season-backdrop {
  z-index: 0;
  overflow: hidden;
}

#shayu-season-backdrop svg {
  display: block;
  width: 100%;
  height: 100%;
}

#shayu-season-particles {
  z-index: 2;
}

html[data-season="spring"] #shayu-season-particles,
html[data-season="summer"] #shayu-season-particles {
  z-index: 2;
}

html[data-season="spring"] body.theme-light #shayu-season-particles {
  opacity: 0.72;
}

html[data-season="summer"] body.theme-light #shayu-season-particles {
  opacity: 0.58;
}

body.theme-light #shayu-season-backdrop,
body.theme-light #shayu-season-particles {
  opacity: 1;
  visibility: visible;
  transition: opacity 650ms ease, visibility 0ms step-start;
}

body.theme-light #shayu-season-backdrop.is-changing,
body.theme-light #shayu-season-particles.is-changing {
  opacity: 0;
}

html[data-season="spring"] body.theme-light {
  --shayu-xiaowo-surface: #cfdfd5;
  --shayu-xiaowo-panel: rgba(247, 252, 249, 0.72);
  --shayu-xiaowo-header: rgba(240, 248, 244, 0.84);
  --shayu-xiaowo-dot: rgba(91, 130, 111, 0.58);
  --shayu-xiaowo-tag-text: #557565;
  --shayu-xiaowo-tag-background: #e8f0eb;
  --shayu-xiaowo-accent-line: #91aa9d;
}

html[data-season="summer"] body.theme-light {
  --shayu-xiaowo-surface: #e8c8b7;
  --shayu-xiaowo-panel: rgba(255, 247, 241, 0.72);
  --shayu-xiaowo-header: rgba(253, 241, 233, 0.84);
  --shayu-xiaowo-dot: rgba(194, 119, 78, 0.58);
  --shayu-xiaowo-tag-text: #a36143;
  --shayu-xiaowo-tag-background: #f7e9df;
  --shayu-xiaowo-accent-line: #d6a27d;
}

html[data-season="autumn"] body.theme-light {
  --shayu-xiaowo-surface: #dfc291;
  --shayu-xiaowo-panel: rgba(255, 247, 233, 0.72);
  --shayu-xiaowo-header: rgba(250, 239, 220, 0.84);
  --shayu-xiaowo-dot: rgba(173, 119, 45, 0.62);
  --shayu-xiaowo-tag-text: #91652e;
  --shayu-xiaowo-tag-background: #f5ead5;
  --shayu-xiaowo-accent-line: #c49a5c;
}

html[data-season="winter"] body.theme-light {
  --shayu-xiaowo-surface: #cbdde8;
  --shayu-xiaowo-panel: rgba(247, 251, 253, 0.74);
  --shayu-xiaowo-header: rgba(239, 247, 251, 0.85);
  --shayu-xiaowo-dot: rgba(105, 143, 170, 0.58);
  --shayu-xiaowo-tag-text: #5d7d94;
  --shayu-xiaowo-tag-background: #e7f0f5;
  --shayu-xiaowo-accent-line: #9db8ca;
}

body.theme-light #App-Container .bg-ob-deep-800.rounded-2xl,
body.theme-light #article-list .tab,
body.theme-light #article-list ul.grid.grid-cols-1,
body.theme-light #article-list > div:last-child .ob-gradient-cut-plate,
body.theme-light #article-list .sidebar-box,
body.theme-light #footer > span,
body.theme-light #footer .shayu-xiaowo-footer-grid {
  backdrop-filter: blur(8px) saturate(110%) !important;
}

@media (max-width: 639px) {
  #shayu-season-backdrop,
  #shayu-season-particles {
    clip-path: inset(60px 0 0 0);
  }

  #shayu-season-backdrop[data-season="winter"] .season-snowman {
    opacity: 0.28;
  }
}

@media (prefers-reduced-motion: reduce) {
  #shayu-season-backdrop,
  #shayu-season-particles {
    transition-duration: 0.01ms;
  }
}