/* ScrollStory — frontend player */

/* Self-hosted Roboto (GDPR-safe, no Google Fonts request).
   Copy weight: 300. Bold: 700. */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/roboto-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/roboto-700.woff2') format('woff2');
}

.ss-stage {
	font-family: Roboto, system-ui, sans-serif;
	font-weight: 300;
	--ss-scale: 1;
}
.ss-stage strong, .ss-stage b { font-weight: 700; }

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: flex-end;
	justify-content: stretch;
	background: linear-gradient(165deg, #fbfbfc 0%, #e9ebee 55%, #d9dce0 100%) !important;
	transition: opacity .6s ease, background 1s ease;
}

/* Once the first clip is loaded the world appears behind the bar. */
.ss-loader.ss-ready {
	background: transparent !important;
}

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

/* Bottom-docked, full-width liquid-glass bar. */
.ss-loader-inner {
	position: relative;
	width: 100%;
	background: rgba(255, 255, 255, .5);
	border-top: 1px solid rgba(255, 255, 255, .7);
	padding: 30px 4vw 26px;
	backdrop-filter: blur(22px) saturate(160%);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	box-shadow: 0 -14px 50px rgba(30, 40, 60, .16), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Loading bar sits at the very top of the box, like the progress topbar. */
.ss-loader-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 16px;
	background: rgba(120, 130, 145, .3);
	overflow: hidden;
}

.ss-loader-bar span {
	position: absolute;
	inset: 0;
	transform-origin: left;
	transform: scaleX(0);
	background: linear-gradient(90deg, #f2c53d, #7ed957, #3fd8c7, #3b82f6, #8b5cf6, #ec4899);
	background-size: 220% 100%;
	transition: transform .15s linear;
}

/* Percentage readout inside the loading bar. */
.ss-loader-pct {
	position: absolute;
	top: 0;
	left: 0;
	height: 16px;
	display: flex;
	align-items: center;
	padding: 0 8px;
	font: 700 10px/1 Roboto, system-ui, sans-serif;
	letter-spacing: .08em;
	color: #fff;
	text-shadow: 0 1px 3px rgba(20, 25, 35, .55);
	font-variant-numeric: tabular-nums;
	font-style: normal;
	z-index: 2;
}

/* 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;
}

/* Three columns: text | checkboxes | buttons. */
.ss-loader-cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr auto;
	gap: 5vw;
	align-items: center;
	max-width: 1400px;
	margin: 8px auto 0;
}
.ss-loader-col { min-width: 0; }
.ss-loader-col-text { text-align: left; }
.ss-loader-col-opts { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ss-loader-col-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

.ss-loader-langs { display: flex; gap: 4px; justify-content: flex-start; margin-bottom: 12px; }
.ss-loader .ss-lang {
	border: 1px solid rgba(60, 70, 90, .3);
	background: transparent;
	color: rgba(50, 60, 80, .75);
	font: 700 11px/1 Roboto, system-ui, sans-serif;
	letter-spacing: .06em;
	padding: 6px 11px;
	border-radius: 999px;
	cursor: pointer;
}
.ss-loader .ss-lang.ss-current { background: #23293a; color: #fff; border-color: #23293a; }

.ss-consent-text {
	font: 300 clamp(13px, 1.1vw, 16px)/1.55 Roboto, system-ui, sans-serif;
	color: #2c3345;
}
.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: 300 clamp(13px, 1vw, 15px)/1.4 Roboto, system-ui, sans-serif;
	color: #2c3345;
	cursor: pointer;
	text-align: left;
}
.ss-consent-opt input {
	width: 17px;
	height: 17px;
	accent-color: #23293a;
	flex: none;
	cursor: pointer;
}

.ss-consent-opt.ss-faded {
	opacity: 0;
	max-height: 0;
	margin: -6px 0;
	overflow: hidden;
	pointer-events: none;
	transition: opacity .4s ease, max-height .4s ease;
}

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

/* Confirm = outline; Accept all = filled (like the old Start button). */
.ss-start-confirm {
	border: 1.5px solid #23293a;
	background: transparent;
	color: #23293a;
}
.ss-start-all {
	border: 1.5px solid #23293a;
	background: #23293a;
	color: #fff;
}

@media (max-width: 760px) {
	.ss-loader-cols {
		grid-template-columns: 1fr;
		gap: 16px;
		text-align: left;
	}
	.ss-loader-col-actions { align-items: stretch; }
}

/* 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;
}

/* On laptop/desktop, letterbox the fullscreen video with black bars top and
   bottom, to signal it plays within the browser (not true fullscreen). */
@media (min-width: 641px) {
	.ss-stage.ss-cinema-open::before {
		content: '';
		position: absolute;
		inset: 0;
		background: #000;
		z-index: 8;
	}
	.ss-video.ss-cinema-now,
	.ss-vimeo.ss-open {
		top: 6vh;
		bottom: 6vh;
		height: auto;
	}
}

/* Keynote (HTML5 export) fullscreen presentation ----------------------------- */
.ss-keynote {
	position: absolute;
	inset: 0;
	z-index: 9;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	background: #000;
}
.ss-keynote.ss-open { visibility: visible; opacity: 1; pointer-events: auto; }
.ss-keynote-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: auto;
}

