html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.splash {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #111;
}

.splash-slides,
.splash-slide,
.splash-shade,
.splash-texture {
  position: absolute;
  inset: 0;
}

.splash-slide {
  opacity: 0;
  transition: opacity 1400ms ease;
}

.splash-slide.is-active {
  opacity: 1;
}

.splash-slides {
  z-index: 0;
}

.splash-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.splash-shade {
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3);
}

.splash-texture {
  z-index: 1;
  pointer-events: none;
  /* 斜纹在细网点上方，按原始像素平铺，保持纹理的细密程度。 */
  background-image: url('/images/splash-pattern-diagonal.png'), url('/images/splash-pattern-dots.png');
  background-repeat: repeat;
  background-size: 4px 4px, 6px 6px;
}

.splash-logo {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: clamp(120px, 15vw, 220px);
  aspect-ratio: 1;
  transition: opacity 250ms ease;
}

.splash-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 2px 16px rgba(0, 0, 0, 0.2));
}

.splash-logo:hover {
  opacity: 0.8;
}

.splash-logo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .splash-slide,
  .splash-logo {
    transition: none;
  }
}