/* world-story-visitors.css: the homepage story section's "your visitors" story (26 September 2026). See
   src/views/sections/superstrate-world/story-visitors.html (the six pictures) and src/world/story-visitors.js (the timeline).

   Every picture is a fixed 880 x 372 drawing (.world-story-v-stage) scaled by --wsv-k, so its inside is authored in plain
   pixels and stays identical at any viewport. What each picture draws is in world-story-v-s12.css (beats 1 to 3) and
   world-story-v-s35.css (beats 4 to 6), on the Aura kit (world-story-aura.css); this file is the strip, the label rows,
   the browser frame setPan() fades and steps back, and the dotted connectors.

   Without JavaScript (the default below) the pictures sit one under another in their finished states. story-visitors.js adds
   .world-story-v-live to the reel: the pictures then sit on one strip, which the player pans through the story's setPan()
   (--wsv-pos, 1 to 6, is p + 1).

   Each beat is a label row (.world-story-v-where: the matching feature's title from the Features page, an "Explore feature"
   link to it in a new tab, any note) above its picture (.world-story-v-pic, the scaled drawing's box). The row is real text
   outside the aria-hidden drawing, in screen pixels; the script's fit leaves room for it.

   The section's ground is black with the site's grain (world-story.css). The pictures keep the product's own light look and
   stand out on it; the only things drawn straight on the ground are the label rows, in white, and the dotted connectors,
   in the logo's yellow (round 3).

   Round 5 (Impeccable animate, polish, delight): setPan() also steps each picture back (scale 1 - .04 s on its frame, inside
   the fit) as it leaves the centre, and the idle life below runs on the centred picture only (B's .is-current on its
   figure, in an open reel): a travelling dot on each finished connector. The timeline lets each one in; none of them runs
   under the site's Pause or under reduced motion.

   Polish round (2 October 2026): the first widget's styles (the seam, the invitation, the composer, the caption plates,
   the glass cards and the wireframe pages, about 300 lines that no picture has drawn since the section 2 rebuild) are
   gone, with their tokens. */

@property --wsv-pos { syntax: '<number>'; inherits: false; initial-value: 1; }

.world-story .world-story-v {
 --wsv-k: 1;
 --wsv-link: #ffd700;   /* the connectors, their dots and the landing ring, on the black ground: the logo's yellow (round 3) */
}

/* ------------------------------------------------------------------ the strip */
.world-story .world-story-v-track{position:relative}
/* Without JavaScript the shell (B) stacks and centres the figures; each is sized here: the label row, then the picture. */
.world-story .world-story-v-beat{position:relative;width:calc(880px * var(--wsv-k))}
.world-story .world-story-v-pic{position:relative;width:calc(880px * var(--wsv-k));height:calc(372px * var(--wsv-k))}
.world-story .world-story-v-stage{
 position:absolute;left:0;top:0;width:880px;height:372px;transform:scale(var(--wsv-k));transform-origin:0 0;
 font:400 16px/normal 'DM Sans',sans-serif;color:#1c1b1f;text-align:left;letter-spacing:normal;text-transform:none;white-space:normal;
}
.world-story .world-story-v-stage *{box-sizing:border-box}
.world-story .world-story-v:not(.world-story-v-live) .world-story-v-link{display:none}

/* One strip (JavaScript): the track is out of flow, so the viewport's height is the shell's and never the pictures'. The
   picture at the player's position (--wsv-pos) is centred; the translate is the only thing a pan frame changes here.
   The viewport clips without being a scroll container (clip, not hidden), so focusing a link in a picture that is off to
   one side can never scroll the strip out from under the pan. */
.world-story .world-story-v-live .world-story-viewport{position:relative;overflow:hidden;overflow:clip}
.world-story .world-story-v-live .world-story-v-track{
 position:absolute;top:0;bottom:0;left:50%;display:flex;align-items:center;gap:calc(150px * var(--wsv-k));width:max-content;
 transform:translate3d(calc(-1 * ((var(--wsv-pos) - 1) * 1030px + 440px) * var(--wsv-k)), 0, 0);
}
.world-story .world-story-v-live .world-story-v-beat{flex:0 0 auto;margin:0}
/* setPan() dims the pictures either side of the centre with an inline opacity (to .7) and steps them back (an inline scale
   to .96, towards the side facing the centre): on picture 1's stage (its scale on its box) and on each later picture's
   browser frame, never on the figure, so the connector in the gap keeps its strength and its two ends while its picture
   arrives. The label rows fade out one place from the centre (one label at a time). Each one is its own layer, so a pan
   frame recomposites it and never repaints it; the centred picture rests with no transform at all (crisp). */
