:root {
  --ratioW: 1;
}

#surface,
#caustics,
#bg,
#sun {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

#surface {
  mix-blend-mode: normal; /* 或normal，减少颜色淡化 multiply*/
}

#surface::before,
#surface::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/water.jpg");
  background-repeat: repeat-x;
  --duration: 15s;
  --lowHeight: 30vh;
  --highHeight: 70vh;
  --layerNum: 2;
  --index: 0;
  --opacity: 0.4;
  animation: surface var(--duration) linear infinite;
  animation-delay: calc((var(--duration) / var(--layerNum)) * var(--index) * -1);
  opacity: 0;
  mask-image: linear-gradient(to top, white, transparent var(--lowHeight));
}

#surface::before {
  --index: 0;
  transform: scale3d(1, -1, 1);
}

#surface::after {
  --index: 1;
  transform: scale3d(-1, -1, 1);
}

#caustics {
  filter: url(#noise1);
  overflow: hidden;
}

#caustics::before,
#caustics::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/sands.jpg");
  background-repeat: no-repeat;      /* 防止重复造成拼接痕迹 */
  background-position: bottom center; /* 底部居中 */
  background-size: cover;            /* 强制背景图拉伸填满整个容器 */
  animation: caustics 30s linear infinite alternate;
  opacity: 0.9; /* 适度提升不透明度，增强真实感 */
  mask-image: linear-gradient(to top, white 70%, transparent 95%);
}

#caustics::after {
  animation-duration: 35s; /* 第二层动画速度慢一些，更自然 */
  animation-delay: -10s;
  /* transform: scale3d(-1, 1, 1); */
}

#sun div {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  animation: sun 7s ease infinite alternate;
  mask-image: linear-gradient(to bottom, transparent 15%, white 50%, white 55%, transparent 80%);
}

#sun #sun_layer1 {
  background: linear-gradient(to right,
    transparent 39%, white 40%, transparent 41%,
    transparent 48.5%, white 50%, transparent 51.5%,
    transparent 53%, white 54%, transparent 55%,
    transparent 70%, white 71%, transparent 72%);
}

#sun #sun_layer2 {
  animation-delay: -2s;
  animation-duration: 7.8s;
  animation-direction: alternate-reverse;
  background: linear-gradient(to right,
    transparent 32%, white 33%, transparent 34%,
    transparent 38%, white 39%, transparent 40%,
    transparent 53%, white 54%, transparent 55%,
    transparent 63.5%, white 65%, transparent 66.5%);
}

#sun #sun_layer3 {
  animation-delay: -5s;
  animation-duration: 8.5s;
  background: linear-gradient(to right,
    transparent 38.5%, white 40%, transparent 41.5%,
    transparent 47%, white 48%, transparent 49%,
    transparent 52%, white 53%, transparent 54%,
    transparent 60%, white 61%, transparent 62%);
}

@keyframes surface {
  0% {
    opacity: 0;
    background-position: center bottom;
    background-size: 100% var(--highHeight);
  }
  20% {
    opacity: var(--opacity);
  }
  100% {
    opacity: 0;
    background-position: center bottom calc(-1 * var(--lowHeight));
    background-size: 100% var(--lowHeight);
  }
}

/* 修改后的动画范围，更柔和更真实 */
@keyframes caustics {
  0% {
    background-position: bottom center;
  }
  100% {
    background-position: bottom center -40%; /* 左右缓慢平移 */
  }
}

@keyframes sun {
  0% {
    opacity: 0.1;
    transform: skew(5deg) scale3d(3, 1.5, 1);
  }
  50% {
    opacity: 0.08;
    transform: skew(0deg) scale3d(1.5, 1, 1);
  }
  100% {
    opacity: 0.1;
    transform: skew(-5deg) scale3d(3, 1, 1);
  }
}

@media (min-aspect-ratio: 2/1) { :root { --ratioW: 2; }}
@media (min-aspect-ratio: 3/1) { :root { --ratioW: 3; }}
@media (min-aspect-ratio: 4/1) { :root { --ratioW: 4; }}
@media (min-aspect-ratio: 5/1) { :root { --ratioW: 5; }}