/* Shared spatial brand: an optional, bounded enhancement of the existing UI. */
.alki-spatial {
	--spatial-size: 160px;
	position: relative;
	isolation: isolate;
	flex: 0 0 var(--spatial-size);
	width: var(--spatial-size);
	height: var(--spatial-size);
	max-width: 100%;
	overflow: hidden;
	contain: layout paint;
	user-select: none;
	-webkit-user-select: none;
}

.alki-spatial::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: 22%;
	bottom: 13%;
	left: 22%;
	height: 8%;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.36);
	filter: blur(7px);
}

.alki-spatial > img,
.alki-spatial > canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.alki-spatial > img {
	object-fit: contain;
	padding: 10%;
	opacity: 1;
	filter: drop-shadow(0 9px 10px rgba(0, 0, 0, 0.24));
}

.alki-spatial > canvas {
	opacity: 0;
}
.alki-spatial[data-spatial-state="ready"] > img {
	opacity: 0;
}
.alki-spatial[data-spatial-state="ready"] > canvas {
	opacity: 1;
}

/* The media remains separate from the real product preview and hero copy. */
.home-spatial-intro {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 100%;
}

.home-spatial-intro > .eyebrow {
	flex: 1 1 0;
	min-width: 0;
	max-width: 27ch;
}

.home-spatial-intro .alki-spatial {
	margin-block: -20px;
}

.restaurant-spatial-signature {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 22px;
}

.restaurant-spatial-signature .alki-spatial {
	--spatial-size: 110px;
}
.restaurant-spatial-signature .hero-proof {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

/* Operational surfaces reserve a small header object, never a new banner. */
.alki-spatial[data-spatial-density="compact"] {
	--spatial-size: 64px;
}
.alki-spatial[data-spatial-density="compact"]::before {
	height: 6%;
	filter: blur(4px);
}
.alki-spatial[data-spatial-density="compact"] > img {
	padding: 8%;
	filter: none;
}

:is(.operation-page, .cashier-page) .app-header > .alki-spatial,
.admin-page .admin-header > .alki-spatial {
	margin-block: -6px;
	margin-left: auto;
}

:is(.operation-page, .cashier-page) .app-header > .brand {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.cashier-page .app-header {
	gap: 16px;
	flex-wrap: nowrap;
}
.cashier-page .app-header {
	display: flex;
	align-items: center;
}
:where(.operation-page, .cashier-page) .app-header > .brand > span {
	min-width: 0;
	overflow-wrap: anywhere;
}
:where(.operation-page, .cashier-page) .app-header > .brand > img {
	flex-shrink: 0;
}
.cashier-page .app-header .header-end {
	flex: 0 0 auto;
	margin-left: 0;
}
.alki-ui-icon {
	display: inline-block;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--ui-icon) center / contain no-repeat;
	mask: var(--ui-icon) center / contain no-repeat;
}
.admin-page .admin-header {
	display: flex;
	gap: 20px;
	flex-wrap: nowrap;
}
.admin-page .admin-brand {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}
.admin-page .admin-brand > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Keyboard feedback stays immediate; pointer feedback expresses a press only. */
.alki-spatial-surface
	:is(.app-header, .admin-header)
	:is(a, button):focus-visible {
	outline: 3px solid var(--venue-header-text, #d9b77f);
	outline-offset: 4px;
	transition: none;
}

.alki-spatial-surface
	.app-header
	:is(#open-cashier-menu, #open-operation-menu, #logout):focus-visible {
	outline: 3px solid var(--venue-header-text, #d9b77f);
	outline-offset: 4px;
	transition: none;
}

.alki-spatial-surface :is(.app-header, .admin-header) button:disabled {
	cursor: not-allowed;
}

@media (prefers-reduced-motion: no-preference) {
	.alki-spatial > img,
	.alki-spatial > canvas {
		transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.alki-spatial-surface
		:is(.btn, .nav-start, .button, .entry-login):active:not(:focus-visible) {
		transform: scale(0.98);
		transition: transform 100ms cubic-bezier(0.22, 1, 0.36, 1);
	}
}

@media (hover: hover) and (pointer: fine) {
	.alki-spatial-surface
		:is(.app-header, .admin-header)
		button:not(:disabled):hover {
		background-color: rgba(255, 255, 255, 0.08);
	}
}

@media (max-width: 920px) and (min-width: 681px) {
	.home-spatial-intro {
		justify-content: center;
	}
	.home-spatial-intro > .eyebrow {
		flex: 0 1 auto;
		text-align: left;
	}
	.home-spatial-intro .alki-spatial {
		--spatial-size: 140px;
	}
}

@media (max-width: 720px) {
	.restaurant-spatial-signature {
		gap: 12px;
		margin-top: 20px;
	}
	.restaurant-spatial-signature .alki-spatial {
		--spatial-size: 88px;
	}
	.restaurant-spatial-signature .hero-proof {
		margin: 0;
	}

	.alki-spatial[data-spatial-density="compact"] {
		--spatial-size: 56px;
	}
	:is(.operation-page, .cashier-page) .app-header > .alki-spatial,
	.admin-page .admin-header > .alki-spatial {
		margin-block: -4px;
	}
	.cashier-page .app-header {
		gap: 12px;
	}
	.admin-page .admin-header {
		gap: 12px;
	}
	.admin-page .admin-header > .alki-spatial {
		margin-block: -7px;
	}
}

@media (max-width: 680px) {
	.home-spatial-intro {
		gap: 12px;
	}
	.home-spatial-intro .alki-spatial {
		--spatial-size: 112px;
		/* Use the existing hero breathing room, not another row before its CTA. */
		margin-block: -38px;
	}
	.home-spatial-intro > .eyebrow {
		max-width: 25ch;
		font-size: 10px;
		letter-spacing: 0.12em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alki-spatial > img,
	.alki-spatial > canvas {
		transition: none;
	}
	.alki-spatial-surface :is(.btn, .nav-start, .button, .entry-login):active {
		transform: none;
	}
}

@media (forced-colors: active) {
	.alki-spatial::before {
		display: none;
	}
	.alki-spatial-surface
		:is(.app-header, .admin-header)
		:is(a, button):focus-visible {
		outline-color: Highlight;
	}
	.alki-spatial-surface
		.app-header
		:is(#open-cashier-menu, #open-operation-menu, #logout):focus-visible {
		outline-color: Highlight;
	}
}

@media print {
	.alki-spatial {
		display: none;
	}
}