/* RO Scroll Sequence */

.rss {
	--rss-line: #222;
	--rss-line-w: 1px;
	--rss-line-len: 200px;
	--rss-dot: #c8102e;
	--rss-dot-size: 16px;

	position: relative;
	width: 100%;
	height: 400vh; /* презаписва се от контрола „Дължина на скрола" */
}

/* Залепена сцена. ВАЖНО: никой родителски контейнер не трябва да има overflow:hidden. */
.rss__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rss__canvas-wrap {
	position: relative;
	width: 60%;
	height: 100%;
	flex: 0 0 auto;
}

.rss__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- Надписи ---------- */

.rss__callouts {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.rss__callout {
	position: absolute;
	top: var(--rss-y, 50%);
	display: flex;
	flex-direction: column;
	max-width: 220px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}

.rss__callout--left {
	left: 3%;
	align-items: flex-start;
	text-align: left;
	transform: translateX(-18px);
}

.rss__callout--right {
	right: 3%;
	align-items: flex-end;
	text-align: right;
	transform: translateX(18px);
}

.rss__callout.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.rss__text {
	font-size: 14px;
	line-height: 1.5;
	color: #6b6b6b;
}

/* Линия с маркер: при „left" маркерът е вдясно (към кадъра), при „right" – вляво */
.rss__line {
	display: flex;
	align-items: center;
	width: var(--rss-line-len);
	margin-top: 14px;
}

.rss__line::before {
	content: "";
	flex: 1 1 auto;
	height: var(--rss-line-w);
	background: var(--rss-line);
}

.rss__callout--right .rss__line {
	flex-direction: row-reverse;
}

.rss__dot {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--rss-dot-size);
	height: var(--rss-dot-size);
	border: 2px solid var(--rss-dot);
	border-radius: 50%;
	background: transparent;
}

/* ---------- Лента за зареждане ---------- */

.rss__progress {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	width: 100%;
	height: 2px;
	background: var(--rss-dot);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s ease, opacity .5s ease .2s;
	pointer-events: none;
}

.rss__progress.is-done {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.rss__callout {
		transition-duration: 0s;
		transition-delay: 0s;
	}
}