.world-story .world-story-v-live :is(.world-story-v-beat--1 .world-story-v-stage,.world-story-v-beat:not(.world-story-v-beat--1) .world-story-v-stage > .world-story-v-browser,.world-story-v-where){will-change:opacity}
/* The warm-up (round 5, C5): nothing at opacity 0 is rasterised or composited, so the GPU compiled the pictures' shader
   programs the first time each was really drawn (a 167 to 183 ms frame at the first opening, 83 to 100 ms at beat 2's
   glass). While the player's unseen paint pass sets each finished picture in turn (the section settled on the choice
   screen, no story current), story-visitors.js marks the reel .world-story-v-warm and it is drawn at an opacity no screen
   can show, so they are compiled then, while nothing is choreographed. Never while a story is current or moving. */
.world-story.is-mounted.is-settled:not([data-story-current]):not(.is-moving) .world-story-v.is-made.world-story-v-warm:not(.is-open){opacity:.001}

@media (max-width:1040px){.world-story .world-story-v{--wsv-k:.82}}
@media (max-width:860px){.world-story .world-story-v{--wsv-k:.66}}
@media (max-width:700px){.world-story .world-story-v{--wsv-k:.52}}
@media (max-width:560px){.world-story .world-story-v{--wsv-k:.4}}
@media (max-width:420px){.world-story .world-story-v{--wsv-k:.35}}

/* ------------------------------------------------------------------ the label row above each picture */
/* The business story's page label (world-story-business.css .world-story-b-where) at the size it shows on screen at
   1524x718: an icon and the title in white, and on the right any note in white-muted. The title is the matching feature's
   own title on the Features page; right after it, a small "Explore feature" link opens that feature in a new tab (the
   site's up-right arrow says so, and so does its accessible name). The link stays well below the title: 12px, white at 70%,
   and the site's growing underline on hover and focus. The row sits on the ground, outside the aria-hidden drawing, so the
   link is a real, focusable link; its sizes are screen pixels, not the drawing's, and the script's fit leaves room for it. */
