<script>
    import { onMount } from 'svelte'
    import { charsToSpan } from '../utils/functions'

    // Animations
    import { animateIn } from '../animations/TitleSite'

    // Variables
    let scope


    /*
    ** Run code on component mount
    */
    onMount(() => {
        // Entering transition
        animateIn(scope)
    })
</script>

<div class="title-location title-location--inline" bind:this={scope}>
    <div role="heading" aria-level="1" aria-label="Houses">
        <div class="anim-mask">
            {@html charsToSpan('Houses')}
        </div>
    </div>

    <em>
        <span>of</span>
        <span>the</span>
    </em>

    <div aria-label="World">
        <div class="anim-mask">
            {@html charsToSpan('World')}
        </div>
    </div>
</div>
