/* ScrollStory — frontend player */

html.scrollstory-active,
html.scrollstory-active body {
	margin: 0;
	background: #000;
}

/* Lock scrolling while the first clip preloads. */
html.ss-loading,
html.ss-loading body {
	overflow: hidden;
	height: 100%;
}

/* Preloader ----------------------------------------------------------------- */

.ss-loader {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .6s ease;
}

.ss-loader.ss-done {
	opacity: 0;
	pointer-events: none;
}

.ss-loader-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: min(280px, 60vw);
}

.ss-loader-bar {
	width: 100%;
	height: 2px;
	background: rgba(255, 255, 255, .18);
	border-radius: 2px;
	overflow: hidden;
}

.ss-loader-bar span {
	display: block;
	height: 100%;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .15s linear;
}

.ss-loader-pct {
	font: 500 12px/1 system-ui, sans-serif;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .75);
	font-variant-numeric: tabular-nums;
}

/* Buffering indicator (visitor outran the background downloads) -------------- */

.ss-buffering {
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	z-index: 12;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.ss-buffering.ss-visible { opacity: 1; }

.ss-spinner {
	display: block;
	width: 22px;
	height: 22px;
	border: 2px solid rgba(255, 255, 255, .25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ss-spin .8s linear infinite;
}

@keyframes ss-spin { to { transform: rotate(360deg); } }

/* Consent gate on the preloader ---------------------------------------------- */

html.ss-modal-open,
html.ss-modal-open body {
	overflow: hidden;
	height: 100%;
}

.ss-loader-inner.ss-has-consent {
	width: min(420px, 86vw);
	gap: 18px;
	text-align: center;
}

.ss-loader-langs { display: flex; gap: 4px; justify-content: center; }
.ss-loader .ss-lang {
	border: 1px solid rgba(255, 255, 255, .3);
	background: transparent;
	color: rgba(255, 255, 255, .7);
	font: 600 11px/1 system-ui, sans-serif;
	letter-spacing: .06em;
	padding: 6px 11px;
	border-radius: 999px;
	cursor: pointer;
}
.ss-loader .ss-lang.ss-current { background: #fff; color: #111; border-color: #fff; }

.ss-consent-text {
	font: 400 14px/1.6 system-ui, sans-serif;
	color: rgba(255, 255, 255, .85);
}
.ss-consent-text p { margin: 0 0 .5em; }
.ss-consent-text p:last-child { margin-bottom: 0; }

.ss-consent-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 500 13px/1.4 system-ui, sans-serif;
	color: rgba(255, 255, 255, .9);
	cursor: pointer;
	text-align: left;
}
.ss-consent-opt input {
	width: 17px;
	height: 17px;
	accent-color: #fff;
	flex: none;
	cursor: pointer;
}

.ss-start {
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font: 700 14px/1 system-ui, sans-serif;
	letter-spacing: .04em;
	padding: 13px 42px;
	cursor: pointer;
	transition: transform .2s ease, opacity .2s ease;
}
.ss-start:hover:not(:disabled) { transform: scale(1.04); }
.ss-start:disabled { opacity: .4; cursor: default; }

/* Cinema (fullscreen videos) -------------------------------------------------- */

.ss-video.ss-cinema-now {
	object-fit: contain;
	background: #000;
	z-index: 9;
	opacity: 1;
}

/* Vimeo embed container for fullscreen segments. */
.ss-vimeo {
	position: absolute;
	inset: 0;
	background: #000;
	z-index: 9;
	display: none;
}
.ss-vimeo.ss-open { display: block; }
.ss-vimeo iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Fullscreen image slider ----------------------------------------------------- */

.ss-slider {
	position: absolute;
	inset: 0;
	background: #000;
	z-index: 9;
	display: none;
}
.ss-slider.ss-open { display: block; }

.ss-slides { position: absolute; inset: 0; }

.ss-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: translateX(40px) scale(1.03);
	transition: opacity .55s ease, transform .7s ease;
	pointer-events: none;
	will-change: opacity, transform;
}
.ss-slider.ss-fit-contain .ss-slide { object-fit: contain; }
.ss-slide.ss-before { transform: translateX(-40px) scale(1.03); }
.ss-slide.ss-active { opacity: 1; transform: none; }

.ss-slide-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .14);
	backdrop-filter: blur(6px);
	color: #fff;
	font: 300 30px/1 system-ui, sans-serif;
	cursor: pointer;
	z-index: 11;
	transition: background .2s ease, opacity .2s ease;
}
.ss-slide-arrow:hover { background: rgba(255, 255, 255, .3); }
.ss-slide-arrow:disabled { opacity: .25; cursor: default; }
.ss-slide-prev { left: 22px; }
.ss-slide-next { right: 22px; }

