/* Your Visitors story, beats 1 to 3 (2 October 2026, section 2 rebuild; rounds 2 and 3 the same evening): the business's
   information made readable (beat 1: the site and the two files; beat 2: Search and an AI assistant), then the install
   (beat 3). Markup: sections/superstrate-world/story-visitors.html (figures --1, --1b and --2); motion:
   world/story-visitors.js (beat1, beat1b, beat2). Aura's own parts and the warm skeleton come from the kit
   (world-story-aura.css, .wsa-*); this file only places them and draws what is not Aura: the Your Business site's
   Packages, the two files Superstrate writes, the Search and AI assistant cards, the site's code card and the visitor's
   pointer. The dotted connectors are the story's own (world-story-visitors.css, .world-story-v-link*).

   Round 3 (the owner, 21:10): the example text is back in every card, spread over two pictures with bigger cards and more
   air; skeleton bars stay only where they always were (the links' addresses in llms.txt, the host site's body lines, the
   install script's inner lines).

   Colours (the owner, 19:35): neutrals (white, ink, the kit's warm chrome and skeleton beige) and the brand clay in two
   shades (--wsa-brand: Growth picked out on the site, the script tags; --wsa-brand-tint: the lines and answers that name
   Growth). Aura's own line and star stay on Aura (the Crest). Sizes are design px on the 880 x 372 stage (the fit scales
   it, about 1.11 at 1524 x 718). Every property's default is the finished picture, so no-JS and reduced motion show it
   whole; the timeline tweens from the start values. */

