/**
 * VisionaryCue Commerce Pro - virtual restaurant.
 *
 * Depth is real here: the stage carries a perspective and each scene sits on
 * its own Z plane, so moving in is a camera move rather than a cross-fade.
 * The script only writes transform, opacity and filter — everything else is
 * declared once, which keeps the per-frame work off the layout path.
 *
 * The scene runs dark by design, so it uses its own surface tokens rather than
 * the site palette. Accents still come from the admin colours.
 */

.vc-rest {
	--vc-rest-ink: #f4f1ea;
	--vc-rest-dim: #a29a8d;
	--vc-rest-deep: #0d0b12;
	--vc-rest-panel: rgba(255, 255, 255, 0.06);
	--vc-rest-edge: rgba(255, 255, 255, 0.12);
	--vc-rest-glow: var(--vc-primary);

	position: relative;
	min-height: 100svh;
	background: radial-gradient(120% 80% at 50% 0%, #1c1830 0%, var(--vc-rest-deep) 62%);
	color: var(--vc-rest-ink);
	overflow: hidden;
	isolation: isolate;
}

/* The scene is inert until the script confirms it can drive it. */
.vc-rest:not(.is-ready) .vc-rest__cue { opacity: 0; }

.vc-rest__stage {
	position: relative;
	min-height: 100svh;
	perspective: 1200px;
	perspective-origin: 50% 46%;
	transform-style: preserve-3d;
	touch-action: pan-x;
}

.vc-rest__stage:focus-visible { outline: none; }

/* ------------------------------------------------------------- Backdrop --- */

.vc-rest__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	will-change: transform;
}

.vc-rest__layer--sky {
	background:
		radial-gradient(60% 40% at 20% 12%, color-mix(in srgb, var(--vc-rest-glow) 22%, transparent), transparent 70%),
		radial-gradient(50% 36% at 82% 18%, rgba(120, 90, 220, 0.18), transparent 72%);
}

.vc-rest__layer--hall {
	background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.55) 100%);
}

/* Hanging lights: the only looping motion, and slow enough to sit still. */
.vc-rest__lamp {
	position: absolute;
	top: 0;
	width: 2px;
	height: 22%;
	background: linear-gradient(180deg, var(--vc-rest-edge), transparent);
}

.vc-rest__lamp::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 90px;
	height: 90px;
	transform: translate(-50%, 40%);
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--vc-rest-glow) 34%, transparent) 0%, transparent 68%);
}

.vc-rest__lamp--a { left: 18%; }
.vc-rest__lamp--b { left: 50%; height: 28%; }
.vc-rest__lamp--c { left: 81%; }

/* --------------------------------------------------------------- Scenes --- */

.vc-rest__scene {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--vc-space-4);
	padding: var(--vc-space-6) var(--vc-space-4);
	transform-style: preserve-3d;
	will-change: transform, opacity, filter;
	backface-visibility: hidden;
}

.vc-rest__scene--counter { visibility: hidden; opacity: 0; }

/* ----------------------------------------------------------- Menu board --- */

.vc-rest__masthead { text-align: center; }

.vc-rest__eyebrow {
	margin: 0 0 6px;
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--vc-rest-glow);
}

.vc-rest__title.vc-rest__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem);
	font-weight: var(--vc-heading-weight);
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--vc-rest-ink);
}

.vc-rest__tagline { margin: 10px 0 0; color: var(--vc-rest-dim); max-width: 46ch; }

.vc-rest__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.vc-rest__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--vc-rest-edge);
	border-radius: var(--vc-radius-pill);
	background: var(--vc-rest-panel);
	color: var(--vc-rest-ink);
	font: inherit;
	font-size: 0.86em;
	font-weight: 600;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background var(--vc-transition) var(--vc-ease),
		border-color var(--vc-transition) var(--vc-ease);
}

.vc-rest__tab:hover { border-color: var(--vc-rest-glow); }

.vc-rest__tab.is-active {
	background: var(--vc-rest-glow);
	border-color: var(--vc-rest-glow);
	color: var(--vc-on-primary);
}

.vc-rest__tab-count { opacity: 0.6; font-size: 0.85em; }

