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

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

    // Props and variables
    export let init = false
    let mounted = false
    let scope


    /*
    ** Run code when mounted
    */
    onMount(() => {
        animateIn(scope, init)
        mounted = true
    })
</script>

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

    <em class="anim-mask">
        <span>of</span>
        <span>the</span>
    </em>

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