@hagicode/hagilight-docusaurus 0.10.1-dev.124.1.93cbe18 → 0.10.1-dev.125.1.c1264bb

package/dist/client/promoto-markup.d.ts

@@ -1 +1 @@
-export declare const PROMOTO_SHELL_MARKUP = "\n  <section class=\"hagilight-promoto__shell\" data-promoto-shell hidden aria-label=\"Featured promotion\">\n    <div class=\"hagilight-promoto__viewport\">\n      <div class=\"hagilight-promoto__track\" data-promoto-track></div>\n    </div>\n    <nav class=\"hagilight-promoto__controls\" data-promoto-controls aria-label=\"Promotion controls\" hidden>\n      <button type=\"button\" class=\"hagilight-promoto__control\" data-promoto-previous aria-label=\"Previous promotion\">\n        <svg class=\"hagilight-promoto__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M15 6l-6 6 6 6\" /></svg>\n      </button>\n      <span class=\"hagilight-promoto__count\" data-promoto-count aria-label=\"Promotion progress\"></span>\n      <button type=\"button\" class=\"hagilight-promoto__control\" data-promoto-next aria-label=\"Next promotion\">\n        <svg class=\"hagilight-promoto__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M9 6l6 6-6 6\" /></svg>\n      </button>\n      <button type=\"button\" class=\"hagilight-promoto__control\" data-promoto-pause aria-pressed=\"false\" aria-label=\"Pause automatic promotion rotation\">\n        <svg class=\"hagilight-promoto__icon hagilight-promoto__icon--pause\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M9 6v12M15 6v12\" /></svg>\n        <svg class=\"hagilight-promoto__icon hagilight-promoto__icon--play\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M8 5.5v13l11-6.5z\" /></svg>\n      </button>\n    </nav>\n    <button type=\"button\" class=\"hagilight-promoto__dismiss\" data-promoto-dismiss aria-label=\"Dismiss promotion\">\n      <svg class=\"hagilight-promoto__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M6.5 6.5l11 11M17.5 6.5l-11 11\" /></svg>\n    </button>\n    <span class=\"hagilight-promoto__status\" data-promoto-status aria-live=\"polite\"></span>\n  </section>\n";
+export declare const PROMOTO_SHELL_MARKUP = "\n  <section class=\"hagilight-promoto__shell\" data-promoto-shell hidden aria-label=\"Featured promotion\">\n    <div class=\"hagilight-promoto__viewport\">\n      <div class=\"hagilight-promoto__track\" data-promoto-track></div>\n    </div>\n    <nav class=\"hagilight-promoto__controls\" data-promoto-controls aria-label=\"Promotion controls\" hidden>\n      <button type=\"button\" class=\"hagilight-promoto__control\" data-promoto-previous aria-label=\"Previous promotion\">\n        <svg class=\"hagilight-promoto__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M15 6l-6 6 6 6\" /></svg>\n      </button>\n      <span class=\"hagilight-promoto__count\" data-promoto-count aria-label=\"Promotion progress\"></span>\n      <button type=\"button\" class=\"hagilight-promoto__control\" data-promoto-next aria-label=\"Next promotion\">\n        <svg class=\"hagilight-promoto__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M9 6l6 6-6 6\" /></svg>\n      </button>\n      <button type=\"button\" class=\"hagilight-promoto__control\" data-promoto-pause aria-pressed=\"false\" aria-label=\"Pause automatic promotion rotation\">\n        <svg class=\"hagilight-promoto__icon hagilight-promoto__icon--pause\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M9 6v12M15 6v12\" /></svg>\n        <svg class=\"hagilight-promoto__icon hagilight-promoto__icon--play\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M8 5.5v13l11-6.5z\" /></svg>\n      </button>\n    </nav>\n    <button type=\"button\" class=\"hagilight-promoto__dismiss\" data-promoto-dismiss aria-label=\"Dismiss promotion\">\n      <svg class=\"hagilight-promoto__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M6.5 6.5l11 11M17.5 6.5l-11 11\" /></svg>\n    </button>\n    <span class=\"hagilight-promoto__progress\" data-promoto-progress aria-hidden=\"true\"></span>\n    <span class=\"hagilight-promoto__status\" data-promoto-status aria-live=\"polite\"></span>\n  </section>\n";

