/**
 * 左右彩色柔焦（对齐原型「听力电台 - ComeKey2.html」.side-blobs）
 * 用法：vc-panel 增加「ek-panel-side-glow」；变量在 app_theme_light / app_theme_dark 的 :root 中。
 */

.vc-panel.ek-panel-side-glow {
  position: relative;
  isolation: isolate;
}

.vc-panel.ek-panel-side-glow > *:not(.el-loading-mask) {
  /* position: relative; */
  z-index: 1;
}

.vc-panel.ek-panel-side-glow::before,
.vc-panel.ek-panel-side-glow::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: clamp(100px, 26vw, 360px);
  pointer-events: none;
  z-index: 0;
  transform: translateZ(0);
  filter: blur(42px);
  opacity: var(--ek-panel-glow-opacity, 1);
  background-repeat: no-repeat;
}

.vc-panel.ek-panel-side-glow::before {
  left: 0;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 35%,
    rgba(0, 0, 0, 0.45) 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 35%,
    rgba(0, 0, 0, 0.45) 72%,
    transparent 100%
  );
  background-image: var(--ek-panel-glow-left-a), var(--ek-panel-glow-left-b), var(--ek-panel-glow-left-c);
  background-size: var(--ek-panel-glow-left-size-a), var(--ek-panel-glow-left-size-b), var(--ek-panel-glow-left-size-c);
  background-position: var(--ek-panel-glow-left-pos-a), var(--ek-panel-glow-left-pos-b), var(--ek-panel-glow-left-pos-c);
}

.vc-panel.ek-panel-side-glow::after {
  right: 0;
  -webkit-mask-image: linear-gradient(
    270deg,
    #000 0%,
    #000 35%,
    rgba(0, 0, 0, 0.45) 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    270deg,
    #000 0%,
    #000 35%,
    rgba(0, 0, 0, 0.45) 72%,
    transparent 100%
  );
  background-image: var(--ek-panel-glow-right-a), var(--ek-panel-glow-right-b), var(--ek-panel-glow-right-c);
  background-size: var(--ek-panel-glow-right-size-a), var(--ek-panel-glow-right-size-b), var(--ek-panel-glow-right-size-c);
  background-position: var(--ek-panel-glow-right-pos-a), var(--ek-panel-glow-right-pos-b), var(--ek-panel-glow-right-pos-c);
}

@media (max-width: 960px) {
  .vc-panel.ek-panel-side-glow::before,
  .vc-panel.ek-panel-side-glow::after {
    width: clamp(56px, 18vw, 200px);
    opacity: var(--ek-panel-glow-opacity-mobile, 0.58);
    filter: blur(36px);
  }

  .vc-panel.ek-panel-side-glow::before {
    background-image: var(--ek-panel-glow-left-a), var(--ek-panel-glow-left-b);
    background-size: var(--ek-panel-glow-left-size-a), var(--ek-panel-glow-left-size-b);
    background-position: var(--ek-panel-glow-left-pos-a), var(--ek-panel-glow-left-pos-b);
  }

  .vc-panel.ek-panel-side-glow::after {
    background-image: var(--ek-panel-glow-right-a), var(--ek-panel-glow-right-b);
    background-size: var(--ek-panel-glow-right-size-a), var(--ek-panel-glow-right-size-b);
    background-position: var(--ek-panel-glow-right-pos-a), var(--ek-panel-glow-right-pos-b);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vc-panel.ek-panel-side-glow::before,
  .vc-panel.ek-panel-side-glow::after {
    filter: blur(38px);
  }
}