<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Entrance</title>
    <!-- <link rel="stylesheet" href="css/entranceStyle.css"> -->
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden; /* Prevent scrolling */
        }
        .entrance {
            width: 100%;
            height: 100vh; /* Full viewport height */
            position: relative; /* Positioning context for the image */
        }
        .zoom-image {
        width: 100%;
        transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform-origin: center center;
        object-fit: cover;
        }

        .zoom-in {
            transform: scale(5) rotate(2deg); /* Subtle rotation for depth */
        }
    </style>
</head>
<body>
    <div class="entrance" style="width:100%;height: auto;">
    <a href="lobby.html"class="zoom-link" id="zoomLink">
        <img src="images/entrance.jpeg" style="width:100%;height: auto;" alt="Entrance" class="zoom-image" id="zoomImage">
    </a>
    </div>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
        // Now that the DOM is ready, attach the event listener
        const zoomLink = document.getElementById('zoomLink');
        const image = document.getElementById('zoomImage');
        
        zoomLink.addEventListener('click', function(e) {
            e.preventDefault(); // Prevent the default page navigation

            // Add the zoom-in effect to the image
            image.classList.add('zoom-in');

            // Wait for the zoom animation to finish (1s) before navigating
            setTimeout(() => {
                window.location.href = zoomLink.href; // Navigate to the destination
            }, 1000); // Ensure this matches the duration of the zoom animation (1s)
        });
    });

    </script>
</body>
</html>