/* Fullscreen canvas scene (sequenced image builds) --------------------------- */
.ss-canvas {
	position: absolute;
	inset: 0;
	z-index: 3;
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease;
}
.ss-canvas.ss-active { opacity: 1; }
.ss-canvas-item {
	position: absolute;
	transform: translate(-50%, -50%);
	opacity: 0;
	will-change: opacity, transform;
}
.ss-canvas-item img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

/* 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;
	display: flex;
	flex-wrap: nowrap;
	will-change: transform;
	transition: transform .5s cubic-bezier(.4,.5,.2,1);
}
.ss-slides.ss-dragging { transition: none; }

.ss-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ss-slider.ss-fit-contain .ss-slide { object-fit: contain; }

.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 Roboto, 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: 700 13px/1 Roboto, 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-topbar,
.ss-stage.ss-cinema-open .ss-menubar,
.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: #e0322d;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
	color: #fff;
	font-size: 0;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 11;
	transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
/* Draw the × from two bars so it's centred regardless of font metrics. */
.ss-closebtn::before,
.ss-closebtn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2.5px;
	border-radius: 2px;
	background: #fff;
}
.ss-closebtn::before { transform: translate(-50%, -50%) rotate(45deg); }
.ss-closebtn::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.ss-stage.ss-cinema-open .ss-closebtn { opacity: 1; visibility: visible; pointer-events: auto; }
.ss-closebtn:hover { background: #c62822; 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: 700 14px/1 Roboto, 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;
	/* Fade-OUT is animated; fade-IN is instant. Combined with DOM stacking
	   (later segments paint on top), this means a fully-opaque video always
	   covers the stage during a transition — no black bleed / dark seam
	   between consecutive scrub clips. */
	transition: opacity .5s ease;
	pointer-events: none;
}

.ss-video.ss-active { opacity: 1; transition: opacity 0s; }

/* 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;
}

/* Typewriter character cells — inline so wrapping/styling is unaffected. */
.ss-tw-c { display: inline; }

.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); }


/* 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: 700 12px/1 Roboto, 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: 42px;
	transform: translateX(-50%);
	width: 120px;
	height: 190px;
	border: 7px solid #fff;
	border-radius: 62px;
	transition: opacity .5s ease;
	z-index: 5;
	pointer-events: none;
}

.ss-hint span {
	position: absolute;
	left: 50%;
	top: 34px;
	width: 18px;
	height: 40px;
	margin-left: -9px;
	border-radius: 10px;
	background: #fff;
	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(60px); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ss-video, .ss-overlay { 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 Roboto, 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; }
}


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

/* Chapter progress bar (top) --------------------------------------------------- */

.ss-topbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 30px;
	z-index: 7;
}

.ss-topbar-pct {
	position: absolute;
	top: 0;
	left: 0;
	height: 14px;
	padding: 0 8px;
	display: flex;
	align-items: center;
	font: 700 10px/1 Roboto, system-ui, sans-serif;
	letter-spacing: .05em;
	color: #fff;
	text-shadow: 0 1px 3px rgba(20, 25, 35, .55);
	z-index: 6;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.ss-topbar-track {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 14px;
	background: rgba(150, 156, 168, .85);
	backdrop-filter: blur(6px);
	z-index: 4;
}

.ss-topbar-fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	background: linear-gradient(90deg, #f2c53d, #7ed957, #3fd8c7, #3b82f6, #8b5cf6, #ec4899);
	background-size: 220% 100%;
	transition: width .12s linear;
	z-index: 5;
}

.ss-chapter {
	position: absolute;
	top: 0;
	width: 30px;
	height: 30px; /* generous hover target below the bar */
	margin-left: -15px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: auto;
}

/* The drop sits centered inside the 14px bar and paints above it. */
.ss-chapter svg {
	position: absolute;
	left: 50%;
	top: 7px;
	transform: translate(-50%, -50%);
	width: 11px;
	height: 12px;
	fill: rgba(255, 255, 255, .95);
	filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25));
	transition: fill .2s ease;
	z-index: 6;
}

