:root {
  --background: #111212;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--background);
}

.textile-background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--background);
}

.textile-background-image,
.zipper-animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.textile-background-image {
  display: block;
  /* Matches the SVG viewBox crop below at every viewport aspect ratio. */
  object-fit: cover;
  object-position: center;
}

.zipper-animation {
  /* Its viewBox and centered `slice` match the image's `object-fit: cover`. */
  pointer-events: none;
  overflow: visible;
}

.zipper-slider {
  opacity: 0;
  filter: drop-shadow(5px 8px 7px rgba(0, 0, 0, 0.55));
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .zipper-slider {
    display: none;
  }
}

@media (max-width: 700px) {
  .textile-background-image {
    object-position: 75% center;
  }
}