<template>
  <div class="container">
    <p class="bottom-top" ref="slogan">
      Counter Fire is the highly-anticipated first blockchain-based game to offer a
      unique combination of MOBA and Battle Royale gameplay. With funding from
      over 13 institutional investors, and is set to revolutionize the crypto
      gaming industry.
    </p>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const slogan = ref(null);
let observer;

const animateElement = (el) => {
  el.style.opacity = 0;
  el.style.transform = "translateY(90px)";

  observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        el.style.transition = "opacity 2s ease, transform 2s ease";
        el.style.opacity = 1;
        el.style.transform = "translateY(0)";
        observer.disconnect();
      }
    });
  }, {});

  observer.observe(el);
};

onMounted(() => {
  animateElement(slogan.value);
});

onBeforeUnmount(() => {
  observer.disconnect();
});
</script>

<style lang="scss" scoped>
.container {
  display: grid;
}
p {
  box-sizing: border-box;
  font-size: 18px;
  font-family: "Poppins";
  background-image: linear-gradient(#ffffff 100%, #ffffff 100%, #ffffff 100%);
  background-repeat: repeat-y;
  background-repeat: no-repeat;
  background-position: center center;
  font-size: 16px;
  font-weight: bold;
  color: #757575;
  line-height: 28px;
  word-spacing: 2px;
  background-clip: text;
  -webkit-background-clip: text;
  // color: transparent;
}
.bottom-top {
  text-align: center;
  background-size: 100% 0%;
  background-position: bottom right;
}
.animate {
  animation: slideup-text 2s 1 forwards;
}
@keyframes slideup-text {
  100% {
    background-size: 100% 100%;
  }
}
</style>
