/* Slider na homepage starbrite.cz — náhrada za RevSlider (uniterevolution2).
   Plátno 960×350, vrstvy pozicované absolutně a celé plátno se škáluje
   proměnnou --sbhp-scale, kterou nastavuje JS podle šířky kontejneru.
   Tím zůstanou souřadnice z původního slideru platné beze změny. */

.sbhp {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #e9e9e9 center center / cover no-repeat;
}

/* Na plnou šířku okna slider roztáhne JS (fullBleed) — přes clientWidth,
   ne 100vw, aby se nezapočítal svislý posuvník. Do té doby vypadá jako
   normální blok v kontejneru, takže nic neposkakuje. */

/* Výška se odvozuje ze škály, ať plátno nikdy nevyčnívá ani nenechává mezeru. */
.sbhp-viewport {
	position: relative;
	height: calc(350px * var(--sbhp-scale, 1));
}

.sbhp-stage {
	position: absolute;
	top: 0;
	left: 50%;
	width: 960px;
	height: 350px;
	transform: translateX(-50%) scale(var(--sbhp-scale, 1));
	transform-origin: top center;
}

.sbhp-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 600ms ease-in-out, visibility 0s linear 600ms;
}

.sbhp-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 600ms ease-in-out, visibility 0s;
}

.sbhp-layer {
	position: absolute;
	opacity: 0;
	will-change: transform, opacity;
}

.sbhp-layer img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Náběh vrstev se spouští až na aktivním slidu, jinak by animace proběhly
   všechny naráz hned po načtení stránky a při přepnutí by už nebylo co ukázat. */
.sbhp-slide.is-active .sbhp-layer {
	animation-duration: var(--speed, 300ms);
	animation-delay: var(--start, 0ms);
	animation-fill-mode: both;
	/* Power3.easeInOut z RevSlideru = easeInOutQuart */
	animation-timing-function: cubic-bezier(.77, 0, .175, 1);
}

.sbhp-slide.is-active .sbhp-layer[data-anim="fade"] { animation-name: sbhp-fade; }
.sbhp-slide.is-active .sbhp-layer[data-anim="lfr"]  { animation-name: sbhp-lfr; }

/* Vrstvy s data-out odcházejí dřív, než skončí slide — druhá animace v řadě.
   V RevSlideru to řídilo pole realEndTime; na slidu 1 díky němu tři obrázky
   zmizí přesně v okamžiku, kdy naskakuje loď, takže se nepřekrývají. */
.sbhp-slide.is-active .sbhp-layer[data-anim="fade"][data-out] { animation-name: sbhp-fade, sbhp-out; }
.sbhp-slide.is-active .sbhp-layer[data-anim="lfr"][data-out]  { animation-name: sbhp-lfr,  sbhp-out; }

.sbhp-slide.is-active .sbhp-layer[data-out] {
	animation-delay: var(--start, 0ms), var(--end, 0ms);
	animation-duration: var(--speed, 300ms), var(--endspeed, 300ms);
	animation-fill-mode: both, forwards;
}

@keyframes sbhp-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* lfr = „long from right“. RevSlider startoval na x = šířka plátna + 15,
   viz jquery.themepunch.revolution.js: frm.x = 15 + opt.width */
/* Odchod. RevSlider tu měl randomrotateout (náhodné pootočení při mizení);
   držíme se pootočení pevného — náhodnost by nešla udělat čistě v CSS
   a na 300 ms je stejně sotva rozeznatelná. */
@keyframes sbhp-out {
	from { opacity: 1; }
	to   { opacity: 0; transform: rotate(8deg) scale(.9); }
}

@keyframes sbhp-lfr {
	from { opacity: 0; transform: translateX(975px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Bez JS nebo než se stihne spustit ať je vidět aspoň první slide staticky. */
.sbhp:not(.is-ready) .sbhp-slide:first-child,
.sbhp:not(.is-ready) .sbhp-slide:first-child .sbhp-layer {
	opacity: 1;
	visibility: visible;
}

/* Původní slider měl onHoverStop; kurzor to uživateli napovídal jen nepřímo,
   necháváme beze změny chování, jen bez ukazatele. */

@media (prefers-reduced-motion: reduce) {
	.sbhp-slide,
	.sbhp-slide.is-active .sbhp-layer {
		transition: none;
		animation: none;
	}
	.sbhp-slide.is-active .sbhp-layer { opacity: 1; transform: none; }
}

/* --- styly textových vrstev -------------------------------------------------
   Převzaté z RevSlideru (media/com_uniterevolution2/assets/rs-plugin/css/
   dynamic-captions.css). S odinstalací komponenty ten soubor zmizí, takže
   pravidla musí být tady, jinak by texty ztratily vzhled.
   Názvy jsou matoucí (large_text je větší než larger_text), ale mění se tím
   i obsah slidů, tak zůstávají. */

.sbhp-layer.large_text {
	color: #fff;
	font: 700 40px/40px Arial, sans-serif;
	text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
	white-space: nowrap;
	margin: 0;
}

.sbhp-layer.larger_text {
	color: #fff;
	font: 500 26px/20px Arial, sans-serif;
	text-shadow: 0 2px 5px rgba(0, 0, 0, .498);
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	margin: 0;
}

.sbhp-layer.medium_text {
	color: #fff;
	font: 700 20px/20px Arial, sans-serif;
	text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
	white-space: nowrap;
	margin: 0;
}

/* Žluté tlačítko slideru. Původní T3 šablona ho měla jako `.btn-yellow`
   (#fff200, navy text, ostré rohy). Bootstrap 5 v T4 tuhle třídu nemá
   a `btn-default` z BS3 v něm neexistuje vůbec, proto si styl nese modul sám.
   Nowrap z .large_text zůstává — bez něj se popisek láme na dva řádky. */
.sbhp-layer .btn-yellow {
	background-color: #fff200;
	color: #012063;
	border: 0;
	border-radius: 0;
}

.sbhp-layer .btn-yellow:hover,
.sbhp-layer .btn-yellow:focus {
	background-color: #f0e300;
	color: #012063;
}