/* =========================================================
   Reflecta Bubliny – animace
   Souradnicovy prostor sceny: 487 x 370 px (skaluje se cely)
   ========================================================= */

.rb-wrap {
	width: 100%;            /* sirka = 100 % rodicovskeho divu */
	margin: 0;
/*    background-color: #ffffff; */
}

.rb-scale {
	position: relative;
	width: 100%;
	overflow: visible;      /* aby se neorezaly bubliny u hran */
}

.rb-stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 487px;
	height: 370px;
	transform-origin: top left;   /* JS dosadi scale() podle sirky rodice */
	overflow: visible;

	/* ===== CASOVANI ANIMACE – JEDINE MISTO, kde se meni (JS si to cte) ===== */
	--rb-start:  200ms;   /* globalni zpozdeni startu */
	--rb-dot:    300ms; /* fade bodu */
	--rb-line:   450ms; /* vyrust cary */
	--rb-bubble: 350ms; /* rozvinuti bubliny */
	--rb-label:  300ms; /* fade popisku */
	--rb-shadow-dur: 300ms;                 /* nabehnuti stinu */
	--rb-shadow:  0px 2px 17px -4px rgba(0, 0, 0, 0.7); /* cilovy stin bubliny */
}

.rb-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 487px;
	height: 370px;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---- jednotlive prvky bodu ---- */

.rb-point { --rb-bs: 0ms; }   /* start tohoto bodu – dosadi JS dle rezimu */

.rb-dot {
	position: absolute;
	width: 5px;
	height: 2px;
	background: #000000;
	border-radius: 50%;     /* zkoseny kruh (5x2 elipsa) */
	opacity: 0;             /* vychozi stav pred animaci */
}

.rb-line {
	position: absolute;
	width: 1px;
	background: #000000;
	transform: scaleY(0);
	transform-origin: bottom center;   /* roste ze spodu (od bodu) nahoru */
}

.rb-bubble {
	/* >>> ROZMER PRO DESIGN se meni TADY (width/height). Zbytek se prizpusobi. <<< */
	position: absolute;
	width: 230px;
	height: 40px;
	transform: translateX(-50%) scale( var(--rb-inv, 1) );
	transform-origin: top center;   /* kotva = horni stred = konec cary */
}

.rb-bubble-box {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #000000;
	border-radius: 50px;
	box-shadow: 0 0 0 rgba(0,0,0,0);   /* zadny stin pred animaci */
	transform: scaleX(0);
	transform-origin: center center;   /* rozvine se ze stredu na obe strany */
}

.rb-label {
	width: 100%;
	height: 100%;
	object-fit: contain;    /* popisek se vejde do bubliny a skaluje se s ni */
	display: block;
	opacity: 0;             /* objevi se az po dokonceni bubliny */
	pointer-events: none;
}

/* ---- spousteci stav (prida JS pri vstupu do viewportu) ---- */

.rb-stage.rb-animate .rb-dot {
	animation: rb-fade var(--rb-dot) ease-out forwards;
	animation-delay: calc( var(--rb-start) + var(--rb-bs) );
}

.rb-stage.rb-animate .rb-line {
	animation: rb-grow-y var(--rb-line) cubic-bezier(0, 1.47, .64, 1.39) forwards;
	animation-delay: calc( var(--rb-start) + var(--rb-bs) + var(--rb-dot) );
}

.rb-stage.rb-animate .rb-bubble-box {
	/* 1) rozvinuti sirky  2) az PO nem nabehne stin */
	animation:
		rb-grow-x var(--rb-bubble) cubic-bezier(1, .01, .78, 1)  forwards,
		rb-shadow var(--rb-shadow-dur) ease forwards;
	animation-delay:
		calc( var(--rb-start) + var(--rb-bs) + var(--rb-dot) + var(--rb-line) ),
		calc( var(--rb-start) + var(--rb-bs) + var(--rb-dot) + var(--rb-line) + var(--rb-bubble) );
}

.rb-stage.rb-animate .rb-label {
	animation: rb-fade var(--rb-label) ease forwards;
	animation-delay: calc( var(--rb-start) + var(--rb-bs) + var(--rb-dot) + var(--rb-line) + var(--rb-bubble) );
}

@keyframes rb-fade   { to { opacity: 1; } }
@keyframes rb-grow-y { to { transform: scaleY(1); } }
@keyframes rb-grow-x { to { transform: scaleX(1); } }
@keyframes rb-shadow { to { box-shadow: var(--rb-shadow); } }

/* respektuje uzivatele s omezenim pohybu – rovnou zobrazi vysledek */
@media (prefers-reduced-motion: reduce) {
	.rb-stage.rb-animate .rb-dot,
	.rb-stage.rb-animate .rb-line,
	.rb-stage.rb-animate .rb-bubble-box,
	.rb-stage.rb-animate .rb-label {
		animation: none;
	}
	.rb-stage.rb-animate .rb-dot,
	.rb-stage.rb-animate .rb-label { opacity: 1; }
	.rb-stage.rb-animate .rb-line   { transform: scaleY(1); }
	.rb-stage.rb-animate .rb-bubble-box { transform: scaleX(1); box-shadow: var(--rb-shadow); }
}

/* ---- nahled v editoru Gutenbergu ---- */
.rb-editor-placeholder {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	background: #fff;
}
.rb-editor-placeholder img { width: 250px; height: 250px; display: block; }
.rb-editor-caption { font-size: 12px; color: #50575e; }