/* /products/mcp-server and /products/vibe-studio (linked through partials/mcpv-assets.hbs): the animated schematic
   images (style B, partials/mcpv-*.hbs and vibev-*.hbs). Each image is drawn on a fixed stage
   (650x500 in the section image boxes, 700x500 in the hero), scaled to its box by js/mcp-visuals.js (--mcpv-scale),
   and loops through 3 or 4 frames (--T = one loop). */

/* ------------------------------------------------ stage */
.mcpv { display: block; width: 100%; }
.image_content_wrap > .mcpv { position: absolute; inset: 0; }
.mcpv-hero { padding-left: 2rem; }
.mcpv-box { position: relative; width: 100%; aspect-ratio: 650 / 500; }
.mcpv-hero .mcpv-box { aspect-ratio: 700 / 500; }
.mcpv-stage {
  position: absolute; left: 0; top: 0; width: 650px; height: 500px; transform-origin: 0 0; transform: scale(var(--mcpv-scale, 1));
  font-family: "Lexend Deca", sans-serif; color: #fff; line-height: 1.35; text-align: left; letter-spacing: 0;
}
.mcpv-hero .mcpv-stage { width: 700px; }
.mcpv-stage *, .mcpv-stage *::before, .mcpv-stage *::after { box-sizing: border-box; }
.mcpv-stage .abs { position: absolute; }

