Refine palette and interaction motion

index.html

@@ -10,14 +10,14 @@
   <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,600&amp;family=DM+Mono:wght@300;400;500&amp;display=swap" rel="stylesheet">
   <style>
     :root {
-      --paper: #efede5;
-      --paper-deep: #dfdcd1;
-      --ink: #161613;
-      --muted: #727066;
-      --signal: #ef4c2f;
-      --signal-soft: #ffc4ad;
-      --line: rgba(22, 22, 19, .22);
-      --line-strong: rgba(22, 22, 19, .72);
+      --paper: #071116;
+      --paper-deep: #0d1a21;
+      --ink: #edf7f8;
+      --muted: #7e969e;
+      --signal: #53d9f5;
+      --signal-soft: #b7f2ff;
+      --line: rgba(157, 199, 210, .16);
+      --line-strong: rgba(174, 216, 226, .38);
       --serif: "Bodoni Moda", "Iowan Old Style", "Times New Roman", serif;
       --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
     }
@@ -28,7 +28,8 @@
       margin: 0;
       color: var(--ink);
       background:
-        linear-gradient(90deg, transparent calc(50% - .5px), rgba(22,22,19,.05) 50%, transparent calc(50% + .5px)),
+        radial-gradient(circle at 50% -10%, rgba(42, 105, 121, .18), transparent 38%),
+        linear-gradient(90deg, transparent calc(50% - .5px), rgba(140,190,202,.035) 50%, transparent calc(50% + .5px)),
         var(--paper);
       font-family: var(--mono);
       overflow-x: hidden;
@@ -37,11 +38,11 @@
       content: "";
       position: fixed;
       inset: 0;
-      opacity: .08;
+      opacity: .035;
       pointer-events: none;
       z-index: 20;
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
-      mix-blend-mode: multiply;
+      mix-blend-mode: screen;
     }
     button, a { font: inherit; }
     button { color: inherit; }
@@ -61,7 +62,7 @@
     .mark-glyph { width: 28px; height: 28px; border: 1px solid var(--ink); display: grid; place-items: center; font-weight: 500; }
     .top-center { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
     .top-right { justify-self: end; display: flex; align-items: center; gap: 18px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
-    .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(239,76,47,.14); animation: breathe 2s infinite; }
+    .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(83,217,245,.1), 0 0 18px rgba(83,217,245,.35); animation: breathe 4s ease-in-out infinite; }
 
     .hero {
       min-height: calc(100vh - 72px);
@@ -97,7 +98,7 @@
       inset: 0;
       background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
       background-size: 44px 44px;
-      opacity: .2;
+      opacity: .32;
       pointer-events: none;
       z-index: -1;
     }
@@ -108,65 +109,66 @@
 
     .source-panel { display: flex; flex-direction: column; }
     .evidence-window {
-      background: var(--ink);
-      color: var(--paper);
+      background: #02080b;
+      color: var(--ink);
       min-height: 220px;
       position: relative;
       overflow: hidden;
       padding: 16px;
       display: flex;
       align-items: end;
+      box-shadow: inset 0 0 0 1px rgba(183,242,255,.08), inset 0 -70px 80px rgba(24,78,91,.14);
     }
     .evidence-window::before {
       content: "";
       position: absolute;
       width: 260px;
       height: 260px;
-      border: 1px solid rgba(239,237,229,.2);
+      border: 1px solid rgba(183,242,255,.16);
       border-radius: 50%;
       top: -122px;
       right: -82px;
-      box-shadow: 0 0 0 34px rgba(239,237,229,.03), 0 0 0 68px rgba(239,237,229,.03);
+      box-shadow: 0 0 0 34px rgba(83,217,245,.025), 0 0 0 68px rgba(83,217,245,.018);
     }
     .scene-glyph { position: absolute; inset: 0; }
     .surface-line { position: relative; z-index: 2; font: 400 clamp(23px, 2.3vw, 38px)/1.05 var(--serif); max-width: 90%; }
     .surface-line span { transition: color .35s, background .35s; }
     .surface-line .hot { color: var(--signal-soft); }
