<template>
  <div class="main-loader layout-column layout-align-center-center">
    <span class="subtitle">{{ $t('whoweare') }}</span>
    <div class="title-wrapper">
      <transition name="fade" appear>
        <h1 v-bind:data-hover="animatedTextLanguage">{{animatedTextLanguage}}</h1>
      </transition>
    </div>
  </div>
  </transition>
</template>

<script>

  export default {
    components: {

    },
    i18n: {
      messages: {
        en: {
          title: 'Making the real digital evolution',
          whoweare: 'We are etéreo'
        },
        es: {
          title: 'La auténtica revolución digital',
          whoweare: 'Somos etéreo'
        }
      }
    },

    computed: {
      animatedTextLanguage() {
        return this.$i18n.messages[this.$i18n.locale].title;
      }
    }
  }
</script>

<style lang="scss" scoped>

  @import '~assets/css/variables.scss'; // will be fixed soon

  .main-loader {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    background-color: white;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 1s
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0
  }
  h1 {
    color: $silver;
    font-size: 36px;
    position: relative;
    display: block;
    &:after {
      position: absolute;
      content: attr(data-hover);
      color: black;
      left: 0;
      width: 0;
      transition: width 3s;
      overflow: hidden;
      white-space: nowrap;
      width: 0;
    }
  }
  .subtitle {
    transform: translateY(-500px);
    opacity: 0;
  }


</style>