body, h1, h2, h3, h4 { font-family: 'Inclusive Sans Regular'; font-weight: 400; font-style: normal } body, button, .pill-button, h1, h2, h3, h4, th { font-style: normal } .bullet-point, .clear:after, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block } .font-color, body, p a:active { color: #333; } @media (prefers-color-scheme: dark) { .font-color, body, p a:active { color: #eee; } } .font-color-dark { color: #333; } .font-color-light { color: #eee; } .content, .tag, .tag-center, body { background-color: #fefefe } @media (prefers-color-scheme: dark) { .content, .tag, .tag-center, body { background-color: #222; } } .slider, header { left: 0; top: 0; right: 0 } a, a:active, a:hover, blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; text-decoration: none; font-weight: 400 } .underline, a:hover { text-decoration: underline } table { border-collapse: collapse; border-spacing: 0 } abbr, acronym, fieldset, img { border: 0 } address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: 400 } ol, ul { list-style: circle; margin-left: 15px; } caption, th { text-align: left } .app-site-title, .bullet-point, h1 { text-align: center } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400 } q:after, q:before { content: '' } .clear:after { clear: both; content: "."; height: 0; line-height: 0; visibility: hidden } .button { line-height: 26px; color: #333; background-color:#fefefe; height: 31px; font-size: 16px; margin: 12px 12px 12px 0px; padding: 2px 12px 22px; border: 2px solid #8c8c8c; border-radius: 2px; } .pill-button { background-color:transparent; padding: 4px 0px 2px !important; height: auto !important; letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0px; text-shadow: none; /*line-height: 26px; color: #333; height: 31px; font-size: 16px; margin: 12px 12px 12px 0px; padding: 2px 12px 22px; border: 2px solid #8c8c8c; border-radius: 2px;*/ } .button-link, .button-link:hover { color: #333; } @media (prefers-color-scheme: dark) { .button-link, .button-link:hover { color: #eee; } } h3, p { line-height: 26px } body, html { height: 100%; width: 100% } button:focus, input:focus, select:focus, textarea:focus, .pill-button:focus { outline: 0 } @font-face { font-family: 'Inclusive Sans Bold'; src: url(../fonts/InclusiveSans-Bold.ttf) format("truetype") } @font-face { font-family: 'Inclusive Sans Bold Italic'; src: url(../fonts/InclusiveSans-BoldItalic.ttf) format("truetype") } @font-face { font-family: 'Inclusive Sans Light'; src: url(../fonts/InclusiveSans-Light.ttf) format("truetype") } @font-face { font-family: 'Inclusive Sans Light Italic'; src: url(../fonts/InclusiveSans-LightItalic.ttf) format("truetype") } @font-face { font-family: 'Inclusive Sans Medium'; src: url(../fonts/InclusiveSans-Medium.ttf) format("truetype") } @font-face { font-family: 'Inclusive Sans Medium Italic'; src: url(../fonts/InclusiveSans-MediumItalic.ttf) format("truetype") } @font-face { font-family: 'Inclusive Sans Regular'; src: url(../fonts/InclusiveSans-Regular.ttf) format("truetype") } @font-face { font-family: 'Inclusive Sans Regular Italic'; src: url(../fonts/InclusiveSans-Italic.ttf) format("truetype") } @font-face { font-family: 'Inclusive Sans SemiBold'; src: url(../fonts/InclusiveSans-SemiBold.ttf) format("truetype") } @font-face { font-family: 'Inclusive Sans SemiBold Italic'; src: url(../fonts/InclusiveSans-SemiBoldItalic.ttf) format("truetype") } body { width: auto; height: auto } /* Regular, not bold, since 2026-08-11. Weight on this site comes from the font FAMILY, never from font-weight — the faces are separate families and `font-weight` is pinned to 400 throughout (see `.bold` at the `.bold, .bold-italic, .italic, .regular` rule). The base h1 had been bold, which made every page heading bold whether it asked or not. The markup already distinguishes the two cases: nine h1 elements are plain `class="left"`, and five opt in explicitly with `class="bold"` — the landing claim, the imprint, the privacy policy, the error page and an article title. Those five keep their weight, because `.bold` is a class and sits later in this file, so it wins on both specificity and order. R-037 anticipated this drift: `.header-buttons .pill-current` restates Inclusive Sans Bold rather than inheriting it, precisely so a change here cannot move the navigation. The current pill is therefore now heavier than the page heading, which is correct — it is a marker, not a heading. */ h1 { font-family: 'Inclusive Sans Regular'; font-weight: 400; font-size: 27px; line-height: 38px } h2 { font-family: 'Inclusive Sans Regular'; font-weight: 400; font-size: 22px; line-height: 32px } button, .pill-button, h3 { font-family: 'Inclusive Sans Regular Italic'; font-weight: 400; font-size: 20px } h4 { font-family: 'Inclusive Sans Bold Italic'; font-weight: 700; font-size: 18px; line-height: 22px; } /* The landing-page claim — the h1 of the site root. It has no navigation pill to take that role, unlike every section page, so the claim carries it (R-029). text-align must be restated: the site centres every h1 through the `.app-site-title, .bullet-point, h1` rule, and an element selector on the h1 itself beats the alignment inherited from the `.left` wrapper. `inherit` rather than `left` so the wrapper stays in charge if it ever changes. The decoration around it is a set of four alternatives, one drawn per request in index.php and applied through a body class (R-030). All four are CSS only — the site runs no JavaScript of its own. */ .claim { text-align: inherit; font-size: 48px; line-height: 58px; /* At this size a long word can push past a narrow viewport before the line breaks. The claim has no word long enough today, but the rule costs nothing and keeps a later rewrite from overflowing the page. */ overflow-wrap: break-word; } /* ── Landing-page effects ───────────────────────────────────────────────────────── index.php draws one of four per request and sets `effect-` on the body (R-030). All four are CSS only; this site runs no JavaScript of its own. Three of them paint into a full-viewport layer behind the content. That layer is body::before / ::after at z-index -1 — above the page background, beneath everything else. It only works because .content gives up its own background on this page: otherwise the opaque content box would cover the layer completely. Colour follows one rule throughout, the same one the aberration established: the ADDITIVE primaries (red, green, blue — they mix toward white) on the dark scheme, the SUBTRACTIVE ones (cyan, magenta, yellow — they mix toward black) on the light scheme. Decoration then always resolves toward the text colour instead of away from it (R-028). */ body.landing .content { background-color: transparent; } body.landing::before, body.landing::after { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; } /* 1. Aberration — the three colour channels orbit a common centre at radius 5.6px. Six keyframes, one every 60 degrees. Not twelve: between stops the offset cuts the chord rather than following the arc, and at 60 degrees that shortcut is 0.75px, which nobody can see. At 90 it becomes 1.6px and the rotation starts to visibly pulse. The offsets are shared between the two schemes; only the colours differ. */ @keyframes claim-fringe-subtractive { 0%, 100% { text-shadow: 5.60px 0.00px 0 rgba(0,255,255,.65), -2.80px 4.85px 0 rgba(255,0,255,.65), -2.80px -4.85px 0 rgba(255,255,0,.65); } 16.667% { text-shadow: 2.80px 4.85px 0 rgba(0,255,255,.65), -5.60px 0.00px 0 rgba(255,0,255,.65), 2.80px -4.85px 0 rgba(255,255,0,.65); } 33.333% { text-shadow: -2.80px 4.85px 0 rgba(0,255,255,.65), -2.80px -4.85px 0 rgba(255,0,255,.65), 5.60px 0.00px 0 rgba(255,255,0,.65); } 50% { text-shadow: -5.60px 0.00px 0 rgba(0,255,255,.65), 2.80px -4.85px 0 rgba(255,0,255,.65), 2.80px 4.85px 0 rgba(255,255,0,.65); } 66.667% { text-shadow: -2.80px -4.85px 0 rgba(0,255,255,.65), 5.60px 0.00px 0 rgba(255,0,255,.65), -2.80px 4.85px 0 rgba(255,255,0,.65); } 83.333% { text-shadow: 2.80px -4.85px 0 rgba(0,255,255,.65), 2.80px 4.85px 0 rgba(255,0,255,.65), -5.60px 0.00px 0 rgba(255,255,0,.65); } } @keyframes claim-fringe-additive { 0%, 100% { text-shadow: 5.60px 0.00px 0 rgba(255,0,0,.5), -2.80px 4.85px 0 rgba(0,255,0,.5), -2.80px -4.85px 0 rgba(0,0,255,.5); } 16.667% { text-shadow: 2.80px 4.85px 0 rgba(255,0,0,.5), -5.60px 0.00px 0 rgba(0,255,0,.5), 2.80px -4.85px 0 rgba(0,0,255,.5); } 33.333% { text-shadow: -2.80px 4.85px 0 rgba(255,0,0,.5), -2.80px -4.85px 0 rgba(0,255,0,.5), 5.60px 0.00px 0 rgba(0,0,255,.5); } 50% { text-shadow: -5.60px 0.00px 0 rgba(255,0,0,.5), 2.80px -4.85px 0 rgba(0,255,0,.5), 2.80px 4.85px 0 rgba(0,0,255,.5); } 66.667% { text-shadow: -2.80px -4.85px 0 rgba(255,0,0,.5), 5.60px 0.00px 0 rgba(0,255,0,.5), -2.80px 4.85px 0 rgba(0,0,255,.5); } 83.333% { text-shadow: 2.80px -4.85px 0 rgba(255,0,0,.5), 2.80px 4.85px 0 rgba(0,255,0,.5), -5.60px 0.00px 0 rgba(0,0,255,.5); } } /* The burst. The claim sits at zero offset — no fringe at all, perfectly legible — and the channels snap apart and settle back over about three quarters of a second, like a lens hunting for focus and finding it. IT IS THE BALL THAT SETS THIS OFF. The period is 7.3s to the millisecond because that is the ball's horizontal period, so the headline spikes at the instant the ball strikes a side wall. The keyframe percentages look arbitrary — 0.74, 2.466, 4.438 — and are simply the same absolute timings the burst always had, re-expressed against 7.3s instead of the 9s it ran at before the ball existed. Round them and the burst drifts off the impact. Side walls only. `text-shadow` is one property, so the claim can carry one burst, and the two wall periods are deliberately incommensurate — no single animation fires on both. A floor or ceiling still splits the ball; only a side wall carries through to the type. That hierarchy is the design, not a shortfall. This replaced a continuous rotation, for the reason the shooting star taught: steady motion is wallpaper and the eye stops reading it inside ten seconds, while a thing that happens occasionally can be waited for and can be missed. It also leaves the headline clean for eight seconds in every nine, which the rotation never did. The decay is in the numbers: 7.5px, then 4.2, 5.8, 2.6, 1.2, then nothing — an overshoot and a bounce rather than a fade, with the angle moving each time so it rings down rather than pulsing on one axis. */ @keyframes claim-burst-subtractive { 0% { text-shadow: 0 0 0 rgba(0,255,255,.65), 0 0 0 rgba(255,0,255,.65), 0 0 0 rgba(255,255,0,.65); } 0.74% { text-shadow: 7.50px 0.00px 0 rgba(0,255,255,.65), -3.75px 6.50px 0 rgba(255,0,255,.65), -3.75px -6.50px 0 rgba(255,255,0,.65); } 2.466% { text-shadow: 1.44px 3.95px 0 rgba(0,255,255,.65), -4.14px -0.73px 0 rgba(255,0,255,.65), 2.70px -3.22px 0 rgba(255,255,0,.65); } 4.438% { text-shadow: -5.25px 2.45px 0 rgba(0,255,255,.65), 0.51px -5.78px 0 rgba(255,0,255,.65), 4.75px 3.33px 0 rgba(255,255,0,.65); } 6.411% { text-shadow: -1.30px -2.25px 0 rgba(0,255,255,.65), 2.60px 0.00px 0 rgba(255,0,255,.65), -1.30px 2.25px 0 rgba(255,255,0,.65); } 8.384% { text-shadow: 0.77px -0.92px 0 rgba(0,255,255,.65), 0.41px 1.13px 0 rgba(255,0,255,.65), -1.18px -0.21px 0 rgba(255,255,0,.65); } 10.479%, 100% { text-shadow: 0 0 0 rgba(0,255,255,.65), 0 0 0 rgba(255,0,255,.65), 0 0 0 rgba(255,255,0,.65); } } @keyframes claim-burst-additive { 0% { text-shadow: 0 0 0 rgba(255,0,0,.5), 0 0 0 rgba(0,255,0,.5), 0 0 0 rgba(0,0,255,.5); } 0.74% { text-shadow: 7.50px 0.00px 0 rgba(255,0,0,.5), -3.75px 6.50px 0 rgba(0,255,0,.5), -3.75px -6.50px 0 rgba(0,0,255,.5); } 2.466% { text-shadow: 1.44px 3.95px 0 rgba(255,0,0,.5), -4.14px -0.73px 0 rgba(0,255,0,.5), 2.70px -3.22px 0 rgba(0,0,255,.5); } 4.438% { text-shadow: -5.25px 2.45px 0 rgba(255,0,0,.5), 0.51px -5.78px 0 rgba(0,255,0,.5), 4.75px 3.33px 0 rgba(0,0,255,.5); } 6.411% { text-shadow: -1.30px -2.25px 0 rgba(255,0,0,.5), 2.60px 0.00px 0 rgba(0,255,0,.5), -1.30px 2.25px 0 rgba(0,0,255,.5); } 8.384% { text-shadow: 0.77px -0.92px 0 rgba(255,0,0,.5), 0.41px 1.13px 0 rgba(0,255,0,.5), -1.18px -0.21px 0 rgba(0,0,255,.5); } 10.479%, 100% { text-shadow: 0 0 0 rgba(255,0,0,.5), 0 0 0 rgba(0,255,0,.5), 0 0 0 rgba(0,0,255,.5); } } /* The vertical walls, on a property of their own. `text-shadow` is already spoken for by the burst above, which is tied to the horizontal period — so a floor or ceiling strike had nothing left to move and the type only ever flinched at the sides. `filter: drop-shadow()` is a separate property and can carry the same three channels on the same decay, independently and at the vertical period. It is not merely a duplicate: chained drop-shadows each shade the result of the one before, so the split compounds very slightly rather than laying three flat copies. At these offsets the difference is not nameable on sight, which is the point — a bounce is a bounce whichever wall it was. 5.1s, exactly the ball's vertical period, for the same reason the burst is 7.3s. The zero states carry all three drop-shadows at zero offset rather than `none`: filter lists only interpolate when both ends hold the same functions in the same order. */ @keyframes claim-flare-subtractive { 0% { filter: drop-shadow(0 0 0 rgba(0,255,255,.6)) drop-shadow(0 0 0 rgba(255,0,255,.6)) drop-shadow(0 0 0 rgba(255,255,0,.6)); } 1.059% { filter: drop-shadow(7.5px 0.0px 0 rgba(0,255,255,.6)) drop-shadow(-3.75px 6.5px 0 rgba(255,0,255,.6)) drop-shadow(-3.75px -6.5px 0 rgba(255,255,0,.6)); } 3.529% { filter: drop-shadow(1.44px 3.95px 0 rgba(0,255,255,.6)) drop-shadow(-4.14px -0.73px 0 rgba(255,0,255,.6)) drop-shadow(2.7px -3.22px 0 rgba(255,255,0,.6)); } 6.353% { filter: drop-shadow(-5.25px 2.45px 0 rgba(0,255,255,.6)) drop-shadow(0.51px -5.78px 0 rgba(255,0,255,.6)) drop-shadow(4.75px 3.33px 0 rgba(255,255,0,.6)); } 9.176% { filter: drop-shadow(-1.3px -2.25px 0 rgba(0,255,255,.6)) drop-shadow(2.6px 0.0px 0 rgba(255,0,255,.6)) drop-shadow(-1.3px 2.25px 0 rgba(255,255,0,.6)); } 12% { filter: drop-shadow(0.77px -0.92px 0 rgba(0,255,255,.6)) drop-shadow(0.41px 1.13px 0 rgba(255,0,255,.6)) drop-shadow(-1.18px -0.21px 0 rgba(255,255,0,.6)); } 15%, 100% { filter: drop-shadow(0 0 0 rgba(0,255,255,.6)) drop-shadow(0 0 0 rgba(255,0,255,.6)) drop-shadow(0 0 0 rgba(255,255,0,.6)); } } @keyframes claim-flare-additive { 0% { filter: drop-shadow(0 0 0 rgba(255,0,0,.45)) drop-shadow(0 0 0 rgba(0,255,0,.45)) drop-shadow(0 0 0 rgba(0,0,255,.45)); } 1.059% { filter: drop-shadow(7.5px 0.0px 0 rgba(255,0,0,.45)) drop-shadow(-3.75px 6.5px 0 rgba(0,255,0,.45)) drop-shadow(-3.75px -6.5px 0 rgba(0,0,255,.45)); } 3.529% { filter: drop-shadow(1.44px 3.95px 0 rgba(255,0,0,.45)) drop-shadow(-4.14px -0.73px 0 rgba(0,255,0,.45)) drop-shadow(2.7px -3.22px 0 rgba(0,0,255,.45)); } 6.353% { filter: drop-shadow(-5.25px 2.45px 0 rgba(255,0,0,.45)) drop-shadow(0.51px -5.78px 0 rgba(0,255,0,.45)) drop-shadow(4.75px 3.33px 0 rgba(0,0,255,.45)); } 9.176% { filter: drop-shadow(-1.3px -2.25px 0 rgba(255,0,0,.45)) drop-shadow(2.6px 0.0px 0 rgba(0,255,0,.45)) drop-shadow(-1.3px 2.25px 0 rgba(0,0,255,.45)); } 12% { filter: drop-shadow(0.77px -0.92px 0 rgba(255,0,0,.45)) drop-shadow(0.41px 1.13px 0 rgba(0,255,0,.45)) drop-shadow(-1.18px -0.21px 0 rgba(0,0,255,.45)); } 15%, 100% { filter: drop-shadow(0 0 0 rgba(255,0,0,.45)) drop-shadow(0 0 0 rgba(0,255,0,.45)) drop-shadow(0 0 0 rgba(0,0,255,.45)); } } .effect-aberration .claim { animation: claim-burst-subtractive 7.3s linear infinite, claim-flare-subtractive 5.1s linear infinite; } /* Hovering the headline holds the split open instead of waiting for the next burst — the continuous rotation the burst replaced, kept on as the interaction. It is the only part of the old cursor tracking that survives without JavaScript: CSS can be told the pointer is over an element, never where the pointer is. Touch devices simply never reach this rule, which is the right outcome rather than a gap. THE BURST AND THE FLARE ARE RESTATED HERE, AND THAT IS THE WHOLE POINT OF THIS RULE. Animations are matched by position in the name list, so naming them again at indices 0 and 1 lets them run straight through the hover untouched. Drop them — declare the fringe alone, as this rule did until 2026-08-06 — and both are cancelled on hover and created afresh from time zero when the pointer leaves. The ball never stopped, so the claim comes back at an arbitrary offset and the burst no longer lands on the impact. That is permanent until reload, and it silently voids the reason 7.3s is 7.3s. The fringe goes last because it and the burst both write `text-shadow`, and the last animation in the list wins the property — which is exactly the intent: hovering holds the split open in place of waiting for the next burst. The flare is untouched by that, writing `filter`, so vertical bounces still carry through while the pointer is down. */ .effect-aberration .claim:hover { animation: claim-burst-subtractive 7.3s linear infinite, claim-flare-subtractive 5.1s linear infinite, claim-fringe-subtractive 6s linear infinite; } @media (prefers-color-scheme: dark) { .effect-aberration .claim { animation-name: claim-burst-additive, claim-flare-additive; } /* All three named, in the same order as the shorthand above. A shorter list does not leave the rest at their previous values — it truncates the set to its own length, so naming the fringe alone here would switch the burst and the flare off outright. */ .effect-aberration .claim:hover { animation-name: claim-burst-additive, claim-flare-additive, claim-fringe-additive; } } /* The ball. No gravity, no drag, no easing — it crosses at a constant rate and reverses the instant it touches a wall, which is what "bouncing off the walls" means before physics gets involved. Horizontal and vertical are two separate animations on two nested elements, because an element has one transform and these are genuinely independent bounces. `alternate` supplies the reflection: the animation runs to the far wall, then runs backwards. `linear` supplies the absence of gravity — any easing at all would have it slow as it approached a wall, which reads as weight. The two periods are deliberately incommensurate. 7.3 and 5.1 seconds never come back into phase at any point a reader would sit through, so the ball keeps finding new paths across the page instead of retracing one. Give them a common factor and it settles into a closed loop within a minute. */ .effect-aberration { --ball: rgba(51, 51, 51, .5); --ball-1: rgba(0, 255, 255, .5); --ball-2: rgba(255, 0, 255, .5); --ball-3: rgba(255, 255, 0, .5); } @media (prefers-color-scheme: dark) { .effect-aberration { --ball: rgba(238, 238, 238, .55); --ball-1: rgba(255, 0, 0, .45); --ball-2: rgba(0, 255, 0, .45); --ball-3: rgba(0, 0, 255, .45); } } .ball i { position: absolute; top: 0; left: 0; width: 14px; height: 14px; animation: ball-x 7.3s linear infinite alternate; } /* Middle: the vertical travel, and the split that a side wall produces. It carries no fill — only its shadow shows — but it sits at the ball's true position, which the outer element does not, having no vertical travel of its own. That is the entire reason this layer exists. */ .ball i i { display: block; position: static; width: 100%; height: 100%; border-radius: 50%; animation: ball-y 5.1s linear infinite alternate, ball-split-x 7.3s linear infinite; } /* Inner: the ball itself, and the split a floor or ceiling produces. */ .ball i i i { display: block; width: 100%; height: 100%; border-radius: 50%; background-color: var(--ball); animation: ball-split-y 5.1s linear infinite; } /* Travel stops one ball short of the far edge, so it touches the wall rather than halfway leaving through it. */ @keyframes ball-x { from { transform: translateX(0); } to { transform: translateX(calc(100vw - 14px)); } } @keyframes ball-y { from { transform: translateY(0); } to { transform: translateY(calc(100vh - 14px)); } } /* The split is what an impact looks like. At rest the ball is a plain disc with no fringe at all; the moment it strikes a wall the three channels jump apart, and over about a second they settle back into one shape. It is the only cue that a bounce happened, so it replaced an earlier opacity dip rather than joining it — two cues for one event just muddied both. THESE TWO ARE NOT `alternate`, while the travel animations beside them are. That looks like an oversight and is the whole trick. Under `alternate` the timeline is a mirror: the value on the approach to 100% is the same value on the way back from it, so a ramp that gives the split *after* the far wall unavoidably gives it *before* as well, and the ball anticipates its own bounce. Running forward only, the loop boundary does the work — 100% holds zero, 0% is full split, and the wrap between them is instantaneous. A split that appears in no time and fades over a second is what an impact looks like. Alignment is exact and not a coincidence: travel is `alternate` over period P, so a wall is struck at 0, P, 2P …; the split runs forward over the same P, so it restarts on every one of them. Change one period without the other and the ball starts flashing in open space. Three channels at 120°, radius 5px: (5, 0), (−2.5, 4.33), (−2.5, −4.33). Every keyframe carries three shadows in the same order and colours, which is what lets box-shadow interpolate at all. */ @keyframes ball-split-x { 0% { box-shadow: 5px 0 0 var(--ball-1), -2.5px 4.33px 0 var(--ball-2), -2.5px -4.33px 0 var(--ball-3); } 14% { box-shadow: 0 0 0 var(--ball-1), 0 0 0 var(--ball-2), 0 0 0 var(--ball-3); } 100% { box-shadow: 0 0 0 var(--ball-1), 0 0 0 var(--ball-2), 0 0 0 var(--ball-3); } } @keyframes ball-split-y { 0% { box-shadow: 5px 0 0 var(--ball-1), -2.5px 4.33px 0 var(--ball-2), -2.5px -4.33px 0 var(--ball-3); } 20% { box-shadow: 0 0 0 var(--ball-1), 0 0 0 var(--ball-2), 0 0 0 var(--ball-3); } 100% { box-shadow: 0 0 0 var(--ball-1), 0 0 0 var(--ball-2), 0 0 0 var(--ball-3); } } /* 2. Starfield — dots as tiny radial gradients on tiles of mismatched sizes, so the pattern's true repeat is their lowest common multiple and never lands on screen. The ::before layer drifts, the sparser ::after layer twinkles. On the light scheme the sky inverts to ink specks on paper, which is the same picture as a negative. */ /* The sky itself. Set on the body so it propagates to the canvas and paints behind the star layers, which sit at z-index -1 — put it on any of those layers instead and it would cover the ones drawn before it. Colours are a moonless sky far from a town. It is not black: airglow and unresolved starlight leave it a very dark blue, darkest overhead and lifting slightly toward the horizon. Deliberately NO warm tone anywhere down there — that orange band is sodium streetlight, the one thing a dark sky does not have. The faint teal along the bottom is airglow, which is oxygen emission and genuinely that colour. Darker than the site's usual #222 on purpose: stars cannot read against mid-grey. */ /* Every star is a core plus a halo, never a hard-edged dot. A 1px disc with a clean edge reads as a dead pixel or a speck of dust — the falloff is what makes the eye accept it as a light source rather than a mark on the screen. The light scheme needs both a bigger radius and a stronger halo than the dark one. Against near-white there is far less contrast to work with, so the same geometry that reads as a star on black reads as dirt on paper. Size and softness carry it instead. */ .effect-starfield { --star: rgba(38, 44, 74, .72); --star-glow: rgba(38, 44, 74, .16); --star-r: 2.7px; /* Light scheme keeps the negative — ink specks on paper — so the sky inverts to a cool paper gradation rather than turning into night. */ background-image: linear-gradient(180deg, #fdfdfe 0%, #f3f5f9 62%, #ecf0f6 100%); background-attachment: fixed; } @media (prefers-color-scheme: dark) { .effect-starfield { --star: rgba(255, 255, 255, .95); /* Faintly blue, which is what atmospheric scattering does to a point source and what keeps the bloom from looking like a grey smudge. */ --star-glow: rgba(178, 204, 255, .26); --star-r: 1.5px; background-image: radial-gradient(150% 55% at 50% 108%, rgba(28, 60, 56, .45), transparent 72%), linear-gradient(180deg, #070c17 0%, #0b1220 40%, #101a2b 74%, #16202f 100%); } } .effect-starfield::before { background-image: radial-gradient(circle calc(var(--star-r) * 1.15) at 18% 24%, var(--star) 34%, var(--star-glow) 58%, transparent 100%), radial-gradient(circle calc(var(--star-r) * 0.85) at 62% 71%, var(--star) 34%, var(--star-glow) 58%, transparent 100%), radial-gradient(circle calc(var(--star-r) * 1.30) at 84% 38%, var(--star) 34%, var(--star-glow) 58%, transparent 100%), radial-gradient(circle calc(var(--star-r) * 0.80) at 33% 88%, var(--star) 34%, var(--star-glow) 58%, transparent 100%), radial-gradient(circle calc(var(--star-r) * 1.00) at 47% 12%, var(--star) 34%, var(--star-glow) 58%, transparent 100%), radial-gradient(circle calc(var(--star-r) * 0.70) at 9% 62%, var(--star) 34%, var(--star-glow) 58%, transparent 100%); background-size: 260px 260px, 380px 380px, 520px 520px, 300px 300px, 440px 440px, 610px 610px; animation: starfield-drift 150s linear infinite; } /* Each layer travels exactly one tile, so the loop is seamless — and because the tiles differ in size they travel at different speeds, which reads as depth. */ @keyframes starfield-drift { to { background-position: 0 260px, 0 380px, 0 520px, 0 300px, 0 440px, 0 610px; } } .effect-starfield::after { background-image: radial-gradient(circle calc(var(--star-r) * 1.35) at 71% 18%, var(--star) 32%, var(--star-glow) 56%, transparent 100%), radial-gradient(circle calc(var(--star-r) * 1.55) at 28% 54%, var(--star) 32%, var(--star-glow) 56%, transparent 100%), radial-gradient(circle calc(var(--star-r) * 1.20) at 88% 79%, var(--star) 32%, var(--star-glow) 56%, transparent 100%); background-size: 700px 700px, 900px 900px, 800px 800px; animation: starfield-twinkle 6.5s ease-in-out infinite alternate; } @keyframes starfield-twinkle { from { opacity: .2; } to { opacity: 1; } } /* Things that cross the sky. One shooting star and three satellites, in a container index.php emits only for this effect — pseudo-elements ran out, and four moving objects want four real elements. Shooting star and satellite are deliberately nothing alike, which is the whole reason for having both: a second of bright streak against a bare dot that takes forty seconds to cross and never changes speed. Told apart at a glance, the way they are in life. Every path is `rotate(θ) translateX(d)` — rotate first, then travel along the element's OWN x axis. That matters more than it looks. Travelling by an (x, y) vector means the trail's tilt and the direction of flight are two separate numbers that have to be kept in agreement by hand, and they silently disagree the moment the window changes shape. Rotating first makes them the same number: whatever θ is, the streak lies along the line it flies, at every viewport, with no arithmetic to get wrong. */ .sky, .film, .sonar, .draft, .ball { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* Every moving object in every effect. `display: block` is load-bearing — is inline by default, and an inline box with no content collapses to nothing no matter what width and height say. */ .sky i, .film i, .sonar i, .draft i { position: absolute; display: block; opacity: 0; } .sky i { /* The head of the streak, so the tail stretches back from a fixed point rather than the whole object growing from its middle. */ transform-origin: 100% 50%; } /* The shooting star. Its bearing and entry point come from the sky-* class, which index.php draws per request — so it does not always fall the same way. */ .sky i:nth-child(1) { left: var(--sx); top: var(--sy); width: 170px; height: 1.5px; border-radius: 2px; background-image: linear-gradient(90deg, transparent, var(--star)); animation: shooting-star 19s ease-in infinite; } @keyframes shooting-star { 0% { opacity: 0; transform: rotate(var(--dir)) translateX(0) scaleX(.3); } 1% { opacity: 1; } 6% { opacity: 1; } 8% { opacity: 0; transform: rotate(var(--dir)) translateX(150vmax) scaleX(1); } 100% { opacity: 0; transform: rotate(var(--dir)) translateX(150vmax) scaleX(1); } } /* Two of the four bearings run right to left, entering past the far edge. Angles beyond 90 degrees turn the element around with the path, so the head still leads. */ .sky-a { --dir: 18deg; --sx: -14%; --sy: 6%; } .sky-b { --dir: 37deg; --sx: -10%; --sy: 2%; } .sky-c { --dir: 156deg; --sx: 112%; --sy: 5%; } .sky-d { --dir: 139deg; --sx: 108%; --sy: 1%; } /* The satellites. `linear` is doing real work: any easing at all would give away that this is an animation rather than an orbit. Their periods share no common factor, so they never fall into step, and the negative delays mean the sky is already busy when the page opens instead of empty for the first half-minute. */ .sky i:nth-child(n+2) { width: 2.5px; height: 2.5px; border-radius: 50%; background-color: var(--star); animation-name: satellite; animation-timing-function: linear; animation-iteration-count: infinite; } .sky i:nth-child(2) { left: -2%; top: 13%; --dir: 11deg; animation-duration: 46s; animation-delay: -8s; } .sky i:nth-child(3) { left: -2%; top: 61%; --dir: -9deg; animation-duration: 67s; animation-delay: -31s; } .sky i:nth-child(4) { left: 102%; top: 34%; --dir: 169deg; animation-duration: 83s; animation-delay: -55s; } @keyframes satellite { 0% { opacity: 0; transform: rotate(var(--dir)) translateX(0); } 3% { opacity: .85; } 44% { opacity: .85; } 47% { opacity: 0; transform: rotate(var(--dir)) translateX(135vmax); } 100% { opacity: 0; transform: rotate(var(--dir)) translateX(135vmax); } } /* 3. Aurora — three broad colour fields, heavily blurred, turning slowly about the centre. The layer is oversized by half the viewport in every direction so the rotation never swings an edge into view. */ .effect-aurora { --aur-1: rgba(0, 210, 255, .40); --aur-2: rgba(255, 0, 200, .34); --aur-3: rgba(255, 215, 0, .34); } @media (prefers-color-scheme: dark) { .effect-aurora { --aur-1: rgba(255, 0, 60, .42); --aur-2: rgba(0, 255, 120, .32); --aur-3: rgba(60, 80, 255, .46); } } .effect-aurora::before { top: -50%; right: -50%; bottom: -50%; left: -50%; background-image: radial-gradient(circle at 32% 34%, var(--aur-1), transparent 55%), radial-gradient(circle at 70% 42%, var(--aur-2), transparent 55%), radial-gradient(circle at 48% 72%, var(--aur-3), transparent 55%); filter: blur(60px); animation: aurora-swirl 34s linear infinite; } @keyframes aurora-swirl { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.25); } to { transform: rotate(360deg) scale(1); } } /* 4. Grain — film grain, for a studio whose photography is shot on instant film. The noise is an inline SVG feTurbulence rather than an image file, so it costs no request and cannot 404. Greyscale on purpose: over a light page only its dark half registers, over a dark page only its light half, so one texture serves both schemes. The jump is per keyframe, not smooth — `steps(1)` holds each position for its whole segment, which is what makes it read as grain rather than as a sliding texture. */ .effect-grain::before { /* Oversized well past any shift below, so an edge can never travel into view. */ top: -20%; right: -20%; bottom: -20%; left: -20%; /* feTurbulence alone is a near-uniform mid-grey — laid over the page at any useful opacity it reads as a grey wash rather than as grain. The feColorMatrix fixes that: it forces RGB to black and derives ALPHA from the noise's red channel minus a threshold, so a little over half of every tile is fully transparent and the rest ramps up. What lands on the page is sparse specks, not a veil. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 -0.45'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .55; animation: grain-shift .5s steps(1) infinite; } /* Inverting keeps the alpha and flips the specks from black to white, which is the difference between grain on paper and grain on film. */ @media (prefers-color-scheme: dark) { .effect-grain::before { filter: invert(1); opacity: .4; } } /* Shifts are in pixels, not percentages. The tile is 200px, so a handful of pixels is enough to resample it into fresh grain, while a percentage of a layer this oversized would move it far enough to read as a sliding slab. */ @keyframes grain-shift { 0% { transform: translate(0, 0); } 20% { transform: translate(-7px, -5px); } 40% { transform: translate(5px, -9px); } 60% { transform: translate(-9px, 7px); } 80% { transform: translate(7px, 5px); } 100% { transform: translate(0, 0); } } /* The two things that happen to film. A light leak is the rare beautiful accident, once in about half a minute; a scratch is the frequent small one, every eleven seconds and gone in half of one. Between them the grain gets an event to wait for, the way the night sky has its shooting star. The leak stays warm in both schemes rather than following the additive/subtractive rule the other effects obey. That rule exists so decoration resolves toward the text colour — but a leak is light spilling onto the emulsion before the picture was ever developed, and it is orange because film is orange there. Turning it cyan on the light scheme would be consistent and wrong. */ .effect-grain { --scratch: rgba(28, 24, 18, .55); } @media (prefers-color-scheme: dark) { .effect-grain { --scratch: rgba(255, 246, 232, .6); } } .film-a { --leak-x: 0%; --leak-y: 38%; } .film-b { --leak-x: 100%; --leak-y: 55%; } .film-c { --leak-x: 88%; --leak-y: 0%; } .film-d { --leak-x: 10%; --leak-y: 100%; } /* The leak. Oversized and heavily blurred, so what reaches the page is a glow with no describable edge — the moment you can see where it stops, it stops being light. */ .film i:nth-child(1) { top: -25%; right: -25%; bottom: -25%; left: -25%; background-image: radial-gradient(ellipse 55% 85% at var(--leak-x) var(--leak-y), rgba(255, 176, 74, .9), rgba(255, 94, 46, .5) 38%, transparent 70%); filter: blur(45px); animation: light-leak 34s ease-in-out infinite; } @keyframes light-leak { 0% { opacity: 0; transform: scale(1); } 7% { opacity: .52; transform: scale(1.07); } 14% { opacity: .46; } 24% { opacity: 0; transform: scale(1.14); } 100% { opacity: 0; transform: scale(1); } } /* Held back on the light scheme: the page is already near-white, and the same opacity that glows against #222 just turns paper orange. */ @media (prefers-color-scheme: light) { .film i:nth-child(1) { animation-name: light-leak-pale; } } @keyframes light-leak-pale { 0% { opacity: 0; transform: scale(1); } 7% { opacity: .34; transform: scale(1.07); } 14% { opacity: .3; } 24% { opacity: 0; transform: scale(1.14); } 100% { opacity: 0; transform: scale(1); } } /* The scratch. `steps(1)` again — it must jitter between positions, not slide between them, because a scratch is a physical gouge that the film jumps around, not something that travels. Overhangs top and bottom so neither end is ever seen. */ .film i:nth-child(2) { top: -5%; bottom: -5%; left: 34%; width: 1px; background-image: linear-gradient(180deg, transparent, var(--scratch) 14%, var(--scratch) 86%, transparent); animation: film-scratch 11s steps(1) infinite; } @keyframes film-scratch { 0% { opacity: 0; transform: translateX(0); } 1% { opacity: .55; transform: translateX(0); } 2% { opacity: .3; transform: translateX(3px); } 3.2% { opacity: .6; transform: translateX(-2px); } 4.4% { opacity: .28; transform: translateX(4px); } 5.5% { opacity: 0; transform: translateX(4px); } 100% { opacity: 0; transform: translateX(4px); } } /* 5. Sonar — an instrument rather than weather, and the only effect that depicts a thing actively looking for something. Range rings sit still, a beam comes round every six seconds, and returns bloom where it has just passed. The blips run on 6, 12 and 18 second periods — exact multiples of the sweep — so each lights roughly under the beam without anything coordinating them. Not perfect sync, and it should not be: a return that landed on the beam to the millisecond every time would read as a loop, where a near miss reads as a machine. */ .effect-sonar { --sonar-line: rgba(24, 68, 92, .20); --sonar-beam: rgba(0, 150, 170, .16); --sonar-blip: rgba(0, 148, 168, .9); } @media (prefers-color-scheme: dark) { .effect-sonar { --sonar-line: rgba(126, 224, 212, .13); --sonar-beam: rgba(130, 255, 225, .12); --sonar-blip: rgba(140, 255, 228, .92); } } /* The origin sits inside the viewport, not in a corner. A corner pivot can only sweep the one quadrant that is on screen, so the beam has to jump back after a quarter turn — which reads as the animation restarting rather than as a thing going round. Put the pivot on the page and a full 360° turn is continuous, with no seam anywhere in it. Kept right of centre so the sweep passes behind the claim rather than under it. */ .effect-sonar { --sonar-x: 68%; --sonar-y: 55%; --sonar-period: 9s; } /* Range rings, concentric on that origin. `repeating-radial-gradient` draws the whole set from one declaration — a 1px band every 9vmin. */ .effect-sonar::before { background-image: repeating-radial-gradient(circle at var(--sonar-x) var(--sonar-y), transparent 0 9vmin, var(--sonar-line) 9vmin calc(9vmin + 1px)); } /* The beam. An oversized square centred on the origin and turned about its own middle, carrying a conic wedge that is brightest at its leading edge and fades away behind — so the glow trails the line, the way a display holds phosphor for a moment. Get this backwards and the glow arrives first and the line snaps off, which looks wrong without being easy to name. */ .sonar i:nth-child(1) { left: var(--sonar-x); top: var(--sonar-y); width: 300vmax; height: 300vmax; margin-left: -150vmax; margin-top: -150vmax; opacity: 1; transform-origin: 50% 50%; /* The third stop is not optional. A conic gradient holds its last colour all the way round to 360°, so without it the "wedge" is 30° of fade followed by 330° of solid tint over the entire page — which looks like a background, not a beam. */ background-image: conic-gradient(from 0deg at 50% 50%, transparent 0deg, var(--sonar-beam) 30deg, transparent 30.5deg); animation: sonar-sweep var(--sonar-period) linear infinite; } @keyframes sonar-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* The returns. Each is offset from the origin in vmin on BOTH axes — never a mix of percentages — so its bearing from the centre is a fixed number rather than something that changes with the window's shape. That is what makes the timing below hold. Each delay is that bearing expressed as a fraction of one revolution, minus the 30° width of the wedge, because the leading edge arrives that much earlier than the angle the element sits at. The result is that a return lights *as the line reaches it* rather than on a timer that happens to run nearby. */ .sonar i:nth-child(n+2) { /* Size is per return, so the margins that centre it have to be derived rather than fixed. Close contacts read larger and distant ones smaller — signal strength falling off with range is most of what makes a display look like a display. */ --blip: 8px; width: var(--blip); height: var(--blip); margin-left: calc(var(--blip) / -2); margin-top: calc(var(--blip) / -2); border-radius: 50%; background-image: radial-gradient(circle, var(--sonar-blip) 22%, transparent 68%); animation-name: sonar-blip; animation-duration: var(--sonar-period); animation-timing-function: ease-out; animation-iteration-count: infinite; } /* Each delay is exactly (bearing − 30) ÷ 360 × 9s, to the millisecond. Rounded to two decimals instead, half of them land a few milliseconds after the line has already passed — invisible on screen, but it makes the relationship look approximate when it is not, and the next person to move a return would have no rule to follow. */ /* bearing 34.7° */ .sonar i:nth-child(2) { left: calc(var(--sonar-x) + 18vmin); top: calc(var(--sonar-y) - 26vmin); animation-delay: 0.1174s; } /* bearing 109.4° */ .sonar i:nth-child(3) { left: calc(var(--sonar-x) + 34vmin); top: calc(var(--sonar-y) + 12vmin); animation-delay: 1.986s; } /* bearing 163.1° */ .sonar i:nth-child(4) { left: calc(var(--sonar-x) + 10vmin); top: calc(var(--sonar-y) + 33vmin); animation-delay: 3.3285s; } /* bearing 222.5° */ .sonar i:nth-child(5) { left: calc(var(--sonar-x) - 22vmin); top: calc(var(--sonar-y) + 24vmin); animation-delay: 4.8128s; } /* bearing 295.0° */ .sonar i:nth-child(6) { left: calc(var(--sonar-x) - 30vmin); top: calc(var(--sonar-y) - 14vmin); animation-delay: 6.6254s; } /* bearing 346.8° */ .sonar i:nth-child(7) { left: calc(var(--sonar-x) - 8vmin); top: calc(var(--sonar-y) - 34vmin); animation-delay: 7.919s; } /* Those six all sit around 31–36vmin out, which draws them as a ring of evenly spaced dots — a pattern, not a scan. These four break the range: one contact close in, three well out. The offsets stay in vmin on both axes for the same reason as before, so every bearing below is still a fixed number the delay can be derived from. */ /* bearing 73°, close in */ .sonar i:nth-child(8) { --blip: 12px; left: calc(var(--sonar-x) + 10vmin); top: calc(var(--sonar-y) - 3vmin); animation-delay: 1.083s; } /* bearing 140°, far out */ .sonar i:nth-child(9) { --blip: 6px; left: calc(var(--sonar-x) + 35vmin); top: calc(var(--sonar-y) + 41vmin); animation-delay: 2.738s; } /* bearing 255°, far out */ .sonar i:nth-child(10) { --blip: 5.5px; left: calc(var(--sonar-x) - 56vmin); top: calc(var(--sonar-y) + 15vmin); animation-delay: 5.625s; } /* bearing 317°, far out */ .sonar i:nth-child(11) { --blip: 6px; left: calc(var(--sonar-x) - 34vmin); top: calc(var(--sonar-y) - 37vmin); animation-delay: 7.185s; } /* Bright at 0%, because 0% is the instant the line arrives — the delays above are what place that instant. Then a long decay, so the screen is never empty between passes. */ @keyframes sonar-blip { 0% { opacity: 1; transform: scale(1.8); } 5% { opacity: .8; transform: scale(1); } 34% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } /* The origin itself, ticking over once per revolution. */ .sonar::before { content: ""; position: absolute; left: var(--sonar-x); top: var(--sonar-y); width: 5px; height: 5px; margin-left: -2.5px; margin-top: -2.5px; border-radius: 50%; background-color: var(--sonar-blip); animation: sonar-origin var(--sonar-period) linear infinite; } @keyframes sonar-origin { 0% { opacity: .85; } 12% { opacity: .25; } 100% { opacity: .25; } } /* 7. Drafting — the only constructive effect. Everything else here is atmosphere that happens to the page; this one is somebody working something out on it. A faint grid, and every so often a dimension line, an arc or a height draws itself, holds long enough to be read, and is rubbed out. Marks in two groups. Three measurements drawing every 9, 12 and 15 seconds — periods that share no factor, so they never appear as a set and something is nearly always being drawn. Then an app icon's construction grid, whose parts are staggered so they read as one drawing being built rather than four unrelated marks. Every mark tours. Its animation runs four times its drawing period and contains four draws, each somewhere else on the page, so nothing ever reappears where it last was — 36, 48, 60 and 52 seconds round for the line, arc, height and icon. CSS cannot pick a position per iteration, so the itinerary is written out; the move itself happens in the gap between one fade-out and the next draw, where the mark is at opacity 0 and travelling costs nothing to look at. The icon is a *template*, not a traced logo. Squircle, inscribed circle and centre cross is what an icon grid actually looks like before anything is drawn on it, and it claims to be none of the real icons in particular. */ .effect-drafting { --draft-grid: rgba(40, 72, 122, .09); --draft-major: rgba(40, 72, 122, .16); --draft-ink: rgba(28, 78, 148, .5); /* The construction lines sit under the outline they serve, as they do on the real template — the squircle is the drawing, the grid is the scaffolding. */ --draft-grid-line: rgba(28, 78, 148, .26); } @media (prefers-color-scheme: dark) { .effect-drafting { --draft-grid: rgba(150, 200, 255, .06); --draft-major: rgba(150, 200, 255, .11); --draft-ink: rgba(152, 214, 255, .55); --draft-grid-line: rgba(152, 214, 255, .28); } } /* Minor grid every 44px, major every 220px — the fifth line heavier, as on paper. */ .effect-drafting::before { background-image: linear-gradient(0deg, var(--draft-major) 1px, transparent 1px), linear-gradient(90deg, var(--draft-major) 1px, transparent 1px), linear-gradient(0deg, var(--draft-grid) 1px, transparent 1px), linear-gradient(90deg, var(--draft-grid) 1px, transparent 1px); background-size: 220px 220px, 220px 220px, 44px 44px, 44px 44px; } /* The variant moves every mark, and moves each one differently — the offsets below are combined with different signs, scales and axes per mark further down, so the whole arrangement changes rather than sliding across as a block. The icon gets its own position outright, because a drawing that always appears in the same corner stops being something you notice. */ .draft-a { --dx: 0%; --dy: 0%; --ix: 66%; --iy: 45%; } .draft-b { --dx: 11%; --dy: -9%; --ix: 29%; --iy: 63%; } .draft-c { --dx: -8%; --dy: 10%; --ix: 74%; --iy: 69%; } .draft-d { --dx: 5%; --dy: 16%; --ix: 36%; --iy: 32%; } .draft i { background-color: var(--draft-ink); } /* A horizontal dimension, with a tick at each end. */ .draft i:nth-child(1) { left: calc(18% + var(--dx)); top: calc(31% + var(--dy)); width: 33%; height: 1px; transform-origin: 0 50%; animation: draft-line 36s ease-in-out infinite; } /* Each mark takes the variant offsets differently — one straight, one reversed, one with the axes swapped. Applying the same shift to all three would move the arrangement without changing it. */ .draft i:nth-child(1)::before, .draft i:nth-child(1)::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background-color: var(--draft-ink); } .draft i:nth-child(1)::before { left: 0; } .draft i:nth-child(1)::after { right: 0; } @keyframes draft-line { 0% { opacity: 0; transform: translate(0, 0) scaleX(0); } 0.75% { opacity: 1; } 2.75% { opacity: 1; transform: translate(0, 0) scaleX(1); } 6.75% { opacity: 1; transform: translate(0, 0) scaleX(1); } 8.25% { opacity: 0; transform: translate(0, 0) scaleX(1); } 21% { opacity: 0; transform: translate(0, 0) scaleX(0); } 24% { opacity: 0; transform: translate(30vw, 9vh) scaleX(0); } 25% { opacity: 0; transform: translate(30vw, 9vh) scaleX(0); } 25.75% { opacity: 1; } 27.75% { opacity: 1; transform: translate(30vw, 9vh) scaleX(1); } 31.75% { opacity: 1; transform: translate(30vw, 9vh) scaleX(1); } 33.25% { opacity: 0; transform: translate(30vw, 9vh) scaleX(1); } 46% { opacity: 0; transform: translate(30vw, 9vh) scaleX(0); } 49% { opacity: 0; transform: translate(-6vw, 26vh) scaleX(0); } 50% { opacity: 0; transform: translate(-6vw, 26vh) scaleX(0); } 50.75% { opacity: 1; } 52.75% { opacity: 1; transform: translate(-6vw, 26vh) scaleX(1); } 56.75% { opacity: 1; transform: translate(-6vw, 26vh) scaleX(1); } 58.25% { opacity: 0; transform: translate(-6vw, 26vh) scaleX(1); } 71% { opacity: 0; transform: translate(-6vw, 26vh) scaleX(0); } 74% { opacity: 0; transform: translate(22vw, -14vh) scaleX(0); } 75% { opacity: 0; transform: translate(22vw, -14vh) scaleX(0); } 75.75% { opacity: 1; } 77.75% { opacity: 1; transform: translate(22vw, -14vh) scaleX(1); } 81.75% { opacity: 1; transform: translate(22vw, -14vh) scaleX(1); } 83.25% { opacity: 0; transform: translate(22vw, -14vh) scaleX(1); } 96% { opacity: 0; transform: translate(22vw, -14vh) scaleX(0); } 99% { opacity: 0; transform: translate(0, 0) scaleX(0); } 100% { opacity: 0; transform: translate(0, 0) scaleX(0); } } /* An arc: a circle with only two borders coloured, swung into place. */ .draft i:nth-child(2) { left: calc(22% - var(--dy)); top: calc(64% - var(--dx)); width: 120px; height: 120px; background-color: transparent; border: 1px solid transparent; border-top-color: var(--draft-ink); border-right-color: var(--draft-ink); border-radius: 50%; animation: draft-arc 48s ease-in-out infinite; animation-delay: -4s; } @keyframes draft-arc { 0% { opacity: 0; transform: translate(0, 0) rotate(-42deg) scale(.86); } 1% { opacity: 1; } 3.25% { opacity: 1; transform: translate(0, 0) rotate(18deg) scale(1); } 7.25% { opacity: 1; transform: translate(0, 0) rotate(18deg) scale(1); } 8.75% { opacity: 0; transform: translate(0, 0) rotate(36deg) scale(1.05); } 21% { opacity: 0; transform: translate(0, 0) rotate(-42deg) scale(.86); } 24% { opacity: 0; transform: translate(46vw, -18vh) rotate(-42deg) scale(.86); } 25% { opacity: 0; transform: translate(46vw, -18vh) rotate(-42deg) scale(.86); } 26% { opacity: 1; } 28.25% { opacity: 1; transform: translate(46vw, -18vh) rotate(18deg) scale(1); } 32.25% { opacity: 1; transform: translate(46vw, -18vh) rotate(18deg) scale(1); } 33.75% { opacity: 0; transform: translate(46vw, -18vh) rotate(36deg) scale(1.05); } 46% { opacity: 0; transform: translate(46vw, -18vh) rotate(-42deg) scale(.86); } 49% { opacity: 0; transform: translate(18vw, -40vh) rotate(-42deg) scale(.86); } 50% { opacity: 0; transform: translate(18vw, -40vh) rotate(-42deg) scale(.86); } 51% { opacity: 1; } 53.25% { opacity: 1; transform: translate(18vw, -40vh) rotate(18deg) scale(1); } 57.25% { opacity: 1; transform: translate(18vw, -40vh) rotate(18deg) scale(1); } 58.75% { opacity: 0; transform: translate(18vw, -40vh) rotate(36deg) scale(1.05); } 71% { opacity: 0; transform: translate(18vw, -40vh) rotate(-42deg) scale(.86); } 74% { opacity: 0; transform: translate(58vw, 12vh) rotate(-42deg) scale(.86); } 75% { opacity: 0; transform: translate(58vw, 12vh) rotate(-42deg) scale(.86); } 76% { opacity: 1; } 78.25% { opacity: 1; transform: translate(58vw, 12vh) rotate(18deg) scale(1); } 82.25% { opacity: 1; transform: translate(58vw, 12vh) rotate(18deg) scale(1); } 83.75% { opacity: 0; transform: translate(58vw, 12vh) rotate(36deg) scale(1.05); } 96% { opacity: 0; transform: translate(58vw, 12vh) rotate(-42deg) scale(.86); } 99% { opacity: 0; transform: translate(0, 0) rotate(-42deg) scale(.86); } 100% { opacity: 0; transform: translate(0, 0) rotate(-42deg) scale(.86); } } /* A height, drawn downward. */ .draft i:nth-child(3) { left: calc(79% + var(--dy)); top: calc(19% - var(--dx)); width: 1px; height: 29%; transform-origin: 50% 0; animation: draft-height 60s ease-in-out infinite; animation-delay: -6s; } @keyframes draft-height { 0% { opacity: 0; transform: translate(0, 0) scaleY(0); } 0.75% { opacity: 1; } 3% { opacity: 1; transform: translate(0, 0) scaleY(1); } 7% { opacity: 1; transform: translate(0, 0) scaleY(1); } 8.5% { opacity: 0; transform: translate(0, 0) scaleY(1); } 21% { opacity: 0; transform: translate(0, 0) scaleY(0); } 24% { opacity: 0; transform: translate(-52vw, 22vh) scaleY(0); } 25% { opacity: 0; transform: translate(-52vw, 22vh) scaleY(0); } 25.75% { opacity: 1; } 28% { opacity: 1; transform: translate(-52vw, 22vh) scaleY(1); } 32% { opacity: 1; transform: translate(-52vw, 22vh) scaleY(1); } 33.5% { opacity: 0; transform: translate(-52vw, 22vh) scaleY(1); } 46% { opacity: 0; transform: translate(-52vw, 22vh) scaleY(0); } 49% { opacity: 0; transform: translate(-26vw, 8vh) scaleY(0); } 50% { opacity: 0; transform: translate(-26vw, 8vh) scaleY(0); } 50.75% { opacity: 1; } 53% { opacity: 1; transform: translate(-26vw, 8vh) scaleY(1); } 57% { opacity: 1; transform: translate(-26vw, 8vh) scaleY(1); } 58.5% { opacity: 0; transform: translate(-26vw, 8vh) scaleY(1); } 71% { opacity: 0; transform: translate(-26vw, 8vh) scaleY(0); } 74% { opacity: 0; transform: translate(-66vw, 34vh) scaleY(0); } 75% { opacity: 0; transform: translate(-66vw, 34vh) scaleY(0); } 75.75% { opacity: 1; } 78% { opacity: 1; transform: translate(-66vw, 34vh) scaleY(1); } 82% { opacity: 1; transform: translate(-66vw, 34vh) scaleY(1); } 83.5% { opacity: 0; transform: translate(-66vw, 34vh) scaleY(1); } 96% { opacity: 0; transform: translate(-66vw, 34vh) scaleY(0); } 99% { opacity: 0; transform: translate(0, 0) scaleY(0); } 100% { opacity: 0; transform: translate(0, 0) scaleY(0); } } /* ── The icon construction grid ─────────────────────────────────────────────── Four marks on one period, staggered so they build in the order a template is laid out: the squircle, then its concentric circles, then the orthogonal grid, then the diagonals. All four share one box — they are the same square — so position and size are set once here. The layout follows Apple's own icon grid rather than a rounded box with a cross through it. Two things carry the resemblance: the grid lines land on the tangents that matter (13% and 87% where the corner radius meets the straight edge, 35% and 65% where the largest circle touches, 50% for centre), and the diagonals run corner to corner, so the whole thing gathers into the asterisks at the corner-radius centres that make the template recognisable. */ .draft i:nth-child(n+4) { left: var(--ix); top: var(--iy); width: 190px; height: 190px; margin-left: -95px; margin-top: -95px; background-color: transparent; animation-duration: 52s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-name: draft-icon; } /* The squircle. 22.37% is the corner radius iOS actually uses. */ .draft i:nth-child(4) { border: 1px solid var(--draft-ink); border-radius: 22.37%; } /* Three concentric circles, as rings cut out of one background rather than three more elements. `closest-side` makes the radius half the box, so the stops below are fractions of that radius: 78%, 55% and 34%. */ .draft i:nth-child(5) { animation-delay: .45s; background-image: radial-gradient(circle closest-side at 50% 50%, transparent 0 77.4%, var(--draft-ink) 77.4% 78%, transparent 78%), radial-gradient(circle closest-side at 50% 50%, transparent 0 54.4%, var(--draft-ink) 54.4% 55%, transparent 55%), radial-gradient(circle closest-side at 50% 50%, transparent 0 33.4%, var(--draft-ink) 33.4% 34%, transparent 34%); } /* The orthogonal grid: five lines each way, on the tangents rather than evenly spaced. */ .draft i:nth-child(6) { animation-delay: .9s; background-image: linear-gradient(90deg, transparent 0 calc(13% - .5px), var(--draft-grid-line) calc(13% - .5px) calc(13% + .5px), transparent calc(13% + .5px)), linear-gradient(90deg, transparent 0 calc(35% - .5px), var(--draft-grid-line) calc(35% - .5px) calc(35% + .5px), transparent calc(35% + .5px)), linear-gradient(90deg, transparent 0 calc(50% - .5px), var(--draft-grid-line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(90deg, transparent 0 calc(65% - .5px), var(--draft-grid-line) calc(65% - .5px) calc(65% + .5px), transparent calc(65% + .5px)), linear-gradient(90deg, transparent 0 calc(87% - .5px), var(--draft-grid-line) calc(87% - .5px) calc(87% + .5px), transparent calc(87% + .5px)), linear-gradient(180deg, transparent 0 calc(13% - .5px), var(--draft-grid-line) calc(13% - .5px) calc(13% + .5px), transparent calc(13% + .5px)), linear-gradient(180deg, transparent 0 calc(35% - .5px), var(--draft-grid-line) calc(35% - .5px) calc(35% + .5px), transparent calc(35% + .5px)), linear-gradient(180deg, transparent 0 calc(50% - .5px), var(--draft-grid-line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(180deg, transparent 0 calc(65% - .5px), var(--draft-grid-line) calc(65% - .5px) calc(65% + .5px), transparent calc(65% + .5px)), linear-gradient(180deg, transparent 0 calc(87% - .5px), var(--draft-grid-line) calc(87% - .5px) calc(87% + .5px), transparent calc(87% + .5px)); } /* The diagonals, corner to corner. They overhang the box on every side — as they do on the real template, where the construction lines run past the artwork. */ .draft i:nth-child(7) { animation-delay: 1.35s; width: 240px; height: 240px; margin-left: -120px; margin-top: -120px; background-image: linear-gradient(45deg, transparent calc(50% - .5px), var(--draft-grid-line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(-45deg, transparent calc(50% - .5px), var(--draft-grid-line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); } /* The icon does not draw in the same place twice. The `--ix`/`--iy` variant only settles where it starts, so within a single visit it would otherwise reappear on the same spot every cycle, which is the moment a thing stops being worth glancing at. CSS cannot pick a new position per iteration, so the cycle is four times as long and contains four draws, each somewhere else. The move happens in the gap: between one fade-out and the next draw the element is at opacity 0, and translating it there costs nothing to look at. Thirteen seconds a draw, fifty-two round the tour. The stagger on the four parts survives this. Each runs the same keyframes offset by its own delay, so at any moment a later part may still be at the previous position — but it is invisible until its own draw begins, by which time it has arrived. The teleport window is four per cent of the cycle, a little over two seconds, comfortably longer than the 1.35s spread between first part and last. Shorten one without the other and the grid will tear itself in half across the page. */ @keyframes draft-icon { /* first */ 0% { opacity: 0; transform: translate(0, 0) scale(.84); } 1% { opacity: 1; } 2.8% { opacity: 1; transform: translate(0, 0) scale(1); } 7.7% { opacity: 1; transform: translate(0, 0) scale(1); } 9.4% { opacity: 0; transform: translate(0, 0) scale(1.03); } 20% { opacity: 0; transform: translate(0, 0) scale(.84); } 24% { opacity: 0; transform: translate(-24vw, 13vh) scale(.84); } /* second */ 25% { opacity: 0; transform: translate(-24vw, 13vh) scale(.84); } 26% { opacity: 1; } 27.8% { opacity: 1; transform: translate(-24vw, 13vh) scale(1); } 32.7% { opacity: 1; transform: translate(-24vw, 13vh) scale(1); } 34.4% { opacity: 0; transform: translate(-24vw, 13vh) scale(1.03); } 45% { opacity: 0; transform: translate(-24vw, 13vh) scale(.84); } 49% { opacity: 0; transform: translate(16vw, -17vh) scale(.84); } /* third */ 50% { opacity: 0; transform: translate(16vw, -17vh) scale(.84); } 51% { opacity: 1; } 52.8% { opacity: 1; transform: translate(16vw, -17vh) scale(1); } 57.7% { opacity: 1; transform: translate(16vw, -17vh) scale(1); } 59.4% { opacity: 0; transform: translate(16vw, -17vh) scale(1.03); } 70% { opacity: 0; transform: translate(16vw, -17vh) scale(.84); } 74% { opacity: 0; transform: translate(-8vw, 22vh) scale(.84); } /* fourth */ 75% { opacity: 0; transform: translate(-8vw, 22vh) scale(.84); } 76% { opacity: 1; } 77.8% { opacity: 1; transform: translate(-8vw, 22vh) scale(1); } 82.7% { opacity: 1; transform: translate(-8vw, 22vh) scale(1); } 84.4% { opacity: 0; transform: translate(-8vw, 22vh) scale(1.03); } 95% { opacity: 0; transform: translate(-8vw, 22vh) scale(.84); } 99%, 100% { opacity: 0; transform: translate(0, 0) scale(.84); } } /* Every effect stops dead for a reader who asked for less motion. The static gradients stay — a still starfield or a still wash is not motion — but the aberration has no text-shadow outside its keyframes, so it simply disappears. */ @media (prefers-reduced-motion: reduce) { body.landing::before, body.landing::after, /* Qualified with `body.landing` on purpose, and it is not decoration. Every animation on these elements is declared on an `:nth-child()` selector — one class-level above a bare `.sky i` — so the unqualified list this replaced on 2026-08-06 lost the cascade to all eleven of them and stopped precisely none. `display: none` below was doing the entire job on its own. Both halves now hold independently, which is what the comment above always claimed. Do not un-qualify them for symmetry with `.ball`, whose animations really are declared on `.ball i` and need no help. */ body.landing .sky i, body.landing .film i, body.landing .sonar i, /* The sonar's origin dot animates on a pseudo-element of the container, not on an ``, so it is not reachable through any of the lines above. */ body.landing .sonar::before, body.landing .draft i, .ball i, .ball i i, .ball i i i, .effect-aberration .claim, /* The hover rule outranks the plain one, so it has to be named here too — without it, pointing at the headline would restart exactly what was switched off. */ .effect-aberration .claim:hover { animation: none; } /* These have no resting state worth showing — parked at opacity 0 they are just invisible specks and an invisible line — so they are removed outright. */ .sky, .film, .sonar, .draft, .ball { display: none; } } @media only screen and (min-width:771px) and (max-width:1024px) { h1 { font-size: 25px; line-height: 38px } h2 { font-size: 22px; line-height: 35px } .claim { font-size: 60px; line-height: 72px; } button, .pill-button, h3 { font-size: 20px } h4 { font-size: 18px; line-height: 22px; } } @media only screen and (min-width:1024px) { h1 { font-size: 28px; line-height: 32px } h2 { font-size: 25px; line-height: 35px } .claim { font-size: 82px; line-height: 94px; } button, .pill-button, h3 { font-size: 20px } h4 { font-size: 18px; line-height: 22px; } } .bold, .bold-italic, .italic, .regular { font-style: normal; font-weight: 400 } p { font-size: 16px } .inset { margin-left: 14px } .footer-box p { margin-left: 10px } .app-site-title { font-size: 38px; line-height: 52px } .regular { font-family: 'Inclusive Sans Regular' } .italic { font-family: 'Inclusive Sans Regular italic' } .bold { font-family: 'Inclusive Sans Bold' } .bold-italic { font-family: 'Inclusive Sans Bold Italic' } .bullet-point { font-size: 145px } .right { text-align: right } .center { text-align: center } .left { text-align: left } .app-site-title, .inset, h1 { margin-top: 15px; margin-bottom: 15px; } .screenshots p, .tag { text-align: center; display: block } .dimensions { display: block; width: auto; padding: 0 16px; /*min-height:;*/ } @media only screen and (min-width:771px) and (max-width:1024px) { .dimensions { padding: 0 24px } } @media only screen and (min-width:1024px) { .dimensions { width: 900px; margin: 0 auto; padding: 0 24px } .element { width: 900px } } .footer-dimensions { display: block; width: auto; padding: 0 36px; /*min-height:;*/ } @media only screen and (min-width:771px) and (max-width:1024px) { .footer-dimensions { padding: 0 56px } } @media only screen and (min-width:1024px) { .footer-dimensions { width: 900px; margin: 0 auto; padding: 0 56px } } .content { display: block; position: relative; margin-top: 18px; padding-bottom: 5px; } .content-text { display: block; position: relative; margin-top: 65px; padding-bottom: 5px; } .slider-inset { margin-top: 330px; } @media only screen and (min-width:771px) and (max-width:1400px) { .slider-inset { margin-top: 400px } } @media only screen and (min-width:1401px) { .slider-inset { margin-top: 500px } } .element { margin: 0 auto; padding-top: 16px; padding-bottom: 16px } .content-box { border: 1px #333 solid; border-radius: 8px; margin: 16px 24px; color: #333; } @media only screen and (min-width:771px) and (max-width:1400px) { .content-box { margin: 16px auto; } } @media only screen and (min-width:1401px) { .content-box { margin: 16px auto; } } @media (prefers-color-scheme: dark) { .content-box { border: 1px #eee solid; color: #eee; } } .tag { display: block; color: #333; float:left; height: 30px; font-size: 16px; margin: 12px 12px auto 0px; padding: 4px 12px 24px 12px; border-radius: 15px } @media (prefers-color-scheme: dark) { .tag { color: #eee; } } /* Restated, not inherited. `a:hover` sits in the reset selector list (line 84) that zeroes margin and padding, and `a:hover` (0,1,1) beats `.tag` (0,1,0) — so a `.tag` placed directly on an `` loses its 12px top margin the instant the pointer touches it, and the button jumps up the page. Same failure and same fix as `.footer-social` (line ~2082). Every button on the site avoids this structurally, by putting `.tag` on a `
` or `