/* ------------------------------------------------ schematic parts */
.mB-canvas { position: absolute; inset: 0; border-radius: 12px; background: radial-gradient(120% 90% at 50% 0%, #20263d 0%, #171b2a 60%); overflow: hidden; }
.mB-canvas::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 24px 24px; }
.mcpv-hero .mB-canvas { background: none; }
.mB-panel { position: absolute; background: #1c2135; border: 1px solid #2f3755; border-radius: 12px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.mB-title { font-size: 15px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; }
.mB-sub { font-size: 13px; color: #aab1cc; font-weight: 400; }
.mB-text { position: relative; font-size: 15px; color: #fff; background: #2a3150; border-radius: 10px; padding: 10px 12px; }
.mB-swap { position: relative; }
.mB-swap > * { position: absolute; left: 0; right: 0; top: 0; }
.mB-sk { height: 10px; border-radius: 6px; background: #252c47; }
.mB-num { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #f15851; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; box-shadow: 0 0 0 5px rgba(241, 88, 81, .18); }
.mB-head { position: absolute; font-size: 18px; font-weight: 600; color: #fff; }
.mB-chip { font-size: 14px; font-weight: 500; padding: 7px 11px; border-radius: 8px; border: 1px solid #39405f; color: #c9cee3; }
.mB-chip.on { border-color: #11ced7; color: #fff; background: rgba(17, 206, 215, .12); }
.mB-chip.off { color: #6a7190; border-style: dashed; }
.mB-grid .mB-chip { font-size: 13px; padding: 6px 10px; line-height: 1.3; display: flex; align-items: center; }
.mB-ok { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px; color: #b9f5cf; background: rgba(46, 204, 113, .14); border: 1px solid rgba(46, 204, 113, .55); justify-self: start; }
.mB-btn { background: #f15851; color: #fff; border-radius: 999px; padding: 10px 14px; font-weight: 600; font-size: 15px; text-align: center; }
.mB-bar { border-radius: 6px 6px 0 0; background: #11ced7; box-shadow: 0 0 18px rgba(17, 206, 215, .35); }
.mB-bars { display: flex; align-items: flex-end; gap: 14px; height: 250px; }
.mB-bars .mB-bar { flex: 1; }
.mB-axis { display: flex; gap: 14px; font-size: 13px; color: #aab1cc; }
.mB-axis span { flex: 1; text-align: center; }
.mB-big { font-size: 46px; font-weight: 700; color: #11ced7; line-height: 1; }
.mB-badge { position: absolute; background: #f9c440; color: #171b2a; font-weight: 700; font-size: 13px; padding: 6px 10px; border-radius: 8px; }
.mB-lane { display: flex; align-items: center; gap: 10px; }
.mB-lane .mB-title { width: 104px; flex: none; }
.mB-lane > div:last-child { display: flex; gap: 8px; }
.mB-log { font-size: 13px; color: #c9cee3; background: #141826; border: 1px solid #2f3755; border-radius: 8px; padding: 8px 10px; height: 36px; }
.mB-rule { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #e3e6f2; background: #232943; border: 1px solid #39405f; border-radius: 10px; padding: 9px 11px; }
.mB-rule b { flex: none; width: 20px; height: 20px; border-radius: 6px; background: rgba(17, 206, 215, .18); color: #11ced7; display: grid; place-items: center; font-size: 12px; }
.mB-svg { position: absolute; inset: 0; overflow: visible; }
.mB-strike { text-decoration: line-through; color: #8d93b0; }

/* ------------------------------------------------ animation
   s3, s4: a frame layer shown during its third or quarter of the loop. h3, h4: highlighted in its part, dimmed
   otherwise. g4, g2a, g2b: glows in its part. r3-N, r4-N: appears at frame N and stays until the loop restarts.
   k0 to k3 = which part; the negative delays put every element in its phase from the first frame.
   Never write a star followed by a slash inside these comments: it ends the comment and the next rule is lost. */
@keyframes mcpv-show3 { 0% { opacity: 0 } 3% { opacity: 1 } 30% { opacity: 1 } 33.3% { opacity: 0 } 100% { opacity: 0 } }
@keyframes mcpv-show4 { 0% { opacity: 0 } 3% { opacity: 1 } 22% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } }
@keyframes mcpv-hl3 { 0% { opacity: .4 } 3% { opacity: 1; border-color: #11ced7 } 30% { opacity: 1; border-color: #11ced7 } 33.3% { opacity: .4 } 100% { opacity: .4 } }
@keyframes mcpv-hl4 { 0% { opacity: .4 } 3% { opacity: 1; border-color: #11ced7 } 22% { opacity: 1; border-color: #11ced7 } 25% { opacity: .4 } 100% { opacity: .4 } }
@keyframes mcpv-glow4 { 0%, 25%, 100% { box-shadow: none } 3%, 22% { box-shadow: 0 0 0 2px #11ced7, 0 0 18px rgba(17, 206, 215, .55); color: #fff } }
@keyframes mcpv-glow2 { 0%, 50%, 100% { box-shadow: none } 4%, 46% { box-shadow: 0 0 0 2px #11ced7, 0 0 18px rgba(17, 206, 215, .55); color: #fff } }
@keyframes mcpv-from1of3 { 0%, 32% { opacity: 0; transform: translateY(6px) } 36%, 96% { opacity: 1; transform: none } 100% { opacity: 0 } }
@keyframes mcpv-from2of3 { 0%, 65% { opacity: 0; transform: translateY(6px) } 69%, 96% { opacity: 1; transform: none } 100% { opacity: 0 } }
@keyframes mcpv-from1of4 { 0%, 24% { opacity: 0; transform: translateY(6px) } 28%, 96% { opacity: 1; transform: none } 100% { opacity: 0 } }
@keyframes mcpv-from2of4 { 0%, 49% { opacity: 0; transform: translateY(6px) } 53%, 96% { opacity: 1; transform: none } 100% { opacity: 0 } }
@keyframes mcpv-from3of4 { 0%, 74% { opacity: 0; transform: translateY(6px) } 78%, 96% { opacity: 1; transform: none } 100% { opacity: 0 } }

.mcpv-stage .s3 { animation: mcpv-show3 var(--T) infinite both; }
.mcpv-stage .s4 { animation: mcpv-show4 var(--T) infinite both; }
.mcpv-stage .h3 { animation: mcpv-hl3 var(--T) infinite both; }
.mcpv-stage .h4 { animation: mcpv-hl4 var(--T) infinite both; }
.mcpv-stage .g4 { animation: mcpv-glow4 var(--T) infinite both; }
.mcpv-stage .g2a, .mcpv-stage .g2b { animation: mcpv-glow2 calc(var(--T) / 2) infinite both; }
.mcpv-stage .g2b { animation-delay: calc(var(--T) / -4); }
.mcpv-stage .r3-1 { animation: mcpv-from1of3 var(--T) infinite both; }
.mcpv-stage .r3-2 { animation: mcpv-from2of3 var(--T) infinite both; }
.mcpv-stage .r4-1 { animation: mcpv-from1of4 var(--T) infinite both; }
.mcpv-stage .r4-2 { animation: mcpv-from2of4 var(--T) infinite both; }
.mcpv-stage .r4-3 { animation: mcpv-from3of4 var(--T) infinite both; }
.mcpv-stage .s3.k1, .mcpv-stage .h3.k1 { animation-delay: calc(var(--T) * -2 / 3); }
.mcpv-stage .s3.k2, .mcpv-stage .h3.k2 { animation-delay: calc(var(--T) * -1 / 3); }
.mcpv-stage .s4.k1, .mcpv-stage .h4.k1, .mcpv-stage .g4.k1 { animation-delay: calc(var(--T) * -3 / 4); }
.mcpv-stage .s4.k2, .mcpv-stage .h4.k2, .mcpv-stage .g4.k2 { animation-delay: calc(var(--T) * -2 / 4); }
.mcpv-stage .s4.k3, .mcpv-stage .h4.k3, .mcpv-stage .g4.k3 { animation-delay: calc(var(--T) * -1 / 4); }

/* No motion requested: a still picture (first frame shown, highlights plain, every build step visible). */
@media (prefers-reduced-motion: reduce) {
  .mcpv-stage * { animation: none !important; }
  .mcpv-stage .s3:not(.k0), .mcpv-stage .s4:not(.k0) { opacity: 0; }
}