<template>

    <div class="hero-title">
        <h1 class="hero-title__name">Paul Nicoué</h1>
        <div class="hero-title__separator" aria-hidden="true"></div>
        <h2 class="hero-title__job">Intégrateur web & développeur full stack</h2>
    </div>

</template>

<script setup>
</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    .hero-title {
        min-width: 50vw;
        height: 100vh;
        height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        &__name {
            opacity: 0;
            margin: 0 2rem;
            animation: fade-in-from-bottom 400ms ease-in-out 600ms forwards;
        }

        &__separator {
            width: 0;
            height: 1px;
            margin: 0.5rem auto;
            background-color: var(--accent-color);
            animation: expand-width 400ms ease-in-out 200ms forwards;
        }

        &__job {
            opacity: 0;
            font-size: var(--h2-font-size);
            font-weight: var(--light-font-weight);
            margin: 0 2rem;
            animation: fade-in-from-top 400ms ease-in-out 600ms forwards;
        }
    }

</style>
