/* Looping line illustrations shared by the survey and results pages.
   Needs --bg, --fg, --ease from the page. */
/* ---------- looping line illustrations ---------- */
:root { --hot: #e5484d; }
.art { display: block; width: 72px; height: 72px; margin: 0 0 18px; color: var(--fg); overflow: visible; }
.art * { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.art .paper { fill: var(--bg); }
.art .ink { stroke: var(--hot); }
.art .dot { fill: var(--hot); stroke: none; }
.art .fill { fill: currentColor; stroke: none; }
.art text { fill: currentColor; stroke: none; font: 700 7px ui-monospace, SFMono-Regular, Menlo, monospace; }
.art .draw { stroke-dasharray: 1; }

.a-plane .plane { animation: glide 3s ease-in-out infinite alternate; }
.a-plane .trail { stroke-dasharray: 3 4; animation: trail 1s linear infinite; opacity: .5; }
@keyframes glide { from { transform: translate(-2px, 2px) rotate(-3deg); } to { transform: translate(2px, -2px) rotate(3deg); } }
@keyframes trail { to { stroke-dashoffset: -14; } }

.a-env .letter { animation: peek 2.6s var(--ease) infinite; }
@keyframes peek { 0%, 15% { transform: translateY(12px); } 45%, 70% { transform: translateY(0); } 100% { transform: translateY(12px); } }

.a-sign .s1 { transform-origin: left center; animation: swing 2.2s ease-in-out infinite alternate; }
.a-sign .s2 { transform-origin: right center; animation: swing 2.2s ease-in-out infinite alternate-reverse; }
.a-sign text { font-size: 13px; animation: bob 1.4s ease-in-out infinite alternate; }
@keyframes swing { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes bob { from { transform: translateY(-2px); } to { transform: translateY(2px); } }

.a-inbox .mail { animation: drop 1.9s ease-in infinite; }
.a-inbox .badge { animation: pulse 1.9s ease-in-out infinite; }
.a-inbox .badge text { fill: #fff; font-size: 6px; }
@keyframes drop { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(20px); opacity: 1; } 85%, 100% { transform: translateY(24px); opacity: 0; } }
@keyframes pulse { 0%, 68%, 100% { transform: scale(1); } 78% { transform: scale(1.18); } }

.a-laser .head { animation: head 2.8s ease-in-out infinite; }
.a-laser .beam, .a-laser .head .dot { animation: beam 2.8s linear infinite; }
.a-laser .cut { animation: cut 2.8s ease-in-out infinite; }
@keyframes head { 0% { transform: translateX(0); } 60%, 72% { transform: translateX(40px); } 100% { transform: translateX(0); } }
@keyframes beam { 0%, 58% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes cut { 0% { stroke-dashoffset: 1; opacity: 1; } 60% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

.a-files .f { transform-origin: center bottom; animation: jig 1.6s ease-in-out infinite; }
.a-files .f2 { animation-delay: -.5s; }
.a-files .f3 { animation-delay: -1s; }
.a-files text { font-size: 5.5px; }
@keyframes jig { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

.a-clip .chk { animation: tick 3.6s ease-out infinite; }
.a-clip .c2 { animation-delay: .45s; }
.a-clip .c3 { animation-delay: .9s; }
@keyframes tick { 0%, 10% { stroke-dashoffset: 1; opacity: 1; } 22%, 82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

.a-print .rcpt { animation: rcpt 2.8s ease-out infinite; }
.a-print .dot { animation: blink .7s steps(1) infinite; }
.a-print text { font-size: 9px; font-family: inherit; }
@keyframes rcpt { 0% { transform: translateY(-20px); opacity: 1; } 55%, 80% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes blink { 50% { opacity: .2; } }

.a-drive .cloud { animation: bob 1.8s ease-in-out infinite alternate; }
.a-drive .up { animation: up 1.6s ease-in infinite; }
@keyframes up { 0% { transform: translateY(4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }

.a-snap .sig { animation: sig 3.2s ease-in-out infinite; }
.a-snap .rays { animation: rays 3.2s ease-out infinite; }
.a-snap .phone { animation: lift 3.2s var(--ease) infinite; }
@keyframes sig { 0% { stroke-dashoffset: 1; opacity: 1; } 40%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rays { 0%, 58% { opacity: 0; transform: scale(.6); } 64% { opacity: 1; transform: scale(1.1); } 80%, 100% { opacity: 0; transform: scale(1); } }
@keyframes lift { 0%, 40% { transform: translate(10px, 14px); opacity: 0; } 52%, 85% { transform: none; opacity: 1; } 100% { transform: translate(10px, 14px); opacity: 0; } }

.a-stamp .stamp { animation: thump 2.4s cubic-bezier(.5, 0, .2, 1) infinite; }
.a-stamp .mark { animation: mark 2.4s ease-out infinite; }
.a-stamp .mark text { fill: var(--hot); font-size: 6px; }
@keyframes thump { 0%, 20% { transform: translateY(-4px); } 34%, 44% { transform: translateY(8px); } 66%, 100% { transform: translateY(-4px); } }
@keyframes mark { 0%, 33% { opacity: 0; } 36%, 85% { opacity: 1; } 100% { opacity: 0; } }

.a-people .p { animation: bob 1.2s ease-in-out infinite alternate; }
.a-people .p2 { animation-delay: -.4s; }
.a-people .p3 { animation-delay: -.8s; }
.a-people .d { animation: blink 1.2s steps(1) infinite; }
.a-people .d2 { animation-delay: .3s; }
.a-people .d3 { animation-delay: .6s; }


@media (prefers-reduced-motion: reduce) {
  .art * { animation: none !important; }
}