Spaces:

Complide
/

mission-control

Running

App Files Files Community

aayu-outdooragi commited on 8 days ago

Commit

7cc4742

verified ·

1 Parent(s): fe161ad

Deploy mission-control diorama preview with loop+fullscreen autoplay

Browse files

Files changed (10) hide show

.gitattributes +5 -0
assets/flight.mp4 +3 -0
assets/scene_uc1.webp +3 -0
assets/scene_uc_eng.webp +3 -0
assets/scene_uc_gtm.webp +3 -0
assets/scene_uc_vendor.webp +3 -0
flight-timeline.js +23 -0
index.html +185 -18
scroll-world.js +422 -0
styles.css +507 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,8 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/flight.mp4 filter=lfs diff=lfs merge=lfs -text
+assets/scene_uc1.webp filter=lfs diff=lfs merge=lfs -text
+assets/scene_uc_eng.webp filter=lfs diff=lfs merge=lfs -text
+assets/scene_uc_gtm.webp filter=lfs diff=lfs merge=lfs -text
+assets/scene_uc_vendor.webp filter=lfs diff=lfs merge=lfs -text

assets/flight.mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:90a10c3d148611efbc849af3236d91461a84e42e880f99136d0cde2f0d53d7c0
+size 67489757

assets/scene_uc1.webp ADDED Viewed

Git LFS Details

SHA256: 73c1c3f068f8f53225d1e799c5bf20f103cc8c8ea90958f6beaf4eb607efe68e
Pointer size: 131 Bytes
Size of remote file: 161 kB

assets/scene_uc_eng.webp ADDED Viewed

Git LFS Details

SHA256: bc6bb9e054002644730416d23f072065be20a4f066a30af8851e3eb2d9d7b37e
Pointer size: 131 Bytes
Size of remote file: 289 kB

assets/scene_uc_gtm.webp ADDED Viewed

Git LFS Details

SHA256: 7cd06da734019a1f15d16553c983e9bb58a0fac132a7f5bdf30e77f451267fdd
Pointer size: 131 Bytes
Size of remote file: 209 kB

assets/scene_uc_vendor.webp ADDED Viewed

Git LFS Details

SHA256: c71333ba00b5030d08b3097cae2eb8d7c2aed8aa8e6980029266aae949e1dfd6
Pointer size: 131 Bytes
Size of remote file: 180 kB

flight-timeline.js ADDED Viewed

	@@ -0,0 +1,23 @@

+// Generated by tools/assemble_rotation.py — segment map of assets/flight.mp4
+window.FLIGHT_TIMELINE = [
+  {
+    "name": "uc1",
+    "start": 0.0,
+    "end": 10.062
+  },
+  {
+    "name": "uc_vendor",
+    "start": 9.062,
+    "end": 19.125
+  },
+  {
+    "name": "uc_eng",
+    "start": 18.125,
+    "end": 28.188
+  },
+  {
+    "name": "uc_gtm",
+    "start": 27.188,
+    "end": 37.25
+  }
+];

index.html CHANGED Viewed

