/* Ask-AI row: "Summarize this page with" + four assistant links (ChatGPT, Claude, Perplexity, Grok), each opening
   that assistant with a prompt that names this page's URL. On view, the marks fade in one by one in the middle,
   then the label and the marks slide apart into place while the label's words fade in. Measured from Cypher
   Capital's footer/AI band (styles-module nU-CWq, teardown 10-08), rewritten; the marks are our own neutral
   letter tiles, not the assistants' logos.

   <div class="ask-ai" data-ask-ai data-ask-ai-reveal>
     <p class="ask-ai__label">Summarize this page with</p>
     <ul class="ask-ai__list"></ul>                          (part.js fills the four links if the list is empty)
   </div> */
.ask-ai {
  --ask-ai-gap: 32px;                                 /* label to marks (source --spacing-xl) */
  --ask-ai-list-gap: 12px;                            /* between marks (source lg: --spacing-xs; footer 8px) */
  --ask-ai-size: 48px;                                /* mark size (source lg svg 48px) */
  --ask-ai-stroke: 1.5px;
  --ask-ai-hover: .7;                                 /* hover opacity */
  --ask-ai-hover-dur: 100ms;                          /* source --duration-fast */
  --ask-ai-hover-ease: cubic-bezier(0, 0, .2, 1);     /* source --easing-out */
  /* reveal */
  --ask-ai-move: 1s;                                  /* label + list slide apart */
  --ask-ai-move-delay: .75s;
  --ask-ai-move-ease: cubic-bezier(.3, 0, 0, 1);      /* source --easing-emphasized */
  --ask-ai-logo-fade: 1s;                             /* each mark fades in */
  --ask-ai-logo-stagger: .1s;
  --ask-ai-word-fade: 1.2s;                           /* each label word fades in, from --ask-ai-move-delay */
  --ask-ai-word-stagger: .1s;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ask-ai-gap);
  position: relative;
}
.ask-ai--band { justify-content: center; }
.ask-ai--sm { --ask-ai-size: 32px; --ask-ai-list-gap: 8px; --ask-ai-gap: 16px; }
.ask-ai__label { margin: 0; white-space: nowrap; }
.ask-ai__list { display: flex; align-items: center; gap: var(--ask-ai-list-gap); list-style: none; margin: 0; padding: 0; }
.ask-ai__link {
  display: block;
  line-height: 0;
  color: inherit;
  transition: opacity var(--ask-ai-hover-dur) var(--ask-ai-hover-ease);
}
@media (hover: hover) { .ask-ai__link:hover { opacity: var(--ask-ai-hover); } }
.ask-ai__link:focus-visible { opacity: var(--ask-ai-hover); outline: 2px solid currentColor; outline-offset: 2px; }

/* the mark: a square tile with two letters, drawn in currentColor (ours, not a logo) */
.ask-ai__mark { width: var(--ask-ai-size); height: var(--ask-ai-size); display: block; overflow: visible; }
.ask-ai__mark rect { fill: none; stroke: currentColor; stroke-width: var(--ask-ai-stroke); vector-effect: non-scaling-stroke; }
.ask-ai__mark text { fill: currentColor; font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.ask-ai__tip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* reveal: [data-reveal] = pending (part.js measured --reveal-shift so each child starts centred on the row),
   [data-reveal=in] = playing / played */
.ask-ai[data-reveal] > * { transform: translateX(calc(-1 * var(--reveal-shift, 0px))); }
.ask-ai[data-reveal] .ask-ai__list > li,
.ask-ai[data-reveal] .ask-ai__word { opacity: 0; }
.ask-ai[data-reveal="in"] > * {
  transform: none;
  transition: transform var(--ask-ai-move) var(--ask-ai-move-ease) var(--ask-ai-move-delay);
}
.ask-ai[data-reveal="in"] .ask-ai__list > li {
  opacity: 1;
  transition: opacity var(--ask-ai-logo-fade) ease calc(var(--i, 0) * var(--ask-ai-logo-stagger));
}
.ask-ai[data-reveal="in"] .ask-ai__word {
  opacity: 1;
  transition: opacity var(--ask-ai-word-fade) ease calc(var(--ask-ai-move-delay) + var(--i, 0) * var(--ask-ai-word-stagger));
}
@media (prefers-reduced-motion: reduce) {
  .ask-ai[data-reveal] > *, .ask-ai[data-reveal] .ask-ai__list > li, .ask-ai[data-reveal] .ask-ai__word { transform: none; opacity: 1; transition: none; }
}