/*
 * Levo's demos (stage.js): a slice of a Mac's desktop with its menu bar, Levo's popover hanging from
 * its item, and a cursor. The popover's own parts and tokens come from demo.css (.lv-kit); this file
 * frames them and adds the motion they need. Light and dark follow html.dark, as the page does.
 */

.lvs {
	position: relative;
	display: block;
	width: 100%;
	height: var(--lvs-h, 460px);
	overflow: hidden;
	border-radius: var(--ls-r, 16px);
	isolation: isolate;
	contain: layout paint;
	-webkit-user-select: none;
	user-select: none;
}
.lvs[data-levo-stage="clean"] { --lvs-h: 400px; }
.lvs[data-levo-stage="levels"] { --lvs-h: 486px; }
.lvs[data-levo-stage="cmdk"], .lvs[data-levo-stage="apps"] { --lvs-h: 448px; }
.lvs[data-levo-stage="locked"] { --lvs-h: 470px; }
.lvs[data-levo-stage="sessions"], .lvs[data-levo-stage="why"] { --lvs-h: 460px; }
.lvs-in {
	position: absolute;
	top: 0;
	left: 0;
	height: var(--lvs-h, 460px);
	transform-origin: 0 0;
	overflow: hidden;
}

/* The desktop: the simulator's wallpaper (demo.css .lv-wall), and its menu bar. */
.lvs-wall {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 55% at 78% 18%, rgba(255, 196, 160, 0.9) 0%, rgba(255, 196, 160, 0) 70%),
		radial-gradient(55% 60% at 12% 88%, rgba(150, 190, 255, 0.95) 0%, rgba(150, 190, 255, 0) 70%),
		radial-gradient(45% 45% at 48% 60%, rgba(182, 212, 255, 0.85) 0%, rgba(182, 212, 255, 0) 70%),
		radial-gradient(40% 40% at 95% 85%, rgba(160, 228, 220, 0.8) 0%, rgba(160, 228, 220, 0) 70%),
		linear-gradient(160deg, #EEF1F8, #F6EEEA);
}
html.dark .lvs-wall {
	background:
		radial-gradient(60% 55% at 78% 18%, rgba(36, 84, 196, 0.75) 0%, rgba(36, 84, 196, 0) 70%),
		radial-gradient(55% 60% at 12% 88%, rgba(28, 98, 160, 0.8) 0%, rgba(28, 98, 160, 0) 70%),
		radial-gradient(45% 45% at 50% 62%, rgba(22, 62, 130, 0.5) 0%, rgba(22, 62, 130, 0) 70%),
		radial-gradient(40% 40% at 95% 88%, rgba(20, 120, 120, 0.55) 0%, rgba(20, 120, 120, 0) 70%),
		linear-gradient(160deg, #0A0E1A, #0B1220);
}
.lvs-mb {
	position: absolute;
	inset: 0 0 auto;
	z-index: 3;
	height: 28px;
	padding: 0 10px 0 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--mb-ink);
	background: var(--mb-bg);
	font-size: 13px;
	white-space: nowrap;
}
.lvs-mb-l, .lvs-mb-r { display: flex; align-items: center; }
.lvs-mb-l b { font-weight: 700; padding: 0 9px 0 2px; }
.lvs-mb-apple { display: inline-flex; padding: 0 10px; }
.lvs-mb-apple .lv-sym { margin-top: -2px; }
.lvs-mb-menu { padding: 0 9px; }
.lvs-mb-x { display: inline-flex; padding: 0 8px; }
.lvs-mb-clock { padding-left: 8px; font-variant-numeric: tabular-nums; }
.lvs-mb-levo {
	width: 34px;
	height: 22px;
	margin-right: 2px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s;
}
.lvs-mb-levo.is-open { background: rgb(var(--fg) / 0.12); }
html.dark .lvs-mb-levo.is-open { background: rgba(255, 255, 255, 0.2); }
.lvs-mark { width: 17px; height: 10.87px; overflow: visible; }
.lvs-mark path { fill: none; stroke: currentColor; stroke-width: 1.5px; transition: fill .3s; }
.lvs-mb-levo.is-ready .lvs-mark path { fill: currentColor; stroke: none; }
.lvs.is-narrow .lvs-mb-menu:nth-child(n+5) { display: none; }
.lvs.is-tight .lvs-mb-menu, .lvs.is-tight .lvs-mb-x { display: none; }

