/**
 * "Как внедрить" — sticky stack-scroll section (EQ-1774).
 * Loaded only on pages using template-kak-vnedrit.php (see functions.php).
 * Depends on tokens from rosary-tokens.css (--color-*, --font-*, --border-divider).
 */

.ros-stack {
	position: relative;
}

.ros-stack-panel {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: var( --color-deep-space );
	border-top: 1px solid var( --border-divider );
}

.ros-stack-panel__inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

.ros-stack-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var( --font-body );
	font-feature-settings: 'ss01' on;
	font-size: 13px;
	font-weight: 530;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: var( --color-ghost-blue );
	margin: 0 0 18px;
	transition: color 0.25s ease;
}

.ros-stack-kicker__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 999px;
	background: var( --accent-soft, rgba( 82, 102, 235, 0.22 ) );
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

.ros-stack-panel h3 {
	font-family: var( --font-display );
	font-feature-settings: 'ss01' on;
	font-size: 32px;
	line-height: 1.22;
	font-weight: 400;
	color: var( --color-starlight );
	margin: 0 0 16px;
	max-width: 460px;
}

.ros-stack-panel p {
	font-family: var( --font-body );
	font-size: 17px;
	line-height: 1.6;
	color: var( --color-silver );
	margin: 0;
	max-width: 460px;
}

.ros-stack-visual {
	display: flex;
	justify-content: center;
	align-items: center;
}

.ros-stack-lottie {
	width: 320px;
	height: 320px;
	max-width: 100%;
}

.ros-stack-panel.is-active .ros-stack-kicker {
	color: var( --color-mercury-blue );
}

/* Progress rail: small fixed dot indicator down the right edge, one per panel. */
.ros-stack-rail {
	position: fixed;
	right: 28px;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	flex-direction: column;
	gap: 14px;
	z-index: 50;
	pointer-events: none;
}

.ros-stack-rail__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var( --color-lead );
	opacity: 0.5;
	transition: background 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.ros-stack-rail__dot.is-active {
	background: var( --color-mercury-blue );
	opacity: 1;
	transform: scale( 1.35 );
}

