/* Home §5, "Grokto reads the chain" (assets/story/ask.js), in the chapter pattern of assets/story.css: the copy's four beats carry the read's
   numbers and the call, the visual is the 3D map. story.css pins the stage (with .is-story, from ask.js); this styles the map, the beats'
   numbers and the call, and lights the beats from ask.js's data-state. Not pinned, it's a plain block: the final pose or the read's card. */
.sc-ask .sc-vis { perspective: none; } /* story.css's perspective is for CSS 3D; around a WebGL canvas it only costs (and blanks a settled canvas in SwiftShader) */
.as-vis { display: grid; }

/* the 3D (bubbles3d.js mounts its canvas and labels here) */
.as-gl { position: relative; height: clamp(360px, 44vw, 600px); background: radial-gradient(42% 42% at 50% 50%, rgba(var(--accent-rgb) / .1), transparent 72%); }
.as-gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s;
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent); mask-image: radial-gradient(closest-side, #000 82%, transparent); } /* the dev's glow fades out instead of stopping at the box */
.is-ready .as-gl canvas { opacity: 1; }
.as-gl .tags { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.as-gl .tags span { position: absolute; left: 0; top: 0; font: 500 11px/1 var(--mono); color: #eaeae6; text-shadow: 0 1px 6px #000; white-space: nowrap; will-change: transform; transition: opacity .3s; }
.as-gl .tags span.dark { color: #000; text-shadow: none; }
.is-live .as-gl canvas { cursor: grab; }
.as-card { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 40px 0 8px; }
.as-card img { max-height: 100%; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 40px 120px -50px rgba(var(--accent-rgb) / .45); }
.sc-ask:not(.is-story) .as-card, .sc-ask.is-flat:not(.is-ready) .as-card { position: relative; }
.is-flat .as-gl:not(:has(.as-card)) { display: none; }
.as-hud { position: absolute; top: 14px; right: 16px; z-index: 2; display: grid; justify-items: end; gap: 10px; pointer-events: none; }
.as-hud .lbl { display: inline-flex; align-items: center; gap: 9px; }
.as-hint { opacity: 0; transition: opacity .4s; }
.is-live .as-hint { opacity: 1; }

/* the beats' numbers, then the call */
.sc-ask .sc-beats li > span em { margin-right: 6px; font: 600 clamp(20px, 1.8vw, 26px)/1 var(--sans); font-style: normal; letter-spacing: -.03em; color: var(--c, var(--text)); vertical-align: -2px; }
.as-end { gap: 10px !important; }
.as-sym { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-pill { --c: var(--ok); display: inline-flex; align-items: center; gap: 11px; justify-self: start; max-width: min(100%, calc(38ch + 56px)); padding: 10px 15px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-radius: 16px;
  background: color-mix(in srgb, var(--c) 10%, #070707); box-shadow: 0 0 40px -12px color-mix(in srgb, var(--c) 45%, transparent); font: 500 12.5px/1.4 var(--mono); color: var(--c); }
.as-pill.yellow { --c: var(--warn); } .as-pill.red { --c: var(--bad); }
.as-pill .dot { flex: none; width: 9px; height: 9px; }
.as-pill b { font-weight: 600; letter-spacing: .08em; }
.as-pill span { text-wrap: balance; }
.as-call { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 52ch; }
.as-call b { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--sc) 50%, transparent); border-radius: 99px; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sc); }
.as-call > span:last-child { flex-basis: 100%; font: 400 13px/1.45 var(--sans); color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.as-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.as-go > a:last-child { font: 400 12.5px/1.4 var(--mono); color: var(--soft); }
.as-go > a:last-child:hover { color: var(--text); }

@media (max-width: 860px) {
  .as-gl { height: auto; aspect-ratio: 1 / .92; margin-inline: -16px; }
}

/* ── pinned: only with motion allowed and scroll timelines supported, like story.css ─────────── */
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .sc-ask.is-story .as-vis { height: 100%; }
  .sc-ask.is-story .as-gl { height: auto; aspect-ratio: auto; }
  /* the beats light as the read reaches them; the rail fills with it */
  .sc-ask.is-story .sc-beats::after { transform: scaleY(var(--p, 1)); }
  .sc-ask.is-ready .sc-beats li { transition: opacity .45s; }
  .sc-ask.is-ready .sc-beats li[data-state="next"] { opacity: .26; }
  .sc-ask.is-ready .sc-beats li[data-state="done"] { opacity: .5; }
  .sc-ask.is-ready .sc-beats li[data-state="next"] .as-go { visibility: hidden; transition: visibility 0s .45s; } /* no button to tab to before the call is in */
  /* crop marks where the cluster gathers (the hero's grammar), gone once the holders are in */
  .sc-ask.is-story .as-gl::after { --m: linear-gradient(#3a3936 0 0); content: ""; position: absolute; left: 50%; top: 50%; width: min(58%, 52svh); aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
    background: var(--m) 0 0 / 20px 1.5px, var(--m) 0 0 / 1.5px 20px, var(--m) 100% 0 / 20px 1.5px, var(--m) 100% 0 / 1.5px 20px,
      var(--m) 0 100% / 20px 1.5px, var(--m) 0 100% / 1.5px 20px, var(--m) 100% 100% / 20px 1.5px, var(--m) 100% 100% / 1.5px 20px;
    background-repeat: no-repeat; opacity: calc(1 - var(--p, 0) * 6); }
  @media (min-width: 861px) and (max-height: 820px) { .sc-ask .sc-sub { display: none; } } /* the call needs the room */
  /* phones: one beat at a time over the map, the incoming one a beat after the outgoing one has gone */
  @media (max-width: 860px) {
    .sc-ask.is-story .as-gl { margin-inline: -16px; }
    .sc-ask.is-ready .sc-beats li { transition: opacity .3s, translate .3s; }
    .sc-ask.is-ready .sc-beats li:not([data-state="on"]) { opacity: 0; translate: 0 10px; pointer-events: none; }
    .sc-ask.is-ready .sc-beats li[data-state="on"] { transition-delay: .18s; }
    .sc-ask .as-call > span:last-child, .sc-ask .as-go > a:last-child { display: none; }
    .as-pill { padding: 8px 12px; font-size: 12px; }
  }
}}