/* Six small illustrations for the platform features. All moving ink stays inside the art. */
#feature-grid .feature-graphic {
  position:relative; z-index:1; width:94%; height:86%; max-width:335px;
  overflow:visible; fill:none; stroke:none; pointer-events:none;
  --ink:var(--cyan,#b1fbd6); --second:var(--violet,#90b5ff);
  --rule:color-mix(in srgb,var(--ink) 38%,transparent);
}
#feature-grid .feature-visual .visual-coordinate {z-index:2}
.feature-graphic .wire,.feature-graphic .guide,.feature-graphic .ticket-rule {fill:none;stroke:var(--rule);stroke-width:1.3}
.feature-graphic .quiet {opacity:.52}
.feature-graphic .port,.feature-graphic .slab {fill:var(--surface,#10161b);stroke:var(--rule);stroke-width:1.2}
.feature-graphic .destination {stroke:var(--second)}
.feature-graphic .number,.feature-graphic .ticket-number {
  fill:var(--text,#edf2f1);stroke:none;font:500 20px var(--display,sans-serif);font-variant-numeric:tabular-nums
}
.feature-graphic .ticket-number {font-size:13px}
.feature-graphic .pip,.feature-graphic .pivot,.feature-graphic .sound-bar {fill:var(--ink)}
.feature-graphic .accent {fill:var(--second)}
.feature-graphic .packet {stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;fill:none;stroke-dasharray:15 100;stroke-dashoffset:-36}
.feature-graphic .packet-back {stroke:var(--second);stroke-dashoffset:-64}
.feature-graphic .ticket-rule,.feature-graphic .guide {stroke:var(--second)}
.feature-graphic .dial {fill:none;stroke:var(--rule);stroke-width:2;stroke-dasharray:1.4 4.6}
.feature-graphic .resume-hand {transform-origin:125px 58px}
.feature-graphic .needle,.feature-graphic .entry-ink,.feature-graphic .pause-bars,.feature-graphic .endpoint {fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.feature-graphic .entry-ink,.feature-graphic .endpoint {stroke:var(--second)}
.feature-graphic .entry-caret {stroke:var(--ink);stroke-width:1.6}
.feature-graphic .pause-bars {stroke-width:3}
.feature-graphic .sound-bar {transform-box:fill-box;transform-origin:center}
@keyframes feature-packet {0%,12%{stroke-dashoffset:16;opacity:0}23%,65%{opacity:1}82%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes feature-ticket {0%,31%,100%{opacity:.63;transform:translateY(0)}12%,21%{opacity:1;transform:translateY(-4px)}}
@keyframes feature-scan {0%,11%{transform:translateX(0)}25%,32%{transform:translateX(44px)}45%,52%{transform:translateX(88px)}65%,72%{transform:translateX(132px)}85%,93%{transform:translateX(176px)}97%{opacity:0}100%{transform:translateX(0);opacity:0}}
@keyframes feature-resume {0%,16%{transform:rotate(-45deg)}55%,76%{transform:rotate(57deg)}100%{transform:rotate(-45deg)}}
@keyframes feature-typing {0%,100%{opacity:.25}17%,66%{opacity:1}}
@keyframes feature-caret {0%,22%,100%{transform:translateX(0)}33%,55%{transform:translateX(54px)}66%,88%{transform:translateX(108px)}}
@keyframes feature-hold {0%,100%{transform:scaleY(.48)}22%{transform:scaleY(1)}47%,72%{transform:scaleY(.66)}85%{transform:scaleY(.96)}}
@media (prefers-reduced-motion:no-preference){
  :root[data-motion=on] .feature-graphic .packet{animation:feature-packet 3.5s ease-in-out infinite}
  :root[data-motion=on] .feature-graphic .packet-back{animation-delay:-1.75s}
  :root[data-motion=on] .feature-graphic .round-ticket{animation:feature-ticket 5s ease-in-out infinite;animation-delay:calc(var(--beat)*1s)}
  :root[data-motion=on] .feature-graphic .track-head{animation:feature-scan 5s var(--settle,ease) infinite}
  :root[data-motion=on] .feature-graphic .resume-hand{animation:feature-resume 4.9s ease-in-out infinite}
  :root[data-motion=on] .feature-graphic .entry-ink{animation:feature-typing 4.5s ease-in-out infinite;animation-delay:calc(var(--beat)*1.5s)}
  :root[data-motion=on] .feature-graphic .entry-caret{animation:feature-caret 4.5s var(--settle,ease) infinite}
  :root[data-motion=on] .feature-graphic .sound-bar{animation:feature-hold 3.8s ease-in-out infinite;animation-delay:calc(var(--beat)*-.16s)}
  :root[data-motion=on] .feature-visual:not([data-art-visible]) .feature-graphic *{animation-play-state:paused}
}