/* Adapted from Noah's animated-component library using the Arrow house tokens. */
.arrow-motion-art { min-width: 0; }
.arrow-motion-demo { margin: 0; max-width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--a10); border-radius: var(--r-lg); background: var(--bg-card); color: var(--ink); }
.arrow-motion-demo * { box-sizing: border-box; }
.am-stage { position: relative; width: 100%; aspect-ratio: 5 / 3; overflow: hidden; isolation: isolate; }
.am-grid { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--geo); z-index: -1; }
.am-grid path { stroke: var(--a8); stroke-width: 1; }
.am-grid-cell { fill: var(--geo-soft); animation: am-grid 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
.arrow-motion-demo figcaption { position: relative; padding: 12px 18px 28px; font: 10px/1.6 var(--mono); color: var(--muted); border-top: 1px solid var(--a8); }
.arrow-motion-art > .offer-visual { position: relative; right: auto; bottom: auto; width: auto; margin: -16px 16px 0; z-index: 1; }
.arrow-motion-toggle { margin-top: 18px; padding: 9px 13px; font: 11px/1.4 var(--mono); color: var(--ink); background: var(--bg-card); border: 1px solid var(--a10); border-radius: var(--r-lg); cursor: pointer; }
.arrow-motion-toggle:hover { background: var(--geo-soft); }
.arrow-motion-toggle:focus-visible { outline: 2px solid var(--geo); outline-offset: 4px; }
.arrow-motion-toggle[hidden] { display: none; }
.am-beams { position: absolute; inset: 0; height: 100%; width: 100%; overflow: visible; }
.am-route { fill: none; stroke: var(--a10); stroke-width: 1.5; }
.am-beam { fill: none; stroke: var(--geo); stroke-width: 2.5; stroke-dasharray: 14 86; stroke-dashoffset: 100; animation: am-beam 3.8s linear infinite; animation-delay: calc(var(--i) * -.9s); }
.am-node { position: absolute; transform: translate(-50%,-50%); width: 96px; display: flex; align-items: center; flex-direction: column; gap: 7px; font: 10px/1.2 var(--mono); }
.am-node-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--a10); border-radius: var(--r-lg); background: var(--bg-card); font: 20px/1 var(--mono); box-shadow: 0 8px 24px var(--a8); }
.am-node-0 { left: 21.67%; top: 25%; }.am-node-1 { left: 21.67%; top: 75%; }.am-node-2 { left: 78.33%; top: 25%; }.am-node-3 { left: 78.33%; top: 75%; }
.am-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); min-width: 104px; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--a10); border-radius: var(--r-lg); box-shadow: 0 12px 40px var(--a8); }
.am-hub strong { font-size: 11px; }.am-hub img { width: 34px; height: 34px; object-fit: contain; }
.am-word-window { position: absolute; top: 83%; left: 35%; width: 30%; height: 20px; overflow: hidden; text-align: center; font: 10px/20px var(--mono); color: var(--geo); }
.am-word-window > span { display: block; position: absolute; width: 100%; opacity: 0; animation: am-word 9s infinite; animation-delay: calc(var(--i) * 3s); }
.am-browser { position: absolute; inset: 8% 7%; border: 1px solid var(--a10); background: var(--bg-card); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 18px 40px var(--a8); }
.am-browser-bar { display: flex; justify-content: space-between; padding: 10px 13px; border-bottom: 1px solid var(--a8); color: var(--muted); font: 8px/1 var(--mono); }
.am-browser-bar > span:first-child { letter-spacing: 3px; color: var(--faint); }
.am-answer .am-stage { aspect-ratio: auto; height: 320px; }
.am-answer-content { padding: 14px; }.am-eyebrow { display: block; font: 8px/1.4 var(--mono); letter-spacing: .08em; color: var(--muted); }
.am-question { font-size: clamp(11px,1.2vw,15px); margin: 10px 0 12px; padding: 8px 10px; border: 1px solid var(--a8); border-radius: var(--r-lg); background: var(--geo-soft); }
.am-answer-title { display: block; font-size: clamp(13px,1.5vw,19px); letter-spacing: -.025em; animation: am-focus 7s ease infinite; }
.am-answer-lines { display: flex; flex-direction: column; gap: 6px; margin: 13px 0 15px; }
.am-answer-lines i { height: 4px; width: 94%; background: var(--a8); border-radius: 4px; transform-origin: left; animation: am-line 7s ease infinite; }
.am-answer-lines i:nth-child(2) { width: 87%; animation-delay: .12s; }.am-answer-lines i:nth-child(3) { width: 63%; animation-delay: .24s; }
.am-sources { display: flex; gap: 6px; }.am-sources > span { display: flex; align-items: center; gap: 5px; padding: 7px 6px; flex: 1; border: 1px solid var(--a10); border-radius: 6px; font-size: 8px; line-height: 1.3; animation: am-source 7s ease infinite; animation-delay: calc(var(--i) * .18s); }
.am-sources b { font: 8px var(--mono); color: var(--geo); }
.am-stack .am-stage { aspect-ratio: auto; height: 320px; }
.am-notifications { position: absolute; inset: 8% 9%; }.am-stack-title { display: block; font-size: clamp(13px,1.6vw,20px); margin: 7px 0 16px; letter-spacing: -.025em; }
.am-notice { display: flex; align-items: center; gap: 10px; margin: 9px 0; padding: 11px 12px; background: var(--bg-card); border: 1px solid var(--a10); border-radius: var(--r-lg); box-shadow: 0 6px 20px var(--a8); animation: am-notice 8s ease infinite; animation-delay: calc(var(--i) * .4s); }
.am-notice-icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--geo-soft); color: var(--geo); font-size: 18px; }
.am-notice small { display: block; font: 8px/1.3 var(--mono); color: var(--muted); margin-bottom: 3px; }.am-notice strong { display: block; font-size: 11px; font-weight: 500; }.am-notice-dot { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--geo); flex-shrink: 0; }
.arrow-motion-demo *, .arrow-motion-demo *::before, .arrow-motion-demo *::after { animation-play-state: paused; }
.arrow-motion-demo.is-running *, .arrow-motion-demo.is-running *::before, .arrow-motion-demo.is-running *::after { animation-play-state: running; }
@keyframes am-beam { to { stroke-dashoffset: -100; } }
@keyframes am-grid { 0%,100% { opacity: .05; } 50% { opacity: .85; } }
@keyframes am-word { 0% { opacity: 0; transform: translateY(12px); } 5%,28% { opacity: 1; transform: translateY(0); } 33%,100% { opacity: 0; transform: translateY(-12px); } }
@keyframes am-focus { 0%,8% { opacity: .5; filter: blur(3px); transform: translateY(4px); } 18%,100% { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes am-line { 0%,8% { transform: scaleX(.3); } 25%,100% { transform: scaleX(1); } }
@keyframes am-source { 0%,14% { opacity: .35; transform: translateY(5px); } 28%,100% { opacity: 1; transform: none; } }
@keyframes am-notice { 0% { opacity: .35; transform: translateY(14px) scale(.98); } 12%,88% { opacity: 1; transform: none; } 100% { opacity: .35; transform: translateY(-3px); } }
@media(max-width:600px) {
 .am-stage { aspect-ratio: 1.5; }.am-answer-content { padding: 12px; }.am-browser-bar { padding: 9px 10px; }.am-answer-lines { margin: 10px 0; gap: 5px; }.am-question { margin: 8px 0 10px; }.am-notifications { inset: 8%; }.am-stack-title { margin-bottom: 12px; }.am-notice { padding: 9px 10px; gap: 8px; }.am-notice strong { font-size: 10px; }.am-sources > span { font-size: 7px; padding: 6px 4px; }.am-node { font-size: 9px; }.am-hub { min-width: 90px; padding: 13px 8px; }
}
@media(prefers-reduced-motion:reduce) {
 .arrow-motion-demo * { animation: none !important; filter: none !important; transform: none; }
 .am-node,.am-hub { transform: translate(-50%,-50%); }
 .am-word-window > span { display: none; }.am-word-window > span:first-child { display: block; opacity: 1; }
}

/* Pausing must leave explanatory text fully readable, including offscreen cards. */
.arrow-motion-demo:not(.is-running) .am-answer-title,
.arrow-motion-demo:not(.is-running) .am-notice,
.arrow-motion-demo:not(.is-running) .am-sources > span {
  opacity: 1 !important; filter: none !important; transform: none !important;
}