*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
}

a {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

body {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  overflow: hidden;

  .bg {
    width: 600px;
    height: 600px;
    position: relative;
    background-image: url('assets/image.avif');
    background-size: cover;
    z-index: 10;

    &::before,
    &::after {
      content: '';
      position: absolute;
    }

    &::before {
      background-image: url('assets/splash.avif');
      background-size: cover;
      background-position: center;
      mix-blend-mode: lighten;
      z-index: 11;
      inset: 0;
    }

    &::after {
      width: 100%;
      height: 100%;
      left: 0%;
      top: 0;
      z-index: 12;
      background-image: linear-gradient(
        to right,
        transparent,
        #fff3,
        transparent
      );
      opacity: 0;
    }

    &:hover {
      &::after {
        animation: move 1s linear both;
      }
    }
  }
}

@keyframes move {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(100%);
  }
}