.vc-rest__board {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--vc-space-3);
	width: min(100%, var(--vc-container));
	max-height: 52svh;
	overflow-y: auto;
	padding: 4px;
	scrollbar-width: thin;
}

/* ----------------------------------------------------------------- Dish --- */

.vc-rest__dish {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--vc-rest-edge);
	border-radius: var(--vc-card-radius);
	background: var(--vc-rest-panel);
	backdrop-filter: blur(10px);
	transition: transform var(--vc-transition) var(--vc-ease),
		border-color var(--vc-transition) var(--vc-ease);
}

.vc-rest__dish:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--vc-rest-glow) 55%, transparent);
}

.vc-rest__dish.is-out { opacity: 0.55; }

.vc-rest__dish-plate {
	aspect-ratio: var(--vc-card-ratio);
	border-radius: var(--vc-radius);
	background: rgba(0, 0, 0, 0.25);
	overflow: hidden;
	display: grid;
	place-items: center;
}

.vc-rest__dish-img { width: 100%; height: 100%; object-fit: cover; }

.vc-rest__dish-body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }

.vc-rest__dish-name.vc-rest__dish-name {
	margin: 0;
	font-size: 0.98em;
	font-weight: 600;
	line-height: 1.3;
}

.vc-rest__dish-name a { color: inherit; text-decoration: none; }
.vc-rest__dish-name a:hover { color: var(--vc-rest-glow); }

.vc-rest__dish-desc {
	margin: 0;
	font-size: 0.82em;
	color: var(--vc-rest-dim);
	line-height: 1.45;
}

.vc-rest__dish-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 4px;
}

.vc-rest__dish-price { font-weight: 700; }
.vc-rest__dish-price del { opacity: 0.5; font-weight: 400; margin-right: 4px; }
.vc-rest__dish-price ins { text-decoration: none; }
.vc-rest__dish-out { font-size: 0.8em; color: var(--vc-error); font-weight: 600; }

.vc-rest__cue {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.82em;
	color: var(--vc-rest-dim);
	transition: opacity var(--vc-transition) var(--vc-ease);
}

.vc-rest__cue .vc-icon { animation: vc-rest-bob 1.8s var(--vc-ease) infinite; }

@keyframes vc-rest-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

/* -------------------------------------------------------------- Counter --- */

.vc-rest__backbar {
	position: absolute;
	inset: 12% 8% 34%;
	border-radius: var(--vc-radius-lg);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
	border: 1px solid var(--vc-rest-edge);
}

.vc-rest__shelf {
	position: absolute;
	left: 8%;
	right: 8%;
	height: 1px;
	background: var(--vc-rest-edge);
}

.vc-rest__shelf:nth-child(1) { top: 34%; }
.vc-rest__shelf:nth-child(2) { top: 62%; }

.vc-rest__chef {
	position: absolute;
	bottom: 27%;
	left: 50%;
	transform: translateX(-50%);
	width: min(210px, 42vw);
}

.vc-rest__chef img { width: 100%; height: auto; display: block; }

/* A stylised figure, so the scene stands up with no art supplied. */
.vc-rest__chef-figure { position: relative; display: block; height: 190px; }

.vc-rest__chef-hat,
.vc-rest__chef-head,
.vc-rest__chef-body {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: var(--vc-rest-ink);
}

.vc-rest__chef-hat {
	top: 0;
	width: 62px;
	height: 46px;
	border-radius: 26px 26px 8px 8px;
}

.vc-rest__chef-head {
	top: 44px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #e8c9a8;
}

.vc-rest__chef-body {
	top: 88px;
	width: 118px;
	height: 102px;
	border-radius: 34px 34px 12px 12px;
}

.vc-rest__counter { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; }

.vc-rest__counter-top {
	position: absolute;
	top: 0;
	left: 4%;
	right: 4%;
	height: 16px;
	border-radius: 10px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--vc-rest-glow) 40%, #2a2338), #221c2e);
}