package/dist/client/promoto-markup.js

@@ -19,6 +19,7 @@ export const PROMOTO_SHELL_MARKUP = `
     <button type="button" class="hagilight-promoto__dismiss" data-promoto-dismiss aria-label="Dismiss promotion">
       <svg class="hagilight-promoto__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11" /></svg>
     </button>
+    <span class="hagilight-promoto__progress" data-promoto-progress aria-hidden="true"></span>
     <span class="hagilight-promoto__status" data-promoto-status aria-live="polite"></span>
   </section>
 `;

package/dist/theme/Footer/FooterView.js

@@ -2,11 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { siteLinkGaAttributes } from '@hagicode/hagilight-core/analytics-events';
 import { buildInfoItems } from '@hagicode/hagilight-core/build-info';
+import { pickFooterBrandLinks, resolveFooterBrand } from '@hagicode/hagilight-core/footer-brand';
 function LinkSection({ heading, navLabel, links, tagged }) {
     return (_jsxs("section", { children: [_jsx("h2", { children: heading }), _jsx("nav", { "aria-label": navLabel, children: _jsx("ul", { children: links.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, target: link.target, rel: link.rel, "aria-label": link.ariaLabel, ...(tagged ? siteLinkGaAttributes(link, 'footer') : {}), children: link.label }) }, link.id))) }) })] }));
 }
