/* Profession marks: line drawings that draw themselves once, then do one small gesture.
   Used on business pages, the U-tor site and the admin console. */
.pa { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pa .f { fill: currentColor; stroke: none; }
.pa .thick { stroke-width: 3.4; }
.pa .p, .pa [class*='a-'] { transform-box: fill-box; transform-origin: center; }

/* 1 · drawing */
.pa.go .d { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: pa-draw 0.75s cubic-bezier(0.55, 0.05, 0.25, 1) calc(var(--i, 0) * 0.13s + var(--pa-delay, 0s)) both; }
.pa.go .p { transform: scale(0); animation: pa-pop 0.42s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--i, 0) * 0.13s + var(--pa-delay, 0s)) forwards; }
.pa.go .w { clip-path: inset(0 100% 0 0); animation: pa-wipe 1.1s cubic-bezier(0.55, 0.05, 0.25, 1) var(--pa-delay, 0s) forwards; }
@keyframes pa-draw { from { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes pa-pop { to { transform: scale(1); } }
@keyframes pa-wipe { to { clip-path: inset(0 0 0 0); } }

/* 2 · the profession's gesture, after the drawing (twice; forever with .loop) */
.pa.go { --pa-after: calc(var(--pa-delay, 0s) + 1.15s); }
.pa.go [class*='a-'] { animation-delay: var(--pa-after); animation-iteration-count: 2; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.pa.go.loop [class*='a-'] { animation-iteration-count: infinite; }
.pa.go .p[class*='a-'] { animation: pa-pop 0.42s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--i, 0) * 0.13s + var(--pa-delay, 0s)) forwards; }

.pa.go .a-twinkle { }
.pa.go g.a-flutter { transform-origin: 50% 0%; animation-name: pa-flutter; animation-duration: 0.9s; }
.pa.go g.a-wave { animation-name: pa-slosh; animation-duration: 1.6s; }
.pa.go g.a-rise { transform-origin: 50% 100%; animation-name: pa-rise; animation-duration: 1.4s; }
.pa.go g.a-strokes { animation-name: pa-nudge; animation-duration: 1.2s; }
.pa.go g.a-drop { animation-name: pa-drip; animation-duration: 1.5s; }
.pa.go g.a-beam { animation-name: pa-blink; animation-duration: 0.9s; }
.pa.go g.a-pole { transform-box: view-box; animation-name: pa-pole; animation-duration: 1.4s; animation-timing-function: linear; }
.pa.go g.a-air { animation-name: pa-air; animation-duration: 0.9s; }
.pa.go g.a-gems { animation-name: pa-glint; animation-duration: 1.2s; }
.pa.go g.a-steam { animation-name: pa-steam; animation-duration: 1.8s; }
.pa.go g.a-bloom-r { transform-origin: 50% 100%; animation-name: pa-bloom-r; animation-duration: 1.8s; }
.pa.go g.a-bloom-l { transform-origin: 50% 100%; animation-name: pa-bloom-l; animation-duration: 1.8s; }
.pa.go g.a-pulse { animation-name: pa-glint; animation-duration: 1.1s; }
.pa.go g.a-tap { animation-name: pa-tap; animation-duration: 0.9s; }
.pa.go g.a-leaf { transform-origin: 0% 100%; animation-name: pa-leaf; animation-duration: 1.6s; }
.pa.go g.a-heart { animation-name: pa-beat; animation-duration: 1s; }
.pa.go g.a-lift { animation-name: pa-lift; animation-duration: 1.3s; }
.pa.go g.a-sway { transform-origin: 50% 100%; animation-name: pa-sway; animation-duration: 2.2s; }
.pa.go g.a-buzz { animation-name: pa-buzz; animation-duration: 0.5s; }
.pa.go g.a-steps { animation-name: pa-glint; animation-duration: 1s; }
.pa.go g.a-flash { animation-name: pa-flash; animation-duration: 1.4s; }
.pa.go g.a-page { transform-origin: 0% 50%; animation-name: pa-page; animation-duration: 1.6s; }
.pa.go g.a-steer { animation-name: pa-steer; animation-duration: 2s; }
.pa.go g.a-check { animation-name: pa-beat; animation-duration: 1s; }
.pa.go .p.a-twinkle { animation: pa-pop 0.42s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--i, 0) * 0.13s + var(--pa-delay, 0s)) forwards, pa-twinkle 1.4s ease-in-out var(--pa-after) 2; }
.pa.go.loop .p.a-twinkle { animation: pa-pop 0.42s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--i, 0) * 0.13s + var(--pa-delay, 0s)) forwards, pa-twinkle 1.4s ease-in-out var(--pa-after) infinite; }

@keyframes pa-flutter { 0%, 100% { transform: scaleY(1); } 30% { transform: scaleY(0.55); } 55% { transform: scaleY(1.06); } }
@keyframes pa-slosh { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes pa-rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5px); } }
@keyframes pa-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.5px, -1.5px); } }
@keyframes pa-drip { 0% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(9px); opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes pa-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes pa-pole { from { transform: translateY(0); } to { transform: translateY(8px); } }
@keyframes pa-air { 0% { transform: translateX(-3px); opacity: 0.2; } 60% { opacity: 1; } 100% { transform: translateX(3px); opacity: 0; } }
@keyframes pa-glint { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.82); } }
@keyframes pa-steam { 0% { transform: translateY(2px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-5px); opacity: 0; } }
@keyframes pa-bloom-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
@keyframes pa-bloom-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes pa-tap { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(2.5px); } }
@keyframes pa-leaf { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes pa-beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.14); } 40% { transform: scale(0.97); } 60% { transform: scale(1.06); } }
@keyframes pa-lift { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-6px); } }
@keyframes pa-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 70% { transform: rotate(3deg); } }
@keyframes pa-buzz { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-0.7px, 0.7px); } 75% { transform: translate(0.7px, -0.7px); } }
@keyframes pa-flash { 0%, 60%, 100% { opacity: 1; transform: scale(1); } 20% { opacity: 0.2; transform: scale(1.35); } }
@keyframes pa-page { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.35); } }
@keyframes pa-steer { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-18deg); } 70% { transform: rotate(14deg); } }
@keyframes pa-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(0.6) rotate(45deg); } }

@media (prefers-reduced-motion: reduce) {
  .pa.go .d, .pa.go .p, .pa.go .w, .pa.go [class*='a-'] { animation: none !important; stroke-dashoffset: 0; transform: none; clip-path: none; opacity: 1; }
}