<script lang="ts">
    import ZSpacer from "./Universal/ZSpacer.svelte";

    // Hyperparams
    let startExit = 4700;
    let exitLength = 2000;
    let exitScreenLength = 700;

    // Define, don't touch
    let scrollPos: number = 0;
    let extraPosY = 0;
    let rotation = 0;

    $:{
        let time = (scrollPos - startExit) / exitLength;
        extraPosY = lerp(0, -exitScreenLength, time, true);
        rotation = lerp(0, 50, time, true);
    }

    function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
        const lerped: number = from + (to - from) * time;
        
        if (clamped) {
        return from < to ? clamp(lerped, from, to) : clamp(lerped, to, from);
        }

        return lerped;
    }

    function clamp(value: number, min: number, max: number): number {
        return Math.min(Math.max(value, min), max);
    }
</script>

<svelte:window bind:scrollY={scrollPos} />

<div class="horizontal">
    <div id="WeAreHolder" style="margin-right: 45vw;">
        <div style="transform: translate(0, {extraPosY}px) rotateX({rotation}deg);">    
            <div class="no-wrap no-interact big-text align-center"
            style="padding: -10px 10px 0px 10px;">
                We are
            </div>
        </div>
    </div>
    <ZSpacer/>
</div>

<style>
#WeAreHolder {
    transition: transform 1s cubic-bezier(0,1.32,0,.92);
    transform-style: preserve-3d;

    perspective: 1000px;
    -moz-perspective: 1000px;
}

#WeAreHolder div>div {
    padding: 0px 30px -5px 30px;
    /* border-radius: 40px; */
    /* background: rgba(57, 57, 57, 0.201); */
    /* border-bottom: 5px solid rgb(189, 189, 189); */

}
</style>