.ss-chapter.ss-locked { cursor: default; }
.ss-chapter.ss-locked svg { fill: rgba(255, 255, 255, .5); }

/* Hover tooltip: hangs down like an upside-down tab, sliding out from behind
   the colored bar with no gap. */
.ss-chapter-tip {
	position: absolute;
	top: 14px;
	left: 50%;
	width: 170px;
	padding: 9px 11px;
	border-radius: 0 0 12px 12px;
	background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(255, 255, 255, .7);
	border-top: 0;
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	box-shadow: 0 12px 26px rgba(30, 40, 60, .18);
	font: 300 12px/1.45 Roboto, system-ui, sans-serif;
	color: #2c3345;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(-100%);
	transition: opacity .2s ease, transform .25s cubic-bezier(.4,.5,.2,1);
	z-index: 1;
}

.ss-chapter-tip strong { display: block; font-weight: 700; }

.ss-chapter:hover .ss-chapter-tip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.ss-chapter:first-child .ss-chapter-tip { left: 0; transform: translateX(0) translateY(-100%); }
.ss-chapter:first-child:hover .ss-chapter-tip { transform: translateX(0) translateY(0); }

/* Main menu -------------------------------------------------------------------- */

.ss-stage.ss-has-menu .ss-langs { right: 96px; }
.ss-stage.ss-has-topbar .ss-langs { top: 26px; }

.ss-menubar {
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	z-index: 8;
}

.ss-circle {
	position: relative;
	box-sizing: border-box;
	height: 56px;
	width: max-content;
	max-width: 56px;
	border-radius: 28px;
	box-shadow: 0 8px 22px rgba(30, 40, 60, .18);
	color: #2c3345;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 16px;
	overflow: hidden;
	white-space: nowrap;
	text-decoration: none;
	transition: max-width .32s cubic-bezier(.4,.5,.2,1);
}
/* Glass lives on a pseudo-element: Safari renders box-shadow + backdrop-filter
   on the same element as a hard rectangle, so they must be separated. */
.ss-circle::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, .45);
	border: 1px solid rgba(255, 255, 255, .65);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
}
.ss-circle-icon, .ss-circle-cap { position: relative; z-index: 1; }
.ss-circle-icon { width: 24px; height: 24px; flex: none; display: block; }
.ss-circle-icon svg { width: 100%; height: 100%; }
.ss-circle:hover::before { background: rgba(255, 255, 255, .65); }

/* Hover-expand pill: the label sits to the left of the icon and is revealed
   as the pill grows sideways. Desktop (fine pointer) only. */
.ss-circle-cap {
	order: -1;
	margin-right: 12px;
	font: 700 13px/1.35 Roboto, system-ui, sans-serif;
	color: #2c3345;
	opacity: 0;
	transition: opacity .18s ease;
}
@media (hover: hover) and (pointer: fine) {
	.ss-circle:hover { max-width: 340px; }
	.ss-circle:hover .ss-circle-cap { opacity: 1; transition: opacity .2s ease .08s; }
}

/* External-link circles hidden until the reveal point. */
.ss-circle-link { display: none; }
.ss-stage.ss-links-revealed .ss-circle-link { display: flex; }
.ss-menu-link { display: none; }
.ss-stage.ss-links-revealed .ss-menu-link { display: flex; }

/* Pulsating highlight when the links first appear. Uses box-shadow rings so
   they aren't clipped by the circle's overflow:hidden. */
.ss-circle-link.ss-pulse {
	animation: ss-circle-pulse 1.35s ease-out infinite;
}
@keyframes ss-circle-pulse {
	0%   { box-shadow: 0 8px 22px rgba(30, 40, 60, .18), 0 0 0 0 rgba(59, 130, 246, .6); }
	70%  { box-shadow: 0 8px 22px rgba(30, 40, 60, .18), 0 0 0 20px rgba(59, 130, 246, 0); }
	100% { box-shadow: 0 8px 22px rgba(30, 40, 60, .18), 0 0 0 0 rgba(59, 130, 246, 0); }
}

@keyframes ss-ping {
	0%   { transform: scale(1); opacity: .9; }
	100% { transform: scale(1.9); opacity: 0; }
}

.ss-menupanel {
	position: absolute;
	inset: 0;
	z-index: 15;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
}
.ss-stage.ss-menu-open .ss-menupanel { display: flex; }
.ss-stage.ss-menu-open .ss-menubar,
.ss-stage.ss-menu-open .ss-step,
.ss-stage.ss-menu-open .ss-playbtn,
.ss-stage.ss-menu-open .ss-hint { display: none; }

