/* hero.css */
/* Front page hero: the approved night scene ([sso_hero], includes/hero.php).
   The art carries the composition. The layers above it carry the life: slow mist and a faint
   sheen on the water drift one way only (sky.js moves them while it runs), and sky.js adds the
   stars, the rare shooting star with its reflection, the slowly turning glass ball and its specks
   of light. Glows are still. Buttons are shared with the finale. Everything stops for reduced
   motion and for .sso-hero--still (Save-Data), and waits while the scene cannot be seen
   (.sso-hero--resting). */

/* ---------- Frame ---------- */

/* The hero is one screen tall and the copy sits in the middle row. The rows reproduce the approved
   centring (space above and below the copy), but on a short screen the space gives way in a set
   order instead of the copy spilling out: the top never goes under the header, and below the copy
   there is always room for the lines under the buttons and for the page's overlap. Once a sound is
   loaded the player bar (player.css) covers the bottom of the screen, so that room grows by the
   part of the bar the overlap does not already allow for (--sso-hero-bar), and the copy rises
   gently to make it. */
@property --sso-hero-bar {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
html body .sso-hero {
	--sso-hero-covered: 0;
	--sso-hero-top: var(--sso-header-h, 72px);
	--sso-hero-pad-top: 76px;
	--sso-hero-pad-bottom: 110px;
	--sso-hero-room: 134px;
	--sso-hero-bar: 0px;
	--sso-hero-need: calc(var(--sso-hero-room) + var(--sso-hero-bar));
	--sso-hero-gap: calc(var(--sso-hero-pad-bottom) - var(--sso-hero-pad-top));
	position: sticky;
	top: var(--sso-hero-top);
	z-index: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows:
		minmax(16px, 1fr)
		auto
		minmax(min(var(--sso-hero-need), var(--sso-hero-gap)), var(--sso-hero-gap))
		minmax(max(0px, var(--sso-hero-need) - var(--sso-hero-gap)), 1fr);
	height: calc(100vh - var(--sso-hero-top));
	height: calc(100svh - var(--sso-hero-top));
	min-height: 540px;
	overflow: hidden;
	isolation: isolate;
	box-sizing: border-box;
	background-color: var(--e-global-color-ssobg);
	color: var(--e-global-color-text);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
	transition: --sso-hero-bar .9s var(--sso-ease, ease);
}
html body.admin-bar .sso-hero { --sso-hero-top: calc(var(--sso-header-h, 72px) + var(--wp-admin--admin-bar--height, 32px)); }
@media (max-width: 600px) {
	html body.admin-bar .sso-hero { --sso-hero-top: var(--sso-header-h, 72px); }
}
/* The bar's height less the 24px that the page's overlap and a small margin already cover. */
html body.sso-has-player .sso-hero { --sso-hero-bar: max(0px, var(--sso-player-offset, 0px) - 24px); }

/* ---------- Background layers ---------- */

html body .sso-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

html body .sso-hero__art { position: absolute; inset: -2.5%; }

html body .sso-hero__img,
html body .sso-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: 62% 38%;
	filter: brightness(calc(.92 * var(--sso-dim-media, 1)));
}
html body .sso-hero__video { opacity: 0; transition: opacity 1.6s ease, filter var(--sso-fade, .6s ease); }
html body .sso-hero__video.is-ready { opacity: 1; }

/* hero-fx.js: slow mist wisps, glints and drifting lights on the wave. It only adds light (screen),
   sits under the ball, and fades in. */
html body .sso-hero__fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	mix-blend-mode: screen;
	pointer-events: none;
	transition: opacity 2.4s ease;
}
html body .sso-hero__fx.is-on { opacity: 1; }

/* The turning glass ball: sky.js sizes and places it exactly over the ball in the art. */
html body .sso-hero__orb {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	filter: brightness(calc(.92 * var(--sso-dim-media, 1)));
	transition: opacity 2.4s ease, filter var(--sso-fade, .6s ease);
}
html body .sso-hero__orb.is-on { opacity: 1; }