+function FooterBrand({ locale, links }) {
+    const brand = resolveFooterBrand(locale);
+    const { primary, secondary } = pickFooterBrandLinks(links);
+    return (_jsxs("section", { className: "hagilight-brand", lang: brand.locale, "aria-labelledby": "hagilight-brand-title", children: [_jsxs("div", { className: "hagilight-brand__lead", children: [_jsx("h2", { className: "hagilight-brand__headline", id: "hagilight-brand-title", children: brand.headline }), _jsxs("div", { className: "hagilight-brand__body", children: [_jsx("p", { className: "hagilight-brand__summary", children: brand.summary }), (primary || secondary) && (_jsxs("div", { className: "hagilight-brand__actions", children: [primary && (_jsxs("a", { className: "hagilight-brand__primary", href: primary.href, target: primary.target, rel: primary.rel, "aria-label": primary.ariaLabel, ...siteLinkGaAttributes(primary, 'footer_brand'), children: [_jsx("span", { children: primary.label }), _jsx("svg", { className: "hagilight-brand__arrow", viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M2.5 8h10M8.5 3.5 13 8l-4.5 4.5", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), secondary && (_jsx("a", { className: "hagilight-brand__secondary", href: secondary.href, target: secondary.target, rel: secondary.rel, "aria-label": secondary.ariaLabel, ...siteLinkGaAttributes(secondary, 'footer_brand'), children: secondary.label }))] }))] })] }), _jsx("dl", { className: "hagilight-brand__pillars", children: brand.pillars.map((pillar, index) => (_jsxs("div", { className: "hagilight-brand__pillar", "data-pillar": pillar.id, style: { '--hagilight-brand-i': index }, children: [_jsx("dt", { children: pillar.label }), _jsx("dd", { children: pillar.description })] }, pillar.id))) })] }));
+}
 export function FooterView({ links, version, year, buildInfo }) {
     const { labels } = links;
     const buildItems = buildInfoItems(buildInfo);
-    return (_jsxs("footer", { className: "hagilight-footer", children: [_jsxs("div", { className: "hagilight-footer__sections", children: [links.relatedSites.length > 0 && (_jsxs("section", { children: [_jsx("h2", { children: labels.relatedSites }), _jsx("nav", { "aria-label": labels.navigation.relatedSites, children: _jsx("ul", { children: links.relatedSites.map((site) => (_jsx("li", { children: _jsx("a", { href: site.href, target: site.target, rel: site.rel, children: site.name }) }, site.id))) }) })] })), _jsx(LinkSection, { heading: labels.quickLinks, navLabel: labels.navigation.quickLinks, links: links.quick, tagged: true }), _jsx(LinkSection, { heading: labels.community, navLabel: labels.navigation.community, links: links.community, tagged: true })] }), links.filings.length > 0 && (_jsx("nav", { className: "hagilight-footer__filings", "aria-label": labels.navigation.filings, children: links.filings.map((link) => (_jsx("a", { href: link.href, target: link.target, rel: link.rel, "aria-label": link.ariaLabel, children: link.label }, link.id))) })), _jsxs("p", { className: "hagilight-footer__copyright", children: [_jsxs("span", { children: ["\u00A9 ", year, " HagiCode"] }), ' | ', _jsxs("span", { className: "hagilight-footer__attribution", children: ["Powered By hagilight-docusaurus@", version] }), buildItems.map((item) => (_jsxs(Fragment, { children: [' | ', _jsxs("span", { className: "hagilight-footer__build", "data-build-field": item.field, title: item.title, "data-build-commit": item.title, children: [item.label, ": ", item.datetime ? _jsx("time", { dateTime: item.datetime, children: item.text }) : item.text] })] }, item.field)))] })] }));
+    return (_jsxs("footer", { className: "hagilight-footer", children: [_jsx(FooterBrand, { locale: links.locale, links: links.quick }), _jsxs("div", { className: "hagilight-footer__sections", children: [links.relatedSites.length > 0 && (_jsxs("section", { children: [_jsx("h2", { children: labels.relatedSites }), _jsx("nav", { "aria-label": labels.navigation.relatedSites, children: _jsx("ul", { children: links.relatedSites.map((site) => (_jsx("li", { children: _jsx("a", { href: site.href, target: site.target, rel: site.rel, children: site.name }) }, site.id))) }) })] })), _jsx(LinkSection, { heading: labels.quickLinks, navLabel: labels.navigation.quickLinks, links: links.quick, tagged: true }), _jsx(LinkSection, { heading: labels.community, navLabel: labels.navigation.community, links: links.community, tagged: true })] }), links.filings.length > 0 && (_jsx("nav", { className: "hagilight-footer__filings", "aria-label": labels.navigation.filings, children: links.filings.map((link) => (_jsx("a", { href: link.href, target: link.target, rel: link.rel, "aria-label": link.ariaLabel, children: link.label }, link.id))) })), _jsxs("p", { className: "hagilight-footer__copyright", children: [_jsxs("span", { children: ["\u00A9 ", year, " HagiCode"] }), ' | ', _jsxs("span", { className: "hagilight-footer__attribution", children: ["Powered By hagilight-docusaurus@", version] }), buildItems.map((item) => (_jsxs(Fragment, { children: [' | ', _jsxs("span", { className: "hagilight-footer__build", "data-build-field": item.field, title: item.title, "data-build-commit": item.title, children: [item.label, ": ", item.datetime ? _jsx("time", { dateTime: item.datetime, children: item.text }) : item.text] })] }, item.field)))] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hagicode/hagilight-docusaurus",
-  "version": "0.10.1-dev.124.1.93cbe18",
+  "version": "0.10.1-dev.125.1.c1264bb",
   "type": "module",
   "description": "Docusaurus plugin for HagiCode site features: footer, analytics, promote card, locales, SEO, sitemap, robots.txt, and RSS",
   "repository": {
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@docusaurus/types": "^3.9.2",
-    "@hagicode/hagilight-core": "0.10.1-dev.124.1.93cbe18"
+    "@hagicode/hagilight-core": "0.10.1-dev.125.1.c1264bb"
   },
   "peerDependencies": {
     "@docusaurus/core": "^3.9.2",

package/promoto.css

@@ -12,9 +12,23 @@
   --promoto-pad: 0.875rem;
   --promoto-pager-width: calc(3 * var(--promoto-control-size) + 2.25rem + 0.375rem);
   --promoto-muted: var(--ifm-color-emphasis-700);
+  /* Motion: a damped spring where linear() exists, a long ease-out elsewhere. */
+  --promoto-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --promoto-rotation: 8000ms;
+  --promoto-shift: 1rem;
   display: block;
 }
 
+@supports (transition-timing-function: linear(0, 1)) {
+  .hagilight-promoto {
+    --promoto-ease: linear(0, 0.066, 0.22, 0.409, 0.597, 0.761, 0.89, 0.983, 1.042, 1.073, 1.083, 1.079, 1.067, 1.052, 1.036, 1.022, 1.011, 1.002, 0.997, 0.994, 0.993, 0.993, 1);
+  }
+}
+
+.hagilight-promoto[data-dir='prev'] {
+  --promoto-shift: -1rem;
+}
+
 .hagilight-promoto[hidden],
 .hagilight-promoto__shell[hidden],
 .hagilight-promoto__controls[hidden] {
@@ -38,7 +52,18 @@
   color: var(--ifm-font-color-base);
   opacity: 1;
   visibility: visible;
-  transition: opacity 0.24s ease, visibility 0s linear;
+  transform: none;
+  transition: opacity 0.24s ease, transform 0.62s var(--promoto-ease), visibility 0s linear;
+}
+
+/* Rises into place on first render and whenever it returns from the footer or the page top. */
+.hagilight-promoto[data-state='ready'] .hagilight-promoto__shell {
+  animation: hagilight-promoto-rise 0.62s var(--promoto-ease) backwards;
+}
+
+@keyframes hagilight-promoto-rise {
+  from { opacity: 0; transform: translateY(1.25rem) scale(0.97); }
+  to { opacity: 1; transform: none; }
 }
 
 .hagilight-promoto[data-state='footer-hidden'] .hagilight-promoto__shell,
@@ -46,7 +71,58 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transition: opacity 0.24s ease, visibility 0s linear 0.24s;
+  transform: translateY(1.25rem) scale(0.97);
+  /* Leaving is quick and does not bounce. */
+  transition: opacity 0.2s ease, transform 0.24s ease-in, visibility 0s linear 0.24s;
+}
+
+/* Time until the next card, drawn along the bottom edge; hovering the card or tabbing into it holds it. */
+.hagilight-promoto__progress {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  block-size: 2px;
+  background: var(--ifm-color-primary);
+  opacity: 0;
+  pointer-events: none;
+  transform: scaleX(0);
+  transform-origin: left center;
+}
+
+.hagilight-promoto__progress:dir(rtl) {
+  transform-origin: right center;
+}
+
+.hagilight-promoto[data-rotating] .hagilight-promoto__progress {
+  opacity: 0.55;
+  animation-duration: var(--promoto-rotation);
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+/* Two names for one keyframe set: flipping between them restarts the fill without a forced reflow. */
+.hagilight-promoto[data-rotating][data-tick='0'] .hagilight-promoto__progress {
+  animation-name: hagilight-promoto-fill-a;
+}
+
+.hagilight-promoto[data-rotating][data-tick='1'] .hagilight-promoto__progress {
+  animation-name: hagilight-promoto-fill-b;
+}
+
+.hagilight-promoto[data-paused] .hagilight-promoto__progress,
+.hagilight-promoto__shell:hover .hagilight-promoto__progress,
+.hagilight-promoto__shell:has(:focus-visible) .hagilight-promoto__progress {
+  animation-play-state: paused;
+}
+
+@keyframes hagilight-promoto-fill-a {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+
+@keyframes hagilight-promoto-fill-b {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
 }
 
 .hagilight-promoto__viewport {
@@ -57,7 +133,30 @@
   display: flex;
   align-items: stretch;
   width: 100%;
-  transition: transform 0.34s ease;
+  transition: transform 0.5s var(--promoto-ease);
+}
+
+/*
+ * Content settles after the track: the card being left fades out at once, the card
+ * arriving lands copy, then the action, each a beat behind the last. Pushes toward
+ * the direction of travel (--promoto-shift flips for Previous).
+ */
+.hagilight-promoto__slide > * {
+  transition: opacity 0.32s ease, transform 0.55s var(--promoto-ease);
+}
+
+.hagilight-promoto__slide[aria-hidden='true'] > * {
+  opacity: 0;
+  transform: translateX(var(--promoto-shift));
+  transition-duration: 0.18s, 0.18s;
+}
+
+.hagilight-promoto__slide[aria-hidden='false'] > .hagilight-promoto__copy {
+  transition-delay: 0.08s;
+}
+
+.hagilight-promoto__slide[aria-hidden='false'] > .hagilight-promoto__cta {
+  transition-delay: 0.14s;
 }
 
 .hagilight-promoto__slide {
@@ -392,8 +491,18 @@
 @media (prefers-reduced-motion: reduce) {
   .hagilight-promoto__shell,
   .hagilight-promoto__track,
+  .hagilight-promoto__slide > *,
   .hagilight-promoto__dismiss,
   .hagilight-promoto__control {
     transition: none;
   }
+
+  .hagilight-promoto__shell {
+    transform: none !important;
+    animation: none !important;
+  }
+
+  .hagilight-promoto__progress {
+    display: none;
+  }
 }

package/styles.css

@@ -85,3 +85,227 @@
     gap: 0.75rem 1rem;
   }
 }
+
+/* Product statement: headline, summary, calls to action, and the three pillars. */
+.hagilight-footer .hagilight-brand {
+  --_heading: var(--ifm-heading-color, currentColor);
+  --_muted: var(--hagilight-footer-muted, var(--ifm-color-emphasis-700, color-mix(in srgb, currentColor 72%, transparent)));
+  --_rule: var(--hagilight-footer-border, var(--ifm-color-emphasis-300));
+  container: hagilight-brand / inline-size;
+  display: grid;
+  gap: 2.25rem;
+  margin: 0 auto 2rem;
+  max-width: 72rem;
+  padding-block: 1rem 2.25rem;
+  border-bottom: 1px solid var(--_rule);
+}
+
+/* Korean breaks between words, not inside them. */
+.hagilight-footer .hagilight-brand:lang(ko) {
+  overflow-wrap: break-word;
+  word-break: keep-all;
+}
+
+.hagilight-footer .hagilight-brand__lead {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1.5rem 3.5rem;
+}
+
+.hagilight-footer .hagilight-brand__headline {
+  margin: 0;
+  color: var(--_heading);
+  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
+  font-size: clamp(1.75rem, 1rem + 3.2cqi, 3rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.12;
+  text-wrap: balance;
+}
+
+.hagilight-footer .hagilight-brand__headline:lang(zh),
+.hagilight-footer .hagilight-brand__headline:lang(ja),
+.hagilight-footer .hagilight-brand__headline:lang(ko) {
+  letter-spacing: 0;
+  line-height: 1.25;
+}
+
+.hagilight-footer .hagilight-brand__body {
+  display: grid;
+  gap: 1.25rem;
+  justify-items: start;
+  min-width: 0;
+}
+
+.hagilight-footer .hagilight-brand__summary {
+  margin: 0;
+  max-width: 62ch;
+  color: var(--_muted);
+  font-size: 1rem;
+  line-height: 1.65;
+  text-wrap: pretty;
+}
+
+.hagilight-footer .hagilight-brand__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 1.5rem;
+}
+
+.hagilight-footer .hagilight-brand__primary,
+.hagilight-footer .hagilight-brand__secondary {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.75rem;
+  color: var(--_heading);
+  text-decoration: none;
+}
+
+.hagilight-footer .hagilight-brand__primary {
+  gap: 0.6rem;
+  border: 2px solid currentColor;
+  border-radius: 0.5rem;
+  padding-inline: 1.1rem;
+  font-weight: 650;
+  transition: background-color 180ms ease-out;
+}
+
+.hagilight-footer .hagilight-brand__primary:hover {
+  background-color: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.hagilight-footer .hagilight-brand__arrow {
+  flex: none;
+  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hagilight-footer .hagilight-brand__primary:hover .hagilight-brand__arrow,
+.hagilight-footer .hagilight-brand__primary:focus-visible .hagilight-brand__arrow {
+  transform: translateX(0.3rem);
+}
+
+.hagilight-footer .hagilight-brand__secondary {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.3em;
+}
+
+.hagilight-footer .hagilight-brand__secondary:hover {
+  text-decoration-thickness: 2px;
+}
+
+.hagilight-footer .hagilight-brand a:focus-visible {
+  border-radius: 0.25rem;
+  outline: 2px solid currentColor;
+  outline-offset: 0.25rem;
+}
+
+.hagilight-footer .hagilight-brand__pillars {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1.25rem;
+  margin: 0;
+  padding: 0;
+}
+
+.hagilight-footer .hagilight-brand__pillar {
+  position: relative;
+  margin: 0;
+  padding-top: 1rem;
+  border-top: 1px solid var(--_rule);
+}
+
+/* The heavy rule that the scroll-driven reveal draws over the hairline track. */
+.hagilight-footer .hagilight-brand__pillar::before {
+  content: '';
+  position: absolute;
+  inset: -1px 0 auto;
+  height: 2px;
+  background: var(--_heading);
+  transform-origin: left center;
+}
+
+.hagilight-footer .hagilight-brand__pillar dt {
+  margin: 0 0 0.4rem;
+  color: var(--_heading);
+  font-size: 1.05rem;
+  font-weight: 650;
+}
+
+.hagilight-footer .hagilight-brand__pillar dd {
+  margin: 0;
+  max-width: none;
+  color: var(--_muted);
+  font-size: 0.9rem;
+  line-height: 1.6;
+  text-wrap: pretty;
+}
+
+/* Breakpoints follow the width the footer is given, not the viewport: Starlight's content pane is narrow. */
+@container hagilight-brand (min-width: 40rem) {
+  .hagilight-footer .hagilight-brand__pillars {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1.5rem 2.5rem;
+  }
+
+  .hagilight-footer .hagilight-brand__pillar dd {
+    max-width: 34ch;
+  }
+}
+
+@container hagilight-brand (min-width: 52rem) {
+  .hagilight-footer .hagilight-brand__lead {
+    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+    align-items: end;
+  }
+}
+
+/*
+ * The one authored moment: as the footer scrolls into view the headline is uncovered from
+ * its baseline and the three pillar rules draw in left to right, one after another.
+ * Without scroll-driven animation, or with reduced motion, everything is simply shown.
+ */
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) {
+    .hagilight-footer .hagilight-brand__headline {
+      animation-name: hagilight-brand-uncover;
+      animation-timing-function: linear;
+      animation-fill-mode: both;
+      animation-timeline: view();
+      animation-range: entry 0% entry 80%;
+    }
+
+    .hagilight-footer .hagilight-brand__pillar::before {
+      animation-name: hagilight-brand-draw;
+      animation-timing-function: linear;
+      animation-fill-mode: both;
+      animation-timeline: view();
+      animation-range:
+        entry calc(10% + var(--hagilight-brand-i, 0) * 14%)
+        entry calc(70% + var(--hagilight-brand-i, 0) * 14%);
+    }
+  }
+}
+
+@keyframes hagilight-brand-uncover {
+  from {
+    clip-path: inset(0 0 100% 0);
+    transform: translateY(0.4em);
+  }
+
+  to {
+    clip-path: inset(0 0 -0.2em 0);
+    transform: none;
+  }
+}
+
+@keyframes hagilight-brand-draw {
+  from {
+    transform: scaleX(0);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}