intro

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Cyberpunk Ferrari Showroom</title>
  <style>
    body {
      margin: 0;
      background: radial-gradient(circle at center, #0f0c29, #302b63, #24243e);
      font-family: 'Orbitron', sans-serif;
      color: #fff;
      overflow-x: hidden;
    }

    .scene-container {
      height: 100vh;
      position: relative;
      overflow: hidden;
    }

    .iframe-wrapper {
      width: 100%;
      height: 100vh;
      transition: transform 2s ease;
    }

    .catalog-screen {
      position: absolute;
      top: 55%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      padding: 20px;
      background: rgba(0, 0, 0, 0.7);
      border: 2px solid #0ff;
      box-shadow: 0 0 15px #0ff;
      z-index: 10;
      display: none;
    }

    .catalog-screen h2 {
      margin-top: 0;
      text-align: center;
      color: #0ff;
    }

    .product {
      margin: 10px 0;
      padding: 10px;
      background: #111;
      border: 1px solid #0ff;
      cursor: pointer;
      text-align: center;
    }

    .scroll-area {
      height: 200vh;
    }
  </style>
</head>
<body>

  <div class="scene-container" id="scene">
    <div class="iframe-wrapper" id="iframeWrapper">
      <iframe title="Ferrari 250 GT California" frameborder="0"
        allowfullscreen
        mozallowfullscreen="true"
        webkitallowfullscreen="true"
        allow="autoplay; fullscreen; xr-spatial-tracking"
        xr-spatial-tracking execution-while-out-of-viewport
        execution-while-not-rendered web-share
        width="100%" height="100%"
        src="https://sketchfab.com/models/81d3f595620f4a999e7970606019697f/embed">
      </iframe>
    </div>

    <div class="catalog-screen" id="catalogScreen">
      <h2>Neon Catalog</h2>
      <div class="product">🕶 Cyber Shades</div>
      <div class="product">🎧 Glitch Headphones</div>
      <div class="product">⌚ Neon Chrono Watch</div>
      <div class="product">🧥 Pixel Jacket</div>
      <div class="product">💻 Quantum Laptop</div>
    </div>
  </div>

  <div class="scroll-area"></div>

  <script>
    const iframeWrapper = document.getElementById("iframeWrapper");
    const catalogScreen = document.getElementById("catalogScreen");

    window.addEventListener("scroll", () => {
      const scrollTop = window.scrollY;
      const triggerPoint = window.innerHeight;

      if (scrollTop > triggerPoint / 2) {
        iframeWrapper.style.transform = "scale(1.5)";
        catalogScreen.style.display = "block";
      } else {
        iframeWrapper.style.transform = "scale(1)";
        catalogScreen.style.display = "none";
      }
    });
  </script>

</body>
</html>