.ss-slide-dots {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 11;
}
.ss-slide-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, .4);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.ss-slide-dot.ss-current { background: #fff; transform: scale(1.3); }

.ss-slide-counter {
	position: absolute;
	top: 22px;
	left: 24px;
	z-index: 11;
	font: 600 13px/1 system-ui, sans-serif;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .85);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
	font-variant-numeric: tabular-nums;
}

.ss-slide-hint {
	position: absolute;
	left: 50%;
	bottom: 54px;
	transform: translateX(-50%);
	width: 24px;
	height: 38px;
	border: 2px solid rgba(255, 255, 255, .55);
	border-radius: 14px;
	z-index: 11;
	transition: opacity .4s ease;
	pointer-events: none;
}
.ss-slide-hint span {
	position: absolute;
	left: 50%;
	top: 7px;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .85);
	animation: ss-hint 1.6s ease-in-out infinite;
}
.ss-slide-hint.ss-hidden { opacity: 0; }

@media (max-width: 640px) {
	.ss-slide-arrow { width: 44px; height: 44px; font-size: 24px; }
	.ss-slide-prev { left: 10px; }
	.ss-slide-next { right: 10px; }
}

/* Hide story UI while a cinema video is open. */
.ss-stage.ss-cinema-open .ss-overlays,
.ss-stage.ss-cinema-open .ss-nav,
.ss-stage.ss-cinema-open .ss-langs,
.ss-stage.ss-cinema-open .ss-hint,
.ss-stage.ss-cinema-open .ss-step,
.ss-stage.ss-cinema-open .ss-playbtn { display: none; }

.ss-playbtn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(.92);
	width: 86px;
	height: 86px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .85);
	background: rgba(0, 0, 0, .35);
	backdrop-filter: blur(6px);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease, transform .35s ease;
	z-index: 7;
}
.ss-playbtn.ss-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
}
.ss-playbtn:hover { transform: translate(-50%, -50%) scale(1.07); }
.ss-playbtn span {
	position: absolute;
	left: 53%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 14px 0 14px 24px;
	border-color: transparent transparent transparent #fff;
}

.ss-closebtn {
	position: absolute;
	top: 18px;
	right: 20px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .14);
	backdrop-filter: blur(6px);
	color: #fff;
	font: 300 28px/1 system-ui, sans-serif;
	cursor: pointer;
	display: none;
	z-index: 11;
	transition: background .2s ease, transform .2s ease;
}
.ss-stage.ss-cinema-open .ss-closebtn { display: block; }
.ss-closebtn:hover { background: rgba(255, 255, 255, .3); transform: scale(1.08); }

.ss-unmutebtn {
	position: absolute;
	left: 50%;
	bottom: 34px;
	transform: translateX(-50%);
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 999px;
	background: rgba(0, 0, 0, .45);
	backdrop-filter: blur(6px);
	color: #fff;
	font: 600 14px/1 system-ui, sans-serif;
	padding: 12px 22px;
	cursor: pointer;
	display: none;
	z-index: 11;
}
.ss-unmutebtn.ss-visible { display: block; }

.ss-root { position: relative; }

.ss-stage {
	position: fixed;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.ss-spacer { width: 1px; }

/* Videos ----------------------------------------------------------------- */

.ss-videos,
.ss-video {
	position: absolute;
	inset: 0;
}

.ss-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .45s ease;
	pointer-events: none;
}

.ss-video.ss-active { opacity: 1; }

/* Overlays ---------------------------------------------------------------- */

