/* A short signal connects the Voiceprint identity, diagram and controls. */
:root {
  --motion-fast: 140ms;
  --motion-state: 220ms;
  --motion-layout: 320ms;
  --motion-signal: 720ms;
}

.brand-mark { transform-origin: center; }
.brand-mark::before, .brand-mark::after { transform-origin: center; }
.wordmark:is(:hover, :focus-visible) .brand-mark::before,
.is-introducing .site-header .brand-mark::before {
  animation: logo-call var(--motion-signal) var(--ease);
}
.wordmark:is(:hover, :focus-visible) .brand-mark::after,
.is-introducing .site-header .brand-mark::after {
  animation: logo-answer var(--motion-signal) var(--ease) 90ms;
}

.button, .sign-in {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--motion-state), background var(--motion-state),
    transform var(--motion-fast) var(--ease);
}
.button > *, .sign-in > * { position: relative; z-index: 1; }
.button::before, .sign-in::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  background: var(--button-fill, var(--ink));
  clip-path: circle(0% at 0% 100%);
  transition: clip-path 420ms var(--ease);
  pointer-events: none;
}
.button-primary { --button-fill: var(--ink-deep); }
.button-light { --button-fill: var(--lilac); }
.button-outline, .sign-in { --button-fill: var(--paper); }
.button-primary:hover { background: var(--ink); }
.button-light:hover { background: var(--paper); }
.button-outline:hover, .sign-in:hover { background: transparent; }
.button:hover { transform: none; }
.button:is(:hover, :focus-visible)::before,
.sign-in:is(:hover, :focus-visible)::before { clip-path: circle(145% at 0% 100%); }
.button-outline:is(:hover, :focus-visible),
.sign-in:is(:hover, :focus-visible) { color: var(--ink); }
.button:active, .sign-in:active { transform: scale(.97); }
.button:is(:hover, :focus-visible) .icon:has(use[href='#i-arrow']),
.text-link:is(:hover, :focus-visible) .icon,
.transcript-footer:is(:hover, :focus-visible) .icon,
.code-docs:is(:hover, :focus-visible) .icon,
.node-log:is(:hover, :focus-visible) .node-arrow {
  animation: arrow-send 460ms var(--ease);
}
.button:focus-visible, .sign-in:focus-visible {
  outline-color: var(--ink);
}
.closing .button:focus-visible { outline-color: var(--paper); }
.main-nav a:not(.sign-in), .site-footer nav a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 9px);
  background-size: 0 1px;
  transition: background-size var(--motion-state) var(--ease);
}
.site-footer nav a { background-position: 0 100%; padding-bottom: 4px; }
.main-nav a:not(.sign-in):is(:hover, :focus-visible),
.site-footer nav a:is(:hover, :focus-visible) {
  text-decoration: none;
  background-size: 100% 1px;
}
.text-link { transition: text-underline-offset var(--motion-state); }
.text-link:is(:hover, :focus-visible) { text-underline-offset: 8px; }

