/*
 * Clean Moon: the gold design.
 *
 * Loaded after clean-moon.css and outside its cascade layers, so these rules win
 * over the base styles without !important. Every colour comes from the colour
 * variables (Elementor > Site Settings > Global Colors > "Clean Moon ..."), so the
 * design follows when you change them there or per section.
 *
 * Contents: page surfaces, gold text and buttons, the night sky of the top area
 * (stars, shooting stars, moonlight), the speech bubble of the astronaut.
 */

/* ------------------------------------------------------------ page surfaces */
.cm-page,
.cm-root {
	caret-color: var(--color-brand);
	accent-color: var(--color-brand);
}
html:has(body.cm-page) {
	scrollbar-color: color-mix(in srgb, var(--color-brand) 70%, transparent) var(--color-paper);
}
.cm-page ::selection {
	background: color-mix(in srgb, var(--color-brand-light) 55%, transparent);
	color: var(--color-ink);
}
.cm-page :focus-visible {
	outline-color: var(--color-brand);
}

/* small gold text on light backgrounds uses the deeper gold, so it stays readable */
.cm-page .text-brand {
	color: var(--color-gold-ink);
}
@media (hover: hover) {
	.cm-page .hover\:text-brand:hover {
		color: var(--color-gold-ink);
	}
}
/* ... and the light gold on the dark sections and on the night sky */
.cm-page .bg-ink .text-brand,
.cm-page .cm-hero .text-brand,
.cm-page .bg-ink .hover\:text-brand:hover,
.cm-page .cm-hero .hover\:text-brand:hover {
	color: var(--color-brand-light);
}

/* white on gold is hard to read: on gold fills the text and icons are midnight */
.cm-page .bg-brand.text-white,
.cm-page .bg-brand > .text-white {
	color: var(--color-ink);
}

/* ---------------------------------------------------- polished gold: buttons */
/*
 * Polished gold like a gold bar: a bright edge of light at the top, the full gold in the
 * middle, a deeper gold at the bottom, a soft reflection across, and a fine darker gold
 * edge. Everything is mixed from the global colours "Clean Moon Gold ...", so it follows
 * when you change them. The crumpled gold leaf (assets/images/gold-foil*.jpg) is kept
 * for the large golden lettering only: behind small text it would be too busy.
 */
