/* The homepage statement's two words (statement.js draws them; Calvin, 4 Nov).
   "creative" [data-build="serif"]: F1 from creative-word/, landing in Geist Serif in hi-vis lime ("let's
   do f2, but let's have it settle in a different color (like c2)", then "sorry, meant f1 not f2"). While it builds, an
   invisible copy of the word (.sw__ghost) holds its place and each letter is drawn over its own spot (.sw__slot), so
   the line never moves; at rest it is plain text. It runs only on hover (Calvin, 4 Nov: "creative should not animate
   on load, only hover").
   "automates" [data-burst]: Valarian's logo glitch on hover ("burst for automate"; G1 on the automates/ board).
   Markup:
     <span class="sr-only">creative</span><span class="sw" data-build="serif" data-land="lime" aria-hidden="true">creative</span>
     <span class="hero__pixel" data-burst>automates</span> */

/* ---- "creative" */
.sw { position: relative; white-space: nowrap; -webkit-user-select: none; user-select: none; }   /* copy-paste gets the sr-only word */
.sw[data-build="serif"] { font-family: var(--font-serif, serif); font-weight: 400; letter-spacing: -.01em; }   /* where it lands */
.sw.is-run { display: inline-block; }
.sw__ghost { visibility: hidden; }
.sw__slot { position: absolute; top: 0; bottom: 0; }
.sw__slot > i { position: absolute; left: 50%; top: 0; font-style: normal; white-space: nowrap; transform: translateX(-50%); }
/* the mismatched letters: the site's own faces, nothing from outside the family */
.sw__slot > i.sw-pixel { font-family: var(--font-pixel, monospace); font-weight: 500; letter-spacing: 0; }
.sw__slot > i.sw-mono { font-family: var(--font-mono, monospace); font-weight: 700; letter-spacing: 0; }
.sw__slot > i.sw-black { font-family: var(--font-body); font-weight: 900; }
.sw__slot > i.sw-thin { font-family: var(--font-body); font-weight: 100; }
.sw__slot > i.sw-serif { font-family: var(--font-serif, serif); font-weight: 400; }
.sw__slot > i.sw-serif-i { font-family: var(--font-serif, serif); font-weight: 400; font-style: italic; font-synthesis: style; }
.sw__slot > i.sw-black-i { font-family: var(--font-body); font-weight: 900; font-style: italic; }
/* at rest, from the first paint: hi-vis lime (Calvin, 4 Nov: "actually have it land on hi-vis lime?"); a bare data-land
   starts on Signal orange and goes round the code, one colour per hover */
.sw[data-land] { color: var(--orange, #FF7900); }
.sw[data-land="lime"] { color: var(--lime, #D4F073); }

/* ---- "automates": Valarian's logo glitch on hover (G1 · Burst; Calvin, 4 Nov: "burst for automate"). The keyframes are
   valarian.com's (site-v2/src/assets/shell.css, .nav__brand .glitch-image), in the word's own green */
[data-burst] { position: relative; display: inline-block; }
.sb__c { position: absolute; left: 0; top: 0; width: 100%; height: 100%; white-space: nowrap; pointer-events: none;
         -webkit-user-select: none; user-select: none; opacity: 0; }
[data-burst].is-on .sb__c { animation: sb-burst .7s steps(2) 1 both; }
@keyframes sb-burst {
  0%   { clip-path: inset(30% 0);          opacity: .7;  transform: translate(-4px, 2px) scale(1.01); }
  18%  { clip-path: inset(15% 40% 60% 0);  opacity: .85; transform: translate(.25rem, -.125rem) scale(.95); }
  36%  { clip-path: inset(50% 0);          opacity: .7;  transform: translate(-.125rem) scale(1.02); }
  54%  { clip-path: inset(10% 20% 0 35%);  opacity: .8;  transform: translate(.125rem, .125rem) scale(1.015); }
  70%  { clip-path: inset(20% 10% 40% 0);  opacity: .85; transform: translate(-.188rem, .063rem) scale(.98); }
  86%  { clip-path: inset(5% 30% 20% 10%); opacity: .8;  transform: translate(.188rem, -.063rem) scale(1.03); }
  100% { clip-path: inset(0);              opacity: 0;   transform: translate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .sb__c { display: none; } }