<style lang="scss">
.web-container {
    transform-style: preserve-3d;
    perspective: 5000px;
    transform: rotateX(var(--rotateY)) rotateY(var(--rotateX)) translateZ(0px);

    * {
        transform-style: preserve-3d;
        transform: translateZ(50px)
    }
}
</style>

<style lang="scss">
.web-container {
    transform-style: preserve-3d;
    perspective: 5000px;
    transform: rotateX(var(--rotateY)) rotateY(var(--rotateX)) translateZ(0px);

    * {
        transform-style: preserve-3d;
        transform: translateZ(50px)
    }
}
</style>

<img src="/background.jpg" alt="background" class="background">

<div class="frontground">
    <div class="web-container glass track-mouse"> //The parent that tracks mouse
        <div class="side-bar glass"> //The children that aren't transforming properly
            <div class="profile glass">
                <div class="main">
                    <div class="avatar glass"/>
                    <div class="username glass">
                        <h4>@Finn Milner</h4>
                    </div>
                </div>
                <div class="about glass">
                    <h3>Thanks for visiting my portfolio!</h3>
                </div>
            </div>
            <div class="sections">
                {#each Array(6) as _}
                <div class="section glass"/>
                {/each}
            </div>
        </div>
        <div class="container">
            {#each Array(9) as _}
            <div class="glass"/>
            {/each}
        </div>
    </div>
</div>

<img src="/background.jpg" alt="background" class="background">

<div class="frontground">
    <div class="web-container glass track-mouse"> //The parent that tracks mouse
        <div class="side-bar glass"> //The children that aren't transforming properly
            <div class="profile glass">
                <div class="main">
                    <div class="avatar glass"/>
                    <div class="username glass">
                        <h4>@Finn Milner</h4>
                    </div>
                </div>
                <div class="about glass">
                    <h3>Thanks for visiting my portfolio!</h3>
                </div>
            </div>
            <div class="sections">
                {#each Array(6) as _}
                <div class="section glass"/>
                {/each}
            </div>
        </div>
        <div class="container">
            {#each Array(9) as _}
            <div class="glass"/>
            {/each}
        </div>
    </div>
</div>

<script>
    import { onMount } from "svelte"

    onMount(() => {
        const mouseTracking = Array.from(document.getElementsByClassName("track-mouse"))

        console.log(mouseTracking)

        document.addEventListener("mousemove", (event) => {
            mouseTracking.forEach((element) => {
                rotateElement(element, event)
            })
        })

        const rotateElement = (element, event) => {
            const x = event.clientX
            const y = event.clientY
            
            const middleX = window.innerWidth / 2
            const middleY = window.innerHeight / 2

            const offsetX = (x - middleX) / middleX
            const offsetY = (y - middleY) / middleY

            const maxX = 30
            const maxY = 30

            const rotationX = offsetX * maxX
            const rotationY = offsetY * maxY

            element.style.setProperty("--rotateX", rotationX + "deg") 
            element.style.setProperty("--rotateY", -1 * rotationY + "deg")
        }
    })
</script>

<script>
    import { onMount } from "svelte"

    onMount(() => {
        const mouseTracking = Array.from(document.getElementsByClassName("track-mouse"))

        console.log(mouseTracking)

        document.addEventListener("mousemove", (event) => {
            mouseTracking.forEach((element) => {
                rotateElement(element, event)
            })
        })

        const rotateElement = (element, event) => {
            const x = event.clientX
            const y = event.clientY
            
            const middleX = window.innerWidth / 2
            const middleY = window.innerHeight / 2

            const offsetX = (x - middleX) / middleX
            const offsetY = (y - middleY) / middleY

            const maxX = 30
            const maxY = 30

            const rotationX = offsetX * maxX
            const rotationY = offsetY * maxY

            element.style.setProperty("--rotateX", rotationX + "deg") 
            element.style.setProperty("--rotateY", -1 * rotationY + "deg")
        }
    })
</script>