@media ( max-width: 860px ) {
	.ros-stack-panel {
		position: relative;
		top: auto;
		min-height: auto;
		padding: 0;
	}

	.ros-stack-panel__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 48px 24px;
	}

	.ros-stack-visual {
		order: -1;
	}

	.ros-stack-lottie,
	.ros-stack-mock {
		width: 220px;
		height: 220px;
	}

	.ros-stack-rail {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Stylised macOS/Safari-style interface mockups — EQ-1777.
 * Static self-authored SVG (real window chrome + concrete text blocks)
 * animated purely with CSS. Animations run only while the panel is active
 * (play/pause), and respect reduced-motion.
 * ------------------------------------------------------------------ */
.ros-stack-mock {
	width: 340px;
	height: 340px;
	max-width: 100%;
}

.ros-mock-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ros-mock-svg text {
	font-family: var( --font-body, -apple-system, "Segoe UI", sans-serif );
	font-feature-settings: 'ss01' on;
}

/* window chrome */
.ros-mock-svg .win {
	fill: #15151d;
	stroke: #2f2f3e;
	stroke-width: 1.5;
}
.ros-mock-svg .titlebar { fill: #1c1c26; }
.ros-mock-svg .divider,
.ros-mock-svg .divider2 { stroke: #2a2a38; stroke-width: 1; }
.ros-mock-svg .tl.r { fill: #ff5f57; }
.ros-mock-svg .tl.y { fill: #febc2e; }
.ros-mock-svg .tl.g { fill: #28c840; }
.ros-mock-svg .win-title { font-size: 12px; font-weight: 500; fill: #8a8a97; }

/* shared text */
.ros-mock-svg .m-strong { font-size: 12px; font-weight: 500; fill: #e6e6ee; }
.ros-mock-svg .m-dim { font-size: 10.5px; fill: #7c7c8a; }

/* surfaces */
.ros-mock-svg .inputbar,
.ros-mock-svg .mem-track,
.ros-mock-svg .filecard,
.ros-mock-svg .pcol,
.ros-mock-svg .chipcard,
.ros-mock-svg .r-row,
.ros-mock-svg .node,
.ros-mock-svg .tilecard,
.ros-mock-svg .role-row,
.ros-mock-svg .appr-card {
	fill: #1b1b25;
}
.ros-mock-svg .filecard,
.ros-mock-svg .chipcard,
.ros-mock-svg .inputbar,
.ros-mock-svg .node,
.ros-mock-svg .tilecard,
.ros-mock-svg .appr-card,
.ros-mock-svg .btn-outline {
	stroke: #2f2f3e;
	stroke-width: 1.25;
}

/* accents */
.ros-mock-svg .bubble.bot,
.ros-mock-svg .send,
.ros-mock-svg .mem-fill,
.ros-mock-svg .mem-ico,
.ros-mock-svg .toggle.on,
.ros-mock-svg .btn-primary,
.ros-mock-svg .appr-glyph,
.ros-mock-svg .file-glyph.a,
.ros-mock-svg .chip-ic.a,
.ros-mock-svg .tile-ic.a,
.ros-mock-svg .node-ic,
.ros-mock-svg .role-yes {
	fill: var( --color-mercury-blue, #5266eb );
}
.ros-mock-svg .bubble.user,
.ros-mock-svg .typing,
.ros-mock-svg .file-glyph.b,
.ros-mock-svg .chip-ic.b,
.ros-mock-svg .tile-ic.b {
	fill: var( --color-ghost-blue, #cdddff );
}
.ros-mock-svg .chip-ic.c,
.ros-mock-svg .tile-ic.c { fill: #7a7a88; }

/* chat */
.ros-mock-svg .bubble.bot.small { fill: #23233a; }
.ros-mock-svg .bubble-txt { font-size: 11.5px; }
.ros-mock-svg .bubble-txt.on-user { fill: #14141c; font-weight: 500; }
.ros-mock-svg .bubble-txt.on-bot { fill: #eef1ff; font-weight: 500; }
.ros-mock-svg .bubble-txt.on-bot.dim { fill: #c3ccf3; font-weight: 400; font-size: 10.5px; }
.ros-mock-svg .input-ph { font-size: 11px; fill: #6a6a78; }
.ros-mock-svg .send-ic { fill: #ffffff; }

/* memory */
.ros-mock-svg .mem-track { fill: #23232f; }
.ros-mock-svg .file-glyph { rx: 3; }

/* projects */
.ros-mock-svg .pcol { fill: #17171f; }
.ros-mock-svg .pcol-h { font-size: 10.5px; font-weight: 500; fill: #9a9aa8; }
.ros-mock-svg .chip-txt { font-size: 10px; fill: #cfcfda; }

/* routines */
.ros-mock-svg .r-clock { fill: none; stroke: #6a6a78; stroke-width: 1.5; }
.ros-mock-svg .r-clockh,
.ros-mock-svg .r-clockm { stroke: #cdddff; stroke-width: 1.5; stroke-linecap: round; }
.ros-mock-svg .toggle { fill: #2c2c3c; }
.ros-mock-svg .knob { fill: #ffffff; }
.ros-mock-svg .r-hl {
	fill: none;
	stroke: var( --color-mercury-blue, #5266eb );
	stroke-width: 1.5;
	opacity: 0;
}

/* process */
.ros-mock-svg .node-txt { font-size: 10.5px; font-weight: 500; fill: #d5d5e0; }
.ros-mock-svg .node-txt.small { font-size: 10px; fill: #b9b9c6; }
.ros-mock-svg .node.result { fill: #17171f; stroke: var( --color-mercury-blue, #5266eb ); }
.ros-mock-svg .flow-line { stroke: #3a3a4d; stroke-width: 2; }
.ros-mock-svg .flow-arrow { fill: #3a3a4d; }
.ros-mock-svg .flow-pulse { fill: var( --color-mercury-blue, #5266eb ); }

/* integrations */
.ros-mock-svg .intg-check { fill: #28c840; opacity: 0; }
.ros-mock-svg .intg-tick { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }

/* roles */
.ros-mock-svg .col-h { font-size: 10px; font-weight: 500; fill: #8a8a97; }
.ros-mock-svg .role-row { fill: #17171f; }
.ros-mock-svg .role-tick { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ros-mock-svg .role-no { stroke: #4c4c5a; stroke-width: 2; stroke-linecap: round; }

/* approval */
.ros-mock-svg .status-pill { fill: #2e2717; }
.ros-mock-svg .status-dot { fill: #febc2e; }
.ros-mock-svg .status-txt { font-size: 10px; fill: #e0c583; }
.ros-mock-svg .btn-outline { fill: none; }
.ros-mock-svg .btn-txt-o { font-size: 11px; font-weight: 500; fill: #c3c3cc; }
.ros-mock-svg .btn-txt-p { font-size: 11px; font-weight: 500; fill: #ffffff; }
.ros-mock-svg .appr-check { fill: none; stroke: #ffffff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }

/* ---- play/pause: all mock animations run only while the panel is active ---- */
.ros-mock-svg * { animation-play-state: paused; }
.ros-stack-panel.is-active .ros-mock-svg * { animation-play-state: running; }

/* chat */
.ros-mock-svg .typing {
	transform-box: fill-box;
	transform-origin: center;
	animation: rosBounce 1.3s ease-in-out infinite;
}
.ros-mock-svg .t2 { animation-delay: 0.18s; }
.ros-mock-svg .t3 { animation-delay: 0.36s; }
.ros-mock-svg .send {
	transform-box: fill-box;
	transform-origin: center;
	animation: rosPop 2.6s ease-in-out infinite;
}

@keyframes rosBounce {
	0%, 70%, 100% { transform: translateY( 0 ); }
	35% { transform: translateY( -7px ); }
}
@keyframes rosPop {
	0%, 100% { transform: scale( 0.9 ); }
	50% { transform: scale( 1.1 ); }
}

/* memory */
.ros-mock-svg .mem-fill {
	transform-box: fill-box;
	transform-origin: left center;
	animation: rosFill 3.4s ease-in-out infinite;
}
.ros-mock-svg .file {
	transform-box: fill-box;
	animation: rosFileIn 3.6s ease-in-out infinite;
}
.ros-mock-svg .f2 { animation-delay: 0.5s; }
.ros-mock-svg .f3 { animation-delay: 1s; }

@keyframes rosFill {
	0% { transform: scaleX( 0.12 ); }
	55%, 80% { transform: scaleX( 1 ); }
	100% { transform: scaleX( 0.12 ); }
}
@keyframes rosFileIn {
	0% { opacity: 0; transform: translateY( 14px ); }
	16%, 90% { opacity: 1; transform: translateY( 0 ); }
	100% { opacity: 0; transform: translateY( 0 ); }
}

/* projects */
.ros-mock-svg .chip {
	transform-box: fill-box;
	animation: rosChipIn 3.8s ease-in-out infinite;
}
.ros-mock-svg .c2 { animation-delay: 0.3s; }
.ros-mock-svg .c3 { animation-delay: 0.6s; }
.ros-mock-svg .c4 { animation-delay: 0.9s; }
.ros-mock-svg .c5 { animation-delay: 1.2s; }
.ros-mock-svg .c6 { animation-delay: 1.5s; }

@keyframes rosChipIn {
	0% { opacity: 0; transform: translateY( -18px ); }
	14%, 90% { opacity: 1; transform: translateY( 0 ); }
	100% { opacity: 0; transform: translateY( 0 ); }
}

/* routines — travelling "run" highlight down the schedule rows */
.ros-mock-svg .r-hl { animation: rosPulse 2.7s ease-in-out infinite; }
.ros-mock-svg .h2 { animation-delay: 0.9s; }
.ros-mock-svg .h3 { animation-delay: 1.8s; }

@keyframes rosPulse {
	0%, 100% { opacity: 0; }
	45%, 55% { opacity: 0.9; }
}

/* process — pulse travels along the flow */
.ros-mock-svg .flow-pulse {
	transform-box: fill-box;
	animation: rosFlow 3.4s ease-in-out infinite;
}
@keyframes rosFlow {
	0% { opacity: 0; transform: translateX( 0 ); }
	12% { opacity: 1; }
	50% { transform: translateX( 88px ); }
	88% { opacity: 1; }
	100% { opacity: 0; transform: translateX( 176px ); }
}

/* integrations — connection checks pop in one by one */
.ros-mock-svg .intg-check,
.ros-mock-svg .intg-tick {
	transform-box: fill-box;
	transform-origin: center;
	animation: rosReveal 4s ease-in-out infinite;
}
.ros-mock-svg .intg-check.c2, .ros-mock-svg .intg-tick.c2 { animation-delay: 0.35s; }
.ros-mock-svg .intg-check.c3, .ros-mock-svg .intg-tick.c3 { animation-delay: 0.7s; }
.ros-mock-svg .intg-check.c4, .ros-mock-svg .intg-tick.c4 { animation-delay: 1.05s; }
.ros-mock-svg .intg-check.c5, .ros-mock-svg .intg-tick.c5 { animation-delay: 1.4s; }
.ros-mock-svg .intg-check.c6, .ros-mock-svg .intg-tick.c6 { animation-delay: 1.75s; }

@keyframes rosReveal {
	0% { opacity: 0; transform: scale( 0.3 ); }
	16% { opacity: 1; transform: scale( 1 ); }
	92% { opacity: 1; transform: scale( 1 ); }
	100% { opacity: 0; transform: scale( 1 ); }
}

/* approval — accept button pulses, check draws in */
.ros-mock-svg .appr-btn {
	transform-box: fill-box;
	transform-origin: center;
	animation: rosBtn 2.8s ease-in-out infinite;
}
.ros-mock-svg .appr-check {
	transform-box: fill-box;
	transform-origin: center;
	animation: rosReveal 2.8s ease-in-out infinite;
}
@keyframes rosBtn {
	0%, 100% { transform: scale( 1 ); filter: none; }
	50% { transform: scale( 1.04 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.ros-mock-svg * { animation: none !important; opacity: 1; }
	.ros-mock-svg .intg-check,
	.ros-mock-svg .intg-tick,
	.ros-mock-svg .appr-check,
	.ros-mock-svg .r-hl { opacity: 1; }
}

/* Mobile size for the mockups — placed after the base rule so it wins on
 * small screens. */
@media ( max-width: 860px ) {
	.ros-stack-mock {
		width: 300px;
		height: 300px;
	}
}