/* ---------- Faunaform: one day of light ---------- The animated hero of the Faunaform shop (faunaform-shop, sections/ day-hero.liquid and the .day rules in assets/base.css), ported as a figure for the build write-up: shown as design work, linked to nothing. A page loads this file and faunaform-day.js; the markup is one
, and everything here is scoped under .ffd. WHAT IT IS. Seven skies side by side, one per print, from before dawn to dusk, each its print's own sky ink. The scenes stand on one horizon at one height, bowed a little like the edge of the Earth; the sun or moon of each hour sits on one arc across the day, the dotted path running through every disc; a band of small clouds rests along the horizon in two depths, each column showing its own stretch of one continuous band. Where the figure is 40rem wide or more the seven hang in one row with the wordmark in the open sky under the noon sun; narrower, they hang four over three like the set on a wall, each tile carrying its own stretch of the arc, the wordmark on the page above them. The layout follows the figure's own width (a container query), not the window's, because the figure sits in a column. WHAT CHANGED FROM THE SHOP. Nothing is a link and nothing answers a pointer but the pause button. The shop's hour names and label were small paper words on mid-tone skies, which resting.mjs would hold to 4.5:1 pixel by pixel and which several skies miss, so the hours and the animals are a caption row under the skies instead, on the page's own ground, in the site's type and inks. The wordmark is a picture (img/faunaform/day/wordmark.svg, its paper baked in), not text. THE TAGLINE, since 2026-10-21: the shop's own line under the wordmark, "Seven Minnesota animals, each at its own hour of the day." It is the one set of words left over the skies, and it is set at --text-2xl so that it is large text, held to 3:1 rather than 4.5. In --color-white it measures 3.3:1 on the palest skies it crosses (sunrise and morning mist) and 5.3:1 at noon; --ink-on-dark, the warm white, measured 2.75:1 there and fails, and so would anything smaller. It stays one or two lines inside --ffd-tagline-cols columns, clear of the arc where it falls through the sky at either end of the day. Four over three it is on the page under the wordmark, in the page's ink. Like the wordmark it is two elements, one per layout, each display: none in the other: resting.mjs keeps the color it read at its own width when it measures a probe at 390, 768 and 1440, so one element that turns from white in the sky to charcoal on the page is held as white on the page at 390, and fails at 1.09:1. The lockup paints a gradient from transparent to transparent, and it is there for the check, as .eng3-hero-scrim's is: resting.mjs measures text by the pixel only when an ANCESTOR paints a gradient or an image, and the skies are painted by the tiles beside the lockup, not under it in the tree, so without it the check reads the page's ground behind the figure and reports the tagline at 1:1. Do not remove it as dead. ARTWORK, NOT INTERFACE (COLOR.md section 6). The colours below are each print's inks and the shop's paper, sampled from the shop's rendered hero (snippets/hour-vars.liquid, from the products' metafields). They paint the drawing and nothing else, and are declared on .ffd and nowhere else, never on :root: --ffd-paper #fbfaf7 the shop's paper: the sun's dotted path, and the noon sky's clouds before dawn (owl) sky #475687 sun #ecd49c clouds #d6a6b2 sunrise (crane) sky #828abd sun #ec5b2c clouds #f5bf86 morning mist (moose) sky #6591b3 sun #f2b23e clouds #f1d9a6 noon (loon) sky #436ab0 sun #f5d980 clouds (paper) golden hour (bear) sky #6f82b8 sun #f0812c clouds #f4bd72 sunset (fox) sky #6d6eae sun #e2452b clouds #f3a457 dusk (rabbit) sky #455284 sun #f2c27a clouds #b98aad as --ffd--sky, -sun and -light (each print's light ink, which its clouds take). Two more live in the art files rather than here: the wordmark's paper (#fbfaf7, wordmark.svg) and the shop's ink (#1e1a16, wordmark-ink.svg, the narrow layout's wordmark on the page). The interface parts use the site's tokens: the captions in --color-muted-gray and --color-charcoal, the pause button's disc in --color-scrim and its icon in --ink-on-dark, its focus ring in --color-focus-ring. ARTWORK KEEPS ITS OWN TIME (MOTION.md section 6), and its own geometry: the arc, the curve of the Earth, the clouds' strips and the timings of the opening and the breath are the shop's, as custom properties below. Spacing and type are the site's tokens. All of the motion is inside prefers-reduced-motion: no-preference; with reduce the day is drawn and still, and the pause button is not shown. IN MOTION. When the figure first comes into view (faunaform-day.js arms it on load and draws it once it is a third in sight) the day draws itself: each hour's sun glides up the arc from the left edge of its own sky to its place, one after another from dawn to dusk, the dotted path drawn along with them, each scene rising as its sun arrives, then the clouds; about three and a half seconds. Then it breathes, one slow breath for everything: the suns swell, the scenes swell a little, the glints on the water sparkle in turn, the plants sway as a breeze crosses the day, the path's dots creep on and the clouds drift, the near ones faster than the far. Off screen it holds its breath; the button stops it all, and the choice is remembered on the device. */ /* The sky's height, worked out on each hour against the whole figure, so it is a length by the time the hour's own parts read it. */ @property --ffd-sky-h { syntax: ''; inherits: true; initial-value: 0px; } /* How far a sun is along its stretch of the arc, from the left edge of its sky (0) to its place (1). At rest 1; the opening glides it up from 0. */ @property --ffd-sun-t { syntax: ''; inherits: false; initial-value: 1; } /* When the opening is done; faunaform-day.js reads it. */ @property --ffd-intro-end { syntax: '