* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --light: #f3f3f3;
  --dark: #1b1b1b;
  --mouseX: 100%;
}

div {
  color: rgba(255, 255, 255, 0.5);
  position: fixed;
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  font-size: 20vmin;
  font-weight: bold;
  background-image: url('./assets/img-1.avif');
  background-size: cover;
  background-position: center center;
  -webkit-text-stroke: 0.25vmin var(--dark);
}

div:nth-child(2) {
  color: rgba(0, 0, 0, 0.5);
  background-image: url('./assets/img-2.avif');
  clip-path: polygon(var(--mouseX) 0%, 100% 0%, 100% 100%, var(--mouseX) 100%);
  -webkit-text-stroke: 0.25vmin var(--light);
}

body.animate div:nth-child(2) {
  animation: slide 5s infinite;
}

@keyframes slide {
  0% {
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
  }
  50% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
}