/* 首页头图加载 */
.pl-container {
  width: 100%;
  height: 100%;
  position: relative;  /* 保持第一个文件的relative定位 */
  /* 保持第一个文件的z-index注释 */
  overflow: hidden;
  will-change: transform; /* 添加性能优化 */
  /* 动画时间修改为与第二个文件一致：blur-to-clear 2.5s，scale 2.2s且延迟0.5s */
  animation: blur-to-clear 2.5s cubic-bezier(.6,.25,.25,1) 0s 1 normal backwards running, scale 2.2s cubic-bezier(.6,.1,.25,1) 0.5s 1 both;
}
.pl-img {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.1;
  transition: opacity 1s;
}

/* 模糊动画时长改为2.5s，时间曲线同步第二个文件 */
@keyframes blur-to-clear {
  0% {
    filter: blur(50px);
    opacity: 1;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

/* 缩放动画时长改为2.2s，时间曲线同步第二个文件 */
@keyframes scale {
  0% {
    transform: scale(1.5) translateZ(0);
    opacity: 0;
  }
  to {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}

.pl-visible {
  opacity: 1;
}

.pl-blur {
  /* 小图锯齿多，增加高斯模糊 */
  filter: blur(50px);
}

/* 大屏下启用滚动动画效果 */
@media screen and (min-width: 768px) {
  .pl-container {
    will-change: opacity, transform, filter;
    /* 随滚动变化的透明度 */
    opacity: calc(1 - var(--process) * 1)!important;
    /* 随滚动变化的缩放 */
    transform: scale(calc(1 + var(--process) * .1));
    /* 随滚动变化的模糊度 */
    filter: blur(calc(var(--process) * 10px));
  }
}