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

import { onMounted } from 'vue';
onMounted(()=>{
  burger.unCheck()

})
</script>

<template>
  <div v-if="!burger.checked">
    <div class = "name">
      <h1 class = "spans">
        <div class="first-name">
          <div><span class="r-letter">R</span></div>
          <div><span>a</span></div>
          <div><span>f</span></div>
          <div><span>f</span></div>
          <div><span class="i-letter">i</span></div>
        </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>
        Come in to watch my portfolio&nbsp!
      </h2>
    </div>
  <div class="face"
  @click="burger.toggle()">
  </div>
  </div>
</template>

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

.name{
  display:flex;
  align-items: flex-end;
  justify-content: center;
  margin:0 2.4rem;
  // border : #f0f solid 1px;
  & h1{
    opacity: 1;
    font-size: 2.7rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position :relative;
    color: $renforced-light;
    font-weight: bold;
    margin-top: 1.6em;
    padding: 0.1em ;
    // border : #f0f solid 1px;
    
    & > div {
      display:flex;
      margin:0;
      // border : #f0f solid 1px;
      &.last-name{
        opacity: 1;
        @for $i from 1 to 10 {
          & span:nth-child(#{$i}){
            position : relative;
            transform:rotateY(90deg);
            -moz-transform:rotateY(90deg);
            -webkit-transform:rotateY(90deg);
            
            animation-duration: 1000ms;
            animation-name: title-last-name;
            animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
            animation-delay: $i*50 + 300ms;
            animation-fill-mode: forwards;
            
            -moz-animation-duration: 1000ms;
            -moz-animation-name: title-last-name;
            -moz-animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
            -moz-animation-delay: $i*50 + 300ms;
            -moz-animation-fill-mode: forwards;
            
            -webkit-animation-duration: 1000ms;
            -webkit-animation-name: title-last-name;
            -webkit-animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
            -webkit-animation-delay: $i*50 + 300ms;
            -webkit-animation-fill-mode: forwards;
          }
        }
      }
      &.first-name{
        & > div{
          overflow: hidden;
          & > span{
            position : relative;
            right:0ch;
            animation: title-name 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
            -moz-animation: title-name 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
            -webkit-animation: title-name 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
          }
        }   
      }
    }
  }
}
.i-letter{
  margin-right: 1ch ;
}
.r-letter{
  margin:0;
}
.come-in, .name{
  overflow:hidden;
}
h2{
  margin: 0.5em 3em 0.5em 1em;
  position: relative;
  top:150px;
  font-size:1.7rem;
  text-align: right;
  color:$main-normal;
  
  
  animation: 1200ms subtitle 500ms cubic-bezier(0.2, 0.9, 0.44, 1) forwards;
  -moz-animation: 1200ms subtitle 500ms cubic-bezier(0.2, 0.9, 0.44, 1) forwards;
  -webkit-animation: 1200ms subtitle 500ms cubic-bezier(0.2, 0.9, 0.44, 1) forwards;
  
}
.face{
  text-align: center;
  aspect-ratio: 1/1;
  width : 80%;
  max-width:450px;
  opacity : 0;
  animation: 1400ms image_appear 1200ms ease forwards;
  -moz-animation: 1400ms image_appear 1200ms ease forwards;
  -webkit-animation: 1400ms image_appear 1200ms ease forwards;

  background-color: $action-normal;
  border-radius: 50%;
  margin:2em auto 0 auto;
  border: 5px white solid;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../assets/meme.png');
  &:hover{
    background-image: url('../assets/memeWink.png');
    cursor: pointer;
  }
  &::after{
    content: "";
    background-image: url('../assets/memeWink.png');
    opacity: 0; 
    width: 0;
    height: 0;
  }
}

@keyframes title-name{
    0% {
        right:1ch;
        //opacity: 0;
      }
    100% {
      right : 0px;
    }
}

@-moz-keyframes title-name{
    0% {
        right:1ch;
        //opacity: 0;
      }
    100% {
      right : 0px;
    }
}

@-webkit-keyframes title-name{
    0% {
        right:1ch;
        //opacity: 0;
      }
    100% {
      right : 0px;
    }
}
@keyframes title-last-name{
  0%{
    transform : rotateX(270deg);
  }
  100%{
    transform : rotateX(0deg);
    
  }
}
@-moz-keyframes title-last-name{
  0%{
    transform : rotateX(270deg);
  }
  100%{
    transform : rotateX(0deg);
    
  }
}
@-webkit-keyframes title-last-name{
  0%{
    transform : rotateX(270deg);
  }
  100%{
    transform : rotateX(0deg);
    
  }
}

@-moz-keyframes subtitle{
    0% {
        top:150px;
    }
    100% {
        top:0;
    }
}
@-webkit-keyframes subtitle{
    0% {
        top:150px;
    }
    100% {
        top:0;
    }
}
@keyframes subtitle{
    0% {
        top:150px;
    }
    100% {
        top:0;
    }
}

@keyframes image_appear{
  0%{
    opacity : 0;
  }
  100%{
    opacity: 1;
  }
}
@-moz-keyframes image_appear{
  0%{
    opacity : 0;
  }
  100%{
    opacity: 1;
  }
}
@-webkit-keyframes image_appear{
  0%{
    opacity : 0;
  }
  100%{
    opacity: 1;
  }
}

@media (max-width: 320px){
  .name{
  margin : 0;
  }
  .image{
    //width:250px;
  }
}
@media (min-width: 321px) and (max-width: 520px){
  .name h1 .r-letter{
    margin-left:2ch;
    //color:blue;
  }
  .name h1 .i-letter{
    margin-right:2ch;
    //color:blue;
  }
  .image{
    //width: 350px;
  }
}
</style>