/* Still halos over the moon and the ball. sky.js pins them to the art at every size; these
   percentages are the wide-screen positions and the fallback. */
html body .sso-hero__moonglow,
html body .sso-hero__orbglow {
	position: absolute;
	aspect-ratio: 1;
	mix-blend-mode: screen;
}
html body .sso-hero__moonglow {
	left: 37%;
	top: -5%;
	width: 34%;
	background:
		radial-gradient(circle at 50% 42%, rgba(226, 236, 255, .22), transparent 34%),
		radial-gradient(circle at 50% 42%, rgba(214, 228, 255, .15), rgba(170, 190, 240, .06) 46%, transparent 68%);
	filter: blur(18px);
	opacity: .8;
}
html body .sso-hero__orbglow {
	left: 54%;
	top: 34%;
	width: 30%;
	background: radial-gradient(circle at 50% 52%, rgba(150, 182, 245, .13), rgba(120, 110, 190, .05) 46%, transparent 66%);
	filter: blur(22px);
	opacity: .75;
}

/* Mist: tiles twice the hero's width drifting one way by exactly one tile per cycle, so the loop
   can never be seen. Three depths, three speeds. */
html body .sso-hero__mist {
	position: absolute;
	left: 0;
	width: 200%;
	background-repeat: repeat-x;
	background-size: 50% 100%;
	will-change: transform;
	animation: sso-hero-drift linear infinite;
}
html body .sso-hero__mist--far {
	top: 30%;
	height: 34%;
	opacity: .05;
	filter: blur(24px);
	animation-duration: 431s;
	background-image:
		radial-gradient(50% 42% at 16% 56%, rgba(198, 214, 252, .5), transparent 72%),
		radial-gradient(40% 32% at 46% 40%, rgba(186, 202, 246, .36), transparent 70%),
		radial-gradient(54% 46% at 78% 58%, rgba(206, 220, 255, .44), transparent 74%);
}
html body .sso-hero__mist--near {
	top: 52%;
	height: 34%;
	opacity: .07;
	filter: blur(28px);
	animation-duration: 257s;
	background-image:
		radial-gradient(44% 46% at 24% 60%, rgba(190, 206, 248, .46), transparent 72%),
		radial-gradient(56% 40% at 62% 46%, rgba(202, 216, 252, .4), transparent 74%),
		radial-gradient(36% 34% at 90% 58%, rgba(184, 200, 244, .34), transparent 70%);
}
html body .sso-hero__mist--fg {
	top: 66%;
	height: 30%;
	opacity: .085;
	filter: blur(34px);
	animation-duration: 199s;
	background-image:
		radial-gradient(52% 48% at 20% 60%, rgba(184, 200, 246, .5), transparent 72%),
		radial-gradient(44% 40% at 58% 46%, rgba(196, 212, 250, .42), transparent 74%),
		radial-gradient(38% 36% at 88% 62%, rgba(178, 196, 242, .36), transparent 70%);
}
@keyframes sso-hero-drift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}
/* While sky.js runs the scene it moves these layers itself (30 times a second, with the stars),
   and where it can it draws each mist layer once with the blur already in it, so the blur is not
   worked out again on every frame. The picture is the same. */
html body :is(.sso-hero__mist, .sso-hero__waterline).is-driven { animation: none; }
html body .sso-hero__mist.is-baked {
	filter: none;
	background-image: none;
}
html body .sso-hero__mistpic {
	position: absolute;
	left: 0;
	width: 100%;
	max-width: none;
	pointer-events: none;
}

/* Readability veil: darkens the copy side and melts the hero into the page below. */
html body .sso-hero__veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(135% 110% at 42% 44%, transparent 58%, rgba(2, 4, 10, .42) 100%),
		linear-gradient(100deg, rgba(4, 7, 16, .95) 0%, rgba(4, 7, 16, .87) 30%, rgba(5, 9, 20, .55) 50%, rgba(5, 9, 20, .06) 68%),
		linear-gradient(to bottom, rgba(4, 7, 16, .5) 0%, rgba(4, 7, 16, .06) 18%, rgba(4, 7, 16, 0) 62%, rgba(7, 11, 25, .38) 92%, rgba(7, 11, 25, .62) 100%);
}