.ss-menupanel-inner {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 28px;
	background: rgba(255, 255, 255, .5);
	border: 1px solid rgba(255, 255, 255, .65);
	backdrop-filter: blur(26px) saturate(170%);
	-webkit-backdrop-filter: blur(26px) saturate(170%);
	box-shadow: 0 26px 70px rgba(30, 40, 60, .25);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(48px, 8vw, 180px);
	padding: clamp(24px, 6vh, 64px) clamp(24px, 6vw, 90px);
	overflow-y: auto;
	color: #2c3345;
}

.ss-menu-close {
	position: absolute;
	top: 20px;
	right: 22px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .55);
	color: #2c3345;
	cursor: pointer;
	transition: transform .2s ease;
}
.ss-menu-close:hover { transform: scale(1.08); }
.ss-menu-close svg { width: 22px; height: 22px; }

.ss-menu-logo {
	position: absolute;
	left: clamp(24px, 6vw, 90px);
	bottom: clamp(20px, 5vh, 50px);
	opacity: .85;
}
.ss-menu-logo img { max-height: 64px; max-width: 200px; }

.ss-menu-left { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.ss-menu-right { display: flex; flex-direction: column; justify-content: center; gap: 8vh; }

.ss-menu-chapters-box { display: flex; flex-direction: column; align-items: flex-start; }

.ss-menu-chapters-title {
	display: flex;
	align-items: center;
	gap: 16px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: #2c3345;
	font: 700 clamp(22px, 3vw, 34px)/1.2 Roboto, system-ui, sans-serif;
}
.ss-menu-chevron {
	display: inline-flex;
	width: .72em;
	height: .72em;
	transform: rotate(-90deg);
	transition: transform .28s cubic-bezier(.4,.5,.2,1);
}
.ss-menu-chevron svg { width: 100%; height: 100%; }
.ss-menu-chapters-box.ss-open .ss-menu-chevron { transform: rotate(0deg); }

.ss-menu-chapters {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2vh;
	max-height: 0;
	margin-top: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .32s cubic-bezier(.4,.5,.2,1), opacity .25s ease, margin-top .32s ease;
}
.ss-menu-chapters-box.ss-open .ss-menu-chapters { max-height: 62vh; margin-top: 3.4vh; opacity: 1; }
.ss-menu-chapters li {
	color: #5a6472;
	font: 400 clamp(15px, 1.4vw, 19px)/1.4 Roboto, system-ui, sans-serif;
	cursor: pointer;
	transition: color .2s ease, transform .2s ease;
}
.ss-menu-chapters li:hover { transform: translateX(4px); color: #2c3345; }
.ss-menu-chapters li.ss-current { font-weight: 700; color: #2c3345; }
.ss-menu-chapters li.ss-locked { opacity: .4; cursor: default; }
.ss-menu-chapters li.ss-locked:hover { transform: none; color: #5a6472; }

.ss-menu-links { display: flex; flex-direction: column; gap: 5vh; }
.ss-menu-link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	text-decoration: none;
	color: #2c3345;
	font: 700 clamp(20px, 2.6vw, 32px)/1.25 Roboto, system-ui, sans-serif;
	transition: transform .2s ease;
}
.ss-menu-link:hover { transform: translateX(4px); }
.ss-menu-link-arrow { flex: none; width: 1em; height: 1em; margin-top: .15em; }
.ss-menu-link-arrow svg { width: 100%; height: 100%; }

.ss-menu-legal { display: flex; gap: 22px; }
.ss-menu-legal a {
	color: #4c5568;
	font: 300 14px/1 Roboto, system-ui, sans-serif;
	text-decoration: none;
}
.ss-menu-legal a:hover { text-decoration: underline; }

@media (max-width: 760px) {
	.ss-menupanel { padding: 0; }
	.ss-menupanel-inner { border-radius: 0; flex-direction: column; align-items: flex-start; gap: 5vh; padding-top: 96px; }
	.ss-menu-left, .ss-menu-right { justify-content: flex-start; align-items: flex-start; }
	/* Circles: no pill on touch — hide the caption so the icon centres cleanly. */
	.ss-circle { width: 48px; height: 48px; justify-content: center; padding: 0; }
	.ss-circle-cap { display: none; }
	/* Menu circles sit at the top-right (below the notch / progress bar). */
	.ss-menubar {
		top: max(56px, calc(env(safe-area-inset-top, 0px) + 20px));
		bottom: auto;
		transform: none;
		right: 14px;
		gap: 14px;
	}
	/* Keep the menu's close button clear of the status bar / browser chrome. */
	.ss-menu-close { top: max(52px, calc(env(safe-area-inset-top, 0px) + 16px)); }
	.ss-topbar-pct { font-size: 9px; }
}

/* Speech bubbles ----------------------------------------------------------------- */

.ss-bubble {
	color: #2c3345;
	font: 300 calc(clamp(15px, 2.1vw, 30px) * var(--ss-scale, 1))/1.35 Roboto, system-ui, sans-serif;
	filter: drop-shadow(0 14px 30px rgba(30, 40, 60, .18));
}

.ss-bubble-glass {
	background: rgba(255, 255, 255, .8);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	padding: 36px 44px;
}
.ss-bubble-outline {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}
.ss-bubble-outline path {
	fill: none;
	stroke: rgba(255, 255, 255, .9);
	stroke-width: 1;
}

/* Room for the integrated tail on the relevant side. */
.ss-bubble.ss-tail-left .ss-bubble-glass { padding-left: 66px; }
.ss-bubble.ss-tail-right .ss-bubble-glass { padding-right: 66px; }
.ss-bubble.ss-tail-bottom .ss-bubble-glass { padding-bottom: 58px; }
.ss-bubble.ss-tail-top .ss-bubble-glass { padding-top: 58px; }

/* The face is an avatar overlapping the top-left corner (roughly half outside
   the top and left edges, nudged slightly in from the left). It is absolutely
   positioned so it never pushes the text down. */
.ss-bubble.ss-has-face .ss-bubble-glass { padding-top: 36px; }
.ss-bubble.ss-tail-top.ss-has-face .ss-bubble-glass { padding-top: 58px; }

.ss-bubble-body { position: relative; }
.ss-bubble-body p:first-child { margin-top: 0; }
.ss-bubble-body p:last-child { margin-bottom: 0; }

.ss-bubble-face {
	position: absolute;
	top: -32px;   /* ~50% above the top edge */
	left: -18px;  /* ~half outside the left edge, slightly offset in */
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
	background: rgba(255, 255, 255, .75);
	border: 2px solid rgba(255, 255, 255, .9);
	box-shadow: 0 6px 16px rgba(30, 40, 60, .25);
	z-index: 2;
}
.ss-bubble.ss-tail-left .ss-bubble-face { left: 8px; }
.ss-bubble.ss-tail-right .ss-bubble-face { left: -18px; }

/* ============================================================================
   Mobile layer
   On narrow screens, text overlays and speech bubbles become full-width,
   bottom-docked liquid-glass panels, and all overlay text scales up (~1.7×).
   ============================================================================ */
@media (max-width: 640px) {
	.ss-stage { --ss-scale: 1.7; }

	/* Text overlays (div) and bubbles dock to the bottom, full width. Button
	   overlays (a/button) keep their placement. */
	.ss-overlays div.ss-overlay,
	.ss-overlays .ss-bubble {
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: none !important;
		transform: none !important;
		box-sizing: border-box;
		text-align: left !important;
		color: #2c3345 !important;
		text-shadow: none !important;
		filter: none !important;
	}

	/* Plain text overlays get their own glass panel. */
	.ss-overlays div.ss-overlay:not(.ss-bubble) {
		background: rgba(255, 255, 255, .82);
		-webkit-backdrop-filter: blur(18px) saturate(160%);
		backdrop-filter: blur(18px) saturate(160%);
		border-top: 1px solid rgba(255, 255, 255, .7);
		padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
		line-height: 1.35 !important;
	}

	/* Bubbles: drop the tail/clip and become a flat full-width glass panel. */
	.ss-bubble .ss-bubble-glass {
		clip-path: none !important;
		-webkit-clip-path: none !important;
		padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
		background: rgba(255, 255, 255, .82);
		-webkit-backdrop-filter: blur(18px) saturate(160%);
		backdrop-filter: blur(18px) saturate(160%);
		border-top: 1px solid rgba(255, 255, 255, .7);
	}
	.ss-bubble .ss-bubble-outline { display: none !important; }
	.ss-bubble.ss-has-face .ss-bubble-glass { padding-top: 40px !important; }
	.ss-bubble .ss-bubble-face { top: -24px; left: 18px; }
}

/* ============================================================================
   Author content helpers (usable inside overlay / bubble HTML)
   ============================================================================ */
.legende {
	display: flex;
	column-gap: 20px;
	align-items: center;
}
.legende-image {
	width: 50px;
	height: 50px;
}
.legende-image img {
	height: 100%;
}
.legende-label {
	font-weight: 700;
}