/* JLC / FETL global gradient + drifting icons
   Original icon definitions come from the separately bundled yuansufuhao-original.css.
   This stylesheet isolates the whole-scene layer from Zibll components. */
body.jlc-fetl-background-on {
  isolation: isolate;
}
body.jlc-fetl-background-on #jlc-fetl-global-bg.container1 {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1;
  background-color: transparent;
  background-image: linear-gradient(90deg,
    #f795331a 0%, #f370551a 15%, #ef4e7b1a 30%, #a166ab1a 43%,
    #5073b81a 57%, #1098ad1a 70%, #07b39b1a 86%, #6dba821a 100%);
  background-repeat: no-repeat;
  background-size: cover;
  contain: layout paint;
}
body.jlc-fetl-background-on #jlc-fetl-global-bg .inner-container1 {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
body.jlc-fetl-background-on #jlc-fetl-global-bg .shape {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
body.jlc-fetl-background-on #jlc-fetl-global-bg [class*="shape-container--"] {
  position: absolute;
  top: var(--jlc-fetl-y, 50%);
  left: var(--jlc-fetl-x, 50%);
  width: 0;
  height: 0;
  margin: 0;
  opacity: var(--jlc-fetl-opacity, .46);
  pointer-events: none !important;
}
body.jlc-fetl-background-on #jlc-fetl-global-bg .random-shape {
  margin: 0;
  line-height: 1;
  pointer-events: none !important;
}
body.jlc-fetl-background-on #jlc-fetl-global-bg .random-shape::after {
  display: block;
  margin: 0 !important;
  pointer-events: none !important;
  text-shadow: 0 0 5px rgba(255,255,255,.25);
}
body.dark-theme.jlc-fetl-background-on #jlc-fetl-global-bg {
  background-image: linear-gradient(100deg,
    rgba(141,79,109,.17) 0%, rgba(113,69,149,.15) 25%,
    rgba(53,105,157,.18) 50%, rgba(21,118,118,.15) 75%,
    rgba(99,118,77,.13) 100%);
}
body.dark-theme.jlc-fetl-background-on #jlc-fetl-global-bg [class*="shape-container--"] {
  opacity: calc(var(--jlc-fetl-opacity, .46) * .65);
}
@media(max-width:767px) {
  body.jlc-fetl-background-on #jlc-fetl-global-bg [class*="shape-container--"] {
    opacity: calc(var(--jlc-fetl-opacity, .46) * .62);
  }
}
@media(prefers-reduced-motion: reduce) {
  body.jlc-fetl-background-on #jlc-fetl-global-bg .shape-animation {
    animation: none !important;
    -webkit-animation: none !important;
  }
}
body.jlc-fetl-background-on.jlc-fetl-page-hidden #jlc-fetl-global-bg .shape-animation {
  animation-play-state: paused !important;
  -webkit-animation-play-state: paused !important;
}
/*
 * Only on the home page, the reference color is the PRE-EXISTING wave
 * color, NOT the other way round. Zibll supplies --body-bg-color:
 * day #f5f6f7 / night #292a2d.
 *
 * The color wash and decorations fade in AFTER the wave's lower boundary.
 * JS measures that boundary on resize/scroll. Before measurement, the
 * fallback of 100vh displays the unmodified theme base color.
 */
body.home.jlc-fetl-background-on #jlc-fetl-global-bg.container1,
body.blog.jlc-fetl-background-on #jlc-fetl-global-bg.container1 {
  background-color: var(--body-bg-color, #f5f6f7) !important;
  background-image: none !important;
}
body.home.jlc-fetl-background-on #jlc-fetl-global-bg.container1::before,
body.blog.jlc-fetl-background-on #jlc-fetl-global-bg.container1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg,
    #f795331a 0%, #f370551a 15%, #ef4e7b1a 30%, #a166ab1a 43%,
    #5073b81a 57%, #1098ad1a 70%, #07b39b1a 86%, #6dba821a 100%);
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--jlc-fetl-wave-bottom, 100vh) + 2px),
    #000 calc(var(--jlc-fetl-wave-bottom, 100vh) + 132px));
  mask-image: linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--jlc-fetl-wave-bottom, 100vh) + 2px),
    #000 calc(var(--jlc-fetl-wave-bottom, 100vh) + 132px));
}
body.home.dark-theme.jlc-fetl-background-on #jlc-fetl-global-bg.container1::before,
body.blog.dark-theme.jlc-fetl-background-on #jlc-fetl-global-bg.container1::before {
  background-image: linear-gradient(100deg,
    rgba(141,79,109,.17) 0%, rgba(113,69,149,.15) 25%,
    rgba(53,105,157,.18) 50%, rgba(21,118,118,.15) 75%,
    rgba(99,118,77,.13) 100%);
}
body.home.jlc-fetl-background-on #jlc-fetl-global-bg .inner-container1,
body.blog.jlc-fetl-background-on #jlc-fetl-global-bg .inner-container1 {
  z-index: 1 !important;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--jlc-fetl-wave-bottom, 100vh) + 2px),
    #000 calc(var(--jlc-fetl-wave-bottom, 100vh) + 132px));
  mask-image: linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--jlc-fetl-wave-bottom, 100vh) + 2px),
    #000 calc(var(--jlc-fetl-wave-bottom, 100vh) + 132px));
}

@media print {
  body.jlc-fetl-background-on #jlc-fetl-global-bg {display:none !important}
}