/* Darkens the scene as the page slides over it (sky.js sets --sso-hero-covered, 0 to 1). */
html body .sso-hero__dim {
	position: absolute;
	inset: 0;
	background: #04060f;
	opacity: calc(var(--sso-hero-covered) * .38);
}

/* A faint cool sheen sliding one way along the water. */
html body .sso-hero__waterline {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 200%;
	height: 20%;
	opacity: .15;
	filter: blur(4px);
	mix-blend-mode: screen;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
	mask-image: linear-gradient(to bottom, transparent, #000 45%);
	background-repeat: repeat-x;
	background-size: 50% 100%;
	background-image: linear-gradient(90deg, transparent 0 7%, rgba(196, 216, 255, .5) 9% 13%, transparent 15% 31%,
		rgba(196, 216, 255, .34) 33% 36%, transparent 38% 58%,
		rgba(196, 216, 255, .44) 60% 65%, transparent 67% 84%,
		rgba(196, 216, 255, .3) 86% 89%, transparent 91% 100%);
	will-change: transform;
	animation: sso-hero-drift 97s linear infinite;
}

/* Stars (still layer) and sky (twinkles and shooting stars), drawn by sky.js. The sky adds light
   (screen), so a reflection still shows on the bright patches of water. */
html body .sso-hero__stars,
html body .sso-hero__sky {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
html body .sso-hero__sky { mix-blend-mode: screen; }

/* ---------- Layout ---------- */

html body .sso-hero__inner {
	position: relative;
	z-index: 2;
	grid-row: 2;
	display: grid;
	grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
	align-items: center;
	gap: 40px;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}
html body .sso-hero__spacer { min-height: 1px; }

/* ---------- Copy ---------- */

html body .sso-hero__copy { max-width: 580px; }

html body .sso-hero__label {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 0 0 22px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--e-global-color-primary);
	opacity: .92;
}
html body .sso-hero__label::before {
	content: "";
	flex: none;
	width: 36px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--e-global-color-primary));
}

