/* Section illustrations on the landing page, in the style of the VINC Lab LMS project art.
   Rules (same as lms.vinc-lab.com): every loop is seamless, staggered loops use negative delays, and the
   un-animated base styles always show a complete picture, so "reduce motion" still gets a finished scene.
   Scenes only animate while they are on screen (landing.js adds .playing). Prefixes: ab- bench, ap- portal, ai- invite. */
:root { --art-glow: #FFFBF1; --art-screen: #2B1A10; --art-wood: #D29A5B; --art-wood2: #A86C35; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --art-glow: #33261B; --art-screen: #120C08; --art-wood: #A8743F; --art-wood2: #7D4E25; } }
:root[data-theme="dark"] { --art-glow: #33261B; --art-screen: #120C08; --art-wood: #A8743F; --art-wood2: #7D4E25; }

.section-head.has-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 64px); }
.section-head.has-art h2 { max-width: 15em; }
.section-head.has-art p { margin: 14px 0 0; max-width: 34em; color: var(--ink-2); }
@media (max-width: 860px) { .section-head.has-art { grid-template-columns: minmax(0, 1fr); } .vg-art { max-width: 520px; } }
.vg-art { margin: 0; border-radius: 26px; overflow: hidden; position: relative; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: radial-gradient(120% 90% at 18% 8%, var(--art-glow), var(--card-2) 72%); }
.vg-art.reveal { scale: .96; transition: opacity .9s var(--ease-out) var(--rd, 0ms), translate .9s var(--ease-out) var(--rd, 0ms), scale 1.1s var(--ease-out) var(--rd, 0ms); }
.vg-art.reveal.in { scale: 1; }
.vg-art .art-svg { display: block; width: 100%; height: auto; }
.vg-art:not(.playing) * { animation-play-state: paused !important; }
.vg-art [class] { transform-box: fill-box; }