.orbit-signal {
  fill: none;
  stroke: var(--paper);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 4 96;
  opacity: 0;
  pointer-events: none;
}
.is-introducing .orbit-signal { animation: route-signal 2100ms linear; }
.is-introducing .orbit-dotted { animation: dotted-signal 2100ms linear; }
.voice-disc svg path { transform-box: fill-box; transform-origin: center; }
.is-introducing .voice-disc svg path {
  animation: voice-signal 650ms var(--ease) calc(var(--disc-delay, 0ms) + var(--bar-delay, 0ms));
}
.voice-disc-top { --disc-delay: 240ms; }
.voice-disc-left { --disc-delay: 1500ms; }
.voice-disc-bottom { --disc-delay: 1250ms; }
.voice-disc svg path:nth-child(2) { --bar-delay: 60ms; }
.voice-disc svg path:nth-child(3) { --bar-delay: 120ms; }
.voice-disc svg path:nth-child(4) { --bar-delay: 180ms; }
.voice-disc svg path:nth-child(5) { --bar-delay: 240ms; }
.node-caller { --node-delay: 0ms; }
.node-agent { --node-delay: 520ms; }
.node-tool { --node-delay: 900ms; }
.node-result { --node-delay: 1300ms; }
.node-log { --node-delay: 1750ms; }
.node-icon { position: relative; transition: transform var(--motion-state) var(--ease); }
.node-icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.is-introducing .node-icon::after {
  animation: signal-received 620ms var(--ease) var(--node-delay);
}
.orbit-node:is(:hover, :focus-visible) { transform: none; }
.orbit-node:is(:hover, :focus-visible) .node-icon { transform: rotate(-8deg) scale(1.08); }
.orbit-node:active .node-icon { transform: scale(.94); }
.orbit-node.is-active .node-icon::after { animation: signal-received 620ms var(--ease); }
.opening:not(.is-visible) .node-icon::after { animation: none; }
.transcript-entries li { transition-duration: var(--motion-state); }
.entry-marker { transition: opacity var(--motion-state), transform var(--motion-state) var(--ease); transform: scale(.5); }
.is-active .entry-marker { transform: scale(1); }
.replay-button[aria-pressed='true'] .icon { stroke-width: 2.8; }
.replay-button .icon { transition: stroke-width var(--motion-fast); }
.copy-button { transition: background var(--motion-state), opacity var(--motion-fast); }
.copy-button:active { transform: scale(.96); }
.copy-button.is-copied .icon { animation: copy-confirm 360ms var(--ease); }
.copy-status:not(:empty) { animation: status-confirm var(--motion-state) var(--ease); }

summary { transition: color var(--motion-state), background var(--motion-state); }
summary .icon { transition: transform var(--motion-layout) var(--ease); }
summary:is(:hover, :focus-visible) .icon { transform: rotate(90deg); }
details[open] summary .icon { transform: rotate(45deg); }
details.is-closing summary .icon { transform: rotate(0); }
.disclosure-panel { display: grid; grid-template-rows: 1fr; }
.disclosure-inner { min-height: 0; overflow: hidden; }

.closing-signal {
  stroke: var(--paper);
  stroke-width: 4;
  stroke-dasharray: .12 .88;
  opacity: 0;
}
.is-introducing .closing-signal { animation: closing-signal 1400ms var(--ease); }
.motion-paused *, .motion-paused *::before, .motion-paused *::after {
  animation-play-state: paused !important;
}

@keyframes logo-call {
  0%, 100% { transform: translate(0, 0) scale(1); }
  38% { transform: translate(.17em, -.17em) scale(.76); }
  65% { transform: translate(0, 0) scale(1.12); }
}
@keyframes logo-answer {
  0%, 100% { transform: scale(1); }
  38% { transform: scale(.91, 1.06); }
  65% { transform: scale(1.06, .96); }
}
@keyframes arrow-send {
  0%, 100% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(10px); opacity: 0; }
  41% { transform: translateX(-10px); opacity: 0; }
}
@keyframes route-signal {
  0% { stroke-dashoffset: 0; opacity: 0; }
  8%, 85% { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes dotted-signal { to { stroke-dashoffset: -30.2; } }
@keyframes voice-signal {
  0%, 100% { transform: scaleY(1); }
  28% { transform: scaleY(.4); }
  60% { transform: scaleY(1.16); }
}
@keyframes signal-received {
  0% { transform: scale(.7); opacity: 0; }
  20% { opacity: .7; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes copy-confirm {
  from { transform: scale(.7); }
  to { transform: scale(1); }
}
@keyframes status-confirm { from { opacity: .5; } to { opacity: 1; } }
@keyframes closing-signal {
  0% { stroke-dashoffset: .12; opacity: 0; }
  10%, 80% { opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .button::before, .sign-in::before { transition: none; }
  .button, .sign-in, .orbit-node, summary, .copy-button, .transcript-entries li {
    transition: color 100ms linear, background-color 100ms linear !important;
  }
  .button:active, .sign-in:active, .copy-button:active,
  .orbit-node:is(:hover, :focus-visible, :active) .node-icon { transform: none; }
  .text-link:is(:hover, :focus-visible) { text-underline-offset: 5px; }
}