web: the deucep●int wordmark and ball favicon

web/index.html

@@ -12,10 +12,12 @@
     <meta name="theme-color" content="#121311" media="(prefers-color-scheme: dark)" />
     <!--
       Declared, so the browser stops probing /favicon.ico and 404ing on every
-      page load. The SVG carries its own dark-mode rule, which is why there is
-      one file rather than two.
+      page load. The SVG carries its own dark-mode rule; the PNG is for
+      browsers that do not take an SVG icon.
     -->
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="icon" href="/favicon-32.png" sizes="32x32" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <!--
       Before the stylesheet and before React: a reader who chose dark must not
       see one cream frame first. Inline and tiny on purpose -- a module would

web/src/components/DeucepointMark.module.css

@@ -0,0 +1,84 @@
+/* Deucepoint mark — generated by build.js; edit there, not here. */
+.mark { --dp-ink: currentColor; display: inline-block; vertical-align: middle; }
+.ink { fill: var(--dp-ink); }
+.ballFill { fill: var(--dp-ball, var(--dp-ink)); }
+.flameOuter { fill: var(--dp-flame, var(--dp-ink)); stroke: var(--dp-flame, var(--dp-ink)); stroke-linejoin: round; paint-order: stroke; }
+.flameInner { fill: var(--dp-flame-inner, var(--dp-paper, #F6F6F2)); }
+.seam { fill: none; stroke: var(--dp-paper, #F6F6F2); stroke-linejoin: round; }
+.ember { fill: var(--dp-flame, var(--dp-ink)); opacity: 0; }
+.isFlame { --dp-flame: #FF5A1F; --dp-flame-inner: #FFC53D; }
+.isOptic { --dp-ball: #DFFF4F; }
+.isBare { overflow: visible; }
+
+/* --- motion --------------------------------------------------------- */
+.fire, .flames, .flameOuter, .flameInner { transform-box: fill-box; transform-origin: 50% 100%; }
+.ball, .ember { transform-box: fill-box; transform-origin: 50% 50%; }
+.drop { transform-box: fill-box; transform-origin: 50% 100%; }
+
+.flames     { animation: sway 3.7s ease-in-out infinite; }
+.flameOuter { animation: flickerA 1.9s ease-in-out infinite; }
+.flameInner { animation: flickerB 1.3s ease-in-out infinite; }
+.ember      { animation: ember var(--dur, 2.5s) ease-out var(--delay, 0s) infinite; }
+
+/* hover: ball spins, fire stretches */
+.fire { transition: transform 260ms ease; }
+.mark:hover .fire, .isHot .fire { transform: scaleY(1.09) scaleX(1.03); }
+.mark:hover .ball, .isSpinning .ball { animation: spin 0.9s linear infinite; }
+
+/* ignite: ball pops in, fire grows from behind it */
+.isIgnite .ball { animation: pop 0.55s cubic-bezier(.2,.9,.3,1.3) backwards; }
+.isIgnite .fire { animation: ignite 0.8s 0.22s cubic-bezier(.2,.8,.2,1) backwards; }
+.isIgnite .ember { animation-delay: calc(var(--delay, 0s) + 0.9s); }
+/* bare ball (no flames): it drops in and bounces instead */
+.isBare.isIgnite .ball { animation: none; }
+.isBare.isIgnite .drop { animation: bounce 1.15s linear backwards; }
+.mark:hover .ball, .mark.isSpinning .ball { animation: spin 0.9s linear infinite; }
+
+@keyframes flickerA {
+  0%   { transform: scale(1, 1) skewX(0deg); }
+  22%  { transform: scale(1.025, 0.975) skewX(-1.6deg); }
+  41%  { transform: scale(0.985, 1.04) skewX(1.2deg); }
+  63%  { transform: scale(1.015, 0.99) skewX(-0.6deg); }
+  82%  { transform: scale(0.99, 1.025) skewX(1.8deg); }
+  100% { transform: scale(1, 1) skewX(0deg); }
+}
+@keyframes flickerB {
+  0%   { transform: scale(1, 1) skewX(0deg) translateX(0); }
+  30%  { transform: scale(0.96, 1.07) skewX(2.2deg) translateX(0.4px); }
+  55%  { transform: scale(1.04, 0.95) skewX(-1.6deg) translateX(-0.5px); }
+  78%  { transform: scale(0.98, 1.03) skewX(0.8deg) translateX(0.2px); }
+  100% { transform: scale(1, 1) skewX(0deg) translateX(0); }
+}
+@keyframes sway { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }
+@keyframes ember {
+  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
+  12%  { opacity: 0.95; }
+  100% { opacity: 0; transform: translate(var(--dx, 0px), -18px) scale(0.25); }
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
+@keyframes bounce {
+  0%   { transform: translateY(-110px) scale(0.96, 1.06); animation-timing-function: cubic-bezier(.45,0,1,1); }
+  34%  { transform: translateY(0) scale(1.14, 0.8); animation-timing-function: cubic-bezier(0,0,.55,1); }
+  41%  { transform: translateY(-6px) scale(0.98, 1.04); animation-timing-function: cubic-bezier(0,0,.55,1); }
+  53%  { transform: translateY(-38px) scale(1, 1); animation-timing-function: cubic-bezier(.45,0,1,1); }
+  65%  { transform: translateY(0) scale(1.07, 0.9); animation-timing-function: cubic-bezier(0,0,.55,1); }
+  76%  { transform: translateY(-13px) scale(1, 1); animation-timing-function: cubic-bezier(.45,0,1,1); }
+  85%  { transform: translateY(0) scale(1.03, 0.96); animation-timing-function: cubic-bezier(0,0,.55,1); }
+  92%  { transform: translateY(-4px); animation-timing-function: cubic-bezier(.45,0,1,1); }
+  100% { transform: none; }
+}
+@keyframes ignite {
+  0%   { transform: scaleY(0) scaleX(0.6); }
+  55%  { transform: scaleY(1.12) scaleX(1.02); }
+  80%  { transform: scaleY(0.96); }
+  100% { transform: none; }
+}
+
+.mark[data-spin="never"]:hover .ball { animation: none; }
+
+.isStatic *, .isStatic { animation: none !important; transition: none !important; }
+@media (prefers-reduced-motion: reduce) {
+  .mark *, .mark { animation: none !important; transition: none !important; }
+  .ember { opacity: 0 !important; }
+}