-    .framecode { position: absolute; top: 14px; left: 16px; color: rgba(239,237,229,.48); font-size: 9px; letter-spacing: .12em; }
-    .scope-line { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: rgba(239,237,229,.16); }
-    .scope-line::after { content: ""; display: block; height: 100%; width: var(--progress, 0%); background: var(--signal); transition: width .8s ease; }
+    .framecode { position: absolute; top: 14px; left: 16px; color: rgba(183,242,255,.45); font-size: 9px; letter-spacing: .12em; }
+    .scope-line { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: rgba(183,242,255,.1); }
+    .scope-line::after { content: ""; display: block; height: 100%; width: var(--progress, 0%); background: var(--signal); box-shadow: 0 0 12px rgba(83,217,245,.48); transition: width 1.1s cubic-bezier(.22,.8,.3,1); }
     .evidence-meta { margin-top: auto; padding-top: 20px; display: grid; gap: 9px; font-size: 10px; }
     .meta-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
     .meta-row span:last-child { color: var(--muted); text-align: right; }
 
     .core-panel { overflow: hidden; }
     .core-stage { height: 355px; position: relative; display: grid; place-items: center; }
-    .orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; animation: turn 22s linear infinite; }
+    .orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; }
     .orbit.one { width: 326px; height: 326px; }
-    .orbit.two { width: 250px; height: 250px; animation-duration: 15s; animation-direction: reverse; border-style: dashed; }
-    .orbit::before, .orbit::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--signal); border-radius: 50%; }
+    .orbit.two { width: 250px; height: 250px; border-style: dashed; opacity: .7; }
+    .orbit::before, .orbit::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--signal); border-radius: 50%; box-shadow: 0 0 14px rgba(83,217,245,.5); }
     .orbit::before { left: 50%; top: -4px; }
-    .orbit::after { left: 50%; bottom: -4px; background: var(--ink); }
+    .orbit::after { left: 50%; bottom: -3px; background: var(--muted); box-shadow: none; }
     .core {
       width: 178px;
       height: 178px;
       border-radius: 50%;
-      background: var(--ink);
-      color: var(--paper);
+      background: #02080b;
+      color: var(--ink);
       position: relative;
       display: grid;
       place-items: center;
       text-align: center;
-      box-shadow: 0 0 0 12px var(--paper), 0 0 0 13px var(--ink);
+      box-shadow: 0 0 0 12px var(--paper), 0 0 0 13px rgba(183,242,255,.7), 0 0 48px rgba(83,217,245,.1);
       z-index: 3;
     }
-    .core::before { content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(239,237,229,.34); border-radius: 50%; animation: turn 12s linear infinite; }
+    .core::before { content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(183,242,255,.28); border-radius: 50%; }
     .core-copy { position: relative; }
     .core-kicker { font-size: 9px; letter-spacing: .18em; color: var(--signal-soft); }
     .core-name { display: block; margin: 9px 0 5px; font: 400 25px/1 var(--serif); }
-    .core-count { font-size: 9px; letter-spacing: .08em; color: rgba(239,237,229,.6); }
-    .claim-node { position: absolute; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; background: var(--paper); border: 1px solid var(--ink); padding: 5px 7px; z-index: 4; transition: transform .3s, background .3s, color .3s; }
-    .claim-node.active { background: var(--signal); color: var(--paper); transform: scale(1.08); }
+    .core-count { font-size: 9px; letter-spacing: .08em; color: rgba(183,242,255,.48); }
+    .claim-node { position: absolute; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; background: #0a171d; border: 1px solid rgba(183,242,255,.46); padding: 5px 7px; z-index: 4; transition: border-color .4s, background .4s, color .4s, box-shadow .4s; }
+    .claim-node.active { background: rgba(83,217,245,.13); color: var(--signal-soft); border-color: var(--signal); box-shadow: 0 0 14px rgba(83,217,245,.16); }
     .n1{top:14px;left:19%}.n2{top:49px;right:6%}.n3{top:139px;right:0}.n4{bottom:58px;right:8%}.n5{bottom:8px;right:29%}.n6{bottom:18px;left:14%}.n7{bottom:92px;left:0}.n8{top:117px;left:0}.n9{top:45px;left:5%}
     .compression-meter { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
     .metric { padding: 11px; border-right: 1px solid var(--line); }
@@ -190,7 +192,7 @@
       transition: padding .25s, color .25s;
     }
     .output:first-child { border-top: 0; }
-    .output:hover, .output.active { padding-left: 10px; color: var(--signal); }
+    .output:hover, .output.active { padding-left: 10px; color: var(--signal-soft); background: linear-gradient(90deg, rgba(83,217,245,.07), transparent 72%); }
     .output-code { font-size: 9px; color: var(--muted); text-transform: uppercase; }
     .output-text { font: 400 clamp(17px, 1.45vw, 24px)/1.15 var(--serif); }
     .output-check { font-size: 11px; opacity: .3; }
@@ -202,15 +204,18 @@
     .scenario-strip { display: grid; grid-template-columns: auto repeat(4, 1fr) auto; align-items: stretch; min-height: 66px; }
     .strip-label { padding: 0 18px 0 0; display: flex; align-items: center; font-size: 9px; text-transform: uppercase; letter-spacing: .15em; }
     .scenario {
-      appearance: none; background: transparent; border: 0; border-left: 1px solid var(--line); padding: 12px 16px; text-align: left; cursor: pointer; position: relative;
+      appearance: none; background: transparent; border: 0; border-left: 1px solid var(--line); padding: 12px 16px; text-align: left; cursor: pointer; position: relative; transition: background .35s;
     }
+    .scenario:hover, .scenario.active { background: rgba(83,217,245,.045); }
     .scenario::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--signal); transition: right .35s; }
     .scenario.active::after { right: 0; }
     .scenario-num { display: block; color: var(--muted); font-size: 8px; margin-bottom: 5px; }
     .scenario-name { font: 400 15px/1 var(--serif); }
     .pause { appearance: none; border: 0; border-left: 1px solid var(--line); background: transparent; width: 58px; cursor: pointer; font-size: 15px; }
 
