/* ==========================================================================
   Hinto Menu Scroll Slider Plugin CSS
   3D Book Page-Flip Scroll Slider with Left/Right Square Thumbnails
   ========================================================================== */

:root {
	--cream: #FDF2DE;
	--brown: #674D33;
	--ink: #1E1D1D;
	--brown-mute: #8E7454;
	--line-light: rgba(253, 242, 222, 0.18);
	--cream-mute: rgba(253, 242, 222, 0.58);
	--sans: 'Jost', system-ui, -apple-system, sans-serif;
	--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
	--ease: cubic-bezier(.22, 1, .36, 1);
}

.hinto-menu-scroll-plugin-wrap {
	position: relative;
	width: 100%;
	background: #1e1d1d;
	color: #FDF2DE;
	font-family: var(--sans);
}

.menu__scroll {
	position: relative;
}

.menu__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	padding-top: 56px;
	box-sizing: border-box;
}

.book {
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

.book__stage {
	display: none;
}

.book.is-paged .book__flow {
	display: none;
}

.book.is-paged .book__stage {
	display: block;
	position: relative;
	perspective: 2200px;
	perspective-origin: 0% 50%;
	clip-path: inset(-45% -70px -45% 0);
}

.book.is-paged .book__stage::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: clamp(16px, 2.6vw, 30px);
	z-index: 30;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

.page {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	transform-style: preserve-3d;
	will-change: transform;
	transform: rotateY(var(--a, 0deg)) translateZ(calc(var(--lift, 0) * 42px)) rotateX(calc(var(--k, 0) * 1.4deg)) skewY(calc(var(--k, 0) * -1.1deg));
}

.page[hidden] {
	display: none;
}

.page__face,
.page__back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border: 1px solid var(--line-light);
	border-left: none;
	border-top-right-radius: calc(var(--k, 0) * 16px);
	border-bottom-right-radius: calc(var(--k, 0) * 22px);
	box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
}

.page__face {
	display: grid;
	grid-template-columns: repeat(var(1), minmax(0, 1fr));
	gap: clamp(16px, 2.5vw, 40px);
	align-items: start;
	padding: clamp(20px, 3vw, 40px) clamp(16px, 2.5vw, 36px);
	background: #232121;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.page__back {
	transform: rotateY(180deg);
	background: linear-gradient(270deg, #2a2827, #1c1b1b 62%);
}

.page__face::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, .06) 52%, rgba(255, 255, 255, .05));
	opacity: var(--shade, 0);
}

.page__back::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
	opacity: var(--backshade, 0);
}

.page__cast {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 25;
	pointer-events: none;
	width: calc(var(--cast, 0) * 46%);
	background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
	opacity: var(--cast, 0);
}

.page__col {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 3vh, 32px);
	min-width: 0;
	box-sizing: border-box;
}

.page__col+.page__col {
	border-left: 1px solid var(--line-light);
	padding-left: clamp(16px, 2.4vw, 36px);
}

.board {
	display: flex;
	flex-direction: column;
	gap: clamp(34px, 5vh, 58px);
}

.board__group {
	display: flex;
	flex-direction: column;
}

.board__cat {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--cream-mute);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line-light);
	margin: 0;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* ==========================================================================
   ENHANCED MENU ITEM ROW WITH SMALL SQUARE THUMBNAILS
   ========================================================================== */
.row {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: clamp(10px, 1.8vw, 20px);
	row-gap: 4px;
	align-items: center;
	padding: clamp(12px, 1.8vw, 20px) 0;
	border-bottom: 1px solid var(--line-light);
	transition: background-color .3s var(--ease);
	width: 100%;
	box-sizing: border-box;
}

/* Row with Thumbnail (Left / Right) */
.row.has-thumb.thumb-left {
	grid-template-columns: min-content 1fr auto;
}

.row.has-thumb.thumb-right {
	grid-template-columns: 1fr min-content auto;
}

.row__thumb {
	width: clamp(50px, 4.5vw, 62px);
	height: clamp(50px, 4.5vw, 62px);
	border-radius: 8px;
	overflow: hidden;
	flex: 0 0 auto;
	flex-shrink: 0;
	align-self: center;
	border: 1px solid rgba(253, 242, 222, .22);
	background: #181717;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
	transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s var(--ease);
}

.row:hover .row__thumb {
	transform: scale(1.08) rotate(2deg);
	border-color: rgba(253, 242, 222, 0.55);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.row:hover .row__thumb img {
	transform: scale(1.12);
}

.row__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.row__name {
	margin: 0;
	font-weight: 300;
	font-size: clamp(18px, 2.4vw, 28px);
	line-height: 1.25;
	letter-spacing: -.022em;
	color: var(--cream);
	white-space: normal;
	word-break: break-word;
	overflow-wrap: break-word;
}

.row__kcal {
	margin: 0;
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(19px, 2.6vw, 30px);
	letter-spacing: -.03em;
	color: var(--cream);
	white-space: nowrap;
}

.row__kcal small {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cream-mute);
	margin-left: 7px;
}

.row__macros {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 clamp(14px, 2vw, 26px);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--cream-mute);
	font-variant-numeric: tabular-nums;
	margin: 5px 0 0;
}

.row__macros:first-of-type {
	margin-top: 9px;
}

.row__macros b {
	font-weight: 400;
	color: rgba(253, 242, 222, .85);
}

.row__macros .mfor {
	min-width: 7.5em;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(253, 242, 222, .4);
}

.row__macros .mpend {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(253, 242, 222, .32);
}

/* Page meter footer */
.book__meter {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 22px);
	margin: clamp(16px, 2.4vh, 26px) 20px 20px;
}

.book__count {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cream-mute);
	flex: none;
}

.book__rule {
	position: relative;
	flex: 1 1 auto;
	height: 1px;
	background: var(--line-light);
}

.book__rule i {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	height: 1px;
	width: calc(var(--p, 0) * 100%);
	background: var(--cream-mute);
}

@media (prefers-reduced-motion: reduce) {
	.page {
		transform: rotateY(var(--a, 0deg));
	}

	.page__face::after,
	.page__back::after,
	.page__cast {
		display: none;
	}
}

/* ==========================================================================
   HINTO DAILY SCROLL REVEAL ANIMATIONS (Blur, Slide-Up & Letter Spacing)
   Usage in Elementor: Add CSS Classes "reveal display" (or "reveal display d1", "d2", "d3")
   ========================================================================== */
html.js .reveal,
body.js .reveal,
.reveal {
	opacity: 0;
	transform: translateY(18px);
	filter: blur(7px);
	transition: opacity 1s var(--ease, cubic-bezier(.22, 1, .36, 1)),
		transform 1s var(--ease, cubic-bezier(.22, 1, .36, 1)),
		filter 1s var(--ease, cubic-bezier(.22, 1, .36, 1)),
		letter-spacing 1s var(--ease, cubic-bezier(.22, 1, .36, 1));
	will-change: opacity, transform, filter, letter-spacing;
}

html.js .reveal.is-in,
body.js .reveal.is-in,
.reveal.is-in {
	opacity: 1;
	transform: translate(0, 0);
	filter: blur(0);
}

html.js .display.reveal,
body.js .display.reveal,
.display.reveal {
	letter-spacing: .04em;
}

html.js .display.reveal.is-in,
body.js .display.reveal.is-in,
.display.reveal.is-in {
	letter-spacing: -.035em;
}

.reveal.d1 {
	transition-delay: .09s;
}

.reveal.d2 {
	transition-delay: .18s;
}

.reveal.d3 {
	transition-delay: .27s;
}

.reveal.d4 {
	transition-delay: .36s;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}