.cm-page,
.cm-root {
	--cm-gold-polish:
		linear-gradient(115deg, transparent 18%, color-mix(in srgb, #fff 30%, transparent) 30%, transparent 42%),
		linear-gradient(180deg, color-mix(in srgb, var(--color-brand-light) 45%, #fff) 0%, var(--color-brand-light) 24%, var(--color-brand) 58%, var(--color-brand-dark) 88%, var(--color-brand) 100%);
}
.cm-btn,
.cm-page .elementor-widget-button .elementor-button,
.cm-logo-mark,
.cm-page .bg-brand {
	background-color: var(--color-brand);
	background-image: var(--cm-gold-polish);
	background-size: 100% 100%;
	color: var(--color-ink);
}
.cm-btn,
.cm-page .elementor-widget-button .elementor-button,
.cm-page .bg-brand {
	border-color: color-mix(in srgb, var(--color-brand-dark) 75%, transparent);
}
.cm-btn,
.cm-page .elementor-widget-button .elementor-button {
	border: 1px solid color-mix(in srgb, var(--color-brand-dark) 75%, transparent);
	box-shadow:
		0 8px 18px -8px color-mix(in srgb, var(--color-brand-dark) 70%, #000),
		inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
		inset 0 -1px 0 color-mix(in srgb, var(--color-brand-dark) 80%, transparent);
}
.cm-btn:not(:disabled):hover,
.cm-page .elementor-widget-button .elementor-button:hover {
	background-color: var(--color-brand);
	background-image: var(--cm-gold-polish);
	color: var(--color-ink);
	box-shadow:
		0 10px 22px -8px color-mix(in srgb, var(--color-brand-dark) 75%, #000),
		inset 0 1px 0 color-mix(in srgb, #fff 75%, transparent),
		inset 0 -1px 0 color-mix(in srgb, var(--color-brand-dark) 80%, transparent);
}
.cm-btn:not(:disabled):active {
	background-image: linear-gradient(180deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
}
.cm-btn:disabled {
	background-image: none;
	background-color: var(--color-brand-light);
}
/* no blurred halo around the gold: it read as out of focus */
.cm-btn::before,
.cm-btn:not(:disabled):hover::before {
	opacity: 0;
	animation: none;
}
/* the effect layer must not paint a second, flat background over the gold */
.cm-btn .cm-btn-fx {
	background: transparent;
}
/* a glint of light runs over the gold when the mouse comes onto the button */
.cm-btn .cm-btn-fx::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 32%, color-mix(in srgb, #fff 55%, transparent) 48%, color-mix(in srgb, #fff 20%, transparent) 54%, transparent 66%);
	transform: translateX(-110%);
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.cm-btn .cm-btn-fx::after {
		transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.cm-btn:not(:disabled):hover .cm-btn-fx::after {
		transform: translateX(110%);
	}
}
.cm-btn-ripple {
	background: color-mix(in srgb, #fff 80%, var(--color-brand-light));
}

/* the logo mark: a little polished gold medal with the full moon */
.cm-logo-mark {
	box-shadow:
		0 10px 22px -12px color-mix(in srgb, var(--color-brand-dark) 95%, transparent),
		inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}

/* gold leaf lettering: the golden words of the headline on the night sky (letter by letter,
   because every letter moves on its own). Browsers do not blend a background that is
   cut to the letters, so the lettering uses the foil that is already gilded. */
.cm-hero .cm-accent [data-move] {
	color: var(--color-brand-light);
	background-image: url("../images/gold-foil-text.jpg");
	background-size: 260px auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.cm-hero .cm-accent [data-move] {
		-webkit-text-fill-color: currentColor;
		background: none;
	}
}

/* ------------------------------------------------- the top area: night sky */
.cm-hero {
	--cm-moon-x: 65%;
	--cm-moon-y: 80%;
	color: var(--color-moonlight);
	background:
		radial-gradient(48% 62% at var(--cm-moon-x) var(--cm-moon-y), color-mix(in srgb, var(--color-glow) 16%, transparent) 0%, color-mix(in srgb, var(--color-glow) 5%, transparent) 45%, transparent 75%),
		radial-gradient(120% 70% at 50% 115%, color-mix(in srgb, var(--color-night) 60%, #262f5c) 0%, transparent 62%),
		linear-gradient(180deg, var(--color-night) 0%, color-mix(in srgb, var(--color-night) 84%, #1d2550) 100%);
}
[dir="rtl"] .cm-hero {
	--cm-moon-x: 35%;
}
@media (max-width: 47.99rem) {
	.cm-hero {
		--cm-moon-x: 50%;
		--cm-moon-y: 88%;
	}
}

.cm-hero .cm-hero-title {
	color: var(--color-moonlight);
}
.cm-hero .cm-accent {
	color: var(--color-brand-light);
}
.cm-hero header .text-ink {
	color: var(--color-moonlight);
}
.cm-hero nav a {
	color: color-mix(in srgb, var(--color-moonlight) 80%, transparent);
}
.cm-hero nav a:hover {
	color: var(--color-brand-light);
}
.cm-hero .text-dim {
	color: var(--color-moondim);
}
.cm-hero .text-mist {
	color: color-mix(in srgb, var(--color-moondim) 82%, transparent);
}
.cm-hero [data-cm-status="failed"] .text-ink {
	color: var(--color-moonlight);
}
.cm-hero [data-cm-status] .border-line {
	border-color: color-mix(in srgb, var(--color-moonlight) 18%, transparent);
	border-top-color: var(--color-brand-light);
}
.cm-hero [data-cm-pause] {
	background: color-mix(in srgb, var(--color-night) 72%, transparent);
	color: var(--color-moonlight);
	border-color: color-mix(in srgb, var(--color-brand-light) 35%, transparent);
	box-shadow: 0 10px 26px -14px #000;
}
.cm-hero [data-cm-pause]:hover {
	color: var(--color-brand-light);
	border-color: var(--color-brand-light);
}

/* the veil keeps the text readable where the moon runs under it: the night itself, thinning out */
.cm-hero-veil {
	background: linear-gradient(90deg, color-mix(in srgb, var(--color-night) 88%, transparent) 0%, color-mix(in srgb, var(--color-night) 66%, transparent) 55%, transparent 100%);
}
[dir="rtl"] .cm-hero-veil {
	background: linear-gradient(270deg, color-mix(in srgb, var(--color-night) 88%, transparent) 0%, color-mix(in srgb, var(--color-night) 66%, transparent) 55%, transparent 100%);
}
/* where a line of text still reaches the moon, a soft shade of night keeps it readable */
.cm-hero .cm-hero-title,
.cm-hero .cm-hero-title ~ * {
	text-shadow: 0 1px 14px color-mix(in srgb, var(--color-night) 85%, transparent);
}

/* the moon sinks into the night at the bottom, then a fine gold line closes the area */
.cm-hero-clouds {
	filter: none;
	background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-night) 72%, transparent) 58%, var(--color-night) 100%);
}
.cm-hero-clouds::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-brand-light) 70%, transparent) 30%, color-mix(in srgb, var(--color-brand-light) 70%, transparent) 70%, transparent);
}

/* ---------------------------------------------------- stars and shooting stars */
.cm-sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.cm-stars {
	position: absolute;
	inset: 0;
	background-repeat: repeat;
}
/* two tiled layers whose tile sizes do not divide each other, so no pattern shows */
.cm-stars-far {
	opacity: 0.55;
	background-size: 233px 197px;
	background-image:
		radial-gradient(1px 1px at 14px 22px, #fff 50%, transparent 52%),
		radial-gradient(1px 1px at 71px 128px, #fff 50%, transparent 52%),
		radial-gradient(1px 1px at 119px 61px, #fff6e0 50%, transparent 52%),
		radial-gradient(1px 1px at 168px 170px, #fff 50%, transparent 52%),
		radial-gradient(1px 1px at 203px 34px, #fff 50%, transparent 52%),
		radial-gradient(1px 1px at 44px 182px, #fff6e0 50%, transparent 52%),
		radial-gradient(1px 1px at 141px 109px, #fff 50%, transparent 52%),
		radial-gradient(1px 1px at 222px 141px, #fff 50%, transparent 52%);
	animation: cm-twinkle 7s ease-in-out infinite alternate;
}
.cm-stars-near {
	opacity: 0.85;
	background-size: 409px 331px;
	background-image:
		radial-gradient(1.4px 1.4px at 38px 71px, #fff9ea 50%, transparent 55%),
		radial-gradient(1.8px 1.8px at 261px 39px, color-mix(in srgb, var(--color-brand-light) 85%, #fff) 50%, transparent 56%),
		radial-gradient(1.3px 1.3px at 167px 214px, #fff 50%, transparent 55%),
		radial-gradient(1.6px 1.6px at 352px 287px, #fff9ea 50%, transparent 55%),
		radial-gradient(1.2px 1.2px at 99px 301px, #fff 50%, transparent 55%),
		radial-gradient(2px 2px at 318px 152px, color-mix(in srgb, var(--color-brand-light) 75%, #fff) 50%, transparent 58%);
	animation: cm-twinkle 4.6s ease-in-out -2.3s infinite alternate-reverse;
}
@keyframes cm-twinkle {
	from {
		opacity: 0.35;
	}
	to {
		opacity: 0.95;
	}
}

.cm-shoot {
	position: absolute;
	top: var(--cm-shoot-top, 10%);
	left: var(--cm-shoot-start, 90%);
	width: clamp(90px, 13vw, 190px);
	height: 1.5px;
	border-radius: 999px;
	transform-origin: 0 50%;
	opacity: 0;
	background: linear-gradient(90deg, #fffaf0 0%, color-mix(in srgb, var(--color-brand-light) 85%, transparent) 22%, transparent 100%);
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-brand-light) 80%, transparent));
	animation: cm-shoot var(--cm-shoot-every, 12s) cubic-bezier(0.25, 0.6, 0.3, 1) var(--cm-shoot-delay, 0s) infinite;
}
.cm-shoot::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	transform: translateY(-50%);
	background: #fffdf6;
	box-shadow: 0 0 10px 2px color-mix(in srgb, var(--color-brand-light) 90%, transparent);
}
[dir="rtl"] .cm-shoot {
	left: auto;
	right: var(--cm-shoot-start, 90%);
	transform-origin: 100% 50%;
	background: linear-gradient(270deg, #fffaf0 0%, color-mix(in srgb, var(--color-brand-light) 85%, transparent) 22%, transparent 100%);
	animation-name: cm-shoot-rtl;
}
[dir="rtl"] .cm-shoot::before {
	left: auto;
	right: -2px;
}
/* down to the left along its own length; visible for about a second of each round */
@keyframes cm-shoot {
	0% {
		opacity: 0;
		transform: rotate(-28deg) translateX(0) scaleX(0.25);
	}
	1.5% {
		opacity: 1;
	}
	8% {
		opacity: 0;
		transform: rotate(-28deg) translateX(-62vw) scaleX(1);
	}
	100% {
		opacity: 0;
		transform: rotate(-28deg) translateX(-62vw) scaleX(1);
	}
}
@keyframes cm-shoot-rtl {
	0% {
		opacity: 0;
		transform: rotate(28deg) translateX(0) scaleX(0.25);
	}
	1.5% {
		opacity: 1;
	}
	8% {
		opacity: 0;
		transform: rotate(28deg) translateX(62vw) scaleX(1);
	}
	100% {
		opacity: 0;
		transform: rotate(28deg) translateX(62vw) scaleX(1);
	}
}
@media (prefers-reduced-motion: reduce) {
	.cm-shoot {
		display: none;
	}
	.cm-stars {
		animation: none;
	}
}

/* ------------------------------------------------- the astronaut's speech bubble */
.cm-say {
	/* starts at most 6 % right of the middle (next to the helmet), so this keeps it inside the moon area */
	max-width: min(15rem, calc(44% - 8px));
	background: var(--color-paper);
	color: var(--color-ink);
	border-color: color-mix(in srgb, var(--color-brand) 45%, transparent);
	box-shadow: 0 16px 32px -14px #000a;
}
.cm-say::after {
	background: var(--color-paper);
	border-color: color-mix(in srgb, var(--color-brand) 45%, transparent);
}

/* ------------------------------------------------ the shooting star at the mouse */
[data-cm-star-trail] {
	position: fixed;
	inset: 0;
	z-index: 70;
	pointer-events: none;
}

/* ------------------------------------------- night sky with the Milky Way */
/* cm_night_sky(): the photo drifts very slowly closer, single stars breathe and float */
.cm-galaxy {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background: var(--color-night);
}
.cm-galaxy-photo {
	position: absolute;
	inset: -5%;
	background: url("../images/night-sky.jpg") center / cover no-repeat;
	opacity: 0.92;
	animation: cm-galaxy-drift 46s ease-in-out infinite alternate;
	will-change: transform;
}
@media (max-width: 47.99rem) {
	.cm-galaxy-photo {
		background-image: url("../images/night-sky-small.jpg");
	}
}
/* darker towards the edges and the borders of the section, so text and cards stay calm */
.cm-galaxy::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 85% at 50% 50%, transparent 35%, color-mix(in srgb, var(--color-night) 72%, transparent) 100%),
		linear-gradient(180deg, color-mix(in srgb, var(--color-night) 70%, transparent) 0%, transparent 22%, transparent 78%, color-mix(in srgb, var(--color-night) 75%, transparent) 100%);
}
@keyframes cm-galaxy-drift {
	from {
		transform: scale(1) translate3d(0, 0, 0);
	}
	to {
		transform: scale(1.08) translate3d(-1.5%, -1%, 0);
	}
}
.cm-st {
	position: absolute;
	z-index: 1;
	width: var(--cm-s);
	height: var(--cm-s);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(250, 246, 236, 0.95), rgba(250, 246, 236, 0) 70%);
	animation: cm-breathe var(--cm-d) ease-in-out var(--cm-delay) infinite;
}
.cm-st--gold {
	background: radial-gradient(circle, color-mix(in srgb, var(--color-brand-light) 90%, #fff), transparent 70%);
	box-shadow: 0 0 9px 1px color-mix(in srgb, var(--color-brand-light) 45%, transparent);
}
.cm-st--drift {
	animation:
		cm-breathe var(--cm-d) ease-in-out var(--cm-delay) infinite,
		cm-float calc(var(--cm-d) * 3) ease-in-out var(--cm-delay) infinite alternate;
}
@keyframes cm-breathe {
	0%,
	100% {
		opacity: 0.25;
		scale: 0.7;
	}
	50% {
		opacity: 1;
		scale: 1.15;
	}
}
@keyframes cm-float {
	from {
		translate: 0 0;
	}
	to {
		translate: var(--cm-dx) var(--cm-dy);
	}
}
@media (prefers-reduced-motion: reduce) {
	.cm-galaxy-photo,
	.cm-st {
		animation: none;
	}
}

/* --------------------------------------------------------------- the moon wheel */
.cm-wheel-section {
	padding-block: clamp(4.5rem, 9vw, 7.5rem);
	color: var(--color-moonlight);
	background: var(--color-night);
}
.cm-wheel-head h2 {
	color: var(--color-moonlight);
}
.cm-page .cm-wheel-head .text-brand {
	color: var(--color-brand-light);
}
.cm-wheel-head p {
	color: var(--color-moondim);
}
.cm-wheel {
	width: min(94vw, 900px);
	aspect-ratio: 1;
	margin-top: clamp(2rem, 5vw, 3.5rem);
}
.cm-wheel-art {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.cm-wheel-disc {
	fill: color-mix(in srgb, var(--color-night) 80%, transparent);
}
.cm-wheel-seg {
	cursor: zoom-in;
	outline: none;
}
.cm-wheel-seg:focus-visible .cm-wheel-edge {
	opacity: 1;
}
.cm-wheel-seg image {
	filter: saturate(0.92) brightness(0.92);
	transition: filter 0.5s ease;
}
/* the wheel turns slowly; every photo turns back just as fast, so it stays upright.
   It stands still while the mouse or the keyboard is on it, so a photo is easy to pick. */
.cm-wheel-turn {
	transform-origin: 500px 500px;
	animation: cm-wheel-turn 240s linear infinite;
}
.cm-wheel-pic {
	transform-box: fill-box;
	transform-origin: center;
	animation: cm-wheel-turn 240s linear infinite reverse;
}
.cm-wheel:hover .cm-wheel-turn,
.cm-wheel:hover .cm-wheel-pic,
.cm-wheel:focus-within .cm-wheel-turn,
.cm-wheel:focus-within .cm-wheel-pic {
	animation-play-state: paused;
}
@keyframes cm-wheel-turn {
	to {
		transform: rotate(360deg);
	}
}
/* the Milky Way behind the wheel turns too, very slowly (the photo is larger than the
   section, so no corner ever shows) */
.cm-galaxy-turn .cm-galaxy-photo {
	inset: -45%;
	animation: cm-wheel-turn 420s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.cm-wheel-turn,
	.cm-wheel-pic,
	.cm-galaxy-turn .cm-galaxy-photo {
		animation: none;
	}
}
.cm-wheel-shade {
	fill: var(--color-night);
	opacity: 0.32;
	transition: opacity 0.45s ease;
}
.cm-wheel-edge {
	fill: none;
	stroke: var(--color-brand-light);
	stroke-width: 3;
	opacity: 0;
	transition: opacity 0.35s ease;
}
.cm-wheel-name {
	font-family: var(--font-sans);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	fill: var(--color-brand-light);
	transition: fill 0.3s ease;
}
@media (max-width: 40rem) {
	.cm-wheel-name {
		font-size: 26px;
		letter-spacing: 0.14em;
	}
}
@media (hover: hover) and (pointer: fine) {
	.cm-wheel-seg:hover .cm-wheel-shade {
		opacity: 0;
	}
	.cm-wheel-seg:hover .cm-wheel-edge {
		opacity: 0.95;
	}
	.cm-wheel-seg:hover .cm-wheel-name {
		fill: #fff6d6;
	}
	.cm-wheel-seg:hover image {
		filter: none;
	}
}
.cm-wheel-lines {
	fill: none;
	stroke: color-mix(in srgb, var(--color-brand-light) 72%, transparent);
	stroke-width: 1.6;
	pointer-events: none;
}
.cm-wheel-thin {
	stroke-width: 0.8;
	opacity: 0.6;
}
.cm-wheel-tick {
	stroke-width: 1;
	opacity: 0.55;
}
/* the 3D moon in the middle (photo-wall.js), fading in once it is drawn */
.cm-wheel-moon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 30%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.cm-wheel-moon.is-ready {
	opacity: 1;
}

/* the wheel comes in when it is reached (photo-wall.js sets data-reveal only below the screen) */
.cm-wall[data-reveal="wait"] .cm-wheel-seg,
.cm-wall[data-reveal="wait"] .cm-wheel-lines {
	opacity: 0;
}
.cm-wall[data-reveal="wait"] .cm-wheel {
	transform: scale(0.94) rotate(-6deg);
}
.cm-wheel {
	transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cm-wall[data-reveal="in"] .cm-wheel-lines {
	opacity: 1;
	transition: opacity 1.2s ease;
}
.cm-wall[data-reveal="in"] .cm-wheel-seg {
	opacity: 1;
	transition: opacity 0.8s ease calc(var(--cm-i, 0) * 90ms + 250ms);
}

/* ---------------------------------------------------------------- the intro */
/* cm_intro() in template.php: only while html.cm-intro-on is set (first visit, motion welcome) */
.cm-intro {
	display: none;
}
html.cm-intro-on .cm-intro {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 2vh, 1.25rem);
	background: radial-gradient(70% 60% at 50% 44%, color-mix(in srgb, var(--color-night) 80%, #24305e) 0%, var(--color-night) 72%);
	pointer-events: auto;
	touch-action: none;
	/* leaves on its own if the script never runs */
	animation: cm-intro-away 0.9s ease 6s forwards;
}
html.cm-intro-leaving .cm-intro {
	opacity: 0;
	transform: translateY(-2%);
	transition:
		opacity 0.85s ease,
		transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.cm-intro-mark {
	position: relative;
	width: clamp(130px, 17vw, 180px);
	aspect-ratio: 1;
}
.cm-intro-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform: rotate(-90deg);
}
.cm-intro-ring circle {
	fill: none;
	stroke: var(--color-brand-light);
	stroke-width: 1.2;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: cm-ring-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}
.cm-intro-moon {
	position: absolute;
	inset: 11%;
	width: 78%;
	height: 78%;
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.86);
	filter: drop-shadow(0 0 24px color-mix(in srgb, var(--color-brand-light) 40%, transparent));
	animation: cm-moon-rise 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}
/* the company name is written from left to right, white gold to deep gold like the moonlight on gold */
.cm-intro-name {
	margin: 0;
	padding: 0.05em 0.25em 0.15em;
	font-family: "Allison", "Libre Caslon Text", Georgia, serif;
	font-size: clamp(3.4rem, 8vw, 5.4rem);
	font-weight: 400;
	line-height: 1;
	color: var(--color-brand-light);
	background: linear-gradient(100deg, #fff6d8 0%, var(--color-brand-light) 32%, var(--color-brand) 68%, #fff1bd 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	clip-path: inset(0 100% 0 0);
	animation: cm-write 1.7s cubic-bezier(0.65, 0, 0.35, 1) 1.3s forwards;
}
html[lang="ar"] .cm-intro-name,
html[lang="ru"] .cm-intro-name,
html[lang="zh"] .cm-intro-name {
	font-family: "Libre Caslon Text", Georgia, serif;
	font-style: italic;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
}
.cm-intro-spark {
	position: absolute;
	left: 16%;
	top: 56%;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(circle, #fffdf3 0 16%, color-mix(in srgb, var(--color-brand-light) 75%, transparent) 30%, transparent 70%);
	box-shadow: 0 0 14px 3px color-mix(in srgb, var(--color-brand-light) 35%, transparent);
	animation: cm-breathe 2.6s ease-in-out infinite;
}
.cm-intro-status {
	position: absolute;
	bottom: 9vh;
	margin: 0;
	padding-inline: 1.5rem;
	text-align: center;
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-brand-light) 80%, transparent);
	opacity: 0;
	animation: cm-fade-in 0.8s ease 0.6s forwards;
}
.cm-intro-status [data-cm-intro-count] {
	font-variant-numeric: tabular-nums;
}
@keyframes cm-ring-draw {
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes cm-moon-rise {
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes cm-write {
	to {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes cm-fade-in {
	to {
		opacity: 1;
	}
}
@keyframes cm-intro-away {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}
/* the headline of the top area waits until the intro has gone */
html.cm-intro-on .cm-hero,
html.cm-intro-on .cm-hero * {
	animation-play-state: paused;
}

/* ------------------------------------------------- a wheel photo opened large */
/* photo-wall.js: a native dialog over the page, in the night-and-gold style of the site */
.cm-lightbox {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}
.cm-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}
.cm-lightbox::backdrop {
	background: color-mix(in srgb, var(--color-night) 84%, transparent);
	backdrop-filter: blur(6px);
}
.cm-lightbox-frame {
	position: relative;
	margin: 0;
	width: min(92vw, 1080px);
	padding: clamp(10px, 1.6vw, 18px);
	background: var(--color-night);
	border: 1px solid color-mix(in srgb, var(--color-brand-light) 80%, transparent);
	box-shadow:
		inset 0 0 0 6px var(--color-night),
		inset 0 0 0 7px color-mix(in srgb, var(--color-brand-light) 45%, transparent),
		0 30px 80px -24px #000;
	animation: cm-lightbox-in 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.cm-lightbox-frame img {
	display: block;
	width: 100%;
	max-height: 72vh;
	object-fit: contain;
	background: #000;
}
.cm-lightbox-caption {
	padding: 16px 12px 6px;
	text-align: center;
}
.cm-lightbox-label {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--color-brand-light);
}
.cm-lightbox-alt {
	margin-top: 6px;
	font-size: 15px;
	color: var(--color-moondim);
}
.cm-lightbox-btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--color-brand-dark) 75%, transparent);
	background-color: var(--color-brand);
	background-image: var(--cm-gold-polish);
	color: var(--color-ink);
	box-shadow: 0 8px 18px -8px #000;
	cursor: pointer;
	transition: transform 0.2s ease;
}
.cm-lightbox-btn:hover {
	transform: scale(1.06);
}
.cm-lightbox-btn:focus-visible {
	outline: 2px solid var(--color-brand-light);
	outline-offset: 3px;
}
.cm-lightbox-btn svg {
	width: 20px;
	height: 20px;
}
.cm-lightbox-close {
	top: -20px;
	inset-inline-end: -20px;
}
.cm-lightbox-prev,
.cm-lightbox-next {
	top: 42%;
}
.cm-lightbox-prev {
	inset-inline-start: -23px;
}
.cm-lightbox-next {
	inset-inline-end: -23px;
}
[dir="rtl"] .cm-lightbox-prev svg,
[dir="rtl"] .cm-lightbox-next svg {
	transform: scaleX(-1);
}
@media (max-width: 40rem) {
	.cm-lightbox-close {
		top: -56px;
		inset-inline-end: 0;
	}
	.cm-lightbox-prev,
	.cm-lightbox-next {
		top: auto;
		bottom: -62px;
	}
	.cm-lightbox-prev {
		inset-inline-start: calc(50% - 56px);
	}
	.cm-lightbox-next {
		inset-inline-end: calc(50% - 56px);
	}
}
@keyframes cm-lightbox-in {
	from {
		opacity: 0;
		transform: scale(0.94) translateY(10px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.cm-lightbox-frame {
		animation: none;
	}
}

/* ------------------------------------------- how it works: night sky and gold cards */
/* in the top area the Milky Way stays quiet behind the moon and the headline */
.cm-galaxy-hero .cm-galaxy-photo {
	opacity: 0.5;
}
.cm-process .cm-galaxy-photo {
	opacity: 0.75;
}
/* cards with a double gold frame, a gold star and the title in spaced gold capitals */
.cm-step-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2.4rem 1.75rem 2.1rem;
	text-align: center;
	border-radius: 3px;
	background: color-mix(in srgb, var(--color-night) 84%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-brand-light) 78%, transparent);
	box-shadow:
		inset 0 0 0 6px color-mix(in srgb, var(--color-night) 84%, transparent),
		inset 0 0 0 7px color-mix(in srgb, var(--color-brand-light) 38%, transparent),
		0 24px 50px -30px #000;
	transition:
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.5s ease;
}
@media (hover: hover) and (pointer: fine) {
	.cm-step-card:hover {
		transform: translateY(-4px);
		box-shadow:
			inset 0 0 0 6px color-mix(in srgb, var(--color-night) 84%, transparent),
			inset 0 0 0 7px color-mix(in srgb, var(--color-brand-light) 60%, transparent),
			0 30px 60px -28px #000;
	}
}
.cm-step-star {
	display: block;
	width: 30px;
	height: 30px;
	color: var(--color-brand-light);
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-brand-light) 55%, transparent));
	animation: cm-star-pulse 6.4s ease-in-out calc(var(--cm-i, 0) * -2.1s) infinite;
}
.cm-step-star svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}
.cm-step-star-small {
	opacity: 0.55;
}
@keyframes cm-star-pulse {
	0%,
	100% {
		opacity: 0.75;
		scale: 0.9;
		rotate: 0deg;
	}
	50% {
		opacity: 1;
		scale: 1.08;
		rotate: 22deg;
	}
}
.cm-step-no {
	margin-top: 0.9rem;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--color-brand-light) 80%, transparent);
}
.cm-step-title {
	margin-top: 0.5rem;
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-brand-light);
}
html[lang="ar"] .cm-step-title,
html[lang="zh"] .cm-step-title {
	font-family: inherit;
	letter-spacing: 0.04em;
	font-weight: 600;
}
.cm-step-text {
	margin-top: 1rem;
	font-size: 0.95rem;
	line-height: 1.65;
	color: color-mix(in srgb, var(--color-moonlight) 85%, transparent);
}
@media (prefers-reduced-motion: reduce) {
	.cm-step-star {
		animation: none;
	}
}