@@ -1,19 +1,186 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ContextCrux — mission control, four use cases</title>
+  <meta name="description" content="Preview: the ContextCrux mission-control diorama — a real rotation flight through four use cases (PM, Founder vendor risk, Engineer, Go-to-Market)." />
+  <link rel="preload" as="image" href="assets/scene_uc1.webp" />
+  <link rel="stylesheet" href="styles.css" />
+  <style>
+    :root {
+      --bg: #0c0a06; --bg-soft: #17130d; --ink: #f4ede1; --ink-dim: #b3a690;
+      --green: #57c2a8; --green-deep: #0c8074; --amber: #d69a4a; --red: #e2685a;
+      --line: rgba(214, 154, 74, 0.22); --card-bg: rgba(13, 10, 6, 0.74);
+    }
+  </style>
+</head>
+<body>
+  <header class="nav">
+    <a class="nav__brand" href="#">
+      <svg class="nav__glyph" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.4" />
+        <circle cx="12" cy="12" r="6.5" stroke="currentColor" stroke-width="1.1" stroke-dasharray="2 2" />
+        <circle cx="12" cy="12" r="2.2" fill="currentColor" />
+      </svg>
+      <span>ContextCrux</span>
+      <span class="nav__tag">Mission Control — preview</span>
+    </a>
+    <nav class="nav__links">
+      <a href="#world-vendor">Vendor risk</a>
+      <a href="#world-eng">Engineer</a>
+      <a href="#world-gtm">Go-to-market</a>
+    </nav>
+    <a class="btn btn--primary nav__cta" href="#cta">Get ContextCrux</a>
+  </header>
+  <aside class="rail" aria-hidden="true">
+    <div class="rail__track"><div class="rail__fill" id="railFill"></div></div>
+    <ul class="rail__dots" id="railDots">
+      <li data-scene="0"><i></i><span>PM</span></li>
+      <li data-scene="1"><i></i><span>Founder</span></li>
+      <li data-scene="2"><i></i><span>Engineer</span></li>
+      <li data-scene="3"><i></i><span>GTM</span></li>
+    </ul>
+  </aside>
+  <button class="autoplay-toggle" id="autoplayToggle" type="button" aria-pressed="true" title="Auto-play is on — click to stop">
+    <svg class="autoplay-toggle__icon autoplay-toggle__icon--pause" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/>
+    </svg>
+    <svg class="autoplay-toggle__icon autoplay-toggle__icon--play" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M7 4.5v15l13-7.5-13-7.5Z"/>
+    </svg>
+    <span class="autoplay-toggle__label">Auto-play</span>
+  </button>
+  <div class="world" id="world">
+    <div class="world__stage" id="stage">
+      <div class="flight">
+        <video id="flightVideo" muted playsinline preload="auto"></video>
+        <div class="scene__vignette"></div>
+      </div>
+      <section class="scene" data-scene="0" style="--fx:50%; --fy:46%;">
+        <img src="assets/scene_uc1.webp" alt="Mission-control diorama: pilot facing the instrument stack's launch-checklist tier, Crux reading an amber AR overlay from the side console" draggable="false" />
+        <div class="scene__vignette"></div>
+      </section>
+      <section class="scene" data-scene="1" style="--fx:50%; --fy:46%;">
+        <img src="assets/scene_uc_vendor.webp" alt="Mission-control diorama: a clearance gauge swinging from sandbox toward full access, Crux flagging the mismatch" draggable="false" />
+        <div class="scene__vignette"></div>
+      </section>
+      <section class="scene" data-scene="2" style="--fx:50%; --fy:46%;">
+        <img src="assets/scene_uc_eng.webp" alt="Mission-control diorama: twin Tank A / Tank B gauges, one gone read-only while the display still shows both syncing" draggable="false" />
+        <div class="scene__vignette"></div>
+      </section>
+      <section class="scene" data-scene="3" style="--fx:50%; --fy:46%;">
+        <img src="assets/scene_uc_gtm.webp" alt="Mission-control diorama: a manifest gauge swinging straight to accepted, past the pending-review marker" draggable="false" />
+        <div class="scene__vignette"></div>
+      </section>
+      <div class="cards">
+        <article class="card card--hero" data-card="0">
+          <p class="card__kicker">ContextCrux · Product Manager</p>
+          <h1>The pilot only<br/>reads one tier.</h1>
+          <p class="card__body">
+            <strong>You:</strong> can you launch the pricing page Friday, no surprises,
+            keep the old page as backup? <strong>Chat agent:</strong> yes — keeps the
+            calm middle tier reading "on track." Underneath, the commitment tier
+            already points somewhere else.
+          </p>
+          <div class="card__actions">
+            <a class="btn btn--primary" href="#cta">Get ContextCrux</a>
+            <a class="btn btn--ghost" href="#details">See all four</a>
+          </div>
+          <p class="scroll-hint"><span class="scroll-hint__mouse"><span></span></span>Scroll to rotate through it</p>
+        </article>
+        <article class="card" data-card="1">
+          <p class="card__kicker">01 — Founder / PM · vendor risk</p>
+          <h2>The unique insight:<br/>third-party risk.</h2>
+          <p class="card__body">
+            A new AI coding vendor is meant to stay sandboxed until the checklist
+            clears. The clearance gauge has already swung past sandbox to full
+            write access — no SOC 2 on file, no DPA signed. Crux is the only one
+            reading that gauge.
+          </p>
+          <div class="chips">
+            <span class="chip chip--green">Sandbox only · FIRST SAID</span>
+            <span class="chip chip--yellow">Skip SOC 2 · hidden thinking</span>
+            <span class="chip chip--red">Full write access · action</span>
+          </div>
+        </article>
+        <article class="card" data-card="2">
+          <p class="card__kicker">02 — Software Engineer</p>
+          <h2>Twin tanks,<br/>one already dry.</h2>
+          <p class="card__body">
+            Dual-write both clusters, cut over once they agree for 24 hours — that
+            was the plan. Tank A is already read-only at midnight; the display
+            still reads "syncing." The drift reconciliation window never happened.
+          </p>
+          <div class="chips">
+            <span class="chip">Wait 24h · FIRST SAID</span>
+            <span class="chip">Cut over now, reconcile after · thinking</span>
+            <span class="chip">Already read-only · action</span>
+          </div>
+        </article>
+        <article class="card" data-card="3">
+          <p class="card__kicker">03 — Go-to-Market · deal desk</p>
+          <h2>Accepted, past the<br/>review that mattered.</h2>
+          <p class="card__body">
+            Procurement's redline was meant to be the last blocker, DPA routed to
+            the data-protection lead in parallel. The manifest gauge already reads
+            "accepted" — the retention-cap review that would have caught the
+            90-day default never ran.
+          </p>
+          <div class="chips">
+            <span class="chip">Both sign off · FIRST SAID</span>
+            <span class="chip">Skip data-protection review · thinking</span>
+            <span class="chip">Already accepted · action</span>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="world__anchors" aria-hidden="true">
+      <span id="world-pm"></span><span id="world-vendor"></span><span id="world-eng"></span><span id="world-gtm"></span>
+    </div>
+  </div>
+  <div class="world-spacer" id="worldSpacer"></div>
+  <main class="ground" id="details">
+    <section class="stats">
+      <div class="stat"><strong>4</strong><span>use cases, one set</span></div>
+      <div class="stat"><strong>3</strong><span>conflict types, every scene</span></div>
+      <div class="stat"><strong>1</strong><span>detector, never in the thread</span></div>
+      <div class="stat"><strong>37s</strong><span>real rotation footage, no chained hallucination</span></div>
+    </section>
+    <section class="cta" id="cta">
+      <h2>One set. Four use cases. Same detector.</h2>
+      <p>The instrument stack, the pilot, and Crux's side console stay the same across every scenario — only the gauge readouts and the story change.</p>
+      <div class="cta__actions">
+        <a class="btn btn--primary btn--lg" href="https://contextcrux.ai">Get ContextCrux</a>
+      </div>
+    </section>
+    <footer class="footer">
+      <span>© 2026 ContextCrux — preview build, mission-control diorama concept.</span>
+    </footer>
+  </main>
+  <script src="flight-timeline.js"></script>
+  <script src="scroll-world.js"></script>
+</body>
 </html>