html body .sso-hero__title {
	margin: 0 0 20px;
	padding: 0;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: clamp(46px, 5.4vw, 82px);
	font-weight: 500;
	font-style: normal;
	line-height: 1.03;
	letter-spacing: -.012em;
	text-transform: none;
	color: transparent;
	background: linear-gradient(176deg, #fff 0%, #e4ebfb 52%, #b7c5e4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 6px 40px rgba(120, 150, 220, .28));
}
/* Extra dark (the theme's brightness switch): the title steps down with the rest of the page,
   starting from the extra dark text colour instead of white. */
html[data-brightness="extra"] body .sso-hero__title {
	background-image: linear-gradient(176deg, #cdd3e2 0%, #c2c9da 52%, #a2acc5 100%);
	background-image: linear-gradient(176deg, var(--e-global-color-text) 0%, color-mix(in srgb, var(--e-global-color-text) 90%, #5c6c95) 52%, color-mix(in srgb, var(--e-global-color-text) 62%, #5c6c95) 100%);
	filter: drop-shadow(0 6px 40px rgba(120, 150, 220, .14));
}

html body .sso-hero__sub {
	margin: 0 0 14px;
	font-size: clamp(18px, 1.45vw, 21px);
	line-height: 1.5;
	color: var(--e-global-color-text);
	opacity: .95;
	text-shadow: 0 1px 16px rgba(4, 7, 16, .8);
}

html body .sso-hero__support {
	max-width: 44ch;
	margin: 0 0 34px;
	font-size: 16px;
	line-height: 1.78;
	color: var(--e-global-color-ssomuted);
	text-shadow: 0 1px 14px rgba(4, 7, 16, .8);
}

html body .sso-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

/* The quiet lines under the buttons. "Now playing" always keeps its line (playback.js fills it on
   every visit), so nothing jumps when it arrives. The continue line and the greeting hang below
   it without moving the centred copy. */
html body .sso-hero__lines { position: relative; }

html body .sso-hero__nowplaying,
html body .sso-hero__continue,
html body .sso-hero__welcome {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	text-shadow: 0 1px 12px rgba(4, 7, 16, .8);
}
html body .sso-hero__nowplaying {
	min-height: 1.6em;
	margin-top: 20px;
	color: var(--e-global-color-ssomuted);
}
html body .sso-hero__nowplaying :is(b, strong) {
	font-weight: 600;
	color: var(--e-global-color-primary);
}

html body .sso-hero__extra {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
}
html body .sso-hero__continue { margin-top: 8px; color: var(--e-global-color-ssomuted); }
html body .sso-hero__welcome { margin-top: 8px; color: var(--e-global-color-text); opacity: .75; }
html body .sso-hero__welcome:empty { display: none; }

/* The continue button (library.css) and the greeting's button (prompt.css) bring their own look.
   A plain link in these lines reads as text, with a full-size touch area. */
html body .sso-hero__lines a:not([class]) {
	display: inline-block;
	margin: -12px 0;
	padding: 12px 0;
	font-weight: 600;
	color: var(--e-global-color-primary);
	text-decoration: underline;
	text-decoration-color: var(--e-global-color-ssogolddim);
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	transition: text-decoration-color .2s ease, color .2s ease;
}
@media (hover: hover) {
	html body .sso-hero__lines a:not([class]):hover {
		color: var(--e-global-color-accent);
		text-decoration-color: currentColor;
	}
}

/* ---------- Buttons (hero and finale) ---------- */

html body :is(.sso-hero, .sso-finale) .sso-btn.sso-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	padding: 15px 30px;
	box-sizing: border-box;
	border-radius: 999px;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .055em;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .25s var(--sso-ease, ease), box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
html body :is(.sso-hero, .sso-finale) .sso-btn .sso-i { flex: none; width: 14px; height: 14px; }

html body :is(.sso-hero, .sso-finale) .sso-btn.sso-btn--primary,
html body :is(.sso-hero, .sso-finale) .sso-btn.sso-btn--primary:is(:hover, :focus, :active, :visited) {
	border: 0;
	color: var(--e-global-color-ssoink, #241a05);
	background-color: var(--e-global-color-primary);
	background-image: linear-gradient(180deg, var(--e-global-color-accent), var(--e-global-color-primary));
	box-shadow: 0 8px 34px rgba(233, 200, 126, .26);
}

html body :is(.sso-hero, .sso-finale) .sso-btn.sso-btn--ghost,
html body :is(.sso-hero, .sso-finale) .sso-btn.sso-btn--ghost:is(:hover, :focus, :active) {
	border: 1px solid rgba(255, 255, 255, .2);
	color: var(--e-global-color-text);
	background-color: rgba(10, 16, 34, .38);
	background-image: none;
	box-shadow: none;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
html body :is(.sso-hero, .sso-finale) .sso-btn--ghost .sso-i { color: var(--e-global-color-primary); }
html body :is(.sso-hero, .sso-finale) .sso-btn--ghost .sso-i--pause { display: none; }
html body :is(.sso-hero, .sso-finale) .sso-btn--ghost.is-playing .sso-i--play { display: none; }
html body :is(.sso-hero, .sso-finale) .sso-btn--ghost.is-playing .sso-i--pause { display: inline-block; }

@media (hover: hover) {
	html body :is(.sso-hero, .sso-finale) .sso-btn.sso-btn:hover { transform: translateY(-2px); }
	html body :is(.sso-hero, .sso-finale) .sso-btn.sso-btn--primary:hover { box-shadow: 0 14px 46px rgba(233, 200, 126, .38); }
	html body :is(.sso-hero, .sso-finale) .sso-btn.sso-btn--ghost:hover {
		border-color: rgba(255, 255, 255, .34);
		background-color: rgba(16, 24, 48, .55);
	}
}
html body :is(.sso-hero, .sso-finale) .sso-btn.sso-btn:active { transform: translateY(0) scale(.98); }

/* ---------- Narrow screens: copy on top, the heart of the art below it ---------- */

@media (max-width: 1000px) {
	html body .sso-hero {
		--sso-hero-pad-top: 56px;
		--sso-hero-pad-bottom: 38vh;
		--sso-hero-room: 146px;
		text-align: center;
	}
	html body .sso-hero__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 0;
	}
	html body .sso-hero__spacer { display: none; }
	html body .sso-hero__copy { max-width: 620px; }
	html body .sso-hero__label { justify-content: center; }
	html body .sso-hero__label::before { display: none; }
	html body .sso-hero__support { margin-left: auto; margin-right: auto; }
	html body .sso-hero__actions { justify-content: center; }
	html body .sso-hero__img,
	html body .sso-hero__video { object-position: 68% 30%; }
	html body .sso-hero__veil {
		background: linear-gradient(to bottom, rgba(4, 7, 16, .92) 0%, rgba(4, 7, 16, .8) 38%, rgba(5, 9, 20, .5) 60%, rgba(5, 9, 20, .16) 86%, rgba(7, 11, 25, .5) 100%);
	}
	/* Fallback glow positions for a portrait phone (sky.js places them exactly). */
	html body .sso-hero__moonglow { left: -39%; top: -5%; width: 117%; }
	html body .sso-hero__orbglow { left: 20%; top: 34%; width: 103%; }

	/* Here the small lines sit over the bright leaves and the glass ball. A soft dark haze right
	   behind each of them, a closer shadow on the letters and a slightly lighter grey keep them
	   easy to read at night (at least 4.5:1) without changing the picture around them. Each line
	   is only as wide as its words, so the haze follows them, and it is not drawn while a line is
	   empty. */
	html body :is(.sso-hero__support, .sso-hero__nowplaying, .sso-hero__continue, .sso-hero__welcome) {
		position: relative;
		text-shadow: 0 0 3px rgba(4, 7, 16, .7), 0 1px 12px rgba(4, 7, 16, .85);
	}
	html body :is(.sso-hero__nowplaying, .sso-hero__continue, .sso-hero__welcome) {
		width: fit-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	html body .sso-hero__nowplaying {
		color: #b4bccd;
		color: color-mix(in srgb, var(--e-global-color-ssomuted) 70%, var(--e-global-color-text));
	}
	html body .sso-hero__continue[data-sso-continue] .sso-continue[data-sso-play] {
		color: #c2c8d6;
		color: color-mix(in srgb, var(--e-global-color-ssomuted) 50%, var(--e-global-color-text));
	}
	@media (hover: hover) {
		html body .sso-hero__continue[data-sso-continue] .sso-continue[data-sso-play]:hover { color: var(--e-global-color-text); }
	}
	html body .sso-hero__welcome { opacity: .88; }
	html body :is(.sso-hero__support, .sso-hero__nowplaying, .sso-hero__continue, .sso-hero__welcome)::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: -4px -16px;
		border-radius: 24px;
		background: rgba(4, 7, 16, .46);
		box-shadow: 0 0 22px 12px rgba(4, 7, 16, .46);
		pointer-events: none;
	}
	html body .sso-hero__support::before {
		inset: -2px -10px;
		background: rgba(4, 7, 16, .26);
		box-shadow: 0 0 26px 14px rgba(4, 7, 16, .26);
	}
	html body .sso-hero__nowplaying:empty::before { display: none; }
}
@media (max-width: 560px) {
	html body .sso-hero { --sso-hero-pad-top: 44px; --sso-hero-pad-bottom: 34vh; }
	html body .sso-hero__inner { padding: 0 20px; }
	html body .sso-hero__support { margin-bottom: 28px; font-size: 15.5px; }
	html body :is(.sso-hero, .sso-finale) .sso-btn.sso-btn { padding: 14px 24px; }
}

/* ---------- Short screens: the spacing inside the copy tightens a little ---------- */

@media (min-width: 1001px) and (max-height: 760px) {
	html body .sso-hero__label { margin-bottom: 16px; }
	html body .sso-hero__title { margin-bottom: 14px; font-size: clamp(46px, 5.4vw, 72px); } /* two lines, not three */
	html body .sso-hero__support { margin-bottom: 26px; }
	html body .sso-hero__nowplaying { margin-top: 14px; }
}
/* Laptop screens about 700px tall or less with the player bar showing: a little less space
   between the parts of the copy (the type does not change), so the greeting and its Change
   button stay above the bar. */
@media (min-width: 1001px) and (max-height: 700px) {
	html body.sso-has-player .sso-hero__label { margin-bottom: 12px; }
	html body.sso-has-player .sso-hero__title { margin-bottom: 10px; }
	html body.sso-has-player .sso-hero__sub { margin-bottom: 8px; }
	html body.sso-has-player .sso-hero__support { margin-bottom: 18px; line-height: 1.62; }
	html body.sso-has-player .sso-hero__nowplaying { margin-top: 10px; }
	html body.sso-has-player .sso-hero__continue { margin-top: 2px; }
	html body.sso-has-player .sso-hero__welcome { margin-top: 4px; }
}
@media (max-width: 560px) and (max-height: 760px) {
	html body .sso-hero__label { margin-bottom: 12px; }
	html body .sso-hero__title { margin-bottom: 12px; }
	html body .sso-hero__sub { margin-bottom: 8px; }
	html body .sso-hero__support { margin-bottom: 18px; line-height: 1.6; }
	html body .sso-hero__actions { gap: 10px; }
	html body .sso-hero__nowplaying { margin-top: 12px; }
}
@media (max-width: 560px) and (max-height: 680px) {
	html body .sso-hero__label { margin-bottom: 10px; }
	html body .sso-hero__title { font-size: 40px; }
	html body .sso-hero__sub { font-size: 17px; }
	html body .sso-hero__support { font-size: 15px; line-height: 1.55; }
	html body .sso-hero .sso-btn.sso-btn { padding: 12px 22px; }
	html body .sso-hero__nowplaying { margin-top: 10px; }
}
/* The smallest screens: both buttons on one line. */
@media (max-width: 560px) and (max-height: 600px) {
	html body .sso-hero__actions { flex-wrap: nowrap; gap: 8px; }
	html body .sso-hero .sso-btn.sso-btn { padding: 12px 15px; font-size: 13.5px; letter-spacing: .02em; }
	html body .sso-hero .sso-btn .sso-i { width: 12px; height: 12px; }
}

/* ---------- The curtain: the page slides up over the hero ----------
   The hero sticks under the header while the rest of the page rises over it with rounded top
   corners. On the live site Elementor's wrappers around the shortcode step aside, so the hero can
   stick for the whole page; this needs the hero in its own top-level container. The editor keeps
   its normal boxes. */
body:not(.elementor-editor-active) :is(.e-con.e-parent, .elementor-top-section):has(.sso-hero),
body:not(.elementor-editor-active) :is(.e-con.e-parent, .elementor-top-section):has(.sso-hero) :is(.e-con, .e-con-inner, .elementor-container, .elementor-column, .elementor-widget-wrap, .elementor-widget, .elementor-widget-container, .elementor-shortcode):has(.sso-hero) {
	display: contents;
}
:is(.e-con.e-parent, .elementor-top-section):has(.sso-hero) ~ :is(.e-con, .elementor-section) {
	position: relative;
	z-index: 2;
	background-color: var(--e-global-color-ssobg);
}
:is(.e-con.e-parent, .elementor-top-section):has(.sso-hero) + :is(.e-con, .elementor-section) {
	margin-top: -44px;
	border-radius: 30px 30px 0 0;
	box-shadow: 0 -22px 70px rgba(0, 0, 0, .55), 0 -2px 0 rgba(190, 214, 255, .05);
	background-image:
		linear-gradient(90deg, transparent, rgba(190, 214, 255, .18), transparent),
		linear-gradient(to bottom, rgba(122, 150, 210, .05), transparent 110px);
	background-repeat: no-repeat;
	background-position: center top, top;
	background-size: 84% 1px, 100% 110px;
}
@media (max-width: 660px) {
	:is(.e-con.e-parent, .elementor-top-section):has(.sso-hero) + :is(.e-con, .elementor-section) {
		margin-top: -34px;
		border-radius: 20px 20px 0 0;
	}
}

/* ---------- Stillness ---------- */

/* Save-Data (--still) and whenever the scene cannot be seen (--resting, set by sky.js): the mist
   and the water stop where they are, and carry on from there. */
html body :is(.sso-hero--still, .sso-hero--resting) :is(.sso-hero__mist, .sso-hero__waterline) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	html body .sso-hero { transition: none; }
	html body :is(.sso-hero__mist, .sso-hero__waterline) { animation: none; }
	html body .sso-hero__orb { display: none; }
	html body :is(.sso-hero, .sso-finale) .sso-btn.sso-btn:hover { transform: none; }
}

/* finale.css */
/* The closing scene before the footer ([sso_finale], includes/hero.php). Steady, slow movement,
   all one way (owner, 15 Oct 2026): light travelling along the wave lines, twinkling stars and a
   rare shooting star (finale-fx.js, a canvas over the picture; plants, moon and water never move),
   and two layers of mist drifting one way. Nothing follows the pointer. Its button uses the shared
   styles in hero.css. */

html body .sso-finale {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(560px, 78vh, 700px);
	margin-top: 24px;
	overflow: hidden;
	isolation: isolate;
	box-sizing: border-box;
	background-color: var(--e-global-color-ssobg);
	color: var(--e-global-color-text);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
}

html body .sso-finale__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
html body .sso-finale__art { position: absolute; inset: -2.5%; }
html body .sso-finale__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center 42%;
	filter: brightness(calc(.9 * var(--sso-dim-media, 1)));
}
/* finale-fx.js draws the picture again, moving, in exactly the same place; it fades in over it. */
html body .sso-finale__fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.2s ease;
	pointer-events: none;
}
html body .sso-finale__fx.is-on { opacity: 1; }

/* No WebGL: the northern-lights colours alone. A wide repeating band of colour drifts right (one
   whole repeat per cycle, so it never turns back), masked to the wave lines and blended as colour
   only, so the lines keep their own brightness. Stepped, as it may be drawn without a GPU. */
html body .sso-finale__aurora {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 1.2s ease;
	pointer-events: none;
	mix-blend-mode: color;
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-position: var(--sso-aurora-pos, 50% 42%);
	mask-position: var(--sso-aurora-pos, 50% 42%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
html body .sso-finale__aurora.is-on { opacity: .95; }
html body .sso-finale__aurora::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100%;
	width: 200%;
	background: repeating-linear-gradient(90deg, #40ff8c 0%, #33d9ff 12.5%, #9e6bff 25%, #ff73c7 37.5%, #40ff8c 50%);
	animation: sso-aurora-flow 52s steps(520) infinite;
}
@keyframes sso-aurora-flow {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(50%, 0, 0); }
}
html body .sso-finale--resting .sso-finale__aurora::before { animation-play-state: paused; }
html body .sso-finale__moonglow {
	position: absolute;
	right: 4%;
	top: 6%;
	width: 34%;
	aspect-ratio: 1;
	background: radial-gradient(circle at 55% 40%, rgba(214, 228, 255, .16), rgba(170, 190, 240, .06) 44%, transparent 66%);
	filter: blur(20px);
	mix-blend-mode: screen;
	opacity: .8;
}

/* One-way mist, a whole tile per cycle (same keyframes as the hero). */
html body .sso-finale__mist {
	position: absolute;
	left: 0;
	width: 200%;
	background-repeat: repeat-x;
	background-size: 50% 100%;
	will-change: transform;
	animation: sso-finale-drift linear infinite;
}
html body .sso-finale__mist--far {
	top: 18%;
	height: 40%;
	opacity: .09;
	filter: blur(26px);
	animation-duration: 397s;
	background-image:
		radial-gradient(48% 42% at 18% 54%, rgba(198, 214, 252, .48), transparent 72%),
		radial-gradient(40% 34% at 52% 40%, rgba(186, 202, 246, .36), transparent 70%),
		radial-gradient(52% 44% at 82% 56%, rgba(206, 220, 255, .44), transparent 74%);
}
html body .sso-finale__mist--near {
	top: 46%;
	height: 42%;
	opacity: .13;
	filter: blur(30px);
	animation-duration: 251s;
	background-image:
		radial-gradient(46% 44% at 28% 58%, rgba(190, 206, 248, .44), transparent 72%),
		radial-gradient(54% 38% at 66% 44%, rgba(202, 216, 252, .38), transparent 74%),
		radial-gradient(34% 32% at 92% 60%, rgba(184, 200, 244, .32), transparent 70%);
}
@keyframes sso-finale-drift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* The scene condenses out of the page at the top (quickly, so the night begins right under the
   library) and sinks into the footer's night below. */
html body .sso-finale__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, var(--e-global-color-ssobg) 0%, rgba(7, 11, 25, .5) 5%, rgba(7, 11, 25, 0) 12%),
		radial-gradient(ellipse 58% 52% at 50% 46%, rgba(4, 7, 16, .38), transparent 74%);
}
html body .sso-finale__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 26%;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(4, 6, 13, 0) 0%, rgba(4, 6, 13, .62) 55%, var(--e-global-color-ssonight, #04060d) 100%);
}

html body .sso-finale__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 84px 24px 120px;
	box-sizing: border-box;
}