.world-story .world-story-v-where{
 display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-height:28px;margin:0 0 10px;
 font:600 18px/1.2 'DM Sans',sans-serif;color:#fff;text-align:left;letter-spacing:normal;text-transform:none;
}
/* Picture 1's drawing starts at its left edge (the site's window), so its row needs no inset (2 October 2026). */
.world-story .world-story-v-beat--1 .world-story-v-where{padding-inline:0}
.world-story .world-story-v-nav{display:inline-flex;align-items:center;gap:10px;min-width:0}
.world-story .world-story-v-ico{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.world-story .world-story-v-title{min-width:0}
.world-story .world-story-v-explore{
 display:inline-flex;align-items:center;gap:5px;padding:5px 0;margin:-5px 0;
 font-size:12px;font-weight:500;line-height:1.3;color:rgb(255 255 255 / .7);white-space:nowrap;background:none;
 transition:color .2s ease;
}
.world-story .world-story-v-explore-text{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .45s cubic-bezier(.22,1,.36,1)}
.world-story .world-story-v-arrow{flex:none;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.world-story .world-story-v-explore:is(:hover,:focus-visible){color:#fff;text-decoration:none}
.world-story .world-story-v-explore:is(:hover,:focus-visible) .world-story-v-explore-text{background-size:100% 1px}
.world-story .world-story-v-explore:is(:hover,:focus-visible) .world-story-v-arrow{transform:translate(1.5px,-1.5px)}
.world-story .world-story-v-explore:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.world-story .world-story-v-explore:active{color:rgb(255 255 255 / .85)}
.world-story .world-story-v-explore:active .world-story-v-arrow{transform:translate(.75px,-.75px);transition-duration:.08s}
.world-story .world-story-v-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The venue page's sample-data note (the business story's .world-story-b-note), on the right. */
.world-story .world-story-v-note{margin-left:auto;display:inline-flex;align-items:center;font-size:15px;font-weight:500;line-height:1.3;color:rgb(255 255 255 / .72);white-space:nowrap}
.world-story .world-story-v-note > span + span::before{content:'';display:inline-block;width:4px;height:4px;margin:0 8px;border-radius:50%;background:currentColor;vertical-align:middle}
@media (prefers-reduced-motion:reduce){.world-story :is(.world-story-v-explore,.world-story-v-explore-text,.world-story-v-arrow){transition:none}}
/* A first pass for narrower screens (the site's viewport pass comes later): the title may wrap, and the type steps down. */
@media (max-width:860px){.world-story .world-story-v-where{font-size:16px}.world-story .world-story-v-ico{width:18px;height:18px}.world-story .world-story-v-note{font-size:13.5px}}
@media (max-width:560px){.world-story .world-story-v-where{font-size:14.5px;gap:4px 10px}.world-story .world-story-v-note{margin-left:0;font-size:12.5px}}

/* ------------------------------------------------------------------ the dotted connectors (the venue page's look) */
.world-story .world-story-v-link{position:absolute;left:-170px;top:0;width:170px;height:372px;overflow:visible;color:var(--wsv-link);pointer-events:none}
.world-story .world-story-v-flow{position:absolute;left:0;top:0;width:880px;height:372px;overflow:visible;color:var(--wsv-link);pointer-events:none}
.world-story .world-story-v-link-dots{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:2 6}
.world-story .world-story-v-link-reveal{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:butt;stroke-dasharray:1 2;stroke-dashoffset:0}
.world-story .world-story-v-link-end{fill:currentColor}
.world-story .world-story-v-link-ping{fill:none;stroke:currentColor;stroke-width:1.25;vector-effect:non-scaling-stroke;opacity:0}
/* Idle: once a connector lands (the timeline opens .world-story-v-link-idle), a 4px dot runs its path every 3.6 s, start to
   end, in the line's own colour: information flowing, and which way (the business story's values). Its path is the
   connector's, set inline by the script (offset-path, in the drawing's coordinates). Shut without JavaScript and under
   reduced motion. */
.world-story .world-story-v-link-idle{opacity:0}
.world-story .world-story-v-link-travel{fill:currentColor;opacity:0;offset-rotate:0deg}

/* ------------------------------------------------------------------ the browser frame */
/* setPan()'s frame for pictures 2 to 6 (picture 1 steps back on its stage). Each picture's own stylesheet makes it a bare
   positioner where the kit's site draws the window. */
.world-story .world-story-v-browser{
 position:absolute;inset:0;overflow:hidden;border-radius:14px;background:#fff;border:1px solid rgba(28,27,31,.14);
 box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 22px 48px rgba(28,27,31,.09),0 2px 6px rgba(28,27,31,.05);
}

/* ------------------------------------------------------------------ idle life (the centred picture only) */
/* The connectors' travelling dots, on the picture at the centre of an open, moving story (B marks it .is-current). The
   timeline lets each in (an incoming connector's as it lands, one inside a picture half a second after it lands). None of
   it runs under the site's Pause or reduced motion. Offset-distance and opacity only; nothing runs off the centre. */
@keyframes wsv-travel{0%{offset-distance:0%;opacity:0;animation-timing-function:cubic-bezier(.45,0,.3,1)}6%{opacity:1}32%{opacity:1}38%,100%{offset-distance:100%;opacity:0}}
@media (prefers-reduced-motion:no-preference){
 @supports (offset-path:path('M0 0')){
  body:not([data-motion-paused="true"]) .world-story .world-story-v.is-open:not(.is-static) .world-story-v-beat.is-current .world-story-v-link-travel{animation:wsv-travel 3.6s linear var(--wsv-lag,0s) infinite}
 }
}
/* Where a picture has two runners they go in reading order, 0.7 s apart (the business story's stagger): picture 1's into
   the two files, and picture 2's two incoming ones, to Search and to the AI assistant (round 3, 2 October 2026). Under the
   site's Pause and reduced motion none of the idle life runs: the dots are simply not there. */
.world-story :is(.world-story-v-flow,.world-story-v-beat--1b .world-story-v-link) .world-story-v-link-g:nth-of-type(2){--wsv-lag:.7s}