/* ============================================================================
   EUX Blocks — Capability Mockup
   ----------------------------------------------------------------------------
   Frame: cream-tinted background, 220px tall, rounded corners. Contents
   vary by preset: hub (SVG node graph), api (endpoint rows), auto (BPMN
   diagram), plugin (install rows).

   All animations run only when the mockup is in view (.eux-is-in-view added
   by frontend.js) — saves CPU when scrolled away.
   ============================================================================ */

/* ==========================================================================
   Common frame
   ========================================================================== */
.eux-block--cap-mockup.eux-cap-mock {
	position: relative;
	height: 220px;
	background: var(--eux-cream);
	border: 1px solid var(--eux-ink-100);
	border-radius: var(--eux-r-md);
	overflow: hidden;
	margin: 0;
}

/* Pause animations when the parent card is off-screen.
   --------------------------------------------------------------------------
   The frontend script adds `.eux-is-in-view` to elements with `.eux-reveal`,
   which lives on the parent capability-card — not on the mockup itself
   (the mockup is always nested inside a card; double-reveal would compose
   two translateY transforms). So we check the parent for the in-view
   state, not the mockup.

   (Same selector pattern fix as v0.6.6 applied to example-card.) */
.eux-block--cap-card:not(.eux-is-in-view) .eux-block--cap-mockup * {
	animation-play-state: paused;
}

/* ==========================================================================
   Preset: hub — Woo center node + ERP/POS/CRM/3PL satellites
   ========================================================================== */
.eux-block .eux-mk-hub {
	position: absolute;
	inset: 0;
}
.eux-block .eux-mk-hub svg {
	width: 100%;
	height: 100%;
	display: block;
}
.eux-block .eux-mk-hub__node {
	font-family: var(--eux-font-display);
	font-size: 11px;
	font-weight: 600;
	fill: var(--eux-ink-800);
}
.eux-block .eux-mk-hub__node--center { fill: var(--eux-white); }
.eux-block .eux-mk-hub__circle {
	fill: var(--eux-white);
	stroke: var(--eux-ink-200);
	stroke-width: 1;
}
.eux-block .eux-mk-hub__circle--center {
	fill: var(--eux-woo-purple);
	stroke: var(--eux-woo-purple);
}
.eux-block .eux-mk-hub__pipe {
	stroke: var(--eux-ink-200);
	stroke-width: 1;
	fill: none;
	stroke-dasharray: 3 3;
}
.eux-block .eux-mk-hub__packet {
	fill: var(--eux-woo-purple);
	offset-rotate: 0deg;
	animation: eux-pktMove 3s linear infinite;
}
.eux-block .eux-mk-hub__packet--rev { animation: eux-pktMoveRev 3s linear infinite; }
@keyframes eux-pktMove    { from { offset-distance: 0%;   } to { offset-distance: 100%; } }
@keyframes eux-pktMoveRev { from { offset-distance: 100%; } to { offset-distance: 0%;   } }

/* ==========================================================================
   Preset: api — REST endpoint rows
   --------------------------------------------------------------------------
   Container is centered with justify-content: center and rows should keep
   their natural content height. We set `flex: 0 0 auto` explicitly because
   Salient (and some other classic themes) apply blanket flex rules to
   children of flex containers — without this, rows stretch to fill and
   touch the top/bottom edges of the frame.
   ========================================================================== */
.eux-block .eux-mk-api {
	position: absolute;
	inset: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	min-height: 0;
}
.eux-block .eux-mk-api .eux-mk-api__row {
	flex: 0 0 auto;
	height: auto;
	min-height: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 6px;
	font-family: var(--eux-font-mono);
	font-size: 10px;
	line-height: 1.4;
	color: var(--eux-ink-700);
	animation: eux-apiRowSync 10s linear infinite;
}
.eux-block .eux-mk-api__row:nth-child(1) { animation-delay: 0s; }
.eux-block .eux-mk-api__row:nth-child(2) { animation-delay: -2.5s; }
.eux-block .eux-mk-api__row:nth-child(3) { animation-delay: -5s; }
.eux-block .eux-mk-api__row:nth-child(4) { animation-delay: -7.5s; }
@keyframes eux-apiRowSync {
	0%, 35%   { border-color: var(--eux-woo-200); box-shadow: 0 0 0 1px var(--eux-woo-100) inset; }
	36%, 95%  { border-color: var(--eux-ink-100); box-shadow: none; }
	96%, 100% { border-color: var(--eux-woo-200); box-shadow: 0 0 0 1px var(--eux-woo-100) inset; }
}

