<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>גלריית ה-Zoom האינסופי</title>
    <style>
        * {
            box-sizing: border-box;
            user-select: none;
        }
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #0d1117;
            color: #fff;
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        /* --- מסך התפריט הראשי (גלריה) --- */
        #gallery-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 200;
            background: radial-gradient(circle, #161b22, #0d1117);
            transition: opacity 0.5s ease;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #58a6ff;
        }

        p.subtitle {
            color: #8b949e;
            margin-bottom: 40px;
        }

        .cards-container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 1000px;
        }

        .card {
            background: #21262d;
            border: 1px solid #30363d;
            border-radius: 12px;
            width: 260px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.3s, border-color 0.3s;
        }

        .card:hover {
            transform: translateY(-8px);
            border-color: #58a6ff;
        }

        .card .icon {
            font-size: 50px;
            margin-bottom: 15px;
        }

        .card h3 {
            margin: 10px 0;
            color: #f0f6fc;
        }

        .card p {
            font-size: 0.85rem;
            color: #8b949e;
        }

        /* --- מסך הנגן --- */
        #viewer-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        #viewport {
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .layer {
            position: absolute;
            width: 650px;
            height: 650px;
            border-radius: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 40px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.6);
            will-change: transform, opacity;
        }

        .layer-title {
            font-size: 1.4rem;
            font-weight: bold;
            padding: 8px 20px;
            background: rgba(0,0,0,0.4);
            border-radius: 20px;
            backdrop-filter: blur(8px);
        }

        .layer-icon {
            font-size: 100px;
        }

        .layer-portal {
            width: 160px;
            height: 160px;
            border: 3px dashed rgba(255,255,255,0.7);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            text-align: center;
            padding: 10px;
            background: rgba(0,0,0,0.2);
        }

        /* סרגל הפיצ'רים והבקרות */
        .controls-bar {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(22, 27, 34, 0.85);
            backdrop-filter: blur(10px);
            border: 1px solid #30363d;
            padding: 10px 20px;
            border-radius: 40px;
            display: flex;
            gap: 15px;
            align-items: center;
            z-index: 100;
        }

        button {
            background: #21262d;
            color: #c9d1d9;
            border: 1px solid #30363d;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background 0.2s, color 0.2s;
        }

        button:hover {
            background: #30363d;
            color: #fff;
        }

        button.active {
            background: #238636;
            color: #fff;
            border-color: #2ea043;
        }

        /* פאנל רמזים לתעלומה */
        #hint-box {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(13, 17, 23, 0.9);
            border: 1px solid #58a6ff;
            color: #58a6ff;
            padding: 12px 25px;
            border-radius: 30px;
            font-size: 0.95rem;
            display: none;
            z-index: 100;
        }
    </style>
