/* Gastronome — base.css
 * Reset + tokens + typography + nav + menu overlay + footer.
 * Per-template extras live in their own *.css files.
 *
 * Source of truth: PROJECT.md §11.1 (motion tokens), §10 (chrome components)
 */

/* GL Tatishvili Metal — single display font for ALL titles in BOTH locales.
 * Georgian + Latin glyphs ship in the same file, so we no longer split the
 * display stack by language (LGV Anastasia for Georgian, Tatishvili for
 * Latin). One file, one rule, no unicode-range filter. The font ships as
 * a Bold-only weight, so we claim the full weight range — any non-bold
 * weight request renders with this single file rather than falling through
 * to a fallback that would mismatch the visual identity.
 */
@font-face {
	font-family: 'GL Tatishvili Metal';
	src: url('../fonts/gl-tatishvili-metal-bold.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Body font — Objective. The .woff2 files referenced below were dropped at
 * some point; declarations are kept so any future re-upload to the same
 * filenames works without code changes. The browser falls through to Outfit
 * (loaded from Google in header.php) when these 404. */
@font-face { font-family: 'Objective'; src: url('../fonts/Objective-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Objective'; src: url('../fonts/Objective-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Objective'; src: url('../fonts/Objective-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Objective'; src: url('../fonts/Objective-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ───────────── tokens ───────────── */
:root {
	--bg: #000;
	--text: #fff;
	--muted: #737373;
	--dim: #999;
	--faint: rgba(255, 255, 255, 0.08);

	/* Single display font for both locales; Oswald is a defensive fallback
	 * for the brief moment before the local TTF is parsed (or in case the
	 * file fails to load in production). */
	--font-display: 'GL Tatishvili Metal', 'Oswald', sans-serif;
	--font-body:    'Objective', 'Outfit', sans-serif;
	--font-italic:  'Objective', 'Cormorant Garamond', serif;

	/* motion */
	--ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-soft:  cubic-bezier(0.65, 0, 0.35, 1);
	--ease-snap:  cubic-bezier(0.83, 0, 0.17, 1);
	--dur-fast: 0.25s;
	--dur-base: 0.5s;

	/* layout */
	--page: 48px;
	--nav-h: 100px;
	--nav-h-s: 80px;
}

/* ───────────── reset ───────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/* sitewide grain — desktop / hover-capable pointer only.
 *
 * On touch devices this fixed-position element + mix-blend-mode pair stutters
 * during iOS URL-bar collapse, fights momentum scroll, and ships zero brand
 * value on a small screen. Disabled below. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.04"/%3E%3C/svg%3E');
	pointer-events: none;
	z-index: 9999;
	mix-blend-mode: screen;
}
@media (hover: none) and (pointer: coarse) {
	body::after { display: none; }
}
html.is-touch body::after { display: none; }

img, video, svg { max-width: 100%; height: auto; display: block; }
button { background: none; border: none; color: inherit; cursor: pointer; font: inherit; }
a { color: inherit; text-decoration: none; }

/* ───────────── motion-hide states ─────────────
 * Activated by html.js-ready (set by boot.js).
 * Skipped under prefers-reduced-motion.
 *
 * Mask-line clip-reveal animations have been removed sitewide — the markup
 * stays (templates still use `<span class="mask-line"><span class="mask-line-inner">`
 * for the noise text-fill effect on the about hero and similar) but the
 * inners now render at the natural position with no pre-hide / reveal cycle. */
html.js-ready [data-mo],
html.js-ready [data-mo-stagger] > * { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	html.js-ready [data-mo],
	html.js-ready [data-mo-stagger] > * { opacity: 1; transform: none; }
}

/* ───────────── nav ───────────── */
.gn-nav {
	position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-h);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	padding: 0 var(--page); z-index: 1000;
	transition: height 0.45s var(--ease-brand), background 0.45s ease, box-shadow 0.45s ease;
}
.gn-nav::before {
	content: ''; position: absolute; inset: -20px 0 -40px 0;
	background: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, transparent 100%);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
	pointer-events: none; z-index: -1; opacity: 0;
	transition: opacity 0.5s ease;
}
.gn-nav.scrolled { height: var(--nav-h-s); }
.gn-nav.scrolled::before { opacity: 1; }
.gn-nav.gn-menu-open {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	height: var(--nav-h) !important;
}

.gn-nav-left { display: flex; justify-self: start; align-items: center; gap: 12px; }
.gn-nav-center { justify-self: center; }
.gn-nav-right { display: flex; justify-self: end; align-items: center; }

.gn-logo { position: relative; z-index: 1001; display: flex; align-items: center; }
.gn-logo-img { height: 28px; width: auto; transition: opacity 0.3s ease; }

.gn-lang { display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1001; }
.gn-lang-link {
	position: relative;
	color: rgba(255, 255, 255, 0.35);
	font-family: var(--font-body); font-size: 13px; font-weight: 500;
	letter-spacing: 0.15em; text-transform: uppercase;
	transition: color 0.4s ease;
	padding-bottom: 5px;
}
.gn-lang-link:hover { color: rgba(255, 255, 255, 0.85); }
.gn-lang-link.is-active {
	color: #fff;
	font-weight: 700;
	pointer-events: none;
}
/* Active locale gets an underline indicator */
.gn-lang-link.is-active::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: #fff;
}
.gn-lang-sep { color: rgba(255, 255, 255, 0.18); font-size: 11px; padding-bottom: 5px; }

/* burger */
.gn-burger {
	display: flex; align-items: center; gap: 16px;
	position: relative; z-index: 1001;
	-webkit-tap-highlight-color: transparent;
}
.gn-burger-text {
	font-family: var(--font-body); font-size: 13px; font-weight: 500;
	letter-spacing: 0.15em; text-transform: uppercase; color: #fff;
	transition: color 0.4s ease;
}
.gn-burger:hover .gn-burger-text { color: #999; }
.gn-burger-icon {
	width: 32px; height: 10px; position: relative;
	transition: width 0.45s var(--ease-brand);
}
.gn-burger-line {
	position: absolute; left: 0; width: 100%; height: 1px; background: #fff;
	transition: transform 0.6s var(--ease-brand), background 0.4s ease;
}
.gn-burger-line-1 { top: 0; }
.gn-burger-line-2 { bottom: 0; }
.gn-burger:hover .gn-burger-line { background: #999; }
.gn-burger.open .gn-burger-line-1 { transform: translateY(4.5px) rotate(45deg); }
.gn-burger.open .gn-burger-line-2 { transform: translateY(-4.5px) rotate(-45deg); }

/* nav intro fade — driven by GSAP, but provide a CSS fallback for no-JS visits */
.gn-nav-fade,
.gn-nav-logo-fade { opacity: 1; }
html.js-ready .gn-nav-fade,
html.js-ready .gn-nav-logo-fade { opacity: 0; }

/* ───────────── menu overlay ───────────── */
.gn-menu-overlay {
	position: fixed; inset: 0; background: #000;
	z-index: 999; display: flex;
	opacity: 0; visibility: hidden;
}
.gn-menu-left {
	flex: 0 0 50%; height: 100vh;
	display: flex; flex-direction: column; justify-content: center;
	padding-left: 12vw; padding-right: 48px;
}
.gn-menu-links { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.gn-menu-links a {
	font-family: var(--font-display);
	font-size: clamp(40px, 4.5vw, 64px);
	font-weight: 700;
	color: #fff; line-height: 1; display: inline-block;
	transition: color 0.4s ease, transform 0.5s var(--ease-brand);
	transform-origin: left center;
}
.gn-menu-links a:hover { color: #999; transform: translateX(32px); }

.gn-menu-footer { margin-top: 64px; display: flex; gap: 64px; }
.gn-mf-col span {
	display: block; font-size: 11px; color: #999;
	text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 12px;
	font-family: var(--font-body);
}
.gn-mf-col p, .gn-mf-col a {
	font-family: var(--font-body); font-size: 14px; color: #808080;
	line-height: 1.6; transition: color 0.3s ease;
}
.gn-mf-col a:hover { color: #fff; }

.gn-menu-right {
	flex: 0 0 50%; height: 100vh; height: 100svh;
	padding: 100px 48px 48px 0;
	display: flex; align-items: center;
}
.gn-media-wrap {
	width: 100%; height: calc(100vh - 148px); height: calc(100svh - 148px);
	border-radius: 16px; overflow: hidden;
	position: relative; background: #0a0a0a;
}
.gn-menu-media {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: 0; transform: scale(1.05);
	transition: opacity 0.6s ease, transform 1.2s var(--ease-brand);
	will-change: transform, opacity;
}
.gn-menu-media.active { opacity: 1; transform: scale(1); }

/* ───────────── footer ───────────── */
.gn-footer {
	background: #000; border-top: 1px solid rgba(255, 255, 255, 0.06);
	position: relative; overflow: hidden;
}
.gn-footer-wrap {
	max-width: 1440px; margin: 0 auto;
	padding: 80px var(--page) 0;
	position: relative; z-index: 2;
}
.gn-footer-logo { display: block; height: auto; width: 200px; margin-bottom: 64px; opacity: 0.85; }
.gn-footer-body {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 48px; padding-bottom: 64px;
}
.gn-footer-left { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.gn-footer-col { display: flex; flex-direction: column; gap: 14px; }
.gn-footer-col-title {
	font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em;
	color: #555; margin-bottom: 4px;
}
.gn-footer-col a { font-size: 14px; color: #666; transition: color 0.35s ease; line-height: 1.4; }
.gn-footer-col a:hover { color: #fff; }
.gn-footer-right { display: flex; flex-direction: column; justify-content: space-between; }
.gn-footer-contact { display: flex; flex-direction: column; gap: 14px; }
.gn-footer-contact p, .gn-footer-contact a {
	font-size: 14px; color: #666; line-height: 1.6; transition: color 0.35s ease;
}
.gn-footer-contact a:hover { color: #fff; }
.gn-footer-social {
	display: flex; gap: 28px; margin-top: auto; padding-top: 32px;
}
.gn-footer-social a {
	font-size: 12px; color: #555; text-transform: uppercase;
	letter-spacing: 0.15em; transition: color 0.35s ease;
}
.gn-footer-social a:hover { color: #fff; }
.gn-footer-bottom {
	max-width: 1440px; margin: 0 auto;
	padding: 24px var(--page) 40px;
	display: flex; justify-content: space-between; align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	position: relative; z-index: 2;
}
.gn-footer-copy { font-size: 11px; color: #444; }
.gn-footer-legal { display: flex; gap: 24px; }
.gn-footer-legal a {
	font-size: 11px; color: #444; transition: color 0.35s ease;
}
.gn-footer-legal a:hover { color: #999; }
.gn-footer-watermark {
	position: absolute; bottom: -8%; left: 0; width: 100%;
	z-index: 1; opacity: 0.08; pointer-events: none;
}
.gn-footer-watermark img { width: 100%; height: auto; }

/* ───────────── responsive ───────────── */
@media (max-width: 1440px) and (min-width: 1025px) {
	.gn-menu-left { padding-left: 8vw; flex: 0 0 55%; }
	.gn-menu-right { flex: 0 0 45%; padding: 100px 36px 36px 0; }
	.gn-menu-links { gap: 10px; }
	.gn-menu-links a { font-size: clamp(36px, 3.8vw, 52px); }
	.gn-menu-footer { margin-top: 40px; gap: 48px; }
	.gn-media-wrap { height: calc(100vh - 136px); }
}

@media (max-height: 750px) and (min-width: 1025px) {
	.gn-menu-links { gap: 6px; }
	.gn-menu-links a { font-size: clamp(30px, 3.5vw, 44px); }
	.gn-menu-footer { margin-top: 28px; gap: 40px; }
}

@media (max-width: 1024px) {
	:root { --page: 32px; --nav-h: 80px; --nav-h-s: 64px; }
	.gn-burger-text { display: none; }

	.gn-menu-overlay { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.gn-menu-left {
		flex: none; width: 100%; height: auto; min-height: 100vh; min-height: 100svh;
		padding: 120px var(--page) 48px;
		justify-content: center; align-items: flex-start;
	}
	.gn-menu-right { display: none; }
	.gn-menu-links { gap: 12px; }
	.gn-menu-links a { font-size: clamp(36px, 7vw, 56px); transform: none !important; }
	.gn-menu-links a:hover { transform: none; color: #999; }
	.gn-menu-footer { flex-direction: row; flex-wrap: wrap; gap: 32px; margin-top: 48px; }

	.gn-footer-body { grid-template-columns: 1fr; gap: 40px; }
	.gn-footer-left { gap: 32px; }
}

@media (max-width: 767px) {
	:root { --page: 20px; --nav-h: 72px; --nav-h-s: 56px; }
	.gn-logo-img { height: 24px; }
	.gn-lang-link { font-size: 11px; letter-spacing: 0.1em; }
	.gn-menu-left { padding: 100px var(--page) 40px; justify-content: flex-start; }
	.gn-menu-links { gap: 8px; }
	.gn-menu-links a { font-size: clamp(32px, 9vw, 44px); }
	.gn-menu-footer { gap: 24px; margin-top: 40px; }
	.gn-mf-col span { font-size: 10px; margin-bottom: 8px; }
	.gn-mf-col p, .gn-mf-col a { font-size: 13px; }

	.gn-footer-wrap { padding: 60px 20px 0; }
	.gn-footer-logo { width: 140px; margin-bottom: 40px; }
	.gn-footer-bottom { flex-direction: column; gap: 12px; text-align: center; padding: 24px 20px 32px; }
	.gn-footer-legal { gap: 16px; }
}

@media (max-width: 480px) {
	:root { --page: 16px; --nav-h: 64px; --nav-h-s: 52px; }
	.gn-logo-img { height: 22px; }
	.gn-lang-link { font-size: 10px; letter-spacing: 0.08em; }
	.gn-burger-icon { width: 28px; height: 8px; }
	.gn-burger.open .gn-burger-line-1 { transform: translateY(3.5px) rotate(45deg); }
	.gn-burger.open .gn-burger-line-2 { transform: translateY(-3.5px) rotate(-45deg); }
	.gn-menu-left { padding-top: 80px; }
	.gn-menu-links { gap: 6px; }
	.gn-menu-links a { font-size: clamp(28px, 10vw, 38px); }
	.gn-menu-footer { flex-direction: column; gap: 20px; margin-top: 32px; }
}

@media (hover: none) and (pointer: coarse) {
	.gn-menu-links a:active { color: #999; }
	.gn-menu-links a:hover { transform: none; }
}

/* ─── Mobile perf safety net ───────────────────────────────────────────
 *
 * Three GPU/scroll-killers get neutralised on touch devices:
 *   1. backdrop-filter blur — costs a viewport-sized pixel resample every
 *      frame the underlying changes; scrolling triggers a redraw, blur is
 *      one of the most expensive filters on mobile GPUs.
 *   2. will-change transform — pre-promotes layers and pins them on the
 *      GPU; on memory-constrained mobile this causes texture thrash and
 *      delayed paints. Browser-managed promotion is fine on mobile.
 *   3. background-attachment: fixed — defensive even though we don't use
 *      it currently; documented in case a section tries to.
 *
 * Caveats: dropping backdrop-filter removes the frosted-glass effect on
 * the scrolled nav, news header pill, directory filter chips, partner
 * brand badges. They fall back to their solid/gradient background — the
 * design holds up. Worth it to get smooth scroll.
 * ──────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
	*, *::before, *::after {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		will-change: auto !important;
		background-attachment: scroll !important;
	}
}


/* ─────────────────────────────────────────────────────────────────────────
 * Cross-page block: "Our Other Brands"
 * Used by single-shop.php and single-restaurant.php to surface other directions.
 * ───────────────────────────────────────────────────────────────────────── */
.other-brands {
	padding: 96px var(--page) 120px;
	background: #0a0a0a;
}
.other-brands-header { margin-bottom: 56px; }
.other-brands-overline {
	display: block;
	font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--gold, #b9985a);
	margin-bottom: 12px;
}
.other-brands-heading {
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 48px);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0;
}
.other-brands-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}
.other-brand-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #111;
	color: #fff;
	text-decoration: none;
}
.other-brand-card-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 0.9s var(--ease-brand);
}
.other-brand-card:hover .other-brand-card-img { transform: scale(1.08); }
.other-brand-card-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
	transition: background 0.4s ease;
}
.other-brand-card:hover .other-brand-card-overlay {
	background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 100%);
}
.other-brand-card-logo {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	max-width: 42%; max-height: 26%;
	width: auto; height: auto;
	filter: drop-shadow(0 4px 16px rgba(0,0,0,0.45));
	z-index: 2;
	transition: opacity 0.4s var(--ease-brand);
}
.other-brand-card-name {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--font-display);
	font-size: 20px; font-weight: 700;
	letter-spacing: 0.04em;
	z-index: 2;
}

@media (max-width: 1024px) {
	.other-brands { padding: 80px var(--page) 96px; }
	.other-brands-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	.other-brands { padding: 64px 0 72px; }
	.other-brands-header { margin: 0 var(--page) 32px; }
	/* Horizontal scroll carousel: flex row, scroll-snap, edge bleed. */
	.other-brands-grid {
		display: flex;
		grid-template-columns: none;
		gap: 10px;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0 var(--page) 12px;
		scroll-snap-type: x proximity;
		scroll-padding-left: var(--page);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.other-brands-grid::-webkit-scrolldetail { display: none; }
	.other-brands-grid::-webkit-scrollbar { display: none; }
	.other-brand-card {
		flex: 0 0 64%;
		scroll-snap-align: start;
		aspect-ratio: 4 / 5;
	}
	.other-brand-card-logo { max-width: 36%; max-height: 24%; }
}
@media (max-width: 480px) {
	.other-brand-card { flex: 0 0 78%; }
	.other-brand-card-logo { max-width: 38%; max-height: 24%; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Preloader — left-to-right white wordmark wipe over a grey baseline.
 * Markup in parts/preloader.php; lifecycle in boot.js (sessionStorage skip).
 * ───────────────────────────────────────────────────────────────────────── */
.gn-svg-defs { position: absolute; pointer-events: none; }

.gn-preloader {
	position: fixed;
	inset: 0;
	background: #000;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.5s cubic-bezier(0.83, 0, 0.17, 1);
}
.gn-preloader.is-done {
	transform: translateY(-100%);
	pointer-events: none;
}
.gn-preloader-logo-wrap {
	position: relative;
	width: min(70vw, 200px);
}
.gn-preloader-logo {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}
.gn-preloader-logo-grey  { fill: #333; }
.gn-preloader-logo-white {
	fill: #fff;
	position: absolute;
	inset: 0;
	clip-path: inset(0 100% 0 0);
	animation: gnPreloaderReveal 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}
@keyframes gnPreloaderReveal {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0% 0 0);   }
}

/* Lock body scroll while the preloader is visible. */
body.gn-preloading { overflow: hidden; }

/* Skip everything for reduced-motion + immediately remove from layout. */
@media (prefers-reduced-motion: reduce) {
	.gn-preloader { display: none; }
}