.eux-block .eux-mk-api__method {
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 9px;
}
.eux-block .eux-mk-api__method.eux-get  { background: var(--eux-woo-50); color: var(--eux-woo-purple); }
.eux-block .eux-mk-api__method.eux-post { background: #E8F4EE; color: #1F8A5B; }
.eux-block .eux-mk-api__method.eux-put  { background: #FFF3E0; color: #B8770A; }

.eux-block .eux-mk-api__ep {
	flex: 1;
	color: var(--eux-ink-800);
}
.eux-block .eux-mk-api__pill {
	font-family: var(--eux-font-display);
	font-size: 9px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 99px;
	background: var(--eux-cream-50);
	color: var(--eux-ink-600);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.eux-block .eux-mk-api__status {
	position: relative;
	width: 14px; height: 14px;
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
}
.eux-block .eux-mk-api__status .eux-spin,
.eux-block .eux-mk-api__status .eux-tick {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}
.eux-block .eux-mk-api__status .eux-spin {
	width: 12px; height: 12px;
	border-radius: 50%;
	border: 1.5px solid var(--eux-ink-100);
	border-top-color: var(--eux-woo-purple);
	animation: eux-apiSpin 0.9s linear infinite, eux-apiStatusSpin 10s linear infinite;
}
.eux-block .eux-mk-api__status .eux-tick {
	color: #1F8A5B;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	opacity: 0;
	animation: eux-apiStatusTick 10s linear infinite;
}
.eux-block .eux-mk-api__row:nth-child(1) .eux-mk-api__status .eux-spin { animation-delay: 0s, 0s; }
.eux-block .eux-mk-api__row:nth-child(1) .eux-mk-api__status .eux-tick { animation-delay: 0s; }
.eux-block .eux-mk-api__row:nth-child(2) .eux-mk-api__status .eux-spin { animation-delay: -0.3s, -2.5s; }
.eux-block .eux-mk-api__row:nth-child(2) .eux-mk-api__status .eux-tick { animation-delay: -2.5s; }
.eux-block .eux-mk-api__row:nth-child(3) .eux-mk-api__status .eux-spin { animation-delay: -0.6s, -5s; }
.eux-block .eux-mk-api__row:nth-child(3) .eux-mk-api__status .eux-tick { animation-delay: -5s; }
.eux-block .eux-mk-api__row:nth-child(4) .eux-mk-api__status .eux-spin { animation-delay: -0.1s, -7.5s; }
.eux-block .eux-mk-api__row:nth-child(4) .eux-mk-api__status .eux-tick { animation-delay: -7.5s; }

@keyframes eux-apiSpin { to { transform: rotate(360deg); } }
@keyframes eux-apiStatusSpin {
	0%, 35%  { opacity: 1; }
	36%, 95% { opacity: 0; }
	96%, 100% { opacity: 1; }
}
@keyframes eux-apiStatusTick {
	0%, 35%   { opacity: 0; transform: scale(0.6); }
	40%, 95%  { opacity: 1; transform: scale(1); }
	100%      { opacity: 0; transform: scale(0.6); }
}

/* ==========================================================================
   Preset: auto — BPMN-style workflow diagram
   ========================================================================== */
.eux-block .eux-mk-bpmn {
	position: absolute;
	inset: 6px;
}
.eux-block .eux-mk-bpmn > svg {
	width: 100%;
	height: 100%;
	display: block;
}
.eux-block .eux-mk-bpmn__grid { fill: var(--eux-ink-100); }
.eux-block .eux-mk-bpmn__line path {
	fill: none;
	stroke: var(--eux-ink-300);
	stroke-width: 1;
	stroke-dasharray: 4 4;
	animation: eux-bpmnFlow 0.9s linear infinite;
}
.eux-block .eux-mk-bpmn__arrhead { fill: var(--eux-ink-400); }
@keyframes eux-bpmnFlow { to { stroke-dashoffset: -8; } }

.eux-block .eux-mk-bpmn__start-bg     { fill: #DDF4E5; stroke: #2BA66B; stroke-width: 1.5; }
.eux-block .eux-mk-bpmn__spinner-track { stroke: rgba(43,166,107,0.25); }
.eux-block .eux-mk-bpmn__spinner-arc   { stroke: #2BA66B; }
.eux-block .eux-mk-bpmn__spinner {
	transform-origin: 0 0;
	animation: eux-bpmnSpin 1.1s linear infinite;
}
@keyframes eux-bpmnSpin { to { transform: rotate(360deg); } }

.eux-block .eux-mk-bpmn__end-red {
	fill: rgba(197,140,251,0.18);
	stroke: var(--eux-woo-200);
	stroke-width: 2;
	animation: eux-bpmnEndRed 5s linear infinite;
}
.eux-block .eux-mk-bpmn__end-checkBg   { fill: #DDF4E5; stroke: #2BA66B; stroke-width: 2; }
.eux-block .eux-mk-bpmn__end-checkMark { stroke: #2BA66B; }
.eux-block .eux-mk-bpmn__end-check {
	opacity: 0;
	animation: eux-bpmnEndCheck 5s linear infinite;
}
@keyframes eux-bpmnEndRed   { 0%, 82% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes eux-bpmnEndCheck { 0%, 82% { opacity: 0; } 84%, 100% { opacity: 1; } }

.eux-block .eux-mk-bpmn__gw { fill: #FFF3CC; stroke: #C99A19; stroke-width: 1.25; }

.eux-block .eux-mk-bpmn__task rect:first-child {
	fill: var(--eux-white);
	stroke: var(--eux-ink-300);
	stroke-width: 1;
	filter: drop-shadow(0 1px 0 rgba(15, 15, 18, 0.04));
	animation: eux-bpmnActive 5s linear infinite;
	animation-delay: var(--eux-ad, 0s);
}
@keyframes eux-bpmnActive {
	0%, 18%, 100% { stroke: var(--eux-ink-300); stroke-width: 1; }
	3%, 15%       { stroke: var(--eux-woo-purple); stroke-width: 2; }
}
.eux-block .eux-mk-bpmn__task text {
	font-family: var(--eux-font-display);
	font-size: 10px;
	font-weight: 500;
	fill: var(--eux-ink-800);
}
.eux-block .eux-mk-bpmn__task--msg .eux-mk-bpmn__badge     { fill: var(--eux-white); stroke: var(--eux-ink-500); stroke-width: 0.6; }
.eux-block .eux-mk-bpmn__task--msg .eux-mk-bpmn__badgeFold { fill: none;            stroke: var(--eux-ink-500); stroke-width: 0.6; }

/* ==========================================================================
   Preset: plugin — install list with toggle and progress
   ========================================================================== */
.eux-block .eux-mk-plugin {
	position: absolute;
	inset: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: var(--eux-font-display);
}
.eux-block .eux-mk-plugin__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 8px;
	box-shadow: 0 1px 0 rgba(15, 15, 18, 0.03);
	flex: 1 1 0;
	min-height: 0;
}
.eux-block .eux-mk-plugin__icon {
	width: 30px; height: 30px;
	border-radius: 7px;
	background: var(--eux-woo-purple);
	color: white;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.eux-block .eux-mk-plugin__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.eux-block .eux-mk-plugin__name {
	font-weight: 600;
	color: var(--eux-ink-900);
	font-size: 12px;
	display: flex;
	align-items: baseline;
	gap: 6px;
	line-height: 1.1;
}
.eux-block .eux-mk-plugin__name span {
	font-weight: 400;
	color: var(--eux-ink-500);
	font-size: 10px;
	font-family: var(--eux-font-mono);
}
.eux-block .eux-mk-plugin__desc {
	font-size: 10.5px;
	color: var(--eux-ink-600);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}
.eux-block .eux-mk-plugin__toggle {
	width: 26px; height: 14px;
	border-radius: 7px;
	background: var(--eux-ink-200);
	position: relative;
	flex: 0 0 auto;
}
.eux-block .eux-mk-plugin__toggle::after {
	content: "";
	position: absolute;
	top: 1px; left: 1px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: white;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
	transition: left 0.3s ease;
}
.eux-block .eux-mk-plugin__toggle.eux-is-on        { background: var(--eux-woo-purple); }
.eux-block .eux-mk-plugin__toggle.eux-is-on::after { left: 13px; }
.eux-block .eux-mk-plugin__progress {
	width: 56px; height: 4px;
	border-radius: 2px;
	background: var(--eux-ink-100);
	overflow: hidden;
	flex: 0 0 auto;
}
.eux-block .eux-mk-plugin__progress span {
	display: block;
	height: 100%;
	background: var(--eux-woo-purple);
	border-radius: 2px;
	animation: eux-pluginProgress 2.6s ease-in-out infinite;
}
@keyframes eux-pluginProgress {
	0%        { width: 0%; }
	55%       { width: 100%; }
	80%, 100% { width: 100%; opacity: 0.6; }
}

/* ==========================================================================
   Editor placeholder
   --------------------------------------------------------------------------
   In Gutenberg we don't render the full mockup — animations are heavy and
   distract from editing. A simple labelled card is enough for editors to
   confirm the block is there and which preset is active.
   ========================================================================== */
.editor-styles-wrapper .eux-block--cap-mockup-editor {
	position: relative;
	min-height: 180px;
	background: var(--eux-cream-50);
	border: 1px dashed var(--eux-ink-200);
	border-radius: var(--eux-r-md);
	display: grid;
	place-items: center;
	padding: 24px;
	text-align: center;
}
.editor-styles-wrapper .eux-block--cap-mockup-editor__icon {
	color: var(--eux-ink-400);
	margin-bottom: 8px;
}
.editor-styles-wrapper .eux-block--cap-mockup-editor__label {
	font-family: var(--eux-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eux-ink-500);
	margin-bottom: 6px;
}
.editor-styles-wrapper .eux-block--cap-mockup-editor__preset {
	font-family: var(--eux-font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--eux-ink-800);
}