</head>
<body>

    <!-- מסך גלריית תמונות/נושאים -->
    <div id="gallery-screen">
        <h1>גלריית ה-Zoom האינסופי</h1>
        <p class="subtitle">בחרי נושא והתחילי לצלול פנימה בלי סוף!</p>

        <div class="cards-container">
            <div class="card" onclick="startExperience('time')">
                <div class="icon">⏳</div>
                <h3>מסע בזמן</h3>
                <p>צלילה מהעתיד הטכנולוגי, דרך ההווה, ועד לעבר הרחוק.</p>
            </div>

            <div class="card" onclick="startExperience('mystery')">
                <div class="icon">🕵️‍♂️</div>
                <h3>תעלומת השוד</h3>
                <p>מצאי את הרמזים המסתתרים עמוק בתוך התמונה!</p>
            </div>

            <div class="card" onclick="startExperience('micro')">
                <div class="icon">🌌</div>
                <h3>ממאקרו למיקרו</h3>
                <p>מהגלקסיות האינסופיות ועד לרמת האטום והדנ"א.</p>
            </div>
        </div>
    </div>

    <!-- מסך נגן הזום האינסופי -->
    <div id="viewer-screen">
        <div class="controls-bar">
            <button onclick="backToGallery()">🏠 חזרה לגלריה</button>
            <button id="auto-btn" onclick="toggleAutoZoom()">▶️ זום אוטומטי</button>
            <button id="sound-btn" onclick="toggleSound()">🔊 צלילי רקע</button>
        </div>

        <div id="viewport"></div>
        <div id="hint-box">💡 רמז לתעלומה יופיע כאן...</div>
    </div>

    <script>
        // בסיס הנתונים של התמונות/השכבות לכל נושא
        const themesData = {
            time: {
                layers: [
                    { title: "עיר עתידנית בשנת 3000", emoji: "🏙️🛸🤖", text: "הביטי בתוך שעון הטיטאניום...", bg: "linear-gradient(135deg, #0d1b2a, #1b263b)" },
                    { title: "מנורה בבית קפה מודרני (2026)", emoji: "☕🏙️📱", text: "זום לתמונה התלויה על הקיר..." },
                    { title: "שוק סוער בימי הביניים (1450)", emoji: "🏰⚔️🍎", text: "מה מופיע בספר של הכותב?" },
                    { title: "ציור מערות מהעידן הקדמון", emoji: "רת🛖🔥", text: "הביטי במרכז המדורות..." }
                ]
            },
            mystery: {
                hints: [
                    "חפשי את הזכוכית המגדלת של הבלש...",
                    "מה כתוב בפתק הסודי שמתחת למקלדת?",
                    "הביטי בהשתקפות של הכספת...",
                    "הקוד המוצפן מוביל חזרה!"
                ],
                layers: [
                    { title: "זירת הפשע - משרד הבלש", emoji: "🔎📜🕵️‍♂️", text: "זום אל הזכוכית המגדלת..." },
                    { title: "המכתב החשוד", emoji: "✉️🖋️🕯️", text: "זום אל החותם האדום..." },
                    { title: "הכספת הסודית", emoji: "🔐💎💰", text: "זום לתוך אישון השומר..." },
                    { title: "החשוד המרכזי!", emoji: "🎭🗝️❓", text: "האם זה הלולאה שתחשוף הכל?" }
                ]
            },
            micro: {
                layers: [
                    { title: "גלקסיית שביל החלב", emoji: "🌌🪐✨", text: "זום לכדור הארץ..." },
                    { title: "כדור הארץ והאוקיינוסים", emoji: "🌍🌊🐋", text: "זום לטיפת מים אחת..." },
                    { title: "מיקרוסקופ - תא חי", emoji: "🔬🦠🧬", text: "זום לתוך הדנ"א..." },
                    { title: "חלקיקי קווארק ואטומים", emoji: "⚛️💫💥", text: "ומכאן חזרה לכל היקום!" }
                ]
            }
        };

        // משתני מצב
        let currentTheme = null;
        let zoomLevel = 0;
        let isAutoZoom = false;
        let isSoundOn = false;
        let autoZoomInterval = null;
        let audioCtx = null;

        const galleryScreen = document.getElementById('gallery-screen');
        const viewerScreen = document.getElementById('viewer-screen');
        const viewport = document.getElementById('viewport');
        const hintBox = document.getElementById('hint-box');

        const layerElements = [];
        const numVisibleLayers = 3;

        // אתחול שכבות ה-DOM
        function initLayers() {
            viewport.innerHTML = '';
            layerElements.length = 0;
            for (let i = 0; i < numVisibleLayers; i++) {
                const el = document.createElement('div');
                el.className = 'layer';
                el.innerHTML = `
                    <div class="layer-title"></div>
                    <div class="layer-icon"></div>
                    <div class="layer-portal"></div>
                `;
                viewport.appendChild(el);
                layerElements.push(el);
            }
        }

        // כניסה לנושא נבחר
        function startExperience(themeKey) {
            currentTheme = themesData[themeKey];
            zoomLevel = 0;

            galleryScreen.style.opacity = '0';
            setTimeout(() => {
                galleryScreen.style.display = 'none';
                viewerScreen.style.display = 'block';
                setTimeout(() => viewerScreen.style.opacity = '1', 50);
            }, 500);

            if (currentTheme.hints) {
                hintBox.style.display = 'block';
            } else {
                hintBox.style.display = 'none';
            }

            initLayers();
            update();
        }

        // חזרה לגלריה
        function backToGallery() {
            if (isAutoZoom) toggleAutoZoom();
            viewerScreen.style.opacity = '0';
            setTimeout(() => {
                viewerScreen.style.display = 'none';
                galleryScreen.style.display = 'flex';
                setTimeout(() => galleryScreen.style.opacity = '1', 50);
            }, 500);
        }

        // עדכון הזום והצגת השכבות
        function update() {
            const layers = currentTheme.layers;
            const totalSteps = layers.length;

            const currentStepIndex = Math.floor(zoomLevel);
            const progress = zoomLevel - currentStepIndex;

            // עדכון רמז לתעלומה אם קיים
            if (currentTheme.hints) {
                const hintIndex = ((currentStepIndex % totalSteps) + totalSteps) % totalSteps;
                hintBox.innerText = "💡 רמז: " + currentTheme.hints[hintIndex];
            }

            for (let i = 0; i < numVisibleLayers; i++) {
                const step = currentStepIndex + i;
                const dataIndex = ((step % totalSteps) + totalSteps) % totalSteps;
                const data = layers[dataIndex];
                const el = layerElements[i];

                el.style.background = data.bg || "linear-gradient(135deg, #1f2937, #111827)";
                el.querySelector('.layer-title').innerText = data.title;
                el.querySelector('.layer-icon').innerText = data.emoji;
                el.querySelector('.layer-portal').innerText = data.text;

                const scale = Math.pow(5, progress - i);
                let opacity = 1;

                if (scale > 3) opacity = (5 - scale) / 2;
                else if (scale < 0.2) opacity = scale * 5;

                el.style.transform = `scale(${scale})`;
                el.style.opacity = Math.max(0, Math.min(1, opacity));
                el.style.zIndex = 100 - i;
            }
        }

        // מאזיני אירועים לגלגלת העכבר
        window.addEventListener('wheel', (e) => {
            if (viewerScreen.style.display === 'block') {
                e.preventDefault();
                zoomLevel += e.deltaY * 0.0012;
                if (zoomLevel < 0) zoomLevel = 0;
                update();
            }
        }, { passive: false });

        // זום אוטומטי
        function toggleAutoZoom() {
            const btn = document.getElementById('auto-btn');
            isAutoZoom = !isAutoZoom;

            if (isAutoZoom) {
                btn.classList.add('active');
                btn.innerText = "⏸️ השהה זום";
                autoZoomInterval = setInterval(() => {
                    zoomLevel += 0.01;
                    update();
                }, 20);
            } else {
                btn.classList.remove('active');
                btn.innerText = "▶️ זום אוטומטי";
                clearInterval(autoZoomInterval);
            }
        }

        // אפקט צלילי רקע אינטראקטיביים
        function toggleSound() {
            const btn = document.getElementById('sound-btn');
            isSoundOn = !isSoundOn;

            if (isSoundOn) {
                btn.classList.add('active');
                if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                playAmbientSound();
            } else {
                btn.classList.remove('active');
                if (audioCtx) audioCtx.suspend();
            }
        }

        function playAmbientSound() {
            if (!isSoundOn) return;
            audioCtx.resume();
            const osc = audioCtx.createOscillator();
            const gain = audioCtx.createGain();
            osc.type = 'sine';
            osc.frequency.setValueAtTime(120 + (zoomLevel % 5) * 40, audioCtx.currentTime);
            gain.gain.setValueAtTime(0.03, audioCtx.currentTime);
            osc.connect(gain);
            gain.connect(audioCtx.destination);
            osc.start();
            osc.stop(audioCtx.currentTime + 0.5);
            setTimeout(playAmbientSound, 600);
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>גלריית ה-Zoom האינסופי</title>
    <style>
        * {
            box-sizing: border-box;
            user-select: none;
        }
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #0d1117;
            color: #fff;
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        /* --- מסך התפריט הראשי (גלריה) --- */
        #gallery-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 200;
            background: radial-gradient(circle, #161b22, #0d1117);
            transition: opacity 0.5s ease;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #58a6ff;
        }

        p.subtitle {
            color: #8b949e;
            margin-bottom: 40px;
        }

        .cards-container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 1000px;
        }

        .card {
            background: #21262d;
            border: 1px solid #30363d;
            border-radius: 12px;
            width: 260px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.3s, border-color 0.3s;
        }

        .card:hover {
            transform: translateY(-8px);
            border-color: #58a6ff;
        }

        .card .icon {
            font-size: 50px;
            margin-bottom: 15px;
        }

        .card h3 {
            margin: 10px 0;
            color: #f0f6fc;
        }

        .card p {
            font-size: 0.85rem;
            color: #8b949e;
        }

        /* --- מסך הנגן --- */
        #viewer-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        #viewport {
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .layer {
            position: absolute;
            width: 650px;
            height: 650px;
            border-radius: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 40px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.6);
            will-change: transform, opacity;
        }

        .layer-title {
            font-size: 1.4rem;
            font-weight: bold;
            padding: 8px 20px;
            background: rgba(0,0,0,0.4);
            border-radius: 20px;
            backdrop-filter: blur(8px);
        }

        .layer-icon {
            font-size: 100px;
        }

        .layer-portal {
            width: 160px;
            height: 160px;
            border: 3px dashed rgba(255,255,255,0.7);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            text-align: center;
            padding: 10px;
            background: rgba(0,0,0,0.2);
        }

        /* סרגל הפיצ'רים והבקרות */
        .controls-bar {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(22, 27, 34, 0.85);
            backdrop-filter: blur(10px);
            border: 1px solid #30363d;
            padding: 10px 20px;
            border-radius: 40px;
            display: flex;
            gap: 15px;
            align-items: center;
            z-index: 100;
        }

        button {
            background: #21262d;
            color: #c9d1d9;
            border: 1px solid #30363d;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background 0.2s, color 0.2s;
        }

        button:hover {
            background: #30363d;
            color: #fff;
        }

        button.active {
            background: #238636;
            color: #fff;
            border-color: #2ea043;
        }

        /* פאנל רמזים לתעלומה */
        #hint-box {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(13, 17, 23, 0.9);
            border: 1px solid #58a6ff;
            color: #58a6ff;
            padding: 12px 25px;
            border-radius: 30px;
            font-size: 0.95rem;
            display: none;
            z-index: 100;
        }
    </style>