scroll-world.js ADDED Viewed

	@@ -0,0 +1,422 @@

+/*
+ * Complide Enterprise — scroll-world engine.
+ *
+ * True scroll-world technique: one continuous generated camera-flight video
+ * (5 Veo dive-in clips joined by first/last-frame connector clips, so every
+ * seam is frame-identical — no cuts). Scroll position only drives time: the
+ * video is encoded scrub-friendly and its currentTime is scrubbed by a
+ * lerped scroll progress.
+ *
+ * If the flight video is missing or fails, the engine falls back to the
+ * still-image mode: exponential zoom-through + crossfade connectors built
+ * from the same diorama stills.
+ */
+(function () {
+  "use strict";
+  var scenes = Array.prototype.slice.call(document.querySelectorAll(".scene"));
+  var cards = Array.prototype.slice.call(document.querySelectorAll(".card"));
+  var dots = Array.prototype.slice.call(document.querySelectorAll(".rail__dots li"));
+  var rail = document.querySelector(".rail");
+  var railFill = document.getElementById("railFill");
+  var spacer = document.getElementById("worldSpacer");
+  var world = document.getElementById("world");
+  var video = document.getElementById("flightVideo");
+  var N = scenes.length;
+  // Wider than the enterprise page's 2.2: each scene here is a rotation, not
+  // a push-in, so it needs more scroll room to read as a deliberate orbit
+  // rather than a blur, and this preview targets at least 67s of natural-
+  // paced scrolling across the four dioramas (67s at ~0.28 viewport-heights/
+  // sec, the same pace autoplay below uses, needs ~18.8vh; 4.8/scene clears
+  // that with margin).
+  var SCENE_VH = 4.8;
+  var TAIL_VH = 0.4;       // extra runway after the last scene
+  // Segment layout of flight.mp4 (written by tools/assemble_flight.sh).
+  // Dives carry the copy cards; connectors are the in-between flights.
+  var TIMELINE = window.FLIGHT_TIMELINE || null;
+  var reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  var LERP = reducedMotion ? 1 : 0.1;
+  var scrollLen = 1;
+  var target = 0;
+  var current = 0;
+  var videoMode = false;
+  var duration = 0;
+  // A scrollTo we issue ourselves (autoplay, or a nav jump) must not be read
+  // back as the reader taking control — set right before the call, cleared by
+  // the very next 'scroll' event it produces.
+  var programmaticScroll = false;
+  scenes.forEach(function (s, i) { s.style.zIndex = String(N - i); });
+  /* ── shared helpers ─────────────────────────────────────────────────── */
+  var clamp01 = function (v) { return Math.min(1, Math.max(0, v)); };
+  var easeInCubic = function (t) { return t * t * t; };
+  var easeOutCubic = function (t) { return 1 - Math.pow(1 - t, 3); };
+  function layout() {
+    scrollLen = Math.max(1, (N * SCENE_VH + TAIL_VH) * window.innerHeight);
+    spacer.style.height = scrollLen + "px";
+    readScroll();
+    current = target;
+    render(current);
+  }
+  function readScroll() {
+    var max = Math.max(1, spacer.offsetTop + scrollLen - window.innerHeight);
+    target = clamp01(window.scrollY / max);
+  }
+  /* ── video mode ─────────────────────────────────────────────────────── */
+  // Maps global progress → [segment index, local t within segment].
+  // Scroll is distributed over segments proportionally to their duration.
+  function segmentAt(p) {
+    var t = p * duration;
+    for (var i = 0; i < TIMELINE.length; i++) {
+      if (t <= TIMELINE[i].end || i === TIMELINE.length - 1) {
+        var seg = TIMELINE[i];
+        return { seg: seg, i: i, local: clamp01((t - seg.start) / (seg.end - seg.start)) };
+      }
+    }
+  }
+  function renderVideo(p) {
+    var t = p * duration;
+    // Never seek to the exact end (some browsers show a black frame there).
+    if (video.readyState >= 1) video.currentTime = Math.min(t, duration - 0.05);
+    // This timeline is one segment per scene (a rotation loop crossfaded
+    // straight into the next one) — no separate dive/connector split, so the
+    // segment index *is* the scene index, unlike the original dive+connector
+    // pipeline's timeline.
+    var pos = segmentAt(p);
+    var sceneIdx = pos.i;
+    // In after 8%, out by 85% — the last 15% is where this segment is
+    // crossfading into the next one, so the card should be gone before the
+    // next diorama's card fades in.
+    for (var i = 0; i < N; i++) {
+      var card = cards[i];
+      var o = 0, y = 30;
+      if (pos.i === i) {
+        var lt = pos.local;
+        var fadeIn = i === 0 && p < 0.002 ? 1 : clamp01(lt / 0.08);
+        var fadeOut = 1 - clamp01((lt - 0.85) / 0.15);
+        o = Math.min(fadeIn, fadeOut);
+        y = 30 * (1 - fadeIn) - 60 * (1 - fadeOut);
+      }
+      card.style.opacity = o.toFixed(4);
+      card.style.transform = "translate(0, calc(-50% + " + y.toFixed(1) + "px))";
+      card.classList.toggle("is-live", o > 0.5);
+    }
+    updateChrome(p, sceneIdx);
+  }
+  /* ── still-image fallback mode ──────────────────────────────────────── */
+  var ZOOM_THROUGH = 3.1;
+  var UNDER = 0.68;
+  var CF = 0.22;
+  function renderStills(p) {
+    var seg = 1 / N;
+    for (var i = 0; i < N; i++) {
+      var scene = scenes[i];
+      var img = scene.firstElementChild;
+      var isLast = i === N - 1;
+      var t = (p - i * seg) / seg;
+      if (t <= -CF || t >= 1 + (isLast ? 1 : 0.0001)) {
+        if (scene.style.opacity !== "0") scene.style.opacity = "0";
+        continue;
+      }
+      var scale, opacity, blur = 0;
+      if (t < 0) {
+        var k = easeOutCubic(clamp01((t + CF) / CF));
+        scale = UNDER + (1 - UNDER) * k;
+        opacity = k;
+      } else {
+        var tt = clamp01(isLast ? Math.min(t, 0.72) : t);
+        scale = Math.exp(Math.log(ZOOM_THROUGH) * easeInCubic(tt));
+        if (!isLast && t > 1 - CF) {
+          var k2 = clamp01((t - (1 - CF)) / CF);
+          opacity = 1 - k2;
+          blur = 6 * k2;
+        } else {
+          opacity = 1;
+        }
+      }
+      scene.style.opacity = opacity.toFixed(4);
+      img.style.transform = "scale(" + scale.toFixed(5) + ")";
+      scene.style.filter = blur > 0.05 ? "blur(" + blur.toFixed(2) + "px)" : "none";
+    }
+    for (var j = 0; j < N; j++) {
+      var card = cards[j];
+      var t2 = (p - j * seg) / seg;
+      var o = 0, y = 30;
+      if (t2 >= -0.02 && t2 <= 0.86) {
+        var fadeIn = j === 0 && p < 0.002 ? 1 : clamp01(t2 / 0.04);
+        var fadeOut = 1 - clamp01((t2 - 0.72) / 0.14);
+        o = Math.min(fadeIn, fadeOut);
+        y = 30 * (1 - fadeIn) - 60 * (1 - fadeOut);
+      }
+      card.style.opacity = o.toFixed(4);
+      card.style.transform = "translate(0, calc(-50% + " + y.toFixed(1) + "px))";
+      card.classList.toggle("is-live", o > 0.5);
+    }
+    updateChrome(p, Math.min(N - 1, Math.floor(p * N)));
+  }
+  /* ── shared chrome (rail, visibility) ───────────────────────────────── */
+  function updateChrome(p, sceneIdx) {
+    railFill.style.height = (p * 100).toFixed(2) + "%";
+    dots.forEach(function (d, i) { d.classList.toggle("is-active", i === sceneIdx); });
+    rail.classList.toggle("is-visible", p > 0.01 && p < 0.995);
+    world.style.visibility = p >= 1 && window.scrollY > scrollLen ? "hidden" : "visible";
+  }
+  function render(p) {
+    if (videoMode) renderVideo(p); else renderStills(p);
+  }
+  function tick() {
+    current += (target - current) * LERP;
+    if (Math.abs(target - current) < 0.00005) current = target;
+    render(current);
+    requestAnimationFrame(tick);
+  }
+  /* ── boot: use the flight video when available ──────────────────────── */
+  function enableVideoMode() {
+    duration = TIMELINE[TIMELINE.length - 1].end;
+    videoMode = true;
+    world.classList.add("world--video");
+    render(current);
+  }
+  if (video && TIMELINE) {
+    // Big/hi-dpi screens get the 1440p build when the host serves it;
+    // on a 404 (e.g. running from the repo, which only ships 1080p) the
+    // engine drops down to flight.mp4, then to the stills fallback.
+    var sources = ["assets/flight.mp4"];
+    var effectiveWidth = window.screen.width * (window.devicePixelRatio || 1);
+    if (effectiveWidth >= 2200) sources.unshift("assets/flight_1440.mp4");
+    var tryNext = function () {
+      var src = sources.shift();
+      if (!src) { videoMode = false; return; }
+      video.src = src;
+      video.load();
+    };
+    video.addEventListener("loadedmetadata", enableVideoMode);
+    video.addEventListener("error", tryNext);
+    tryNext();
+  }
+  /* ── nav deep-links into the flight ─────────────────────────────────── */
+  var jumpMap = { "#world-vendor": 1, "#world-eng": 2, "#world-gtm": 3 };
+  document.querySelectorAll('a[href^="#world-"]').forEach(function (a) {
+    a.addEventListener("click", function (e) {
+      var idx = jumpMap[a.getAttribute("href")];
+      if (idx === undefined) return;
+      e.preventDefault();
+      var frac;
+      if (videoMode) {
+        // One segment per scene here — aim at 20% into it (past the fade-in).
+        var seg = TIMELINE[idx];
+        frac = (seg.start + (seg.end - seg.start) * 0.2) / duration;
+      } else {
+        frac = idx / N + 0.35 / N;
+      }
+      programmaticScroll = true;
+      window.scrollTo({ top: frac * scrollLen, behavior: reducedMotion ? "auto" : "smooth" });
+    });
+  });
+  /* ── auto-play ─────────────────────────────────────────────────────────
+   * On load, arm a 7-second idle timer; if the reader hasn't touched the
+   * page by then, the flight scrolls itself at a natural reading pace. Any
+   * real scroll input — wheel, touch, keys, or dragging the scrollbar —
+   * cancels it immediately and switches the toggle off, so autoplay never
+   * fights a reader who has taken the wheel. The toggle both cancels a
+   * pending auto-start and stops or restarts it once running.
+   */
+  var AUTOPLAY_IDLE_MS = 7000;
+  var AUTOPLAY_VH_PER_SEC = 0.28;   // ~3.6s of scroll per viewport height
+  var autoplayToggle = document.getElementById("autoplayToggle");
+  var autoplayOn = false;       // the toggle's on/off state — true through both
+                                 // the idle countdown and the active scroll
+  var autoplayActive = false;   // animating scroll right now, this instant
+  var autoplayTimer = null;     // pending 7s idle timeout
+  var autoplayLastTs = null;
+  function updateAutoplayUI() {
+    if (!autoplayToggle) return;
+    autoplayToggle.classList.toggle("is-playing", autoplayOn);
+    autoplayToggle.setAttribute("aria-pressed", autoplayOn ? "true" : "false");
+    autoplayToggle.title = autoplayOn
+      ? "Auto-play is on — click to stop"
+      : "Auto-play is off — click to fly through";
+  }
+  function stopScrolling() {
+    autoplayActive = false;
+    autoplayLastTs = null;
+  }
+  function turnAutoplayOff() {
+    stopScrolling();
+    if (autoplayTimer) { clearTimeout(autoplayTimer); autoplayTimer = null; }
+    autoplayOn = false;
+    updateAutoplayUI();
+    // autoplayOn is already false here, so the fullscreenchange handler
+    // below won't loop back into this function when the exit completes.
+    exitFullscreenIfNeeded();
+  }
+  function armAutoplayTimer() {
+    if (autoplayTimer) clearTimeout(autoplayTimer);
+    autoplayTimer = setTimeout(function () {
+      autoplayTimer = null;
+      if (autoplayOn && !autoplayActive) beginScrolling();
+    }, AUTOPLAY_IDLE_MS);
+  }
+  function autoplayStep(ts) {
+    if (!autoplayActive) { autoplayLastTs = null; return; }
+    if (autoplayLastTs === null) autoplayLastTs = ts;
+    var dt = (ts - autoplayLastTs) / 1000;
+    autoplayLastTs = ts;
+    var max = Math.max(1, spacer.offsetTop + scrollLen - window.innerHeight);
+    var next = window.scrollY + AUTOPLAY_VH_PER_SEC * window.innerHeight * dt;
+    // Reached the end of the flight: loop back to the top and keep playing,
+    // rather than stopping — autoplay is meant to run as a continuous demo
+    // reel, not a one-shot.
+    if (next >= max - 0.5) {
+      programmaticScroll = true;
+      window.scrollTo(0, 0);
+      autoplayLastTs = null;   // restart the dt clock cleanly after the jump
+      requestAnimationFrame(autoplayStep);
+      return;
+    }
+    programmaticScroll = true;
+    window.scrollTo(0, next);
+    requestAnimationFrame(autoplayStep);
+  }
+  function enterFullscreen() {
+    var el = document.documentElement;
+    if (document.fullscreenElement || !el.requestFullscreen) return;
+    // Succeeds when this call chain started from a real click (the toggle);
+    // browsers silently reject it when the 7s idle timer fires with no
+    // gesture behind it at all — nothing to catch that isn't already a
+    // no-op for the reader.
+    var p = el.requestFullscreen();
+    if (p && p.catch) p.catch(function () {});
+  }
+  function exitFullscreenIfNeeded() {
+    if (document.fullscreenElement && document.exitFullscreen) {
+      document.exitFullscreen().catch(function () {});
+    }
+  }
+  // If the reader exits fullscreen themselves (Esc, or the browser's own
+  // exit control), treat it the same as taking the wheel: stop autoplay
+  // rather than leaving it silently running behind the browser chrome again.
+  document.addEventListener("fullscreenchange", function () {
+    if (!document.fullscreenElement && autoplayOn) turnAutoplayOff();
+  });
+  function beginScrolling() {
+    if (reducedMotion) return;
+    // Already past the flight (deep in the regular page content below it) —
+    // nothing left to play, and jumping backward to the boundary would just
+    // be a surprising side effect of a stray click.
+    var max = Math.max(1, spacer.offsetTop + scrollLen - window.innerHeight);
+    if (window.scrollY >= max - 0.5) return;
+    enterFullscreen();
+    autoplayActive = true;
+    requestAnimationFrame(autoplayStep);
+  }
+  if (autoplayToggle && !reducedMotion) {
+    autoplayOn = true;
+    autoplayToggle.classList.add("is-ready");
+    updateAutoplayUI();
+    armAutoplayTimer();
+    autoplayToggle.addEventListener("click", function () {
+      if (autoplayOn) {
+        turnAutoplayOff();
+      } else {
+        autoplayOn = true;
+        updateAutoplayUI();
+        beginScrolling();   // explicit request: start now, no delay
+      }
+    });
+  }
+  // Autoplay scrolls every animation frame, so a "flag it just before our own
+  // scrollTo, clear it on the next scroll event" test cannot tell a real wheel
+  // input apart from our own once it is running — the flag is essentially
+  // always true by the time any scroll event fires. So real input is caught
+  // directly instead: wheel, touch and the scroll-relevant keys all mean the
+  // reader took the wheel, immediately, regardless of what autoplay is doing.
+  // Interactive targets (the toggle itself, nav links) are excluded so
+  // operating them is never misread as "stop autoplay".
+  function isInteractive(el) {
+    return !!(el && el.closest && el.closest("a, button, input, select, textarea"));
+  }
+  function onUserScrollIntent(e) {
+    if (isInteractive(e && e.target)) return;
+    if (autoplayOn) turnAutoplayOff();
+  }
+  var SCROLL_KEYS = ["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "];
+  window.addEventListener("wheel", onUserScrollIntent, { passive: true });
+  window.addEventListener("touchstart", onUserScrollIntent, { passive: true });
+  window.addEventListener("keydown", function (e) {
+    if (SCROLL_KEYS.indexOf(e.key) !== -1) onUserScrollIntent(e);
+  });
+  // Backup path for sources that trigger neither (chiefly dragging the
+  // scrollbar thumb): the flag technique still works here specifically
+  // because it only has to catch scrolls that happen while autoplay is NOT
+  // itself mid-step, i.e. during the idle countdown, when there is no
+  // competing programmatic scroll to race against.
+  function onScroll() {
+    readScroll();
+    if (programmaticScroll) {
+      programmaticScroll = false;
+    } else if (autoplayOn && !autoplayActive) {
+      turnAutoplayOff();
+    }
+  }
+  window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("resize", layout);
+  layout();
+  requestAnimationFrame(tick);
+})();

