/* 来自 https://888.joanan.cn/ BlockBackground（jt 模式，与线上一致） */

html,
body {
  margin: 0;
  min-height: 100dvh;
  background: transparent;
}

.bg-box {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
}

.bg-gradient {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  pointer-events: none;
}

.bg-gradient--jt {
  --bg-gradient-duration: 36s;
  background: linear-gradient(-45deg, #5a7767, #979b88, #5a6e77, #ba9b7d, #6277826b);
  background-size: 400% 400%;
  animation: jt-gradient-bg var(--bg-gradient-duration) ease-in-out infinite;
  background-attachment: fixed;
}

.bg-gradient--site {
  background: linear-gradient(
    var(--gradient-angle, 45deg),
    var(--color-gradient-start, #5b7f91),
    var(--color-gradient-mid1, #a3ba9b),
    var(--color-gradient-mid2, #98cc98),
    var(--color-gradient-mid3, #e1a684),
    var(--color-gradient-end, #1b8f6f)
  );
  background-size: 500% 500%;
  animation: home-gradient-breath var(--animation-bg-speed, 20s) ease infinite;
}

.all-block {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.all-block--on-gradient {
  background: rgba(0, 0, 0, 0.18);
}

.bg-content {
  position: relative;
  z-index: 1;
}

.block-box {
  position: absolute;
  animation-name: block-breath;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  user-select: none;
  -webkit-user-select: none;
}

@keyframes jt-gradient-bg {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 80%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 20%; }
  100% { background-position: 0% 50%; }
}

@keyframes home-gradient-breath {
  0%, 100% { background-position: 0% 50%; filter: brightness(1); }
  25% { background-position: 50% 100%; filter: brightness(1.06); }
  50% { background-position: 100% 50%; filter: brightness(1); }
  75% { background-position: 50% 0%; filter: brightness(1.06); }
}

@keyframes block-breath {
  0% { transform: scale(1); opacity: 0; }
  2% { transform: scale(1); opacity: 0.1; }
  50% { transform: scale(1.1); opacity: 1; }
  90% { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

@media print {
  .bg-gradient,
  .all-block {
    display: none !important;
  }
}