ui: add the iris brand mark (idle identity)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/index.html

@@ -23,6 +23,37 @@
   <!-- stage: the whole screen is tappable (tap=describe, hold=ask, double-tap=live) -->
   <main id="stage" aria-label="Iris. Tap to describe, hold to ask, double tap for live mode.">
     <div id="halo" aria-hidden="true"></div>
+    <div id="brand" aria-hidden="true">
+      <svg viewBox="0 0 100 100" class="iris-mark">
+        <defs>
+          <radialGradient id="irisG" cx="42%" cy="40%" r="62%">
+            <stop offset="0%" stop-color="#ffe39a"/>
+            <stop offset="38%" stop-color="#ff9d3c"/>
+            <stop offset="72%" stop-color="#ff7a18"/>
+            <stop offset="100%" stop-color="#5e2400"/>
+          </radialGradient>
+        </defs>
+        <path d="M5 50 Q50 14 95 50 Q50 86 5 50 Z" fill="none" stroke="rgba(255,255,255,.55)" stroke-width="3.2"/>
+        <circle cx="50" cy="50" r="23" fill="url(#irisG)"/>
+        <g stroke="rgba(40,16,0,.32)" stroke-width="1.4" stroke-linecap="round">
+          <line x1="50" y1="29" x2="50" y2="39"/>
+          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(30 50 50)"/>
+          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(60 50 50)"/>
+          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(90 50 50)"/>
+          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(120 50 50)"/>
+          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(150 50 50)"/>
+          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(180 50 50)"/>
+          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(210 50 50)"/>
+          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(240 50 50)"/>
+          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(270 50 50)"/>
+          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(300 50 50)"/>
+          <line x1="50" y1="29" x2="50" y2="39" transform="rotate(330 50 50)"/>
+        </g>
+        <circle cx="50" cy="50" r="23" fill="none" stroke="rgba(255,255,255,.25)" stroke-width="1.2"/>
+        <circle cx="50" cy="50" r="9.5" fill="#08080d"/>
+        <circle cx="44.5" cy="44.5" r="3.2" fill="#fff" opacity=".92"/>
+      </svg>
+    </div>
     <p id="status" role="status" aria-live="assertive">Iris</p>
     <p id="answer" aria-live="polite"></p>
     <p id="hint" aria-hidden="true"></p>

frontend/style.css

@@ -68,11 +68,24 @@ body[data-state="speaking"]  #halo { background: radial-gradient(circle, rgba(54
 body[data-state="speaking"] #answer { animation: rise .42s cubic-bezier(.2,.7,.2,1); }
 @keyframes rise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
 
+/* brand mark (the iris): the product identity, shown at idle only */
+#brand {
+  position: relative; z-index: 2; display: flex; justify-content: center;
+  margin-bottom: 1.4vmin; filter: drop-shadow(0 6px 26px rgba(0,0,0,.6));
+}
+.iris-mark { width: clamp(76px, 16vmin, 124px); height: auto; display: block; animation: gaze 5.5s ease-in-out infinite; }
+@keyframes gaze { 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }
+body[data-state="listening"] #brand,
+body[data-state="thinking"]  #brand,
+body[data-state="speaking"]  #brand { display: none; }
+
 #status {
   position: relative; z-index: 2;
   font-size: clamp(24px, 6vmin, 48px); font-weight: 800;
   text-shadow: 0 2px 18px rgba(0,0,0,.85);
 }
+/* at idle, "Iris" reads as a wordmark under the mark */
+body[data-state=""] #status, body:not([data-state]) #status { letter-spacing: .16em; }
 #answer {
   position: relative; z-index: 2;
   font-size: clamp(20px, 4.6vmin, 34px); font-weight: 600; line-height: 1.32;