html body .sso-finale__line {
	max-width: 15em;
	margin: 0 auto 34px;
	padding: 0;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: clamp(32px, 3.9vw, 56px);
	font-weight: 500;
	font-style: normal;
	line-height: 1.16;
	letter-spacing: -.01em;
	text-transform: none;
	text-wrap: balance;
	color: transparent;
	background: linear-gradient(176deg, #fff 0%, #e4ebfb 55%, #b7c5e4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 6px 36px rgba(120, 150, 220, .26));
}
/* Extra dark (the theme's brightness switch): the line steps down with the rest of the page. */
html[data-brightness="extra"] body .sso-finale__line {
	background-image: linear-gradient(176deg, #cdd3e2 0%, #c2c9da 55%, #a2acc5 100%);
	background-image: linear-gradient(176deg, var(--e-global-color-text) 0%, color-mix(in srgb, var(--e-global-color-text) 90%, #5c6c95) 55%, color-mix(in srgb, var(--e-global-color-text) 62%, #5c6c95) 100%);
	filter: drop-shadow(0 6px 36px rgba(120, 150, 220, .13));
}
/* Lines break only between the three phrases: two lines on wide screens, three on phones. */
html body .sso-finale__line span { white-space: nowrap; }

html body .sso-finale .sso-finale__cta { letter-spacing: .08em; }

/* Phones: the moon's side of the night (finale-phone-moon-1300.webp, and the same side of the wide
   picture up to 660px), the line in its three phrases, and a little more shade right behind it so
   the ribbon and the moon stay behind the words. */
@media (max-width: 660px) {
	html body .sso-finale { min-height: 540px; margin-top: 16px; }
	html body .sso-finale__img { object-position: 75% 42%; }
	html body .sso-finale__veil {
		background:
			linear-gradient(to bottom, var(--e-global-color-ssobg) 0%, rgba(7, 11, 25, .5) 5%, rgba(7, 11, 25, 0) 12%),
			radial-gradient(ellipse 74% 34% at 50% 44%, rgba(4, 7, 16, .52), rgba(4, 7, 16, .24) 56%, transparent 80%);
	}
	html body .sso-finale__inner { padding: 64px 24px 110px; }
	html body .sso-finale__line { margin-bottom: 28px; font-size: 30px; }
	html body .sso-finale__line span { display: block; }
}

/* Off screen (sky.js sets the class): the mist waits where it is. */
html body .sso-finale--resting .sso-finale__mist { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	html body .sso-finale__mist { animation: none; }
	html body .sso-finale__aurora::before { animation: none; }
}