</head>
<body>

    <!-- מסך גלריית תמונות/נושאים -->
    <div id="gallery-screen">
        <h1>גלריית ה-Zoom האינסופי</h1>
        <p class="subtitle">בחרי נושא והתחילי לצלול פנימה בלי סוף!</p>

        <div class="cards-container">
            <div class="card" onclick="startExperience('time')">
                <div class="icon">⏳</div>
                <h3>מסע בזמן</h3>
                <p>צלילה מהעתיד הטכנולוגי, דרך ההווה, ועד לעבר הרחוק.</p>
            </div>

            <div class="card" onclick="startExperience('mystery')">
                <div class="icon">🕵️‍♂️</div>
                <h3>תעלומת השוד</h3>
                <p>מצאי את הרמזים המסתתרים עמוק בתוך התמונה!</p>
            </div>

            <div class="card" onclick="startExperience('micro')">
                <div class="icon">🌌</div>
                <h3>ממאקרו למיקרו</h3>
                <p>מהגלקסיות האינסופיות ועד לרמת האטום והדנ"א.</p>
            </div>
        </div>
    </div>

    <!-- מסך נגן הזום האינסופי -->
    <div id="viewer-screen">
        <div class="controls-bar">
            <button onclick="backToGallery()">🏠 חזרה לגלריה</button>
            <button id="auto-btn" onclick="toggleAutoZoom()">▶️ זום אוטומטי</button>
            <button id="sound-btn" onclick="toggleSound()">🔊 צלילי רקע</button>
        </div>

        <div id="viewport"></div>
        <div id="hint-box">💡 רמז לתעלומה יופיע כאן...</div>
    </div>

    <script>
        // בסיס הנתונים של התמונות/השכבות לכל נושא
        const themesData = {
            time: {
                layers: [
                    { title: "עיר עתידנית בשנת 3000", emoji: "🏙️🛸🤖", text: "הביטי בתוך שעון הטיטאניום...", bg: "linear-gradient(135deg, #0d1b2a, #1b263b)" },
                    { title: "מנורה בבית קפה מודרני (2026)", emoji: "☕🏙️📱", text: "זום לתמונה התלויה על הקיר..." },
                    { title: "שוק סוער בימי הביניים (1450)", emoji: "🏰⚔️🍎", text: "מה מופיע בספר של הכותב?" },
                    { title: "ציור מערות מהעידן הקדמון", emoji: "רת🛖🔥", text: "הביטי במרכז המדורות..." }
                ]
            },
            mystery: {
                hints: [
                    "חפשי את הזכוכית המגדלת של הבלש...",
                    "מה כתוב בפתק הסודי שמתחת למקלדת?",
                    "הביטי בהשתקפות של הכספת...",
                    "הקוד המוצפן מוביל חזרה!"
                ],
                layers: [
                    { title: "זירת הפשע - משרד הבלש", emoji: "🔎📜🕵️‍♂️", text: "זום אל הזכוכית המגדלת..." },
                    { title: "המכתב החשוד", emoji: "✉️🖋️🕯️", text: "זום אל החותם האדום..." },
                    { title: "הכספת הסודית", emoji: "🔐💎💰", text: "זום לתוך אישון השומר..." },
                    { title: "החשוד המרכזי!", emoji: "🎭🗝️❓", text: "האם זה הלולאה שתחשוף הכל?" }
                ]
            },
            micro: {
                layers: [
                    { title: "גלקסיית שביל החלב", emoji: "🌌🪐✨", text: "זום לכדור הארץ..." },
                    { title: "כדור הארץ והאוקיינוסים", emoji: "🌍🌊🐋", text: "זום לטיפת מים אחת..." },
                    { title: "מיקרוסקופ - תא חי", emoji: "🔬🦠🧬", text: "זום לתוך הדנ"א..." },
                    { title: "חלקיקי קווארק ואטומים", emoji: "⚛️💫💥", text: "ומכאן חזרה לכל היקום!" }
                ]
            }
        };

        // משתני מצב
        let currentTheme = null;
        let zoomLevel = 0;
        let isAutoZoom = false;
        let isSoundOn = false;
        let autoZoomInterval = null;
        let audioCtx = null;

        const galleryScreen = document.getElementById('gallery-screen');
        const viewerScreen = document.getElementById('viewer-screen');
        const viewport = document.getElementById('viewport');
        const hintBox = document.getElementById('hint-box');

        const layerElements = [];
        const numVisibleLayers = 3;

        // אתחול שכבות ה-DOM
        function initLayers() {
            viewport.innerHTML = '';
            layerElements.length = 0;
            for (let i = 0; i < numVisibleLayers; i++) {
                const el = document.createElement('div');
                el.className = 'layer';
                el.innerHTML = `
                    <div class="layer-title"></div>
                    <div class="layer-icon"></div>
                    <div class="layer-portal"></div>
                `;
                viewport.appendChild(el);
                layerElements.push(el);
            }
        }

        // כניסה לנושא נבחר
        function startExperience(themeKey) {
            currentTheme = themesData[themeKey];
            zoomLevel = 0;

            galleryScreen.style.opacity = '0';
            setTimeout(() => {
                galleryScreen.style.display = 'none';
                viewerScreen.style.display = 'block';
                setTimeout(() => viewerScreen.style.opacity = '1', 50);
            }, 500);

            if (currentTheme.hints) {
                hintBox.style.display = 'block';
            } else {
                hintBox.style.display = 'none';
            }

            initLayers();
            update();
        }

        // חזרה לגלריה
        function backToGallery() {
            if (isAutoZoom) toggleAutoZoom();
            viewerScreen.style.opacity = '0';
            setTimeout(() => {
                viewerScreen.style.display = 'none';
                galleryScreen.style.display = 'flex';
                setTimeout(() => galleryScreen.style.opacity = '1', 50);
            }, 500);
        }

        // עדכון הזום והצגת השכבות
        function update() {
            const layers = currentTheme.layers;
            const totalSteps = layers.length;

            const currentStepIndex = Math.floor(zoomLevel);
            const progress = zoomLevel - currentStepIndex;

            // עדכון רמז לתעלומה אם קיים
            if (currentTheme.hints) {
                const hintIndex = ((currentStepIndex % totalSteps) + totalSteps) % totalSteps;
                hintBox.innerText = "💡 רמז: " + currentTheme.hints[hintIndex];
            }

            for (let i = 0; i < numVisibleLayers; i++) {
                const step = currentStepIndex + i;
                const dataIndex = ((step % totalSteps) + totalSteps) % totalSteps;
                const data = layers[dataIndex];
                const el = layerElements[i];

                el.style.background = data.bg || "linear-gradient(135deg, #1f2937, #111827)";
                el.querySelector('.layer-title').innerText = data.title;
                el.querySelector('.layer-icon').innerText = data.emoji;
                el.querySelector('.layer-portal').innerText = data.text;

                const scale = Math.pow(5, progress - i);
                let opacity = 1;

                if (scale > 3) opacity = (5 - scale) / 2;
                else if (scale < 0.2) opacity = scale * 5;

                el.style.transform = `scale(${scale})`;
                el.style.opacity = Math.max(0, Math.min(1, opacity));
                el.style.zIndex = 100 - i;
            }
        }

        // מאזיני אירועים לגלגלת העכבר
        window.addEventListener('wheel', (e) => {
            if (viewerScreen.style.display === 'block') {
                e.preventDefault();
                zoomLevel += e.deltaY * 0.0012;
                if (zoomLevel < 0) zoomLevel = 0;
                update();
            }
        }, { passive: false });

        // זום אוטומטי
        function toggleAutoZoom() {
            const btn = document.getElementById('auto-btn');
            isAutoZoom = !isAutoZoom;

            if (isAutoZoom) {
                btn.classList.add('active');
                btn.innerText = "⏸️ השהה זום";
                autoZoomInterval = setInterval(() => {
                    zoomLevel += 0.01;
                    update();
                }, 20);
            } else {
                btn.classList.remove('active');
                btn.innerText = "▶️ זום אוטומטי";
                clearInterval(autoZoomInterval);
            }
        }

        // אפקט צלילי רקע אינטראקטיביים
        function toggleSound() {
            const btn = document.getElementById('sound-btn');
            isSoundOn = !isSoundOn;

            if (isSoundOn) {
                btn.classList.add('active');
                if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                playAmbientSound();
            } else {
                btn.classList.remove('active');
                if (audioCtx) audioCtx.suspend();
            }
        }

        function playAmbientSound() {
            if (!isSoundOn) return;
            audioCtx.resume();
            const osc = audioCtx.createOscillator();
            const gain = audioCtx.createGain();
            osc.type = 'sine';
            osc.frequency.setValueAtTime(120 + (zoomLevel % 5) * 40, audioCtx.currentTime);
            gain.gain.setValueAtTime(0.03, audioCtx.currentTime);
            osc.connect(gain);
            gain.connect(audioCtx.destination);
            osc.start();
            osc.stop(audioCtx.currentTime + 0.5);
            setTimeout(playAmbientSound, 600);
        }
    </script>
</body>
</html>
