/*
 * Animated feature stages for the cosmite.chat home page (row D).
 *
 * Each stage is a gradient panel holding pieces of today's app in the Charcoal
 * theme. Fragments of the app float over the panel's edges and play a short
 * loop that shows the feature. Shared by the canvas artboard and the browser
 * preview (assets/css/stages.css).
 *
 *   .DS-Wrap            640 x 440, scales down with its column; sets the unit
 *     .DS-Stage         the clipped panel with the app pieces
 *     .DS-Float         a placed fragment (the preview moves it with the pointer)
 *       .DS-Card ...    the fragment itself, which carries any animation
 *
 * Fragments are sized in em, and 1em follows the stage width (13px at 640px),
 * so a stage and its fragments scale together. On phones the unit stops at 9px
 * so the text stays readable.
 */

.DS-Wrap {
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	aspect-ratio: 640 / 440;
	font-size: 13px;
	container-type: inline-size;
}
.DS-Wrap > * { font-size: clamp(9px, 2.05cqw, 13.2px); }

.DS-Stage {
	position: absolute;
	inset: 0;
	isolation: isolate;
	overflow: hidden;
	border-radius: 2.1em;
	box-shadow: 0 2.2em 6em rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.DS-Stage > * { position: absolute; z-index: 1; }
/* A few stars and an orbit line behind the app pieces. */
.DS-Stage::before,
.DS-Stage::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
}
.DS-Stage::before {
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 7% 13%, rgba(255, 255, 255, 0.9), transparent 60%),
		radial-gradient(1px 1px at 22% 80%, rgba(255, 255, 255, 0.7), transparent 60%),
		radial-gradient(1.6px 1.6px at 41% 7%, rgba(255, 236, 200, 0.85), transparent 60%),
		radial-gradient(1px 1px at 63% 91%, rgba(255, 255, 255, 0.6), transparent 60%),
		radial-gradient(1.4px 1.4px at 84% 18%, rgba(200, 225, 255, 0.85), transparent 60%),
		radial-gradient(1px 1px at 95% 64%, rgba(255, 255, 255, 0.7), transparent 60%),
		radial-gradient(1.2px 1.2px at 53% 49%, rgba(255, 255, 255, 0.45), transparent 60%),
		radial-gradient(1px 1px at 13% 47%, rgba(255, 255, 255, 0.55), transparent 60%),
		radial-gradient(1.3px 1.3px at 74% 72%, rgba(255, 255, 255, 0.5), transparent 60%);
}
.DS-Stage::after {
	right: -34%;
	top: -58%;
	width: 92%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 0 3.2em rgba(255, 255, 255, 0.025);
}
.DS-Stage--night { background: radial-gradient(120% 95% at 18% 8%, #4a3aa8 0%, #22195e 42%, #0e0a2c 100%); }
.DS-Stage--sunrise { background: linear-gradient(155deg, #d27a1c 0%, #8f3657 40%, #2a1960 76%, #160f3f 100%); }
.DS-Stage--deep { background: radial-gradient(125% 100% at 85% 0%, #2a6bb0 0%, #13305f 48%, #0b1534 100%); }
.DS-Stage--map { background: radial-gradient(130% 100% at 50% 0%, #22346e 0%, #101a40 58%, #090e27 100%); }
.DS-Stage--violet { background: linear-gradient(160deg, #7a3bb0 0%, #3a2280 48%, #160f42 100%); }
.DS-Stage--teal { background: linear-gradient(160deg, #13737a 0%, #153b69 55%, #0c1a38 100%); }

.DS-Shot {
	display: block;
	height: auto;
	max-width: none;
	border-radius: 0.75em;
	box-shadow: 0 1.4em 3.6em rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Fragments, styled like the app in Charcoal. */
.DS-Float { position: absolute; z-index: 2; }
.DS-Card {
	box-sizing: border-box;
	background: rgba(24, 26, 33, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.13);
	color: #e9ecf3;
	box-shadow: 0 1.2em 2.8em rgba(0, 0, 0, 0.45);
	font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: 1em;
	line-height: 1.4;
	text-align: left;
}
.DS-Chip {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.7em 1em;
	border-radius: 1.05em;
	font-weight: 600;
	white-space: nowrap;
}
.DS-Chip svg { flex: none; display: block; width: 1.25em; height: 1.25em; }
.DS-Bubble {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	width: max-content;
	max-width: 22em;
	padding: 0.85em 1.05em;
	border-radius: 1.2em;
	line-height: 1.45;
}
.DS-Bubble > img { flex: none; display: block; width: 2.4em; height: 2.4em; border-radius: 50%; }
.DS-Bubble > div { text-wrap: balance; }
.DS-Name { display: block; margin-bottom: 0.1em; color: #ffffff; font-weight: 700; }
.DS-Label { color: #9aa3b5; font-size: 0.72em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.DS-Emoji,
.DS-Fly,
.DS-Say { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }

/* 1. Windows: each channel opens in its own window as it is clicked (12 s). */
.DS-Win {
	display: block;
	height: auto;
	max-width: none;
	border-radius: 0.7em;
	box-shadow: 0 1.4em 3.6em rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
	transform-origin: 30% 20%;
}
.DS-Win1 { animation: ds-win1 12s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
.DS-Win2 { animation: ds-win2 12s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
.DS-Win3 { animation: ds-win3 12s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
@keyframes ds-win1 {
	0%, 3% { opacity: 0; transform: translateY(1.6em) scale(0.93); }
	7.5%, 84% { opacity: 1; transform: none; }
	89%, 100% { opacity: 0; transform: scale(0.97); }
}
@keyframes ds-win2 {
	0%, 16.5% { opacity: 0; transform: translateY(1.6em) scale(0.93); }
	21%, 85.5% { opacity: 1; transform: none; }
	90.5%, 100% { opacity: 0; transform: scale(0.97); }
}
@keyframes ds-win3 {
	0%, 30% { opacity: 0; transform: translateY(1.6em) scale(0.93); }
	34.5%, 87% { opacity: 1; transform: none; }
	92%, 100% { opacity: 0; transform: scale(0.97); }
}
.DS-Chans { display: block; width: 11.5em; padding: 0.8em 0.7em 0.7em; border-radius: 1.1em; }
.DS-Chans > .DS-Label { display: block; padding: 0 0.75em 0.45em; }
.DS-ChanRows { position: relative; }
.DS-Chan {
	display: flex;
	align-items: center;
	gap: 0.45em;
	height: 2.1em;
	padding: 0 0.65em;
	border-radius: 0.6em;
	color: #aeb6c6;
	font-weight: 600;
}
.DS-Chan b { color: #7f8798; font-weight: 600; }
.DS-Chan1 { animation: ds-row1 12s ease-in-out infinite both; }
.DS-Chan2 { animation: ds-row2 12s ease-in-out infinite both; }
.DS-Chan3 { animation: ds-row3 12s ease-in-out infinite both; }
@keyframes ds-row1 {
	0%, 2.6% { background: transparent; color: #aeb6c6; }
	3.2%, 11% { background: rgba(120, 165, 232, 0.3); color: #ffffff; }
	13%, 84% { background: rgba(255, 255, 255, 0.07); color: #e3e7ef; }
	89%, 100% { background: transparent; color: #aeb6c6; }
}
@keyframes ds-row2 {
	0%, 16.1% { background: transparent; color: #aeb6c6; }
	16.7%, 25% { background: rgba(120, 165, 232, 0.3); color: #ffffff; }
	27%, 85.5% { background: rgba(255, 255, 255, 0.07); color: #e3e7ef; }
	90.5%, 100% { background: transparent; color: #aeb6c6; }
}
@keyframes ds-row3 {
	0%, 29.6% { background: transparent; color: #aeb6c6; }
	30.2%, 38% { background: rgba(120, 165, 232, 0.3); color: #ffffff; }
	40%, 87% { background: rgba(255, 255, 255, 0.07); color: #e3e7ef; }
	92%, 100% { background: transparent; color: #aeb6c6; }
}
.DS-Cursor {
	position: absolute;
	z-index: 3;
	left: 62%;
	top: 0.9em;
	width: 1.5em;
	height: 1.5em;
	transform-origin: 17% 10%;
	animation: ds-cursor 12s ease-in-out infinite both;
}
.DS-Cursor svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0.25em 0.4em rgba(0, 0, 0, 0.5)); }
@keyframes ds-cursor {
	0% { opacity: 0; transform: translate(2em, 2.6em); }
	1.6% { opacity: 1; transform: translate(0, 0); }
	2.4% { transform: translate(0, 0) scale(1); }
	2.8% { transform: translate(0, 0) scale(0.84); }
	3.4% { transform: translate(0, 0) scale(1); }
	11% { transform: translate(0, 0); }
	15% { transform: translate(0, 2.1em); }
	15.9% { transform: translate(0, 2.1em) scale(1); }
	16.3% { transform: translate(0, 2.1em) scale(0.84); }
	16.9% { transform: translate(0, 2.1em) scale(1); }
	25% { transform: translate(0, 2.1em); }
	28.5% { transform: translate(0, 4.2em); }
	29.4% { transform: translate(0, 4.2em) scale(1); }
	29.8% { transform: translate(0, 4.2em) scale(0.84); }
	30.4% { transform: translate(0, 4.2em) scale(1); }
	38% { transform: translate(0, 4.2em); }
	46% { opacity: 1; transform: translate(12em, -1.5em); }
	84% { opacity: 1; transform: translate(12em, -1.5em); }
	89% { opacity: 0; transform: translate(12em, -1.5em); }
	100% { opacity: 0; transform: translate(2em, 2.6em); }
}
.DS-PopLate { animation: ds-pop-late 12s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
@keyframes ds-pop-late {
	0%, 43% { opacity: 0; transform: translateY(1.2em) scale(0.92); }
	47.5%, 85% { opacity: 1; transform: none; }
	90%, 100% { opacity: 0; transform: translateY(-0.4em); }
}

/* 2. Themes: the same chat through every built-in theme, then light mode (14 s, 2 s each). */
.DS-Themes {
	overflow: hidden;
	border-radius: 0.75em;
	box-shadow: 0 1.4em 3.6em rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12);
	aspect-ratio: 900 / 520;
}
.DS-Themes img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.DS-Frame { opacity: 0; animation: ds-frame 14s linear infinite both; }
.DS-Frame0 { opacity: 1; }
.DS-FrameLast { animation-name: ds-frame-last; }
@keyframes ds-frame { 0% { opacity: 0; } 2.86% { opacity: 1; } 17.14% { opacity: 1; } 17.15%, 100% { opacity: 0; } }
@keyframes ds-frame-last { 0% { opacity: 0; } 2.86% { opacity: 1; } 14.29% { opacity: 1; } 17.14%, 100% { opacity: 0; } }
.DS-ThemeCard { display: flex; flex-direction: column; gap: 0.65em; padding: 0.85em 1em 0.9em; border-radius: 1.1em; }
.DS-ThemeTop { display: flex; align-items: baseline; gap: 0.65em; font-weight: 700; color: #ffffff; }
.DS-ThemeName { position: relative; display: inline-block; width: 5.5em; height: 1.4em; }
.DS-Slot { position: absolute; left: 0; top: 0; opacity: 0; animation: ds-slot 14s linear infinite both; }
.DS-Slot.DS-Loop { opacity: 1; animation-name: ds-slot-loop; }
@keyframes ds-slot { 0% { opacity: 0; } 2.5%, 15% { opacity: 1; } 17.5%, 100% { opacity: 0; } }
@keyframes ds-slot-loop { 0%, 15% { opacity: 1; } 17.5%, 85.7% { opacity: 0; } 88.2%, 100% { opacity: 1; } }
.DS-ThemeRow { display: flex; align-items: center; gap: 1em; }
.DS-Swatches { display: flex; gap: 0.62em; }
.DS-Swatch {
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
	animation: ds-swatch 14s linear infinite both;
}
.DS-Swatch.DS-Loop {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 0.16em #181a21, 0 0 0 0.32em #ffffff;
	animation-name: ds-swatch-loop;
}
@keyframes ds-swatch {
	0% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 0 #181a21, 0 0 0 0 rgba(255, 255, 255, 0); transform: scale(1); }
	2.5%, 15% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 0.16em #181a21, 0 0 0 0.32em #ffffff; transform: scale(1.12); }
	17.5%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 0 #181a21, 0 0 0 0 rgba(255, 255, 255, 0); transform: scale(1); }
}
@keyframes ds-swatch-loop {
	0%, 15% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 0.16em #181a21, 0 0 0 0.32em #ffffff; transform: scale(1.12); }
	17.5%, 85.7% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 0 #181a21, 0 0 0 0 rgba(255, 255, 255, 0); transform: scale(1); }
	88.2%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 0.16em #181a21, 0 0 0 0.32em #ffffff; transform: scale(1.12); }
}
.DS-Seg {
	display: inline-flex;
	gap: 0.15em;
	padding: 0.22em;
	border-radius: 0.75em;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.DS-Seg span { padding: 0.25em 0.75em; border-radius: 0.55em; color: #aeb6c6; font-size: 0.9em; font-weight: 600; }
.DS-Seg .DS-SegDark { background: #78a5e8; color: #0d1320; animation: ds-seg-dark 14s linear infinite both; }
.DS-Seg .DS-SegLight { animation: ds-seg-light 14s linear infinite both; }
@keyframes ds-seg-dark {
	0%, 86.5% { background: #78a5e8; color: #0d1320; }
	88%, 99.4% { background: transparent; color: #aeb6c6; }
	100% { background: #78a5e8; color: #0d1320; }
}
@keyframes ds-seg-light {
	0%, 86.5% { background: transparent; color: #aeb6c6; }
	88%, 99.4% { background: #78a5e8; color: #0d1320; }
	100% { background: transparent; color: #aeb6c6; }
}
/* The turtle reaction from #fitness, with more people joining in (6 s). */
.DS-React { position: relative; }
.DS-ReactPill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.8em 0.4em 0.65em;
	border-radius: 999px;
	border-color: rgba(120, 165, 232, 0.7);
	background: rgba(38, 50, 76, 0.96);
	font-weight: 700;
}
.DS-Emoji { font-size: 1.3em; line-height: 1; }
.DS-Count { position: relative; display: inline-block; width: 0.7em; height: 1.4em; overflow: hidden; }
.DS-Count i { position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; animation: ds-count 6s ease-out infinite both; }
.DS-Count i:first-child { opacity: 1; }
.DS-Count i:nth-child(2) { animation-delay: 2s; }
.DS-Count i:nth-child(3) { animation-delay: 4s; }
@keyframes ds-count {
	0% { opacity: 0; transform: translateY(0.7em); }
	5%, 33.3% { opacity: 1; transform: none; }
	38%, 100% { opacity: 0; transform: translateY(-0.7em); }
}
.DS-Fly {
	position: absolute;
	left: 0.5em;
	top: 0;
	font-size: 1.6em;
	line-height: 1;
	opacity: 0;
	animation: ds-fly 6s ease-out infinite both;
}
.DS-Fly1 { --dx: -1.4em; --spin: -16deg; }
.DS-Fly2 { --dx: 0.6em; --spin: 12deg; animation-delay: 2s; }
.DS-Fly3 { --dx: -0.4em; --spin: -6deg; animation-delay: 4s; }
@keyframes ds-fly {
	0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
	3% { opacity: 1; transform: translate(0, -0.5em) scale(1.15); }
	26% { opacity: 0; transform: translate(var(--dx), -3.2em) scale(0.9) rotate(var(--spin)); }
	100% { opacity: 0; transform: translate(var(--dx), -3.2em) scale(0.9); }
}

/* 3. Encryption: the lock closes, Maya's message arrives scrambled and decrypts (8 s). */
.DS-Lock {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.3em;
	height: 2.3em;
	border-radius: 50%;
	background: rgba(95, 211, 141, 0.16);
	color: #5fd38d;
}
.DS-Lock svg { width: 1.3em; height: 1.3em; overflow: visible; }
.DS-Shackle { animation: ds-shackle 8s ease-in-out infinite both; }
@keyframes ds-shackle {
	0%, 3% { transform: translateY(-3px); }
	8% { transform: translateY(0.6px); }
	10%, 92% { transform: translateY(0); }
	97%, 100% { transform: translateY(-3px); }
}
.DS-Crypt { position: relative; display: block; }
.DS-Plain { display: block; animation: ds-plain 8s ease-in-out infinite both; }
.DS-Cipher {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	opacity: 0;
	color: #7fe0c2;
	font: 500 0.93em/1.56 "Cascadia Mono", Consolas, "Courier New", monospace;
	word-break: break-all;
	animation: ds-cipher 8s ease-in-out infinite both;
}
.DS-Cipher i { position: absolute; inset: 0; font-style: normal; animation: ds-flicker 0.48s step-end infinite; }
.DS-Cipher i:nth-child(2) { animation-delay: -0.16s; }
.DS-Cipher i:nth-child(3) { animation-delay: -0.32s; }
@keyframes ds-flicker { 0% { visibility: visible; } 33.3%, 100% { visibility: hidden; } }
@keyframes ds-cipher { 0%, 30% { opacity: 1; filter: none; } 40%, 90% { opacity: 0; filter: blur(4px); } 100% { opacity: 1; filter: none; } }
@keyframes ds-plain { 0%, 30% { opacity: 0; filter: blur(6px); } 40%, 90% { opacity: 1; filter: none; } 100% { opacity: 0; filter: blur(6px); } }
.DS-Reply { animation: ds-reply 8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
@keyframes ds-reply {
	0%, 50% { opacity: 0; transform: translateY(1em) scale(0.94); }
	55%, 88% { opacity: 1; transform: none; }
	94%, 100% { opacity: 0; transform: none; }
}

/* 4. Speed: messages cross the map along its routes and land with friends (6 s). */
.DS-Map { aspect-ratio: 1472 / 753; }
.DS-Map > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.DS-Map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.DS-Route {
	fill: none;
	stroke: #b8e8ff;
	stroke-width: 7;
	stroke-linecap: round;
	stroke-dasharray: 20 200;
	stroke-dashoffset: 20;
	filter: drop-shadow(0 0 5px rgba(140, 210, 255, 0.95));
	animation: ds-route 6s cubic-bezier(0.45, 0, 0.35, 1) infinite both;
}
@keyframes ds-route {
	0% { stroke-dashoffset: 20; opacity: 1; }
	25% { stroke-dashoffset: -100; opacity: 1; }
	25.1%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.DS-Ping {
	fill: none;
	stroke: #ffd27a;
	stroke-width: 3;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: ds-ping 6s ease-out infinite both;
}
@keyframes ds-ping {
	0%, 24% { opacity: 0; transform: scale(0.3); }
	25% { opacity: 1; transform: scale(0.4); }
	42%, 100% { opacity: 0; transform: scale(2.6); }
}
.DS-Pin {
	position: absolute;
	z-index: 1;
	width: 2.5em;
	height: 2.5em;
	margin: -3.05em 0 0 -1.25em;
	animation: ds-pin 6s ease-out infinite both;
}
.DS-Pin img { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 0.16em #ffffff, 0 0.5em 1em rgba(0, 0, 0, 0.5); }
.DS-Pin::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: -0.38em;
	width: 0.5em;
	height: 0.5em;
	margin-left: -0.25em;
	background: #ffffff;
	transform: rotate(45deg);
}
@keyframes ds-pin {
	0%, 24.5% { transform: none; }
	27.5% { transform: translateY(-0.4em) scale(1.08); }
	32%, 100% { transform: none; }
}
.DS-Say {
	position: absolute;
	left: 2.1em;
	top: -1.2em;
	padding: 0.25em 0.5em;
	border-radius: 0.9em 0.9em 0.9em 0.2em;
	background: #ffffff;
	font-size: 1.1em;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	animation: ds-say 6s ease-out infinite both;
}
.DS-SayLeft { left: auto; right: 2.1em; border-radius: 0.9em 0.9em 0.2em 0.9em; }
@keyframes ds-say {
	0%, 25% { opacity: 0; transform: translateY(0.4em) scale(0.7); }
	29%, 52% { opacity: 1; transform: none; }
	58%, 100% { opacity: 0; transform: translateY(-0.3em); }
}
.DS-Send,
.DS-Send .DS-Say { animation-delay: -1.5s; }
.DS-Gear { color: #ffb15c; animation: ds-spin 9s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.DS-LiveDot { flex: none; width: 0.65em; height: 0.65em; border-radius: 50%; background: #5fd38d; animation: ds-live 2s ease-out infinite; }
@keyframes ds-live { 0% { box-shadow: 0 0 0 0 rgba(95, 211, 141, 0.6); } 100% { box-shadow: 0 0 0 0.75em rgba(95, 211, 141, 0); } }

/* 5. Voice: no more leaving one room for another; people talk in turn (8 s and 6 s). */
.DS-Strike {
	background: linear-gradient(#ff8f7f, #ff8f7f) no-repeat 0 58% / 100% 0.12em;
	color: #8f96a6;
	animation: ds-strike 8s ease-in-out infinite both;
}
@keyframes ds-strike {
	0%, 16% { background-size: 0% 0.12em; color: #e9ecf3; }
	34%, 88% { background-size: 100% 0.12em; color: #8f96a6; }
	94%, 100% { background-size: 0% 0.12em; color: #e9ecf3; }
}
.DS-After { animation: ds-after 8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
@keyframes ds-after {
	0%, 36% { opacity: 0; transform: translateY(0.8em) scale(0.92); }
	41%, 88% { opacity: 1; transform: none; }
	94%, 100% { opacity: 0; transform: none; }
}
.DS-Speakers { display: flex; flex-direction: column; gap: 0.6em; padding: 0.8em 1em 0.95em; border-radius: 1.1em; }
.DS-SpeakersHead { display: flex; align-items: center; gap: 0.5em; color: #ffffff; font-weight: 700; }
.DS-SpeakersHead small { color: #9aa3b5; font-size: 0.85em; font-weight: 600; }
.DS-Eq { display: inline-flex; align-items: flex-end; gap: 0.14em; height: 0.95em; }
.DS-Eq i { width: 0.2em; height: 100%; border-radius: 0.1em; background: #5fd38d; transform-origin: bottom; animation: ds-eq 1.1s ease-in-out infinite; }
.DS-Eq i:nth-child(2) { animation-delay: -0.35s; }
.DS-Eq i:nth-child(3) { animation-delay: -0.7s; }
@keyframes ds-eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.DS-SpeakerRow { display: flex; gap: 0.6em; }
.DS-Speaker { position: relative; flex: none; width: 2.9em; height: 2.9em; border-radius: 50%; }
.DS-Speaker img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.DS-Speaker::after {
	content: "";
	position: absolute;
	inset: -0.22em;
	border-radius: 50%;
	box-shadow: 0 0 0 0.17em #5fd38d;
	opacity: 0;
	animation: ds-speak 6s ease-in-out infinite both;
}
.DS-Speaker:nth-child(2)::after { animation-delay: 1.5s; }
.DS-Speaker:nth-child(3)::after { animation-delay: 3s; }
.DS-Speaker:nth-child(4)::after { animation-delay: 4.5s; }
@keyframes ds-speak {
	0% { opacity: 0; transform: scale(0.92); }
	4% { opacity: 1; transform: scale(1); }
	9% { transform: scale(1.07); }
	14% { transform: scale(1); }
	19% { opacity: 1; transform: scale(1.07); }
	25%, 100% { opacity: 0; transform: scale(0.96); }
}
.DS-Room { gap: 0.55em; padding: 0.55em 0.6em 0.55em 1em; }
.DS-Pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.38em 0.8em;
	border-radius: 0.5em;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #cfd6e4;
	font-size: 0.92em;
}
.DS-Chip .DS-Pill svg { width: 1.05em; height: 1.05em; }
.DS-On { background: #78a5e8; border-color: #78a5e8; color: #0d1320; }
.DS-Talk { animation: ds-talk 8s ease-in-out infinite both; }
@keyframes ds-talk {
	0%, 44% { background: #78a5e8; border-color: #78a5e8; color: #0d1320; }
	47%, 94% { background: transparent; border-color: rgba(255, 255, 255, 0.18); color: #cfd6e4; }
	97%, 100% { background: #78a5e8; border-color: #78a5e8; color: #0d1320; }
}

/* 6. Spaces: permissions switch on for a group; the matrix lights up (9 s and 3.6 s). */
.DS-Perms { display: flex; flex-direction: column; width: 15.5em; padding: 0.85em 1em 0.7em; border-radius: 1.1em; }
.DS-PermsHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8em;
	padding-bottom: 0.6em;
	margin-bottom: 0.25em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.DS-Group { padding: 0.12em 0.6em; border-radius: 999px; background: rgba(120, 165, 232, 0.2); color: #cfe0ff; font-weight: 700; }
.DS-PermRow { display: flex; align-items: center; justify-content: space-between; gap: 1em; height: 2.2em; color: #dfe4ee; font-weight: 500; }
.DS-Toggle {
	position: relative;
	flex: none;
	width: 2.6em;
	height: 1.5em;
	border-radius: 999px;
	background: #5fd38d;
	animation: ds-track 9s ease-in-out infinite both;
}
.DS-Toggle::after {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0.2em;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.35);
	transform: translateX(1.1em);
	animation: ds-knob 9s ease-in-out infinite both;
}
.DS-T2, .DS-T2::after { animation-delay: 0.6s; }
.DS-T3, .DS-T3::after { animation-delay: 1.2s; }
.DS-T4, .DS-T4::after { animation-delay: 1.8s; }
@keyframes ds-track { 0%, 12% { background: rgba(255, 255, 255, 0.18); } 16%, 72% { background: #5fd38d; } 76%, 100% { background: rgba(255, 255, 255, 0.18); } }
@keyframes ds-knob { 0%, 12% { transform: translateX(0); } 16%, 72% { transform: translateX(1.1em); } 76%, 100% { transform: translateX(0); } }
.DS-Matrix { display: block; padding: 0.8em 1em 0.95em; border-radius: 1.1em; }
.DS-Grid { display: grid; grid-template-columns: repeat(6, 1em); gap: 0.38em; margin-top: 0.65em; }
.DS-Grid i {
	width: 1em;
	height: 1em;
	border-radius: 0.28em;
	background: rgba(255, 255, 255, 0.1);
	animation: ds-cell 3.6s ease-in-out infinite both;
}
.DS-Grid i.DS-Grant { background: rgba(95, 211, 141, 0.78); }
/* A diagonal sweep: 4 rows of 6, each diagonal 0.12 s after the last. */
.DS-Grid i:nth-child(2), .DS-Grid i:nth-child(7) { animation-delay: 0.12s; }
.DS-Grid i:nth-child(3), .DS-Grid i:nth-child(8), .DS-Grid i:nth-child(13) { animation-delay: 0.24s; }
.DS-Grid i:nth-child(4), .DS-Grid i:nth-child(9), .DS-Grid i:nth-child(14), .DS-Grid i:nth-child(19) { animation-delay: 0.36s; }
.DS-Grid i:nth-child(5), .DS-Grid i:nth-child(10), .DS-Grid i:nth-child(15), .DS-Grid i:nth-child(20) { animation-delay: 0.48s; }
.DS-Grid i:nth-child(6), .DS-Grid i:nth-child(11), .DS-Grid i:nth-child(16), .DS-Grid i:nth-child(21) { animation-delay: 0.6s; }
.DS-Grid i:nth-child(12), .DS-Grid i:nth-child(17), .DS-Grid i:nth-child(22) { animation-delay: 0.72s; }
.DS-Grid i:nth-child(18), .DS-Grid i:nth-child(23) { animation-delay: 0.84s; }
.DS-Grid i:nth-child(24) { animation-delay: 0.96s; }
@keyframes ds-cell {
	0%, 100% { transform: scale(1); filter: brightness(1); }
	12% { transform: scale(1.2); filter: brightness(1.9); }
	26% { transform: scale(1); filter: brightness(1); }
}

/* Smaller stages beside a form (Sign up, Log in) keep their text larger. */
.DS-Compact > * { font-size: clamp(10px, 2.9cqw, 13.2px); }

/* Sign up: the three reasons arrive one by one (9 s). */
.DS-Tick {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background: rgba(255, 177, 92, 0.16);
	color: #ffb15c;
}
.DS-Tick svg { width: 1.1em; height: 1.1em; }
.DS-Step1 { animation: ds-step1 9s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
.DS-Step2 { animation: ds-step2 9s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
.DS-Step3 { animation: ds-step3 9s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
@keyframes ds-step1 { 0%, 4% { opacity: 0; transform: translateX(-1.2em); } 10%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes ds-step2 { 0%, 19% { opacity: 0; transform: translateX(-1.2em); } 25%, 89% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes ds-step3 { 0%, 34% { opacity: 0; transform: translateX(-1.2em); } 40%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

/* Log in: Maya's conversation waits with two unread, and friends are online (8 s). */
.DS-DmRow { display: flex; align-items: center; gap: 0.75em; width: 19em; padding: 0.75em 0.9em; border-radius: 1.1em; animation: ds-arrive 8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
.DS-DmRow > img { flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; }
.DS-DmRow > div { flex: 1; min-width: 0; }
.DS-DmRow span { display: block; overflow: hidden; color: #b9c1d1; font-size: 0.92em; white-space: nowrap; text-overflow: ellipsis; }
.DS-Badge {
	flex: none;
	display: grid;
	place-items: center;
	min-width: 1.6em;
	height: 1.6em;
	border-radius: 999px;
	background: #78a5e8;
	color: #0d1320;
	font-size: 0.85em;
	font-weight: 800;
	animation: ds-badge 8s ease-out infinite both;
}
@keyframes ds-badge { 0%, 30% { transform: scale(0); } 34% { transform: scale(1.3); } 38%, 90% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
.DS-Online { animation: ds-online 8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
.DS-Faces { display: flex; }
.DS-Faces img { width: 1.9em; height: 1.9em; margin-left: -0.55em; border-radius: 50%; box-shadow: 0 0 0 0.16em rgba(24, 26, 33, 0.95); }
.DS-Faces img:first-child { margin-left: 0; }
@keyframes ds-online { 0%, 44% { opacity: 0; transform: translateY(0.8em) scale(0.94); } 50%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

/* Log in: a NEW line, then the message waiting under it (8 s). */
.DS-NewLine {
	display: flex;
	align-items: center;
	gap: 0.6em;
	width: 16em;
	color: #ff8f6b;
	font: 700 0.8em/1 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
	letter-spacing: 0.08em;
	animation: ds-newline 8s ease-out infinite both;
}
.DS-NewLine::before { content: ""; flex: 1; height: 2px; border-radius: 2px; background: currentColor; }
@keyframes ds-newline { 0%, 6% { opacity: 0; transform: scaleX(0.6); } 14%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.DS-Arrive { animation: ds-arrive 8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; }
@keyframes ds-arrive { 0%, 20% { opacity: 0; transform: translateY(1em) scale(0.94); } 27%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

/* Download: the installer fills up while the windows open (12 s, with ds-win). */
.DS-Setup img { flex: none; display: block; width: 1.5em; height: auto; filter: invert(1); }
.DS-Setup b { display: block; font-weight: 700; }
.DS-Bar { display: block; width: 10em; height: 0.36em; margin-top: 0.5em; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.DS-Bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #78a5e8, #b9d4ff); transform-origin: left; animation: ds-bar 12s ease-in-out infinite both; }
@keyframes ds-bar { 0%, 3% { transform: scaleX(0); opacity: 1; } 30%, 86% { transform: scaleX(1); opacity: 1; } 92%, 100% { transform: scaleX(1); opacity: 0; } }

/* Theme cycle and map route timing (after the rules above, so it is not reset). */
.DS-D1 { animation-delay: 2s; }
.DS-D2 { animation-delay: 4s; }
.DS-D3 { animation-delay: 6s; }
.DS-D4 { animation-delay: 8s; }
.DS-D5 { animation-delay: 10s; }
.DS-R2, .DS-R2 .DS-Say { animation-delay: 1s; }
.DS-R3, .DS-R3 .DS-Say { animation-delay: 2s; }
.DS-R4, .DS-R4 .DS-Say { animation-delay: 3s; }
.DS-R5, .DS-R5 .DS-Say { animation-delay: 4s; }
.DS-R6, .DS-R6 .DS-Say { animation-delay: 5s; }

/* The preview pauses a stage while it is off screen (d-preview.js adds DS-Idle). */
.DS-Idle *,
.DS-Idle *::before,
.DS-Idle *::after { animation-play-state: paused !important; }

/* Phones: drop the extra chips so the stage stays readable. */
@media (max-width: 560px) {
	.DS-Minor { display: none; }
}

/* Motion off: everything at rest, in Charcoal, with the message decrypted. */
@media (prefers-reduced-motion: reduce) {
	.DS-Wrap *,
	.DS-Wrap *::before,
	.DS-Wrap *::after { animation: none !important; }
	.DS-Cursor,
	.DS-Fly,
	.DS-Cipher,
	.DS-Say { display: none; }
}