-    .particle { position: fixed; z-index: 30; pointer-events: none; background: var(--signal); color: var(--paper); font-size: 8px; padding: 4px 7px; border-radius: 12px; white-space: nowrap; transition: transform .72s cubic-bezier(.7,0,.25,1), opacity .2s .55s; }
+    .particle { position: fixed; z-index: 30; pointer-events: none; width: 6px; height: 6px; padding: 0; overflow: hidden; color: transparent; font-size: 0; background: var(--signal); border: 1px solid var(--signal-soft); border-radius: 50%; box-shadow: 0 0 16px rgba(83,217,245,.75); transition: transform .95s cubic-bezier(.2,.7,.2,1), opacity .28s .65s; }
+    .machine.is-updating .surface-line, .machine.is-updating .outputs, .machine.is-updating .evidence-meta { opacity: .32; transform: translateY(3px); }
+    .surface-line, .outputs, .evidence-meta { transition: opacity .22s ease, transform .22s ease; }
 
     .thesis { padding: 108px 0 90px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; border-bottom: 1px solid var(--line-strong); }
     .thesis-index { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
@@ -225,21 +230,19 @@
     .section-head p { max-width: 440px; font-size: 10px; line-height: 1.7; color: var(--muted); margin: 0; }
     .packet-table { display: grid; }
     .packet-row { display: grid; grid-template-columns: 42px 180px 1fr 95px; gap: 18px; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line); transition: background .2s; }
-    .packet-row:hover { background: rgba(255,255,255,.22); }
+    .packet-row:hover { background: rgba(83,217,245,.045); }
     .packet-row .idx { color: var(--muted); font-size: 9px; }
     .packet-row .field { text-transform: uppercase; font-size: 9px; letter-spacing: .12em; }
     .packet-row .value { font: 400 19px/1.2 var(--serif); }
     .packet-row .state { justify-self: end; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; color: var(--signal); }
 