@property --wsv12-hl { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --wsv2-lap-a { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --wsv2-lap-b { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --wsv2-gate { syntax: '<number>'; inherits: true; initial-value: 1; }

/* ------------------------------------------------------------------ beat 1: the business's page, and the two files */
/* Two columns: the business's page (340) and what Superstrate writes from it (460), with 80px of ground between them for
   the dotted connectors. */
.world-story .wsv1-site{position:absolute;left:0;top:12px;width:340px;height:348px}
.world-story .wsv1-page{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.world-story .wsv1-page > .wsa-site-h2{margin:0 0 2px;font-size:24px;line-height:26px}
/* the site's package cards, as the kit draws them (.wsa-pkg: white, a grey hairline, ink) with what each includes in
   words, and no price; Growth is picked out in the brand clay, as the kit's .wsa-pkg.is-lit */
.world-story .wsv1-pkg{
 --wsv12-hl:0;
 display:flex;flex-direction:column;gap:3px;padding:11px 14px 12px;border-radius:12px;background:#fff;
 border:1px solid color-mix(in srgb, var(--wsa-brand) calc(var(--wsv12-hl) * 100%), var(--wsa-site-line, rgb(17 19 24 / .09)));
 box-shadow:inset 0 0 0 calc(var(--wsv12-hl) * 1px) var(--wsa-brand),0 10px 24px -14px color-mix(in srgb, var(--wsa-brand) calc(var(--wsv12-hl) * 45%), transparent),0 1px 2px rgb(17 19 24 / .04);
}
.world-story .wsv1-pkg--growth{--wsv12-hl:1}
.world-story .wsv1-pkg > b{font-size:16px;font-weight:700;line-height:20px;color:var(--wsa-site-ink, #1c1b1f)}
.world-story .wsv1-pkg-text{font-size:14px;line-height:19px;color:var(--wsa-site-muted, #5b5b61)}

/* the two files Superstrate writes: structured data (for search) and a readable llms.txt (for AI) */
.world-story .wsv1-file{
 position:absolute;left:420px;width:460px;display:flex;flex-direction:column;overflow:hidden;border-radius:12px;background:#fff;
 border:1px solid rgb(17 19 24 / .1);box-shadow:0 1px 2px rgb(17 19 24 / .06),0 18px 40px -22px rgb(0 0 0 / .5);
}
.world-story .wsv1-file--json{top:12px;height:194px}
.world-story .wsv1-file--llms{top:220px;height:140px}
.world-story .wsv1-file-head{
 flex:none;display:flex;align-items:center;gap:8px;height:32px;padding:0 14px;background:var(--wsa-site-chrome, #f4f0e9);
 border-bottom:1px solid var(--wsa-site-line, rgb(17 19 24 / .09));font:500 14px/1 var(--wsa-ui);color:var(--wsa-ink);
}
.world-story .wsv1-ico{flex:none;width:16px;height:16px;fill:none;stroke:var(--wsa-muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.world-story .wsv1-code{display:block;padding:8px 0;font:500 14px/18px var(--wsa-mono);color:var(--wsa-ink)}
/* one line a row; the lines that name Growth wear the light clay tint once the connector has brought it */
.world-story .wsv1-ln{--wsv12-hl:0;display:block;height:18px;padding:0 14px;white-space:pre;background:color-mix(in srgb, var(--wsa-brand-tint, #f4e2dc) calc(var(--wsv12-hl) * 100%), transparent)}
.world-story .wsv1-ln--growth{--wsv12-hl:1;box-shadow:0 1px 0 color-mix(in srgb, var(--wsa-brand-tint, #f4e2dc) calc(var(--wsv12-hl) * 100%), transparent)}
/* (the tint runs one pixel on, so two lit lines read as one band at any scale) */
.world-story .wsv1-in{padding-left:calc(14px + 2ch)}
.world-story .wsv1-k{color:var(--wsa-ink)}
.world-story .wsv1-p{color:var(--wsa-muted)}
.world-story .wsv1-s{color:var(--wsa-ink)}
.world-story .wsv1-md{font-weight:500}
/* a link's address in llms.txt: the site's own, so a skeleton bar (never a domain) */
.world-story .wsv1-code .wsa-skel{display:inline-block;width:2ch;height:9px;vertical-align:-1px}
.world-story .wsv1-ln--growth .wsa-skel{background-color:var(--wsa-skel-strong, #dbd2c4)}

/* ------------------------------------------------------------------ beat 2: Search and an AI assistant */
/* Two wide cards, one under the other, each a question and its answer side by side: what was asked on the left (320),
   what came back on the right, past a hairline. Neither is a real product: no names, no marks. The cards stand on a bare
   .world-story-v-browser (setPan fades and steps back that frame, never the incoming connectors). */
.world-story .world-story-v-beat--1b .world-story-v-browser.wsv1b-frame{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.world-story .wsv1-card{
 position:absolute;left:0;width:880px;display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-rows:auto 1fr;
 padding:22px 0 22px 24px;border-radius:14px;background:#fff;border:1px solid rgb(17 19 24 / .1);
 box-shadow:0 1px 2px rgb(17 19 24 / .06),0 18px 40px -22px rgb(0 0 0 / .5);font-family:'DM Sans',sans-serif;color:var(--wsa-ink);
}
.world-story .wsv1-card--search{top:36px}
.world-story .wsv1-card--ai{top:200px}
.world-story .wsv1-card-head{grid-column:1;grid-row:1;display:flex;align-items:center;gap:8px;height:20px;margin-bottom:12px;font-size:14.5px;font-weight:600;line-height:20px;color:var(--wsa-muted)}
/* what was asked: the search box with its query (typed), or the visitor's question in its bubble */
.world-story .wsv1-query{
 grid-column:1;grid-row:2;align-self:start;display:flex;align-items:center;height:42px;margin-right:28px;padding:0 16px;
 border-radius:21px;background:#fff;border:1px solid rgb(17 19 24 / .16);font-size:15px;line-height:1;color:var(--wsa-ink);
}
.world-story .wsv1-query-text{display:block;white-space:nowrap}
.world-story .wsv1-ask{
 grid-column:1;grid-row:2;align-self:start;justify-self:start;display:block;margin-right:24px;padding:11px 15px;
 border-radius:14px 14px 14px 4px;background:var(--wsa-site-chrome, #f4f0e9);font-size:15px;line-height:21px;color:var(--wsa-ink);
}
/* what came back: the page it cites, and the result or the answer, each naming Growth */
.world-story .wsv1-found{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0 28px;border-left:1px solid var(--wsa-site-line, rgb(17 19 24 / .09))}
.world-story .wsv1-src{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:rgb(17 19 24 / .05);font-size:14px;font-weight:500;line-height:1;color:var(--wsa-ink);white-space:nowrap}
.world-story .wsv1-snippet{display:block;font-size:16px;line-height:23px;color:var(--wsa-ink)}
.world-story .wsv1-answer{display:block;font-size:17px;line-height:25px;color:var(--wsa-ink)}
.world-story .wsv1-w{display:inline-block;white-space:pre}
/* Growth, named: a band of the light clay tint under the word */
.world-story .wsv1-hit{--wsv12-hl:1;font-weight:700;box-shadow:inset 0 -.42em 0 color-mix(in srgb, var(--wsa-brand-tint, #f4e2dc) calc(var(--wsv12-hl) * 100%), transparent)}

/* ------------------------------------------------------------------ beat 3: the visitor arrives; the site is ready */
/* The browser frame is a bare wrapper here (setPan fades and steps back .world-story-v-browser): the kit's site draws the
   window. */
.world-story .world-story-v-beat--2 .world-story-v-browser.wsv2-frame{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.world-story .wsv2-site{position:absolute;inset:0}
.world-story .wsv2-site .wsa-site-h1{max-width:440px}
/* the hero ends 10px sooner, so the packages sit higher and the Crest's line runs well clear of their names */
.world-story .wsv2-site .wsa-site-hero{padding-bottom:14px}
/* the code card stands where the hero's picture was */
.world-story .wsv2-site .wsa-site-art{visibility:hidden}
/* Aura's resting button, the Crest, bottom centre, 12px up (resting.ts has 16), its line well clear of the package names
   (the hero ends 10px sooner here, polish round). Its edge light is one lap of the timeline's (--wsv2-lap-a, on the Crest)
   plus the idle loop's (--wsv2-lap-b), the second let in by the gate (--wsv2-gate, on the Crest) once the picture is
   finished. The loop runs on the light and the line themselves, not on the Crest: --wsa-lap is inherited, so animated on
   the Crest it restyled the whole Crest every frame (polish round, 2 October 2026). */
.world-story .wsv2-rest{
 --wsv2-lap-a:0;--wsv2-gate:1;
 position:absolute;left:0;right:0;bottom:12px;width:max-content;margin:0 auto;z-index:2;
}
.world-story .wsv2-rest > :is(.wsa-rest-line,.wsa-rest-lap){--wsv2-lap-b:0;--wsa-lap:calc(var(--wsv2-lap-a) + var(--wsv2-lap-b) * var(--wsv2-gate))}
/* the site's code card: the installation script's tags, and between them its lines as the skeleton (no code, no
   address, no key). It stands on the page's 28px gutter, under the nav's button, clear of the packages. */
.world-story .wsv2-code{
 position:absolute;right:28px;top:100px;width:300px;display:flex;flex-direction:column;overflow:hidden;border-radius:12px;background:#fff;
 border:1px solid rgb(17 19 24 / .12);box-shadow:0 1px 2px rgb(17 19 24 / .08),0 24px 48px -20px rgb(17 19 24 / .42);z-index:3;
}
.world-story .wsv2-code-head{
 flex:none;display:flex;align-items:center;gap:8px;height:32px;padding:0 14px;background:var(--wsa-site-chrome, #f4f0e9);
 border-bottom:1px solid var(--wsa-site-line, rgb(17 19 24 / .09));font:500 13.5px/1 var(--wsa-ui);color:var(--wsa-ink);white-space:nowrap;
}
.world-story .wsv2-code-ico{flex:none;width:16px;height:16px;fill:none;stroke:var(--wsa-muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.world-story .wsv2-code-body{display:block;padding:9px 0 11px;font:500 13.5px/18px var(--wsa-mono);color:var(--wsa-ink)}
.world-story .wsv2-ln{display:flow-root;height:18px;padding:0 16px;white-space:pre}
.world-story .wsv2-in{padding-left:calc(16px + 2ch)}
.world-story .wsv2-tag{color:var(--wsa-brand)}
.world-story .wsv2-ln > .wsa-skel{height:8px;margin-top:5px}
.world-story .wsv2-ln:nth-child(2) > .wsa-skel{--w:78%}
.world-story .wsv2-ln:nth-child(3) > .wsa-skel{--w:58%}
.world-story .wsv2-ln:nth-child(4) > .wsa-skel{--w:88%}
.world-story .wsv2-ln:nth-child(5) > .wsa-skel{--w:46%}
/* their idle light (the kit's .is-shimmer, the centred picture only) runs down the script, a line after another */
.world-story .wsv2-ln:nth-child(3) > .wsa-skel{--wsa-delay:.25s}
.world-story .wsv2-ln:nth-child(4) > .wsa-skel{--wsa-delay:.5s}
.world-story .wsv2-ln:nth-child(5) > .wsa-skel{--wsa-delay:.75s}
/* the visitor */
.world-story .wsv2-cursor{position:absolute;left:300px;top:212px;display:block;width:16px;height:22px;z-index:4;pointer-events:none;filter:drop-shadow(0 1px 1px rgb(17 19 24 / .3))}
.world-story .wsv2-cursor > svg{display:block;fill:var(--wsa-ink);stroke:#fff;stroke-width:1.3;stroke-linejoin:round}

/* ------------------------------------------------------------------ layers */
/* What first appears mid-story waits at opacity 0 on its own layer (the script keeps it visible), so it is rastered before
   its moment rather than on it. */
.world-story .world-story-v-live :is(.wsv1-file,.wsv1-found,.wsv1-ask,.wsv2-code,.wsv2-rest,.wsv2-cursor){will-change:opacity}

/* ------------------------------------------------------------------ idle life (the centred picture only) */
/* the product's edge light on the Crest: one 1.8 s lap about every 10 s (the kit's own wsa-lap timing, on this scene's
   second term). The connectors' travelling dots are world-story-visitors.css's. */
@keyframes wsv2-lap{0%,82%{--wsv2-lap-b:0;animation-timing-function:cubic-bezier(.45,0,.3,1)}100%{--wsv2-lap-b:1}}
@media (prefers-reduced-motion:no-preference){
 body:not([data-motion-paused="true"]) .world-story .world-story-v.is-open:not(.is-static) .world-story-v-beat--2.is-current .wsv2-rest > :is(.wsa-rest-line,.wsa-rest-lap){animation:wsv2-lap 10s linear -7s infinite}
}