/* Motion graphic for the GEO services page: an AI answer before and after the work.
   Pure CSS, no script. Every class starts with gm- so nothing else on the site is touched.
   With reduced motion the two states sit side by side and nothing moves. */
.gm{--gm-ac:#9372ff;--gm-soft:#d4b4ff;--gm-line:rgba(255,255,255,.12);margin:28px 0 8px;color:#e8e6f4;font:400 15px/1.5 "IBM Plex Sans",system-ui,-apple-system,sans-serif}
.gm *{box-sizing:border-box}
.gm-card{position:relative;background:#101016;border:1px solid var(--gm-line);border-radius:18px;padding:18px 18px 16px;overflow:hidden;box-shadow:0 30px 80px -40px rgba(127,88,236,.55)}
.gm-card::before{content:"";position:absolute;left:50%;top:0;width:70%;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gm-ac),transparent)}
.gm-top{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:#a9a3c0;font:500 12px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.gm-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:gm-pulse 2.2s infinite}
.gm-q{margin:0 0 14px;padding:12px 14px;border:1px solid var(--gm-line);border-radius:12px;background:#0c0c12;color:#fff;font-weight:500}
.gm-stage{position:relative;min-height:236px}
.gm-state{position:absolute;inset:0;opacity:0}
.gm-state--a{animation:gm-a 16s infinite}
.gm-state--b{animation:gm-b 16s infinite}
.gm-tag{display:inline-block;margin:0 0 10px;padding:3px 11px;border-radius:99px;border:1px solid var(--gm-line);font:600 12px system-ui,sans-serif;color:#b6b6c2}
.gm-state--b .gm-tag{color:var(--gm-soft);border-color:rgba(147,114,255,.55);background:rgba(147,114,255,.12)}
.gm-row{display:flex;align-items:center;gap:12px;margin:0 0 8px;padding:10px 12px;border:1px solid var(--gm-line);border-radius:12px;background:rgba(255,255,255,.03)}
.gm-n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#1c1c26;color:#b6b6c2;font:600 12px "JetBrains Mono",ui-monospace,monospace}
.gm-name{flex:1;min-width:0;color:#fff;font-weight:600}
.gm-src{flex:none;color:#8f8aa6;font-size:12px}
.gm-row--you{border-color:rgba(147,114,255,.8);background:linear-gradient(90deg,rgba(147,114,255,.22),rgba(147,114,255,.06));box-shadow:0 0 28px -8px rgba(147,114,255,.8)}
.gm-row--you .gm-n{background:var(--gm-ac);color:#fff}
.gm-row--you .gm-src{color:var(--gm-soft)}
.gm-state--b .gm-row{opacity:0;animation:gm-rowin 16s infinite}
.gm-state--b .gm-row:nth-of-type(1){animation-delay:.0s}
.gm-state--b .gm-row:nth-of-type(2){animation-delay:.35s}
.gm-state--b .gm-row:nth-of-type(3){animation-delay:.7s}
.gm-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 0;padding:0;list-style:none}
.gm-steps li{position:relative;padding:8px 10px;border:1px solid var(--gm-line);border-radius:10px;color:#8f8aa6;font:600 12px system-ui,sans-serif;text-align:center;animation:gm-step 16s infinite}
.gm-steps li:nth-child(1){animation-delay:0s}.gm-steps li:nth-child(2){animation-delay:1.2s}.gm-steps li:nth-child(3){animation-delay:2.4s}.gm-steps li:nth-child(4){animation-delay:3.6s}
.gm-cap{margin:12px 0 0;color:#8f8aa6;font-size:13px}
@keyframes gm-a{0%,36%{opacity:1;transform:none}42%,94%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@keyframes gm-b{0%,38%{opacity:0;transform:translateY(8px)}46%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(8px)}}
@keyframes gm-rowin{0%,40%{opacity:0;transform:translateX(-10px)}48%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes gm-step{0%,5%{color:#8f8aa6;border-color:var(--gm-line);background:transparent}8%,34%{color:#fff;border-color:rgba(147,114,255,.8);background:rgba(147,114,255,.16)}40%,100%{color:#8f8aa6;border-color:var(--gm-line);background:transparent}}
@keyframes gm-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@media(max-width:600px){.gm-card{padding:14px 12px}.gm-stage{min-height:216px}.gm-src{display:none}.gm-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){
 .gm-dot,.gm-state,.gm-state--a,.gm-state--b,.gm-state--b .gm-row,.gm-steps li{animation:none}
 .gm-stage{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .gm-state{position:static;opacity:1}
 .gm-state--b .gm-row{opacity:1}
 .gm-steps li{color:#fff;border-color:rgba(147,114,255,.6)}
}
@media(prefers-reduced-motion:reduce) and (max-width:600px){.gm-stage{grid-template-columns:1fr}}