/* ---------- Section 2 · the VINC workbench ---------- */
.ab-board { fill: color-mix(in srgb, var(--card) 70%, transparent); stroke: var(--line); stroke-width: 1.5; }
.ab-peg { fill: color-mix(in srgb, var(--ink) 13%, transparent); }
.ab-teeth { fill: none; stroke-width: 7; }
.ab-teeth.amber { stroke: var(--amber); stroke-dasharray: 5.4 6.02; }
.ab-teeth.teal { stroke: var(--teal-2); stroke-dasharray: 4.6 5.61; }
.ab-disc.amber { fill: var(--amber); } .ab-disc.teal { fill: var(--teal-2); }
.ab-hub { fill: var(--art-glow); }
.ab-spin, .ab-spin-r { transform-origin: center; animation: ab-spin 8s linear infinite; }
.ab-spin-r { animation-duration: 5.2s; animation-direction: reverse; }
@keyframes ab-spin { to { transform: rotate(360deg); } }
.ab-tool { fill: var(--ink-2); } .ab-tool-head { fill: var(--plum); }
.ab-sway { transform-origin: 50% 0; animation: ab-sway 4s var(--ease-in-out) infinite; }
.ab-sway.d2 { animation-delay: -2s; animation-duration: 4.6s; }
@keyframes ab-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.ab-screen { fill: var(--art-screen); }
.ab-code { transform-origin: 0 50%; animation: ab-type 7s var(--ease-out) infinite backwards; }
.ab-code.c1 { fill: #F0B44C; } .ab-code.c2 { fill: #4FC1B1; animation-delay: .45s; } .ab-code.c3 { fill: #D06A93; animation-delay: .9s; }
.ab-code.c4 { fill: #F4EADB; opacity: .8; animation-delay: 1.35s; } .ab-code.c5 { fill: #8DBB5A; animation-delay: 1.8s; }
@keyframes ab-type { 0% { transform: scaleX(0); opacity: 1; } 9% { transform: scaleX(1); } 80% { transform: scaleX(1); opacity: 1; } 90%, 100% { transform: scaleX(1); opacity: 0; } }
.ab-cursor { fill: #F4EADB; animation: ab-blink 1s steps(1) infinite; }
@keyframes ab-blink { 50% { opacity: 0; } }
.ab-bench { fill: var(--art-wood); } .ab-leg { fill: var(--art-wood2); }
.ab-pcb { fill: #1F6F66; }
.ab-trace { fill: none; stroke: rgba(207, 230, 225, .42); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ab-pulse { fill: none; stroke: #FBD98A; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 120; animation: ab-current 2.4s linear infinite; filter: drop-shadow(0 0 3px #F0B44C); }
@keyframes ab-current { to { stroke-dashoffset: -128; } }
.ab-chip { fill: #2B1A10; }
.ab-pins path { fill: none; stroke: #CFE6E1; stroke-width: 2; stroke-linecap: round; }
.ab-led { animation: ab-led 1.6s var(--ease-in-out) infinite; }
.ab-led.a { fill: #F0B44C; } .ab-led.b { fill: #E0714A; animation-delay: -.8s; } .ab-led.c { fill: #8DBB5A; animation-delay: -.4s; animation-duration: 1.1s; }
@keyframes ab-led { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ab-rover { animation: ab-drive 6s var(--ease-in-out) infinite alternate; }
@keyframes ab-drive { from { transform: translateX(0); } to { transform: translateX(66px); } }
.ab-wheel { transform-origin: center; animation: ab-roll 6s var(--ease-in-out) infinite alternate; }
@keyframes ab-roll { to { transform: rotate(420deg); } }
.ab-body { fill: var(--amber); } .ab-stripe { fill: rgba(255, 255, 255, .55); }
.ab-head { fill: #FFF9EF; stroke: #2B1A10; stroke-width: 2.5; }
.ab-eyes circle { fill: #2B1A10; }
.ab-eyes { transform-origin: center; animation: ab-eye 4.2s infinite; }
@keyframes ab-eye { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
.ab-antenna { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.ab-tip { fill: #E0714A; animation: ab-led 1.2s var(--ease-in-out) infinite; }
.ab-tyre { fill: #2B1A10; } .ab-spoke { fill: none; stroke: #F7F0E3; stroke-width: 2.4; stroke-linecap: round; }
.ab-glass { fill: rgba(255, 255, 255, .5); }
.ab-glass-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.ab-liquid { fill: var(--teal-2); animation: ab-wave 2.4s linear infinite; }
@keyframes ab-wave { to { transform: translateX(40px); } }
.ab-bub { fill: #CFE6E1; stroke: #2A8378; stroke-width: 1; animation: ab-rise 2.6s var(--ease-in) infinite; }
.ab-bub.b2 { animation-delay: -.9s; } .ab-bub.b3 { animation-delay: -1.7s; animation-duration: 3s; }
@keyframes ab-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-96px); opacity: 0; } }
.ab-spark { fill: var(--amber); transform-origin: center; animation: ab-twinkle 3s var(--ease-in-out) infinite; }
.ab-spark.s2 { fill: var(--teal-2); animation-delay: -1s; } .ab-spark.s3 { fill: var(--plum); animation-delay: -2s; }
@keyframes ab-twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.25); } }

/* ---------- Section 4 · the portal, live: price line, chat, locked document, email toast (9 s loop) ---------- */
.ap-win { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.ap-bar { fill: var(--paper-2); }
.ap-url { fill: var(--card); stroke: var(--line); }
.ap-url-t { font: 500 9px var(--mono); fill: var(--muted); text-anchor: middle; }
.ap-card { fill: var(--card-2); stroke: var(--line); stroke-width: 1.2; }
.ap-k { font: 500 8px var(--mono); fill: var(--muted); letter-spacing: .08em; }
.ap-big { font: 700 22px var(--display); fill: var(--ink); }
.ap-up { fill: var(--olive-soft); } .ap-up-t { font: 700 8.5px var(--mono); fill: var(--ok); text-anchor: middle; }
.ap-line { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; animation: ap-draw 9s var(--ease-in-out) infinite; }
@keyframes ap-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 30%, 88% { stroke-dashoffset: 0; opacity: 1; } 96% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
.ap-area { fill: var(--amber-soft); opacity: .7; animation: ap-area 9s var(--ease-in-out) infinite; }
@keyframes ap-area { 0%, 18% { opacity: 0; } 34%, 88% { opacity: .7; } 96%, 100% { opacity: 0; } }
.ap-dot { fill: var(--amber); transform-origin: center; animation: ap-pop 9s var(--ease-out) infinite; }
@keyframes ap-pop { 0%, 28% { transform: scale(0); } 33% { transform: scale(1.4); } 36%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
.ap-ping { fill: none; stroke: var(--amber); stroke-width: 2; transform-origin: center; opacity: 0; animation: ap-ping 1.8s var(--ease-out) infinite; }
@keyframes ap-ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3); opacity: 0; } }
.ap-doc { fill: var(--rust); } .ap-doc-fold { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; }
.ap-ln { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.ap-lock { animation: ap-bob 3s var(--ease-in-out) infinite; }
@keyframes ap-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.ap-shackle { fill: none; stroke: var(--plum); stroke-width: 2.6; } .ap-lockbody { fill: var(--plum); }
.ap-sheen { transform: translateX(-60px) skewX(-20deg); animation: ap-sheen 4.5s var(--ease-in-out) infinite; }
@keyframes ap-sheen { 0%, 40% { transform: translateX(-60px) skewX(-20deg); } 80%, 100% { transform: translateX(260px) skewX(-20deg); } }
.ap-av { fill: var(--amber); }
.ap-chat-h { font: 600 10px var(--display); fill: var(--ink); }
.ap-them { fill: var(--card); stroke: var(--line); } .ap-me { fill: var(--ink); }
.ap-tl { fill: color-mix(in srgb, var(--ink) 22%, transparent); } .ap-ml { fill: var(--paper); opacity: .75; }
.ap-msg { transform-origin: 0 100%; }
.ap-msg.m2 { transform-origin: 100% 100%; }
.ap-msg.m1 { animation: ap-m1 9s var(--ease-out) infinite; }
.ap-msg.m2 { animation: ap-m2 9s var(--ease-out) infinite; }
.ap-msg.m3 { animation: ap-m3 9s var(--ease-out) infinite; }
@keyframes ap-m1 { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.85); } 12%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes ap-m2 { 0%, 24% { opacity: 0; transform: translateY(8px) scale(.85); } 30%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes ap-m3 { 0%, 58% { opacity: 0; transform: translateY(8px) scale(.85); } 64%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
.ap-typing { opacity: 0; animation: ap-typing 9s linear infinite; }
@keyframes ap-typing { 0%, 38% { opacity: 0; } 42%, 55% { opacity: 1; } 58%, 100% { opacity: 0; } }
.ap-td { fill: var(--muted); transform-origin: center; animation: ap-dots 1s var(--ease-in-out) infinite; }
.ap-td.t1 { animation-delay: -.85s; } .ap-td.t2 { animation-delay: -.7s; } .ap-td.t3 { animation-delay: -.55s; }
@keyframes ap-dots { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
.ap-input { fill: var(--card); stroke: var(--line); }
.ap-send { fill: var(--amber); transform-origin: center; animation: ap-send 9s var(--ease-out) infinite; }
@keyframes ap-send { 0%, 21% { transform: scale(1); } 24% { transform: scale(1.3); } 28%, 100% { transform: scale(1); } }
.ap-toast { animation: ap-toast 9s var(--ease-out) infinite; }
@keyframes ap-toast { 0%, 66% { opacity: 0; transform: translateY(14px); } 72%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-6px); } }
.ap-toast-bg { fill: var(--card); stroke: var(--line); filter: drop-shadow(0 6px 10px rgba(43, 26, 16, .18)); }
.ap-toast-dot { fill: var(--teal); } .ap-toast-t { font: 700 9.5px var(--body); fill: var(--ink); }

/* ---------- Section 5 · invitation → VINC ID → approved (10 s loop) ---------- */
.ai-halo { fill: color-mix(in srgb, var(--amber-soft) 70%, transparent); transform-origin: center; animation: ai-halo 5s var(--ease-in-out) infinite; }
@keyframes ai-halo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.ai-trail { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; animation: ai-flow 1.5s linear infinite; }
@keyframes ai-flow { to { stroke-dashoffset: -10; } }
.ai-plane { transform-origin: center; transform: translate(96px, 40px) rotate(10deg); animation: ai-plane 10s var(--ease-in-out) infinite; }
@keyframes ai-plane {
  0% { transform: translate(14px, 62px) rotate(-30deg); opacity: 0; }
  3% { opacity: 1; }
  7% { transform: translate(78px, 36px) rotate(-4deg); }
  11% { transform: translate(140px, 66px) rotate(28deg); opacity: 1; }
  15% { transform: translate(196px, 120px) rotate(40deg) scale(.5); opacity: 0; }
  100% { transform: translate(196px, 120px) rotate(40deg) scale(.5); opacity: 0; }
}
.ai-plane-b { fill: var(--teal); } .ai-plane-l { stroke: rgba(255, 255, 255, .6); stroke-width: 1.2; }
.ai-env { transform-origin: center; transform: translate(-20px, 10px) scale(.92); opacity: .45; animation: ai-env 10s var(--ease-in-out) infinite; }
@keyframes ai-env { 0%, 44% { transform: none; opacity: 1; } 52%, 86% { transform: translate(-20px, 10px) scale(.92); opacity: .45; } 94%, 100% { transform: none; opacity: 1; } }
.ai-env-back { fill: var(--paper-2); stroke: var(--ink); stroke-width: 2.5; }
.ai-env-front { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.ai-flap-c, .ai-flap-o { fill: var(--amber-soft); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.ai-flap-c { transform-origin: 50% 0; transform: scaleY(0); animation: ai-flap-c 10s var(--ease-in-out) infinite; }
.ai-flap-o { transform-origin: 50% 100%; animation: ai-flap-o 10s var(--ease-in-out) infinite; }
@keyframes ai-flap-c { 0%, 13% { transform: scaleY(1); } 17%, 86% { transform: scaleY(0); } 90%, 100% { transform: scaleY(1); } }
@keyframes ai-flap-o { 0%, 17% { transform: scaleY(0); } 21%, 84% { transform: scaleY(1); } 88%, 100% { transform: scaleY(0); } }
.ai-card { transform-origin: center; transform: translate(150px, -92px); animation: ai-card 10s var(--ease-in-out) infinite; }
@keyframes ai-card {
  0%, 20% { transform: translate(0, 0); opacity: 1; }
  30% { transform: translate(0, -98px); }
  42% { transform: translate(140px, -96px) rotate(5deg); }
  48%, 88% { transform: translate(150px, -92px) rotate(0deg); opacity: 1; }
  94% { transform: translate(150px, -92px); opacity: 0; }
  96%, 100% { transform: translate(0, 0); opacity: 0; }
}
.ai-card-b { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.ai-card-h { fill: var(--teal); }
.ai-card-ht { font: 700 7.5px var(--mono); fill: #fff; letter-spacing: .12em; }
.ai-av { fill: var(--amber-soft); } .ai-av-h { fill: var(--amber); }
.ai-id { font: 600 7.6px var(--mono); fill: var(--ink); }
.ai-id-cover { fill: var(--card); transform-origin: 100% 50%; transform: scaleX(0); animation: ai-type 10s steps(13) infinite; }
@keyframes ai-type { 0%, 48% { transform: scaleX(1); } 58%, 95% { transform: scaleX(0); } 96%, 100% { transform: scaleX(1); } }
.ai-ln { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.ai-stamp { transform-origin: center; animation: ai-stamp 10s var(--ease-out) infinite; }
@keyframes ai-stamp { 0%, 56% { opacity: 0; transform: scale(2.2); } 60% { opacity: 1; transform: scale(.94); } 62%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(1); } }
.ai-stamp-b { fill: color-mix(in srgb, var(--olive-soft) 70%, transparent); stroke: var(--olive); stroke-width: 3; }
.ai-stamp-t { font: 800 12px var(--mono); fill: var(--olive); text-anchor: middle; letter-spacing: .12em; }
.ai-check { transform-origin: center; animation: ai-check 10s var(--ease-spring) infinite; }
@keyframes ai-check { 0%, 64% { transform: scale(0); } 70% { transform: scale(1.15); } 74%, 88% { transform: scale(1); } 94%, 100% { transform: scale(0); } }
.ai-check-b { fill: var(--teal); }
.ai-check-l { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: ai-tick 10s var(--ease-out) infinite; }
@keyframes ai-tick { 0%, 68% { stroke-dashoffset: 1; } 76%, 100% { stroke-dashoffset: 0; } }
.ai-sp { opacity: 0; transform-origin: center; }
.ai-sp.k1, .ai-sp.k4 { fill: var(--amber); } .ai-sp.k2, .ai-sp.k5 { fill: var(--teal-2); } .ai-sp.k3, .ai-sp.k6 { fill: var(--plum); }
.ai-sp.k1 { animation: ai-k1 10s var(--ease-out) infinite; } .ai-sp.k2 { animation: ai-k2 10s var(--ease-out) infinite; } .ai-sp.k3 { animation: ai-k3 10s var(--ease-out) infinite; }
.ai-sp.k4 { animation: ai-k4 10s var(--ease-out) infinite; } .ai-sp.k5 { animation: ai-k5 10s var(--ease-out) infinite; } .ai-sp.k6 { animation: ai-k6 10s var(--ease-out) infinite; }
@keyframes ai-k1 { 0%, 59% { opacity: 0; transform: translate(0, 0) scale(.4); } 60% { opacity: 1; } 72%, 100% { opacity: 0; transform: translate(-48px, -32px) scale(1); } }
@keyframes ai-k2 { 0%, 59% { opacity: 0; transform: translate(0, 0) scale(.4); } 60% { opacity: 1; } 72%, 100% { opacity: 0; transform: translate(44px, -38px) scale(1); } }
@keyframes ai-k3 { 0%, 59% { opacity: 0; transform: translate(0, 0) scale(.4); } 60% { opacity: 1; } 72%, 100% { opacity: 0; transform: translate(56px, 10px) scale(1); } }
@keyframes ai-k4 { 0%, 59% { opacity: 0; transform: translate(0, 0) scale(.4); } 60% { opacity: 1; } 72%, 100% { opacity: 0; transform: translate(-54px, 14px) scale(1); } }
@keyframes ai-k5 { 0%, 59% { opacity: 0; transform: translate(0, 0) scale(.4); } 60% { opacity: 1; } 72%, 100% { opacity: 0; transform: translate(-10px, -52px) scale(1); } }
@keyframes ai-k6 { 0%, 59% { opacity: 0; transform: translate(0, 0) scale(.4); } 60% { opacity: 1; } 72%, 100% { opacity: 0; transform: translate(20px, 44px) scale(1); } }