.ss-overlays {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ss-overlay {
	position: absolute;
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
	max-width: 90vw;
	text-decoration: none;
	border: 0;
}

.ss-overlay.ss-visible {
	opacity: 1;
	pointer-events: auto;
}

.ss-anim-fade { transition: opacity .6s ease; }

.ss-anim-rise {
	transition: opacity .6s ease, transform .6s ease;
	transform: translate(-50%, calc(-50% + 28px));
}
.ss-anim-rise.ss-visible { transform: translate(-50%, -50%); }

.ss-anim-none { transition: none; }

a.ss-overlay:hover, button.ss-overlay:hover { transform: translate(-50%, -50%) scale(1.04); }
.ss-anim-rise:hover { transform: translate(-50%, -50%) scale(1.04); }

/* Jump navigation ---------------------------------------------------------- */

.ss-nav {
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 14px;
	z-index: 5;
}

.ss-nav-item {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	background: none;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: #fff;
}

.ss-nav-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	transition: background .25s ease, transform .25s ease;
	flex: none;
}

.ss-nav-item.ss-current .ss-nav-dot {
	background: #fff;
	transform: scale(1.35);
}

.ss-nav-label {
	font: 500 12px/1 system-ui, sans-serif;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .85);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
	opacity: 0;
	transform: translateX(6px);
	transition: opacity .25s ease, transform .25s ease;
	white-space: nowrap;
}

.ss-nav:hover .ss-nav-label,
.ss-nav-item.ss-current .ss-nav-label { opacity: 1; transform: none; }

/* Language switcher ---------------------------------------------------------- */

.ss-langs {
	position: absolute;
	top: 20px;
	right: 22px;
	display: flex;
	gap: 4px;
	z-index: 6;
	background: rgba(0, 0, 0, .35);
	backdrop-filter: blur(8px);
	border-radius: 999px;
	padding: 4px;
}

.ss-lang {
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, .7);
	font: 600 12px/1 system-ui, sans-serif;
	letter-spacing: .06em;
	padding: 7px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.ss-lang.ss-current {
	background: #fff;
	color: #111;
}

/* Scroll hint ---------------------------------------------------------------- */

.ss-hint {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	width: 24px;
	height: 38px;
	border: 2px solid rgba(255, 255, 255, .65);
	border-radius: 14px;
	transition: opacity .5s ease;
	z-index: 5;
	pointer-events: none;
}

.ss-hint span {
	position: absolute;
	left: 50%;
	top: 7px;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .85);
	animation: ss-hint 1.6s ease-in-out infinite;
}

.ss-hint.ss-hidden { opacity: 0; }

@keyframes ss-hint {
	0%   { transform: translateY(0); opacity: 1; }
	70%  { transform: translateY(12px); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ss-video, .ss-overlay, .ss-nav-dot, .ss-nav-label { transition: none !important; }
	.ss-hint span { animation: none; }
}

/* Step navigation arrows (prev/next through text & fullscreen stops) --------- */

.ss-step {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0;
	background: rgba(0, 0, 0, .32);
	backdrop-filter: blur(6px);
	color: #fff;
	font: 300 30px/1 system-ui, sans-serif;
	cursor: pointer;
	z-index: 6;
	transition: background .2s ease, opacity .25s ease;
}
.ss-step:hover { background: rgba(0, 0, 0, .5); }
.ss-step:disabled { opacity: 0; pointer-events: none; }
.ss-step-prev { left: 18px; }
.ss-step-next { right: 18px; }

@media (max-width: 640px) {
	.ss-step { width: 42px; height: 42px; font-size: 26px; }
	.ss-step-prev { left: 8px; }
	.ss-step-next { right: 8px; }
}

/* When step arrows occupy the center sides (touch only), move the jump-nav to
   a bottom row so the two don't overlap on the right edge. */
.ss-stage.ss-step-touch .ss-nav {
	top: auto;
	bottom: 22px;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	flex-direction: row;
	gap: 18px;
}
.ss-stage.ss-step-touch .ss-nav-item { flex-direction: column-reverse; gap: 6px; }
.ss-stage.ss-step-touch .ss-hint { bottom: 60px; }

@media (max-width: 640px) {
	.ss-nav { right: 10px; gap: 12px; }
	.ss-nav-label { display: none; }
	.ss-langs { right: 10px; top: 12px; }
}