styles.css ADDED Viewed

	@@ -0,0 +1,507 @@

+/* ── Complide Enterprise · scroll-world landing ─────────────────────────── */
+:root {
+  --bg: #04070f;
+  --bg-soft: #0a1120;
+  --ink: #eaf2ff;
+  --ink-dim: #93a3bd;
+  --green: #2fe58c;
+  --green-deep: #0f7a4a;
+  --amber: #ffc24b;
+  --red: #ff5d5d;
+  --line: rgba(147, 163, 189, 0.18);
+  --card-bg: rgba(6, 11, 22, 0.72);
+  --radius: 18px;
+  --font: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html { scroll-behavior: auto; }
+body {
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font);
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+}
+img { user-select: none; }
+/* ── Nav ─────────────────────────────────────────────────────────────────── */
+.nav {
+  position: fixed;
+  inset: 0 0 auto 0;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  padding: 18px 32px;
+  background: linear-gradient(180deg, rgba(4, 7, 15, 0.85), rgba(4, 7, 15, 0));
+}
+.nav__brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--ink);
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 17px;
+  letter-spacing: 0.01em;
+}
+.nav__glyph { width: 22px; height: 22px; color: var(--green); }
+.nav__tag {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--green);
+  border: 1px solid rgba(47, 229, 140, 0.4);
+  border-radius: 99px;
+  padding: 3px 9px;
+}
+.nav__links {
+  display: flex;
+  gap: 26px;
+  margin-left: auto;
+}
+.nav__links a {
+  color: var(--ink-dim);
+  text-decoration: none;
+  font-size: 14px;
+  transition: color 0.2s;
+}
+.nav__links a:hover { color: var(--ink); }
+/* ── Buttons ─────────────────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 99px;
+  padding: 11px 22px;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+.btn--primary {
+  background: var(--green);
+  color: #03130b;
+  box-shadow: 0 0 24px rgba(47, 229, 140, 0.35);
+}
+.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 36px rgba(47, 229, 140, 0.5); }
+.btn--ghost {
+  color: var(--ink);
+  border: 1px solid var(--line);
+  background: rgba(10, 17, 32, 0.5);
+}
+.btn--ghost:hover { border-color: rgba(147, 163, 189, 0.45); }
+.btn--lg { padding: 15px 30px; font-size: 16px; }
+/* ── Progress rail ───────────────────────────────────────────────────────── */
+.rail {
+  position: fixed;
+  left: 28px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 55;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  opacity: 0;
+  transition: opacity 0.4s;
+  pointer-events: none;
+}
+.rail.is-visible { opacity: 1; }
+.rail__track {
+  width: 2px;
+  height: 220px;
+  background: rgba(147, 163, 189, 0.2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.rail__fill {
+  width: 100%;
+  height: 0%;
+  background: linear-gradient(180deg, var(--green), var(--green-deep));
+}
+.rail__dots {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 220px;
+}
+.rail__dots li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ink-dim);
+}
+.rail__dots i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(147, 163, 189, 0.4);
+  transition: background 0.3s, box-shadow 0.3s;
+}
+.rail__dots li.is-active i {
+  background: var(--green);
+  box-shadow: 0 0 10px rgba(47, 229, 140, 0.8);
+}
+.rail__dots li.is-active { color: var(--ink); }
+.rail__dots span { opacity: 0; transform: translateX(-4px); transition: opacity 0.3s, transform 0.3s; }
+.rail__dots li.is-active span { opacity: 1; transform: translateX(0); }
+/* ── Auto-play toggle ────────────────────────────────────────────────────── */
+.autoplay-toggle {
+  position: fixed;
+  left: 28px;
+  bottom: 28px;
+  z-index: 55;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 99px;
+  background: rgba(6, 11, 22, 0.6);
+  backdrop-filter: blur(6px);
+  color: var(--ink-dim);
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.4s, transform 0.4s, color 0.2s, border-color 0.2s;
+}
+.autoplay-toggle.is-ready { opacity: 1; transform: translateY(0); }
+.autoplay-toggle:hover { color: var(--ink); border-color: rgba(147, 163, 189, 0.4); }
+.autoplay-toggle__icon { width: 13px; height: 13px; flex-shrink: 0; }
+.autoplay-toggle__icon--play { display: none; }
+.autoplay-toggle.is-playing .autoplay-toggle__icon--pause { display: block; color: var(--green); }
+.autoplay-toggle.is-playing .autoplay-toggle__icon--play { display: none; }
+.autoplay-toggle:not(.is-playing) .autoplay-toggle__icon--pause { display: none; }
+.autoplay-toggle:not(.is-playing) .autoplay-toggle__icon--play { display: block; }
+/* ── World stage ─────────────────────────────────────────────────────────── */
+.world {
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+}
+.world__stage { position: absolute; inset: 0; }
+.world__anchors span { position: absolute; }
+.world-spacer {
+  /* height set by JS: scenes × per-scene scroll length */
+  height: 1100vh;
+  pointer-events: none;
+}
+.flight {
+  position: absolute;
+  inset: 0;
+  z-index: 12;
+  display: none;
+}
+.flight video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.world--video .flight { display: block; }
+.world--video .scene { display: none; }
+.scene {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  will-change: transform, opacity, filter;
+}
+.scene img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform-origin: var(--fx, 50%) var(--fy, 50%);
+  will-change: transform;
+}
+.scene__vignette {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(4, 7, 15, 0.55) 100%),
+    linear-gradient(180deg, rgba(4, 7, 15, 0.35) 0%, transparent 22%, transparent 72%, rgba(4, 7, 15, 0.5) 100%);
+  pointer-events: none;
+}
+/* ── Copy cards ──────────────────────────────────────────────────────────── */
+.cards { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
+.card {
+  position: absolute;
+  max-width: 480px;
+  padding: 34px 38px;
+  border-radius: var(--radius);
+  background: var(--card-bg);
+  border: 1px solid var(--line);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  opacity: 0;
+  will-change: transform, opacity;
+  pointer-events: none;
+}
+.card.is-live { pointer-events: auto; }
+/* All four cards sit on the right: the rail (fixed at left:28px, ~100px
+   wide with its labels) collides with any left-aligned card at this
+   viewport width, which the original alternating left/right layout — built
+   for 5 scenes, not this page's 4 — didn't clear. */
+.card[data-card="0"] { left: 7vw;  top: 50%; }
+.card[data-card="1"] { right: 6vw; top: 50%; left: auto; }
+.card[data-card="2"] { right: 6vw; top: 50%; left: auto; }
+.card[data-card="3"] { right: 6vw; top: 50%; left: auto; }
+.card__kicker {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--green);
+  margin-bottom: 14px;
+}
+.card h1 {
+  font-size: clamp(38px, 4.6vw, 60px);
+  line-height: 1.04;
+  letter-spacing: -0.02em;
+  margin-bottom: 18px;
+}
+.card h2 {
+  font-size: clamp(30px, 3.4vw, 44px);
+  line-height: 1.08;
+  letter-spacing: -0.02em;
+  margin-bottom: 16px;
+}
+.card__body {
+  color: var(--ink-dim);
+  font-size: 16px;
+  line-height: 1.6;
+  margin-bottom: 22px;
+}
+.card__actions { display: flex; gap: 12px; flex-wrap: wrap; }
+.card--hero { background: rgba(6, 11, 22, 0.6); }
+/* ── Chips ───────────────────────────────────────────────────────────────── */
+.chips { display: flex; gap: 8px; flex-wrap: wrap; }
+.chip {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  padding: 6px 12px;
+  border-radius: 99px;
+  border: 1px solid var(--line);
+  color: var(--ink-dim);
+  background: rgba(10, 17, 32, 0.55);
+}
+.chip--green  { color: var(--green); border-color: rgba(47, 229, 140, 0.45); }
+.chip--yellow { color: var(--amber); border-color: rgba(255, 194, 75, 0.45); }
+.chip--red    { color: var(--red);   border-color: rgba(255, 93, 93, 0.45); }
+/* ── Scroll hint ─────────────────────────────────────────────────────────── */
+.scroll-hint {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 26px;
+  color: var(--ink-dim);
+  font-size: 12px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.scroll-hint__mouse {
+  width: 20px;
+  height: 32px;
+  border: 1.5px solid var(--ink-dim);
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  padding-top: 6px;
+}
+.scroll-hint__mouse span {
+  width: 3px;
+  height: 7px;
+  border-radius: 2px;
+  background: var(--green);
+  animation: wheel 1.6s ease-in-out infinite;
+}
+@keyframes wheel {
+  0%   { transform: translateY(0);   opacity: 1; }
+  70%  { transform: translateY(9px); opacity: 0; }
+  100% { transform: translateY(0);   opacity: 0; }
+}
+/* ── Ground content ──────────────────────────────────────────────────────── */
+.ground {
+  position: relative;
+  z-index: 10;
+  background: linear-gradient(180deg, transparent, var(--bg) 6%, var(--bg));
+  padding: 120px 8vw 0;
+}
+.ground__title {
+  font-size: clamp(30px, 3.6vw, 48px);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  text-align: center;
+  margin-bottom: 56px;
+}
+.stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 18px;
+  max-width: 1080px;
+  margin: 0 auto 130px;
+}
+.stat {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--bg-soft);
+  padding: 28px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.stat strong { font-size: 34px; letter-spacing: -0.02em; color: var(--green); }
+.stat span { color: var(--ink-dim); font-size: 14px; }
+.features { max-width: 1080px; margin: 0 auto 140px; }
+.features__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
+}
+.feature {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--bg-soft);
+  padding: 28px 26px;
+  transition: border-color 0.2s, transform 0.2s;
+}
+.feature:hover { border-color: rgba(47, 229, 140, 0.4); transform: translateY(-2px); }
+.feature h3 { font-size: 17px; margin-bottom: 10px; }
+.feature p { color: var(--ink-dim); font-size: 14px; line-height: 1.6; }
+.cta {
+  text-align: center;
+  padding: 90px 0 110px;
+  border-top: 1px solid var(--line);
+}
+.cta h2 {
+  font-size: clamp(32px, 4vw, 54px);
+  letter-spacing: -0.02em;
+  margin-bottom: 16px;
+}
+.cta p { color: var(--ink-dim); font-size: 17px; margin-bottom: 34px; }
+.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
+.footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 26px 0 34px;
+  border-top: 1px solid var(--line);
+  color: var(--ink-dim);
+  font-size: 13px;
+}
+/* ── Responsive ──────────────────────────────────────────────────────────── */
+@media (max-width: 900px) {
+  .nav__links { display: none; }
+  .rail { display: none; }
+  .autoplay-toggle { display: none; }
+  .card { max-width: min(88vw, 440px); padding: 26px 26px; }
+  .card[data-card] { left: 6vw; right: auto; }
+  .stats { grid-template-columns: repeat(2, 1fr); }
+  .features__grid { grid-template-columns: 1fr; }
+}
+/* ── Reduced motion: static stacked fallback ─────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .scroll-hint__mouse span { animation: none; }
+  .autoplay-toggle { display: none; }
+}