-    footer { background: var(--ink); color: var(--paper); padding: 28px; }
+    footer { background: #02080b; color: var(--ink); padding: 28px; border-top: 1px solid rgba(183,242,255,.16); }
     .footer-inner { width: min(1544px,100%); margin: auto; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; }
     .footer-title { font: 400 clamp(38px,6vw,92px)/.86 var(--serif); letter-spacing: -.045em; }
-    .footer-meta { text-align: right; font-size: 9px; line-height: 1.9; color: rgba(239,237,229,.56); }
-    .footer-meta a { color: var(--paper); text-decoration-color: var(--signal); text-underline-offset: 4px; }
+    .footer-meta { text-align: right; font-size: 9px; line-height: 1.9; color: rgba(183,242,255,.46); }
+    .footer-meta a { color: var(--ink); text-decoration-color: var(--signal); text-underline-offset: 4px; }
 
-    @keyframes turn { to { transform: rotate(360deg); } }
-    @keyframes breathe { 50% { opacity: .35; transform: scale(.8); } }
-    @keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
+    @keyframes breathe { 50% { opacity: .5; box-shadow: 0 0 0 6px rgba(83,217,245,.06), 0 0 24px rgba(83,217,245,.42); } }
 
     @media (max-width: 1050px) {
       .hero-heading { grid-template-columns: 1fr; }
@@ -283,7 +286,7 @@
   <header class="shell topbar">
     <div class="mark"><span class="mark-glyph">U</span><span>UniversalLabeler</span></div>
     <div class="top-center">Loss-resistant annotation translation</div>
-    <div class="top-right"><span class="status-dot" aria-hidden="true"></span><span>v1.0.2 / Public spec</span></div>
+    <div class="top-right"><span class="status-dot" aria-hidden="true"></span><span>v1.0.3 / Public spec</span></div>
   </header>
 
   <main>
@@ -299,15 +302,15 @@
           <div class="evidence-window">
             <div class="framecode" id="framecode">FRAME 01:00:01.000—01:00:08.000</div>
             <svg class="scene-glyph" viewBox="0 0 420 260" aria-hidden="true">
-              <g fill="none" stroke="rgba(239,237,229,.28)" stroke-width="1.4">
+              <g fill="none" stroke="rgba(183,242,255,.24)" stroke-width="1.4">
                 <path d="M38 190H382M94 190v42M330 190v42"/>
                 <path id="object-shape" d="M145 154 Q210 126 275 154 L260 182H157Z"/>
                 <path d="M45 94Q93 105 142 151M375 92Q328 106 276 151"/>
                 <circle cx="45" cy="94" r="9"/><circle cx="375" cy="92" r="9"/>
               </g>
-              <g fill="#ef4c2f"><circle cx="142" cy="151" r="4"/><circle cx="276" cy="151" r="4"/></g>
-              <text x="51" y="86" fill="rgba(239,237,229,.58)" font-family="monospace" font-size="8">LEFT / STABILIZE</text>
-              <text x="283" y="84" fill="rgba(239,237,229,.58)" font-family="monospace" font-size="8">RIGHT / ACT</text>
+              <g fill="#53d9f5"><circle cx="142" cy="151" r="4"/><circle cx="276" cy="151" r="4"/></g>
+              <text x="51" y="86" fill="rgba(183,242,255,.52)" font-family="monospace" font-size="8">LEFT / STABILIZE</text>
+              <text x="283" y="84" fill="rgba(183,242,255,.52)" font-family="monospace" font-size="8">RIGHT / ACT</text>
             </svg>
             <div class="surface-line" id="source-text">Fold the <span class="hot">towel</span> on the table with both hands.</div>
             <div class="scope-line" id="scope-line"></div>
@@ -361,7 +364,7 @@
         <button class="scenario" data-scene="1"><span class="scenario-num">02</span><span class="scenario-name">Open container</span></button>
         <button class="scenario" data-scene="2"><span class="scenario-num">03</span><span class="scenario-name">Place object</span></button>
         <button class="scenario" data-scene="3"><span class="scenario-num">04</span><span class="scenario-name">Cut ingredient</span></button>
-        <button class="pause" id="pause" aria-label="Pause automatic examples" title="Pause animation">Ⅱ</button>
+        <button class="pause" id="pause" aria-label="Play automatic examples" title="Play examples">▶</button>
       </nav>
     </section>
 
@@ -388,7 +391,7 @@
   <footer>
     <div class="footer-inner">
       <div class="footer-title">Meaning,<br>packed.</div>
-      <div class="footer-meta">UNIVERSAL LABELER / RELEASE 1.0.2<br>5 HUMAN LANGUAGES · 22 WORLD DIMENSIONS<br><a href="https://huggingface.co/datasets/itspublu/UniversalLabeler">VIEW DATA + SCHEMAS ↗</a></div>
+      <div class="footer-meta">UNIVERSAL LABELER / RELEASE 1.0.3<br>5 HUMAN LANGUAGES · 22 WORLD DIMENSIONS<br><a href="https://huggingface.co/datasets/itspublu/UniversalLabeler">VIEW DATA + SCHEMAS ↗</a></div>
     </div>
   </footer>
 
@@ -427,7 +430,7 @@
     const machine = document.querySelector("#machine");
     let sceneIndex = 0;
     let activeLanguage = "tl";
-    let playing = true;
+    let playing = false;
     let timer;
 
     function renderOutputs(scene) {
@@ -438,7 +441,7 @@
       output.querySelectorAll(".output").forEach(button => button.addEventListener("click", () => {
         activeLanguage = button.dataset.language;
         renderOutputs(scenes[sceneIndex]);
-        launchParticles();
+        launchSignal();
       }));
     }
 
@@ -451,33 +454,32 @@
       table.innerHTML = rows.map((row, i) => `<div class="packet-row"><span class="idx">${String(i+1).padStart(2,"0")}</span><span class="field">${row[0]}</span><span class="value">${row[1]}</span><span class="state">preserved</span></div>`).join("");
     }
 
-    function launchParticles() {
+    function launchSignal() {
       if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
       const source = document.querySelector("#source-text");
       const target = output.querySelector(".output.active .output-text") || output.querySelector(".output-text");
       if (!source || !target || window.innerWidth < 720) return;
       const a = source.getBoundingClientRect(), c = core.getBoundingClientRect(), b = target.getBoundingClientRect();
-      const labels = ["ACTION", "ROLE", "OBJECT", "STATE", "TIME", "EVIDENCE"];
-      labels.forEach((label, i) => {
+      [0, 1].forEach((i) => {
         const p = document.createElement("span");
-        p.className = "particle"; p.textContent = label;
-        p.style.left = `${a.right - 30}px`; p.style.top = `${a.top + 22 + (i%3)*24}px`; p.style.opacity = "1";
+        p.className = "particle";
+        p.style.left = `${a.right - 8}px`; p.style.top = `${a.top + a.height / 2 + (i ? 9 : -9)}px`; p.style.opacity = "1";
         document.body.appendChild(p);
-        requestAnimationFrame(() => {
-          p.style.transform = `translate(${c.left + c.width/2 - a.right - 8}px, ${c.top + c.height/2 - a.top - 28 - (i%3)*24}px) scale(.55)`;
-        });
         setTimeout(() => {
-          p.style.transition = "transform .68s cubic-bezier(.7,0,.25,1), opacity .2s .5s";
-          p.style.transform = `translate(${b.left - a.right + 5}px, ${b.top - a.top - (i%3)*24}px) scale(.35)`;
+          p.style.transform = `translate(${c.left + c.width/2 - a.right}px, ${c.top + c.height/2 - a.top - a.height/2 - (i ? 9 : -9)}px)`;
+        }, i * 120);
+        setTimeout(() => {
+          p.style.transition = "transform 1.05s cubic-bezier(.2,.7,.2,1), opacity .28s .72s";
+          p.style.transform = `translate(${b.left - a.right + 8}px, ${b.top + b.height/2 - a.top - a.height/2 - (i ? 9 : -9)}px) scale(.55)`;
           p.style.opacity = "0";
-        }, 760 + i*35);
-        setTimeout(() => p.remove(), 1550 + i*35);
+        }, 980 + i * 120);
+        setTimeout(() => p.remove(), 2150 + i * 120);
       });
       const nodes = [...document.querySelectorAll(".claim-node")];
-      nodes.forEach((node, i) => setTimeout(() => { node.classList.add("active"); setTimeout(() => node.classList.remove("active"), 300); }, i*80));
+      nodes.forEach((node, i) => setTimeout(() => { node.classList.add("active"); setTimeout(() => node.classList.remove("active"), 420); }, 430 + i*55));
     }
 
-    function setScene(index, animate = true) {
+    function applyScene(index) {
       sceneIndex = index;
       const scene = scenes[index];
       document.querySelectorAll(".scenario").forEach((b, i) => b.classList.toggle("active", i === index));
@@ -492,7 +494,16 @@
       document.querySelector("#scope-line").style.setProperty("--progress", "0%");
       requestAnimationFrame(() => document.querySelector("#scope-line").style.setProperty("--progress", "100%"));
       renderOutputs(scene); renderTable(scene);
-      if (animate) setTimeout(launchParticles, 120);
+    }
+
+    function setScene(index, animate = true) {
+      if (!animate) { applyScene(index); return; }
+      machine.classList.add("is-updating");
+      setTimeout(() => {
+        applyScene(index);
+        machine.classList.remove("is-updating");
+        setTimeout(launchSignal, 180);
+      }, 180);
     }
 
     function schedule() {
@@ -509,7 +520,6 @@
     });
 
     setScene(0, false); schedule();
-    window.addEventListener("load", () => setTimeout(launchParticles, 900), { once: true });
   </script>
 </body>
 </html>