/* ============================================================
   FOOD CANTO — v28 focused-page polish
   ------------------------------------------------------------
   Shared natural Food / Masala / Cooking Class atmosphere for
   menu, service and information pages.
   ============================================================ */

body.landing-page {
	--landing-ink: #123f31;
	--landing-accent: #17684b;
	--landing-rule: rgba(18, 63, 49, 0.18);
	--landing-glass: rgba(255, 250, 241, 0.68);
	min-height: 100vh;
	padding-top: calc(var(--topline-h) + 5.2rem);
	color: var(--landing-ink);
	background: #eef0df;
	isolation: isolate;
}

html[data-world="masala"] body.landing-page {
	--landing-ink: #71391f;
	--landing-accent: #ca5b2b;
	--landing-rule: rgba(113, 57, 31, 0.2);
	--landing-glass: rgba(255, 247, 226, 0.7);
	background: #f6cf89;
}

html[data-world="ladies"] body.landing-page {
	--landing-ink: #684054;
	--landing-accent: #b94d73;
	--landing-rule: rgba(104, 64, 84, 0.2);
	--landing-glass: rgba(255, 248, 237, 0.72);
	background: #f7dcd6;
}

.landing-page .process-atmosphere {
	z-index: 0;
}

.landing-page .atmos {
	z-index: 1;
	opacity: 0.54;
}

.landing-page main,
.landing-page .landing-footer,
.landing-page .topline {
	position: relative;
	z-index: 2;
}

.landing-page .topline {
	position: fixed;
	z-index: 32;
}

.landing-header {
	position: fixed;
	top: var(--topline-h);
	left: 0;
	right: 0;
	z-index: 31 !important;
	background: rgba(255, 250, 241, 0.84);
	border-bottom: 1px solid var(--landing-rule);
	box-shadow: 0 18px 46px -38px rgba(16, 42, 33, 0.58);
	-webkit-backdrop-filter: blur(14px) saturate(1.08);
	backdrop-filter: blur(14px) saturate(1.08);
}

.landing-header-inner {
	min-height: 5.2rem;
}

.landing-header .brand {
	display: inline-flex;
	align-items: center;
	gap: 0.72rem;
	width: auto;
	min-width: 12.5rem;
}

.landing-header .brand-mark-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.landing-header .brand-name {
	font-size: 1.05rem;
}

.landing-header .brand-slogan {
	font-size: 0.62rem;
}

.landing-nav a {
	position: relative;
	padding-block: 0.4rem;
}

.landing-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: var(--landing-accent);
	transition: right 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-nav a:hover::after,
.landing-nav a:focus-visible::after,
.landing-nav a[aria-current="page"]::after {
	right: 0;
}

.landing-hero {
	position: relative;
	display: grid;
	align-items: center;
	width: min(1180px, calc(100% - 2rem));
	min-height: min(54rem, calc(100svh - var(--topline-h) - 5.2rem));
	margin: clamp(1rem, 2.4vw, 2rem) auto 0;
	padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
	overflow: hidden;
	border: 1px solid var(--landing-rule);
	border-radius: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--landing-glass);
	box-shadow: 0 35px 90px -58px rgba(16, 42, 33, 0.62);
	-webkit-backdrop-filter: blur(9px) saturate(1.05);
	backdrop-filter: blur(9px) saturate(1.05);
}

.landing-hero::before {
	content: "";
	position: absolute;
	inset: -12%;
	pointer-events: none;
	background: url("../assets/img/hero-liquid-atmosphere.webp") center / cover no-repeat;
	opacity: 0.18;
	mix-blend-mode: soft-light;
	animation: landing-liquid-drift 18s ease-in-out infinite alternate;
}

.landing-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 13% 20%, rgba(255, 255, 255, 0.45), transparent 34%),
		radial-gradient(circle at 88% 76%, color-mix(in srgb, var(--landing-accent) 18%, transparent), transparent 38%);
}

.landing-hero > .landing-shell {
	position: relative;
	z-index: 1;
}

.landing-kicker {
	color: var(--landing-accent);
}

.landing-hero h1,
.landing-section h2 {
	color: var(--landing-ink);
}

.landing-lede {
	color: color-mix(in srgb, var(--landing-ink) 86%, #fff);
}

.landing-facts div,
.landing-card,
.landing-list li {
	border-color: var(--landing-rule);
	background: rgba(255, 250, 241, 0.74);
	box-shadow: 0 20px 55px -46px rgba(16, 42, 33, 0.68);
}

.landing-section {
	position: relative;
	z-index: 2;
	padding: clamp(4rem, 8vw, 7rem) 0;
}

.landing-section > .landing-shell {
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--landing-rule);
	border-radius: clamp(1.25rem, 2.5vw, 2rem);
	background: rgba(255, 250, 241, 0.52);
	-webkit-backdrop-filter: blur(8px) saturate(1.04);
	backdrop-filter: blur(8px) saturate(1.04);
}

.landing-cta {
	position: relative;
	z-index: 2;
	background: color-mix(in srgb, var(--landing-ink) 92%, #000);
	box-shadow: 0 28px 70px -48px rgba(16, 42, 33, 0.72);
}

.landing-cta a {
	background: linear-gradient(135deg, #ffd05f, #f0a21b 58%, #f48738);
	border-radius: 999px;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}

.landing-cta a:hover,
.landing-cta a:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.72);
}

.landing-footer {
	color: var(--landing-ink);
	border-top-color: var(--landing-rule);
	background: rgba(255, 250, 241, 0.78);
	-webkit-backdrop-filter: blur(12px) saturate(1.05);
	backdrop-filter: blur(12px) saturate(1.05);
}

.landing-footer a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

@keyframes landing-liquid-drift {
	0% {
		transform: translate3d(-1.5%, -1%, 0) scale(1.05) rotate(-0.8deg);
	}
	100% {
		transform: translate3d(1.5%, 1%, 0) scale(1.09) rotate(0.8deg);
	}
}

@media (max-width: 64rem), (pointer: coarse) {
	.landing-header,
	.landing-hero,
	.landing-section > .landing-shell,
	.landing-footer {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.landing-hero {
		min-height: auto;
		background: rgba(255, 250, 241, 0.84);
	}

	.landing-section > .landing-shell {
		background: rgba(255, 250, 241, 0.78);
	}
}

@media (max-width: 42rem) {
	body.landing-page {
		padding-top: calc(var(--topline-h) + 7.4rem);
	}

	.landing-header-inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		min-height: 7.4rem;
		padding-top: 0.55rem;
	}

	.landing-header .brand {
		min-width: 0;
	}

	.landing-header .brand-mark-shell {
		width: 2.45rem;
		height: 2.45rem;
	}

	.landing-nav {
		display: flex;
		gap: 1rem;
		width: 100%;
		padding: 0.35rem 0 0.6rem;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.landing-nav::-webkit-scrollbar {
		display: none;
	}

	.landing-nav a,
	.landing-nav a:not(.landing-contact) {
		display: inline-flex;
		flex: 0 0 auto;
		font-size: 0.72rem;
	}

	.landing-hero {
		width: calc(100% - 0.9rem);
		margin-top: 0.45rem;
		padding: 3.25rem 0 2.5rem;
		border-radius: 1.35rem;
	}

	.landing-shell {
		width: min(100% - 2rem, 1080px);
	}

	.landing-hero h1 {
		font-size: clamp(3.15rem, 15vw, 5rem);
	}

	.landing-section {
		padding-block: 3.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.landing-hero::before {
		animation: none;
	}
}