/* /platform/ai-koppeling — animaties voor de MCP-pagina (25-9-2026).
   Alles start pas als het blok in beeld komt (js/mcp.js zet .in). Minder beweging = eindstand. */
:root { --mcp-acc: #F5913E; --mcp-vio: #8B7CF6; --mcp-teal: #3DD6C4; --mcp-card: #12121C; --mcp-line: rgba(255,255,255,.08); }

.mcp-hero { position: relative; overflow: hidden; }
.mcp-stars { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1px 1px at 12% 22%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 78% 18%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 64%, #F5913E88 50%, transparent 51%), radial-gradient(1px 1px at 30% 78%, #fff5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 52%, #8B7CF688 50%, transparent 51%), radial-gradient(1px 1px at 46% 36%, #fff4 50%, transparent 51%);
  animation: mcp-twinkle 7s ease-in-out infinite alternate; }
@keyframes mcp-twinkle { from { opacity: .25; transform: translateY(0); } to { opacity: .7; transform: translateY(-8px); } }

.mcp-wrap { max-width: 1140px; margin: 0 auto 12px; }

/* ── 1. kopiëren → plakken → gekoppeld ───────────────────────────────── */
.mcp-connect > * { min-width: 0; }
.mcp-connect { display: grid; grid-template-columns: minmax(0,1fr) 180px minmax(0,1fr); align-items: center; gap: 12px; padding: 8px 0 20px; }
.mcp-card { position: relative; background: var(--mcp-card); border: 1px solid var(--mcp-line); border-radius: 14px; padding: 16px 18px;
  opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.mcp-connect.in .mcp-card { opacity: 1; transform: none; }
.mcp-connect.in .mcp-card-b { transition-delay: .25s; }
.mcp-card-top { font: 500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8a8aa0; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mcp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mcp-acc); box-shadow: 0 0 10px var(--mcp-acc); }
.mcp-card-lbl { font-size: 12px; color: #a3a3b8; margin: 0 0 8px; }
.mcp-linkbox { display: flex; gap: 8px; align-items: center; }
.mcp-linkbox code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #0A0A12; border: 1px solid var(--mcp-line);
  border-radius: 8px; padding: 9px 10px; font-size: 11.5px; color: #e8e8f2; }
.mcp-copy { flex-shrink: 0; background: var(--mcp-acc); color: #1a0f05; font-weight: 700; font-size: 12px; border-radius: 8px; padding: 9px 12px; }
.mcp-connect.in .mcp-copy { animation: mcp-press .5s ease 1.1s both; }
@keyframes mcp-press { 40% { transform: scale(.92); box-shadow: 0 0 0 0 #F5913E88; } 100% { transform: scale(1); box-shadow: 0 0 0 10px #F5913E00; } }
.mcp-toast { position: absolute; right: 16px; top: -12px; background: #1f1f2e; border: 1px solid var(--mcp-line); color: #e8e8f2; font-size: 11px;
  padding: 4px 9px; border-radius: 999px; opacity: 0; }
.mcp-connect.in .mcp-toast { animation: mcp-toast 1.6s ease 1.3s both; }
@keyframes mcp-toast { 0% { opacity: 0; transform: translateY(6px); } 20%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }

.mcp-beam { position: relative; height: 60px; }
.mcp-beam svg { width: 100%; height: 60px; overflow: visible; }
.mcp-beam-path { fill: none; stroke: var(--mcp-acc); stroke-width: 1.6; stroke-dasharray: 4 6; opacity: .35; }
.mcp-connect.in .mcp-beam-path { animation: mcp-dash 1.2s linear infinite; opacity: .7; }
@keyframes mcp-dash { to { stroke-dashoffset: -40; } }
.mcp-chip-fly { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; background: #1b1b28; border: 1px solid var(--mcp-acc);
  color: #ffd9b8; font: 600 10.5px ui-monospace, Menlo, monospace; padding: 4px 8px; border-radius: 999px; box-shadow: 0 0 16px #F5913E66; white-space: nowrap; }
.mcp-connect.in .mcp-chip-fly { animation: mcp-fly 1.3s cubic-bezier(.5,0,.3,1) 1.6s both; }
@keyframes mcp-fly { 0% { left: 0; opacity: 0; transform: translate(-50%, -50%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -90%) scale(1); }
  55% { transform: translate(-50%, -10%) scale(1); } 100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(.7); } }

.mcp-field { display: flex; gap: 10px; align-items: center; font-size: 12px; margin-top: 6px; }
.mcp-field span { width: 42px; color: #8a8aa0; }
.mcp-field b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; color: #e8e8f2; background: #0A0A12;
  border: 1px solid var(--mcp-line); border-radius: 7px; padding: 7px 9px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.mcp-paste { clip-path: inset(0 100% 0 0); }
.mcp-connect.in .mcp-paste { animation: mcp-reveal .6s steps(24) 2.8s both; }
@keyframes mcp-reveal { to { clip-path: inset(0 0 0 0); } }
.mcp-connected { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #3DD6C4; opacity: 0; }
.mcp-connected i { width: 8px; height: 8px; border-radius: 50%; background: #3DD6C4; box-shadow: 0 0 12px #3DD6C4; }
.mcp-connect.in .mcp-connected { animation: mcp-in .5s ease 3.5s both; }
.mcp-ring { position: absolute; inset: -2px; border-radius: 14px; border: 1.5px solid #3DD6C4; opacity: 0; pointer-events: none; }
.mcp-connect.in .mcp-ring { animation: mcp-ring 1.4s ease-out 3.5s both; }
.mcp-connect.in .mcp-ring.r2 { animation-delay: 3.8s; }
@keyframes mcp-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
.mcp-connect.in .mcp-card-b { animation: mcp-glow 2.4s ease 3.5s both; }
@keyframes mcp-glow { 0% { box-shadow: 0 0 0 0 #3DD6C400; } 30% { box-shadow: 0 0 40px -6px #3DD6C4aa; } 100% { box-shadow: 0 0 28px -12px #3DD6C466; } }
@keyframes mcp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── 2. de chat ──────────────────────────────────────────────────────── */
.mcp-chat, .mcp-confirm { background: #0A0A12; border: 1px solid var(--mcp-line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px -40px #000; }
.mcp-chat-in { padding: 18px; min-height: 340px; display: flex; flex-direction: column; gap: 12px; }
.mcp-msg { border-radius: 12px; padding: 11px 13px; font-size: 13px; line-height: 1.55; }
.mcp-user { align-self: flex-end; max-width: 86%; background: #1f1f2e; color: #f0f0f7; }
.mcp-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--mcp-acc); animation: mcp-blink 1s steps(1) infinite; }
.mcp-chat.done-typing .mcp-caret { display: none; }
@keyframes mcp-blink { 50% { opacity: 0; } }
.mcp-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.mcp-tool { font: 500 10.5px ui-monospace, Menlo, monospace; color: #b8b8cc; border: 1px solid var(--mcp-line); border-radius: 999px; padding: 4px 9px; opacity: 0; transform: scale(.9); }
.mcp-chat.tools .mcp-tool { animation: mcp-tool .45s ease both, mcp-tool-lit 1.4s ease both; animation-delay: calc(var(--d) * 220ms), calc(var(--d) * 220ms); }
@keyframes mcp-tool { to { opacity: 1; transform: none; } }
@keyframes mcp-tool-lit { 0%, 20% { border-color: var(--mcp-acc); color: #ffd9b8; box-shadow: 0 0 14px -2px #F5913E88; } 100% { border-color: rgba(255,255,255,.12); color: #9a9ab0; box-shadow: none; } }
.mcp-ai { background: #151521; border: 1px solid var(--mcp-line); color: #e3e3ee; opacity: 0; }
.mcp-chat.answer .mcp-ai { opacity: 1; transition: opacity .3s; }
.mcp-stream { margin: 0; min-height: 3em; }
.mcp-bars { margin: 10px 0 4px; display: grid; gap: 6px; }
.mcp-bars div { display: grid; grid-template-columns: 32px 1fr 36px; align-items: center; gap: 8px; font-size: 11px; color: #9a9ab0; }
.mcp-bars i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--mcp-acc), #ffb77a); width: 0; }
.mcp-bars div:last-child i { background: linear-gradient(90deg, #F87171, #fb9a9a); }
.mcp-chat.bars .mcp-bars i { width: calc(var(--w) * 3); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.mcp-bars b { color: #e3e3ee; font-weight: 600; }
.mcp-sugg { margin: 8px 0 0; font-size: 12px; color: #ffcf9f; opacity: 0; }
.mcp-chat.bars .mcp-sugg { animation: mcp-in .5s ease 1.1s both; }
.mcp-cap { font-size: 11.5px; color: #8a8aa0; margin: 8px 2px 0; }

/* ── 3. de baan om de kern ───────────────────────────────────────────── */
.mcp-orbit { position: relative; width: 100%; margin-block: 24px !important; aspect-ratio: 1 / 1; max-width: 460px; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #F5913E1f 0 18%, transparent 19%), radial-gradient(circle at 50% 50%, #12121C 0 70%, transparent 71%); }
.mcp-core { position: absolute; left: 50%; top: 50%; width: 118px; height: 118px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb77a, #F5913E 55%, #b8561a); display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #1a0f05; font-weight: 800; font-size: 17px; box-shadow: 0 0 60px -6px #F5913Eaa; animation: mcp-pulse 3.2s ease-in-out infinite; z-index: 2; }
.mcp-core small { font-size: 10px; letter-spacing: .12em; font-weight: 700; opacity: .75; }
@keyframes mcp-pulse { 50% { box-shadow: 0 0 90px 4px #F5913Ecc; transform: translate(-50%, -50%) scale(1.04); } }
.mcp-lane { position: absolute; inset: 0; margin: auto; border: 1px dashed rgba(255,255,255,.09); border-radius: 50%; }
.mcp-lane.l1 { width: 50%; height: 50%; animation: mcp-spin 38s linear infinite; }
.mcp-lane.l2 { width: 78%; height: 78%; animation: mcp-spin 60s linear infinite reverse; }
.mcp-lane.l3 { width: 96%; height: 96%; animation: mcp-spin 84s linear infinite; }
.mcp-lane span { position: absolute; white-space: nowrap; font-size: 11px; font-weight: 600; color: #e8e8f2; background: #1b1b28;
  border: 1px solid rgba(255,255,255,.1); padding: 4px 9px; border-radius: 999px;
  left: calc(50% + 50% * cos(var(--a))); top: calc(50% + 50% * sin(var(--a))); translate: -50% -50%; }
/* het label draait tegen de baan in, zodat de tekst rechtop blijft */
.mcp-lane.l1 span { animation: mcp-spin 38s linear infinite reverse; }
.mcp-lane.l2 span { animation: mcp-spin 60s linear infinite; }
.mcp-lane.l3 span { animation: mcp-spin 84s linear infinite reverse; border-color: #F5913E55; color: #ffd9b8; }
@keyframes mcp-spin { to { rotate: 360deg; } }
.mcp-orbit .mcp-lane { opacity: 0; transition: opacity .8s ease; }
.mcp-orbit.in .mcp-lane { opacity: 1; }
.mcp-orbit.in .l2 { transition-delay: .25s; } .mcp-orbit.in .l3 { transition-delay: .5s; }

/* ── stappen ─────────────────────────────────────────────────────────── */
.mcp-steps { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; }
.mcp-step { background: var(--mcp-card); border: 1px solid var(--mcp-line); border-radius: 14px; padding: 20px; opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease, border-color .4s; transition-delay: calc(var(--i) * 180ms); }
.mcp-steps.in .mcp-step { opacity: 1; transform: none; }
.mcp-step:hover { border-color: #F5913E66; }
.mcp-step h3 { font-size: 16px; margin: 10px 0 6px; }
.mcp-step p { font-size: 13.5px; color: #a3a3b8; margin: 0; line-height: 1.55; }
.mcp-n { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 800; color: #1a0f05;
  background: var(--mcp-acc); box-shadow: 0 0 18px -2px #F5913E99; }

/* ── bevestigen ──────────────────────────────────────────────────────── */
.mcp-confirm-in { padding: 18px; }
.mcp-c-h { margin: 0 0 10px; font-size: 13px; color: #e3e3ee; }
.mcp-c-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 9px 10px; border: 1px solid var(--mcp-line); border-radius: 9px;
  margin-bottom: 6px; background: #12121C; opacity: 0; transform: translateX(-8px); transition: all .45s ease; transition-delay: calc(var(--i) * 160ms + 200ms); }
.mcp-c-row span { font-family: ui-monospace, Menlo, monospace; color: #9a9ab0; } .mcp-c-row b { font-weight: 500; color: #e3e3ee; text-align: right; }
.mcp-confirm.in .mcp-c-row { opacity: 1; transform: none; }
.mcp-c-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12px; color: #a3a3b8; }
.mcp-c-foot em { font-style: normal; font-weight: 700; padding: 7px 11px; border-radius: 8px; margin-left: 6px; font-size: 12px; }
.mcp-no { border: 1px solid var(--mcp-line); color: #a3a3b8; }
.mcp-yes { background: var(--mcp-acc); color: #1a0f05; }
.mcp-confirm.in .mcp-yes { animation: mcp-press .5s ease 1.4s both; }
.mcp-c-done { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #3DD6C4; opacity: 0; }
.mcp-c-done i { width: 8px; height: 8px; border-radius: 50%; background: #3DD6C4; box-shadow: 0 0 12px #3DD6C4; }
.mcp-confirm.in .mcp-c-done { animation: mcp-in .5s ease 2.1s both; }

/* ── mobiel ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .mcp-connect { grid-template-columns: minmax(0,1fr); }
  .mcp-card-top { flex-wrap: wrap; }
  .mcp-beam { height: 48px; transform: rotate(90deg); width: 60px; margin: 0 auto; }
  .mcp-steps { grid-template-columns: 1fr; }
  .mcp-orbit { max-width: 300px; }
  .mcp-core { width: 84px; height: 84px; font-size: 14px; }
  .mcp-lane span { font-size: 10px; padding: 3px 7px; }
}

/* ── minder beweging: meteen de eindstand ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mcp-stars, .mcp-core, .mcp-lane, .mcp-lane span, .mcp-beam-path, .mcp-caret { animation: none !important; }
  .mcp-card, .mcp-step, .mcp-c-row, .mcp-ai, .mcp-tool, .mcp-connected, .mcp-c-done, .mcp-sugg { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .mcp-orbit .mcp-lane { opacity: 1 !important; transition: none !important; }
  .mcp-paste { clip-path: none !important; animation: none !important; }
  .mcp-chip-fly, .mcp-toast, .mcp-ring { display: none; }
  .mcp-bars i { width: calc(var(--w) * 3) !important; transition: none !important; }
}