<template>
    <div class="endless-journal">
        <input
            v-model="input"
            class="input"
            type="text"
            ref="inputEl"
            @blur="onBlur"
        />

        <div class="cursor" />

        <div class="fill-line one">
            <h6>Intuition</h6>
            <div class="line" />
        </div>
        <div class="fill-line two">
            <h6>Chaos</h6>
            <div class="line" />
        </div>
        <div class="fill-line three">
            <h6>Concept</h6>
            <div class="line" />
        </div>

        <physics :input="input" />
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import Physics from './Physics.vue'
import { until } from '@vueuse/core'

const input = ref()
const inputEl = ref()

onMounted(async () => {
    await until(inputEl).toBeTruthy()
    await new Promise((res) => setTimeout(res, 50))
    inputEl.value.focus()
})
const onBlur = async () => {
    await new Promise((res) => setTimeout(res, 50))
    inputEl.value.focus()
}
</script>

<style lang="scss">
.endless-journal {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .input {
        border: 1px solid var(--theme-fg);
        position: absolute;
        top: 20vh;
        opacity: 0;
    }
    .cursor {
        width: rs(10px);
        height: rs(100px);
        background: var(--theme-fg);
        opacity: 0.2;
        position: absolute;
        top: 15vh;
        z-index: 2;
        animation: cursor 1s infinite;
    }

    .fill-line {
        position: absolute;
        left: 0;
        right: 0;
        padding: 0 var(--layout-margin);
        z-index: 2;

        h6 {
            text-transform: uppercase;
            color: var(--theme-grey);
            font-weight: 400;
        }
        .line {
            position: absolute;
            bottom: -1em;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--theme-grey);
        }

        &.one {
            bottom: 20vh;
        }
        &.two {
            bottom: 40vh;
        }
        &.three {
            bottom: 60vh;
        }
    }

    @keyframes cursor {
        5% {
            opacity: 0;
        }
        40% {
            opacity: 0;
        }
        60% {
            opacity: 0.2;
        }
        95% {
            opacity: 0.2;
        }
    }
}
</style>