/* The popover under Levo's item, which sits with the other extras on the trailing side: macOS keeps it on
   screen, so it lines up with the trailing edge, at the app's 360 pt. */
.lvs-popw {
	position: absolute;
	z-index: 2;
	top: 34px;
	right: 8px;
	width: 360px;
	transform-origin: calc(100% - 180px) 0;
	transition: opacity .2s, transform .3s var(--ease-out);
}
.lvs-popw.is-closed { opacity: 0; transform: translateY(-6px) scale(.985); transition: opacity .2s, transform .25s var(--ease-out); }
.lvs-pop.lv-pop { position: relative; width: 360px; max-height: none; opacity: 1; visibility: visible; transform: none; transition: none; }
.lvs .lv-row { cursor: default; }
@media (hover: hover) and (pointer: fine) { .lvs .lv-row:hover { background: transparent; } }
.lvs .lv-row.is-hover { background: rgb(var(--sel) / 0.04); }
.lvs .lv-row.is-hover .lv-info { display: inline-flex; }
.lvs .lv-info.is-shown { display: inline-flex; }
@media (hover: hover) and (pointer: fine) { .lvs .lv-cb:hover { box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.2); } }
.lvs .lv-cb[aria-checked="true"], .lvs .lv-cb[aria-checked="mixed"] { box-shadow: none; }
.lvs .lv-chev { display: inline-flex; align-items: center; justify-content: center; transition: transform .25s var(--ease-out); }
.lvs .lv-tick { transition: background-color .3s ease; }
.lvs .lv-tick.is-data { background-color: #FF3B30; }
.lvs .lv-tick.is-sys { background-color: #F2B800; }
.lvs .lv-tick.is-apps { background-color: #FF9500; }
html.dark .lvs .lv-tick.is-data { background-color: #FF453A; }
html.dark .lvs .lv-tick.is-sys { background-color: #FFD60A; }
html.dark .lvs .lv-tick.is-apps { background-color: #FF9F0A; }
.lvs .lv-tick.is-ready { background-color: var(--lv-ready); }
.lvs .lv-tick.is-free { background-color: rgb(var(--fg) / 0.14); }
.lvs .lv-size.is-quiet { color: rgb(var(--fg) / 0.45); }
.lvs-appic { flex: none; display: block; width: var(--px, 18px); height: var(--px, 18px); }
.lvs-appic img { width: 100%; height: 100%; }

/* A row that goes: it closes while it fades and slides right. */
.lvs .lv-row.lvs-going { height: 0 !important; min-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateX(14px); transition: height .42s var(--ease-out) .1s, min-height .42s var(--ease-out) .1s, padding .42s var(--ease-out) .1s, opacity .14s, transform .3s var(--ease-out); }
.lvs .lv-row.is-gone { height: 0; transition: none; }

/* A lock that becomes a tick: they share one slot. */
.lvs-slot { position: relative; display: inline-grid; flex: none; width: 14px; height: 14px; }
.lvs-slot > * { grid-area: 1 / 1; transition: opacity .2s, transform .25s var(--spring); }
.lvs .lv-irow.is-held .lvs-slot .lv-cb { opacity: 0; transform: scale(.4); }
.lvs .lv-irow:not(.is-held) .lvs-slot .lv-held { opacity: 0; transform: scale(.4); }
.lvs .lv-irow.is-unheld .lv-iname { color: rgb(var(--fg) / 0.85); }

/* Sessions open a level deeper; the room opens with them. */
.lvs-parts { height: 0; overflow: hidden; transition: height .45s var(--ease-out); }
.lvs-parts-in { opacity: 0; transition: opacity .25s; }
.lvs-parts.is-in .lvs-parts-in { opacity: 1; transition: opacity .3s .12s; }
.lvs .lv-irow.is-open .lv-chev, .lvs .lv-grow.is-open .lv-chev { transform: rotate(90deg); }

/* A long toast has the bar to itself. */
.lvs .lv-actions.is-long .lv-act-right { display: none; }

/* The bubble behind ⓘ. */
.lvs-bubble { animation: none; opacity: 0; transform: translateY(2px); transition: opacity .16s, transform .16s var(--ease-out); }
.lvs-bubble.is-in { opacity: 1; transform: none; }
.lvs-bubble .lv-link { display: inline-block; margin-top: 10px; }
.lvs-bubble.is-above::before { top: auto; bottom: -6px; }
.lvs-bubble .lv-link.is-press { background: rgb(var(--fg) / 0.16); }

/* The level menu. */
.lvs-menu { top: 230px; right: 16px; opacity: 0; transform: translateY(-2px); pointer-events: none; animation: none; transition: opacity .15s, transform .15s var(--ease-out); }
.lvs-menu.is-in { opacity: 1; transform: none; }
.lvs-menu .lv-mitem.is-hl { background: var(--accent); color: #fff; }
.lvs-menu .lv-mitem { cursor: default; }
.lvs [data-lvword] { display: inline-block; transition: opacity .16s, transform .16s var(--ease-out); }
.lvs [data-lvword].is-swap { opacity: 0; transform: translateY(-3px); }

/* ⌘K: opens and closes at once, as the app's; the search field as text, with its caret. */
.lvs .lvs-now { transition: none; }
.lvs-panel .lv-pitem { cursor: default; }
.lvs-input { display: flex; align-items: center; height: 40px; padding: 0 16px; font-size: 13px; color: rgb(var(--fg)); white-space: pre; }
.lvs-caret { width: 1.5px; height: 16px; margin-left: 1px; background: var(--accent); animation: lvs-blink 1s steps(1) infinite; }
.lvs-ph { color: rgb(var(--fg) / 0.5); margin-left: -2.5px; }
.lvs-ph[hidden] { display: none; }
@keyframes lvs-blink { 50% { opacity: 0; } }

/* The keys pressed, on the desk under the popover's corner. */
.lvs-keys { position: absolute; z-index: 4; left: 50%; bottom: 22px; display: flex; gap: 6px; transform: translate(-50%, 8px); opacity: 0; transition: opacity .2s, transform .3s var(--ease-out); pointer-events: none; }
.lvs-keys.is-in { opacity: 1; transform: translate(-50%, 0); }
/* The site's one keycap (levo.css .st-keys kbd, help.css .art kbd): a light key, a hairline round it, a thicker
   edge at its foot, the system font; pressed, it sinks and loses the edge. Here it floats, so it has a shadow. */
.lvs-key { min-width: 40px; height: 40px; padding: 0 10px; box-sizing: border-box; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: #FFF; color: rgb(var(--fg)); font: 500 17px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; box-shadow: inset 0 0 0 0.5px rgb(var(--fg) / 0.16), inset 0 -2px 0 rgb(var(--fg) / 0.1), 0 8px 20px -8px rgba(0, 0, 0, 0.3); transition: transform .06s, box-shadow .06s; }
.lvs-keys.is-down .lvs-key { transform: translateY(2px); box-shadow: inset 0 0 0 0.5px rgb(var(--fg) / 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 12px -6px rgba(0, 0, 0, 0.3); }
html.dark .lvs-key { background: #3A3A3C; }

/* Numbers that roll: each changed digit slides up, the last first. */
.lvs-roll { display: inline-flex; white-space: pre; }
.lvs-dg { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.lvs-dg-o, .lvs-dg-n { display: block; transition: transform .5s cubic-bezier(.45, 0, .1, 1) var(--d), opacity .5s var(--d); }
.lvs-dg-n { position: absolute; left: 0; top: 0; transform: translateY(100%); opacity: 0; }
.lvs-roll.is-rolling .lvs-dg-o { transform: translateY(-100%); opacity: 0; }
.lvs-roll.is-rolling .lvs-dg-n { transform: none; opacity: 1; }

/* The cursor: macOS's arrow, travelling on one curve, pressing on another. */
.lvs-cursor { position: absolute; z-index: 30; top: -9px; left: -6px; opacity: 0; pointer-events: none; will-change: transform; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.45, 0, .1, 1), ease; }
.lvs-cursor.is-on { opacity: 1; }
.lvs-cursor svg { display: block; transform-origin: 9px 6px; transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.lvs-cursor.is-press svg { transform: scale(.88); transition-duration: .08s; }

@media (prefers-reduced-motion: reduce) {
	.lvs *, .lvs *::before { transition-duration: 0s !important; animation: none !important; }
}

/* Rows here are spans, not the popover's buttons: give them a button's box. */
.lvs .lv-pitem, .lvs .lv-mitem, .lvs .lv-primary, .lvs .lv-kbtn, .lvs .lv-crow, .lvs .lv-row { box-sizing: border-box; }

/* ------------------------------------------------------------ Where the pages put them */

/* The help, compare and press pages (help.css): a figure in an article, or beside a hub's title. */
.lvs-fig { margin: 32px 0 8px; }
.lvs-fig .lvs, .lvs-hero .lvs { box-shadow: var(--lift); }
.lvs-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: 48px; align-items: start; }
.lvs-hero > .lvs { margin-top: 8px; }
@media (max-width: 960px) {
	.lvs-hero { grid-template-columns: minmax(0, 1fr); }
	.lvs-hero > .lvs { margin-top: 32px; }
}

/* The Levo page: the two big tiles in "Try it here" (index.html): each spans two of the four columns, beside two
   small tiles, as a checkerboard (small, small, big / big, small, small); two columns stack them by pairs and
   phones one by one. A bare stage drops the desk: the tile's own wash shows through, the menu bar keeps only its
   trailing part, and the demo fades into the tile above the caption, as the small tiles' do. */
.st-tiles .lvs-tile { grid-column: span 2; }
.lvs-tile[data-tile="lvs-apps"] { --bt-wash: radial-gradient(80% 70% at 100% 0%, var(--bt-a), transparent 70%), radial-gradient(70% 60% at 0% 100%, var(--bt-r), transparent 70%); }
.lvs-tile[data-tile="lvs-sessions"] { --bt-wash: radial-gradient(80% 70% at 0% 0%, var(--bt-p), transparent 70%), radial-gradient(70% 60% at 100% 100%, var(--bt-t), transparent 70%); }
.lvs-tile .lvs { --lvs-h: 420px; border-radius: 0; box-shadow: none; }
.lvs[data-fill] { flex: 1 1 auto; height: auto; min-height: var(--lvs-h); }
.lvs[data-bare] { background: transparent; -webkit-mask-image: linear-gradient(#000 calc(100% - 96px), transparent); mask-image: linear-gradient(#000 calc(100% - 96px), transparent); }
.lvs[data-bare] .lvs-wall, .lvs[data-bare] .lvs-mb-l { display: none; }
.lvs[data-bare] .lvs-mb { justify-content: flex-end; background: transparent; }
.lvs[data-bare] .lvs-mb-r { padding: 0 2px; border-radius: 0 0 0 10px; }
@media (max-width: 760px) { .st-tiles .lvs-tile { grid-column: auto; } }