<script setup>
//import { onMounted } from 'vue';
import { useBurgerStore } from '@/stores/burger';
const burger = useBurgerStore()

</script>

<template>
  <div class="header">
    <div class = "name">
      <h1 class="spans">
        <div class="first-name">
          <span class="r-letter">R</span>
          <span>a</span>
          <span>f</span>
          <span>f</span>
          <span class="i-letter">i</span>
        </div>
        <div class="last-name">
          <span>A</span>
          <span>l</span>
          <span>e</span>
          <span>x</span>
          <span>a</span>
          <span>n</span>
          <span>i</span>
          <span>a</span>
          <span>n</span>
        </div>
      </h1>
    </div>
      <div class="come-in">
        <h2>
          I'm a web developer
        </h2>
      </div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/shared.scss";

.name{
  display:flex;
  align-items: flex-end;
  justify-content: center;
  margin:0 2.4rem;
  
  // border : #f0f solid 1px;
    & h1{font-family: 'acme', Arial, Helvetica, sans-serif;
         letter-spacing: 0.2em;
    font-size: 2.7rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position :relative;
    color: $page-title;
    font-weight: bold;
    margin-top: 0.5em;
    padding: 0em ;
    // border : #f0f solid 1px;
    
    animation: title-h1 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
    & div {
      display:flex;
      margin:0;
      // border : #f0f solid 1px;
    }
    & span{
      transform: rotateY(0deg);
      animation: title-spans 1500ms;
    }
    .i-letter{
      margin-right: 1ch ;
    }
    .r-letter{
      margin:0;
    }
  }
}
.come-in, .name{
  overflow:hidden;
}
h2{
  margin: 0.5em 3em 0.5em 1em;
  top:100px;
  position: relative;
  font-size:1.7rem;
  font-weight: bold;
  text-align: right;
  color:$white;
  animation: 600ms subtitle 300ms cubic-bezier(.55,.01,.44,1) forwards;
  font-family: 'acme', Arial, Helvetica, sans-serif;
  font-style: italic;
  letter-spacing: 0.2ch;
}



@keyframes title-h1{
  0%{
    margin-top: 1.6em
  }
  
}
@keyframes title-spans{
  0% {
      transform: rotateY(360deg);
      // color: $red;
    }
    
    100% {
      transform: rotateY(0deg);
      
    }
}
@keyframes subtitle{

    100% {
        top:0;
    }
}

@media (width < 400px){
  .name{
  margin : 0;
  }
}
@media (width < 520px){
 
  .name h1 .r-letter{
    margin-left:2ch;
  }
  .name h1 .i-letter{
    margin-right:2ch;
  }
  .come-in h2{
    margin-right: 0.5em;
  }
}
</style>