.vc-rest__counter-face {
	position: absolute;
	top: 14px;
	left: 6%;
	right: 6%;
	bottom: 0;
	background: linear-gradient(180deg, #1a1626, #12101a);
	border-top: 1px solid var(--vc-rest-edge);
}

.vc-rest__props {
	position: absolute;
	bottom: 27%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 44px;
	width: min(420px, 80vw);
	justify-content: space-between;
}

.vc-rest__prop {
	width: 54px;
	height: 54px;
	padding: 0;
	border: 1px solid var(--vc-rest-edge);
	border-radius: 50%;
	background: var(--vc-rest-panel);
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: border-color var(--vc-transition) var(--vc-ease),
		transform var(--vc-transition) var(--vc-ease);
}

.vc-rest__prop:hover { border-color: var(--vc-rest-glow); transform: translateY(-2px); }

.vc-rest__prop-body {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto;
	border-radius: 12px 12px 4px 4px;
	background: var(--vc-rest-ink);
}

.vc-rest__prop--brew .vc-rest__prop-body { border-radius: 4px; background: var(--vc-rest-glow); }

.vc-rest__prop.is-active { animation: vc-rest-ring 0.5s var(--vc-ease); }

@keyframes vc-rest-ring {
	0% { transform: rotate(0); }
	25% { transform: rotate(-13deg); }
	55% { transform: rotate(10deg); }
	80% { transform: rotate(-5deg); }
	100% { transform: rotate(0); }
}

.vc-rest__speech {
	position: absolute;
	bottom: 46%;
	left: 50%;
	transform: translate(-50%, 8px);
	margin: 0;
	max-width: 22ch;
	padding: 10px 16px;
	border-radius: var(--vc-radius-pill);
	background: var(--vc-rest-ink);
	color: var(--vc-rest-deep);
	font-size: 0.85em;
	font-weight: 600;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--vc-transition) var(--vc-ease), transform var(--vc-transition) var(--vc-ease);
}

.vc-rest__speech.is-shown { opacity: 1; transform: translate(-50%, 0); }

.vc-rest__counter-actions {
	position: absolute;
	bottom: 8%;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.vc-rest__counter-actions .vc-btn--ghost { color: var(--vc-rest-ink); }

/* ----------------------------------------------------------------- Tray --- */

.vc-rest__tray {
	position: absolute;
	top: var(--vc-space-4);
	right: var(--vc-space-4);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
}

.vc-rest__tray-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--vc-rest-edge);
	border-radius: var(--vc-radius-pill);
	background: var(--vc-rest-panel);
	color: var(--vc-rest-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	backdrop-filter: blur(10px);
	transition: background var(--vc-transition) var(--vc-ease);
}

.vc-rest__tray-btn:hover { background: var(--vc-rest-glow); color: var(--vc-on-primary); }

.vc-rest__mute {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--vc-rest-edge);
	border-radius: 50%;
	background: var(--vc-rest-panel);
	color: var(--vc-rest-ink);
	cursor: pointer;
}

.vc-rest__mute.is-muted { opacity: 0.45; }

/* ---------------------------------------------------------- Breakpoints --- */

@media (max-width: 767px) {
	.vc-rest__stage { perspective: 800px; }
	.vc-rest__board { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 46svh; }
	.vc-rest__tray-label { display: none; }
	.vc-rest__tray-btn { padding: 0 14px; }
	.vc-rest__props { gap: 20px; width: min(280px, 76vw); }
	.vc-rest__chef-figure { height: 150px; }

	/* Backdrop filters are the most expensive thing here and the least
	   visible on a small screen, so they come off first. */
	.vc-rest__dish,
	.vc-rest__tab,
	.vc-rest__prop,
	.vc-rest__tray-btn { backdrop-filter: none; }
}

/*
 * Reduced motion, and the "off" intensity setting, both land here: the camera
 * move is replaced by a plain swap, which the script also mirrors so it never
 * writes transforms nobody asked for.
 */
@media (prefers-reduced-motion: reduce) {
	.vc-rest__scene { transition: none; filter: none !important; transform: none !important; }
	.vc-rest__cue .vc-icon { animation: none; }
	.vc-rest__prop.is-active { animation: none; }
}

.vc-rest--off .vc-rest__scene { filter: none !important; transform: none !important; }
.vc-rest--off .vc-rest__cue .vc-icon { animation: none; }