/* The board's motion (spec 2026-10-27 §Motion). index.astro loads this file
   with media="(prefers-reduced-motion: no-preference)", so Reduce Motion
   stops all of it; board.css holds no animation or transition of its own.
   The draw-ins wait for .is-drawn, which the board's script sets once a
   drawing enters the viewport. The motion class on <html> is set by an
   inline script in the head before the board paints, so a line above the
   fold never shows drawn and then undraws; without script every line
   stands drawn.
   Which variant shows is board.css's rule (.current), so a variant changed
   by a pip under Reduce Motion changes at once. */
@keyframes board-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes board-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.motion .board-page .drawn { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .board-page .is-drawn .drawn { animation: board-draw 2.4s cubic-bezier(.3, .6, .2, 1) .3s both; }
.motion .board-page .kind-pipeline.is-drawn .drawn { animation-duration: 3s; }
.bento .pulse { animation: board-pulse 2.6s ease-in-out infinite; }

.bento .variant { transition: opacity .6s ease; }
.bento .variant .shot { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.bento .c:hover .variant:not(.contain) .shot { transform: scale(calc(var(--zoom, 1) * 1.04)); }

/* The buy band's cards: the card rises, the border lights and the arrow steps on under the pointer. */
.buyband .go { transition: border-color .15s, translate .2s ease; }
.buyband .go:hover { translate: 0 -3px; }
.buyband .go .arrow { transition: translate .15s; }
.buyband .go:hover .arrow { translate: 4px 0; }
.bento .c { transition: border-color .15s, translate .2s ease; }
.bento .c:hover { translate: 0 -3px; }