/* ==========================================================================
   Hiro's Menu — loaded on the menu page only.
   Layout from "Sushi Hiro Menu Page - 01".
   ========================================================================== */

/* ---------- Hero: video poster ---------- */
.menu-hero { position: relative; background: #1b1511; }
.menu-hero__video {
	position: relative; display: block; width: 100%; height: min(100svh, 56.25vw); min-height: 420px;
	padding: 0; background: none; border: 0; cursor: pointer; overflow: hidden;
}
.menu-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; }
.menu-hero__video::after { /* keeps the white nav pill legible over the photo */
	content: ""; position: absolute; inset: 0 0 auto; height: 28%;
	background: linear-gradient(rgba(0, 0, 0, .32), transparent); pointer-events: none;
}
.menu-hero__video:hover .play-btn { transform: scale(1.1); }

/* ---------- Flipbook section ---------- */
.menu-book { position: relative; padding: clamp(4rem, 8vw, 7.5rem) 0 clamp(4rem, 7vw, 6.5rem); }
.deco--b1 { left: 7%; top: 9%; rotate: -16deg; }
.deco--b2 { right: 7%; top: 44%; rotate: 12deg; }
.menu-book__head { position: relative; z-index: 2; text-align: center; }
.menu-book__title { margin: 0; font-weight: 400; }
.menu-book__kicker {
	display: block; width: fit-content; margin: 0 auto clamp(.8rem, 1.4vw, 1.2rem);
	padding: .35em 1.1em; font-family: var(--font-body); font-weight: 900; font-size: clamp(.8rem, 1vw, .95rem);
	letter-spacing: .08em; text-transform: uppercase;
	background: var(--yellow-btn); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink);
}
.menu-book__title .display { display: block; }
.menu-book__lead { max-width: 64ch; margin: clamp(1rem, 1.6vw, 1.4rem) auto 0; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; }

.flipbook {
	/* Page size: the PDF pages are 612 × 992 (ratio .617). */
	--pw: min(44vw, 470px, calc(min(66svh, 760px) * .617));
	--ph: calc(var(--pw) / .617);
	--turn: .9s cubic-bezier(.645, .045, .355, 1);
	position: relative; margin-top: clamp(2.5rem, 5vw, 4.2rem);
}
.flipbook[data-mode="single"] { --pw: min(80vw, calc(68svh * .617)); }
.flipbook__stage { position: relative; display: flex; justify-content: center; perspective: 2600px; }
.flipbook__book {
	position: relative; width: calc(var(--pw) * 2); height: var(--ph);
	transform-style: preserve-3d; cursor: pointer; outline: none;
	transition: transform .9s var(--ease-pop), translate .7s cubic-bezier(.4, 0, .2, 1);
}
.flipbook[data-mode="single"] .flipbook__book { width: var(--pw); }
.flipbook__book:focus-visible { outline: 3px solid var(--ink); outline-offset: 10px; border-radius: 6px; }
/* Cover or back page alone: centre the single visible page. */
.flipbook[data-mode="spread"] .flipbook__book[data-edge="start"] { translate: calc(var(--pw) * -.5) 0; }
.flipbook[data-mode="spread"] .flipbook__book[data-edge="end"] { translate: calc(var(--pw) * .5) 0; }
/* Soft shadow under whichever pages are showing. */
.flipbook__book::before {
	content: ""; position: absolute; inset: 3% 1% -3%; z-index: -1;
	background: rgba(90, 45, 0, .3); filter: blur(22px); border-radius: 12px;
	transform: translateZ(-2px); transition: inset .7s;
}
.flipbook[data-mode="spread"] .flipbook__book[data-edge="start"]::before { left: 51%; }
.flipbook[data-mode="spread"] .flipbook__book[data-edge="end"]::before { right: 51%; }

.flipbook__leaf {
	position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
	transform-origin: left center; transform-style: preserve-3d;
	transition: transform var(--turn);
}
.flipbook[data-mode="single"] .flipbook__leaf { left: 0; width: 100%; }
.flipbook__leaf.is-turned { transform: rotateY(-180deg); }
.flipbook__leaf.is-moving { z-index: 999 !important; }
/* Leaves far from the current spread are hidden behind the stack — not rendering them keeps phones (iOS Safari especially) from running out of memory in full screen. */
.flipbook__leaf.is-far { display: none; }
.flipbook[data-mode="single"] .flipbook__leaf.is-turned:not(.is-moving) { visibility: hidden; }
.no-anim .flipbook__leaf, .no-anim.flipbook__book { transition: none; }

.flipbook__face {
	position: absolute; inset: 0; overflow: hidden;
	background: #f4ede3; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flipbook__face--back { transform: rotateY(180deg); }
.flipbook__face--front { border-radius: 0 6px 6px 0; }
.flipbook__face--back { border-radius: 6px 0 0 6px; }
.flipbook[data-mode="single"] .flipbook__face { border-radius: 6px; }
/* Spine shading: right pages darken to their left edge, left pages to their right edge. */
.flipbook__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.flipbook[data-mode="spread"] .flipbook__face--front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .06) 4%, transparent 9%); }
.flipbook[data-mode="spread"] .flipbook__face--back::after { background: linear-gradient(270deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .06) 4%, transparent 9%); }
.flipbook__page { width: 100%; height: 100%; margin: 0; }
.flipbook__page img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

/* Resting state, like the design: the open book lies tilted on the table until someone picks it up. */
.flipbook.is-idle .flipbook__book { transform: rotateX(30deg) rotateZ(-9deg) scale(.88); }
.flipbook.is-idle .flipbook__stage:hover .flipbook__book { transform: rotateX(24deg) rotateZ(-7deg) scale(.9); }
.flipbook__hint {
	position: absolute; z-index: 5; top: 44%; left: calc(50% + var(--pw) * .86);
	display: inline-flex; align-items: center; gap: .8rem;
	padding: 0; font-weight: 800; font-size: clamp(.95rem, 1.2vw, 1.12rem); white-space: nowrap;
	background: none; border: 0;
	transition: opacity .4s, translate .4s;
}
.flipbook__dot { position: relative; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--white); box-shadow: 0 4px 14px rgba(120, 60, 0, .25); }
.flipbook__dot::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--white);
	animation: play-pulse 1.8s ease-out infinite;
}
.flipbook:not(.is-idle) .flipbook__hint { opacity: 0; translate: 1rem 0; pointer-events: none; }

.flipbook__bar {
	position: relative; z-index: 3;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}
.flipbook__bar .arrow { width: 3.3rem; height: 3.3rem; }
.flipbook__bar .arrow:disabled { opacity: .35; cursor: default; transform: none; box-shadow: 0 5px 0 var(--ink); }
.flipbook__status { min-width: 12.5ch; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.flipbook__jump select, .flipbook__full {
	height: 3rem; padding: 0 1.1rem; font: inherit; font-weight: 800; font-size: .95rem; color: var(--ink);
	background: var(--white); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink);
	cursor: pointer;
}
.flipbook__jump select {
	padding-right: 2.4rem; appearance: none;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .8rem center / 1rem no-repeat;
}
.flipbook__full { display: inline-flex; align-items: center; gap: .5rem; }
.flipbook__full svg { width: 1.2rem; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Full screen (Fullscreen API or the fixed-overlay fallback). */
.flipbook.is-full {
	--pw: min(47vw, calc((100svh - 8rem) * .617));
	position: fixed; inset: 0; z-index: 95; margin: 0;
	display: flex; flex-direction: column; justify-content: center;
	background: rgba(24, 16, 6, .96);
}
.flipbook.is-full[data-mode="single"] { --pw: min(94vw, calc((100svh - 9rem) * .617)); }
.flipbook.is-full .flipbook__bar { margin-top: 1.4rem; }
.flipbook.is-full .flipbook__status { color: var(--white); }
.flipbook.is-full .flipbook__book::before { display: none; }
body.flipbook-open { overflow: hidden; }

/* Without JavaScript: just the opening spread, side by side. */
html:not(.menu-js) .flipbook__book { display: flex; width: auto; cursor: default; }
html:not(.menu-js) .flipbook__page { width: var(--pw); height: var(--ph); }
html:not(.menu-js) .flipbook__page:has(img:not([src])) { display: none; }
html:not(.menu-js) .flipbook__bar, html:not(.menu-js) .flipbook__hint { display: none; }
html:not(.menu-js) .flipbook.is-idle .flipbook__book { transform: none; }

/* ---------- Promo on this page hands over to a white section ---------- */
.promo__edge--white { color: var(--white); }

/* ---------- Full menu by category ---------- */
.menu-list { position: relative; background: var(--white); padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(4rem, 8vw, 7rem); }
.menu-list__lead { max-width: 62ch; margin: 1rem auto 0; text-align: center; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; }

.menu-tabs__list {
	display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem .85rem;
	max-width: 1040px; margin: clamp(1.8rem, 3vw, 2.6rem) auto 0;
}
.menu-tab {
	display: inline-block; padding: .42em 1.05em;
	font-weight: 800; font-size: clamp(1rem, 1.2vw, 1.17rem); line-height: 1.2; white-space: nowrap;
	color: var(--white); text-decoration: none;
	background: #DB7C00; border-radius: 999px; /* the design's orange, deepened for white-text contrast */
	transition: background .2s, translate .2s var(--ease-pop);
}
.menu-tab:hover { background: #C26C00; translate: 0 -2px; }
.menu-tab[aria-selected="true"] { background: var(--ink); translate: none; }
/* Pink / Blue / Black Plate tabs: a little kaiten plate in the plate's colour. */
.menu-tab__plate {
	display: inline-block; width: .95em; height: .95em; margin: 0 .4em -.12em 0;
	border: 2px solid var(--white); border-radius: 50%;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
}
.menu-tab__plate--pink { background: #F47BA6; }
.menu-tab__plate--blue { background: #3D8BE0; }
.menu-tab__plate--black { background: #1A1A1A; }

.menu-panel { margin-top: clamp(2rem, 4vw, 3.2rem); scroll-margin-top: 7rem; outline: none; }
.menu-js .menu-panel:not(.is-active) { display: none; }
.menu-panel__head { text-align: center; }
.menu-panel__title { font-weight: 900; font-size: clamp(1.4rem, 2.3vw, 2.1rem); line-height: 1.15; }
.menu-panel__blurb { max-width: 60ch; margin: .5rem auto 0; font-size: clamp(.92rem, 1.05vw, 1rem); color: #4a4036; }
.menu-panel__link { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem .9rem; margin-top: .9rem; }
.menu-panel__link span { font-size: .85rem; font-weight: 700; color: #7a5a2e; }

.menu-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.3rem) clamp(1rem, 2.8vw, 2.6rem);
	max-width: 1120px; margin: clamp(1.4rem, 2.6vw, 2.2rem) auto 0;
}
.menu-card { display: grid; grid-template-columns: 40% minmax(0, 1fr); background: #FFF5E6; border-radius: 28px; overflow: hidden; }
/* POS photos are square crops: show them whole (the cell only grows taller when the text is longer). */
.menu-card__photo { position: relative; min-width: 0; overflow: hidden; background: #eadcc8; }
.menu-card__photo::before { content: ""; display: block; padding-top: 100%; } /* at least square; stretches with the card */
.menu-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-pop); }
.menu-card:hover .menu-card__photo img { transform: scale(1.06); }
.menu-card__body { align-self: center; padding: clamp(.9rem, 1.8vw, 1.5rem) clamp(1rem, 2vw, 1.7rem); }
.menu-card__codes { display: flex; flex-wrap: wrap; gap: .3rem; }
.hex {
	display: inline-grid; place-items: center; width: 2.35rem; height: 2.6rem;
	font-weight: 800; font-size: .76rem; color: var(--white);
	background: #C99A56; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.menu-card__name { margin: .5rem 0 0; font-weight: 800; font-size: clamp(1.18rem, 1.85vw, 1.8rem); line-height: 1.12; }
.menu-card__desc { margin-top: .4rem; font-size: clamp(.8rem, .9vw, .88rem); line-height: 1.45; color: #2d2620; }
.menu-card__flags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }
.flag {
	display: inline-flex; align-items: center; gap: .3rem;
	padding: .15rem .6rem .15rem .18rem; font-size: .7rem; font-weight: 800; letter-spacing: .02em;
	background: var(--white); border-radius: 999px;
}
.flag svg { width: 1.25rem; height: 1.25rem; padding: .18rem; border-radius: 50%; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flag--chef svg { background: var(--orange); }
.flag--spicy svg { background: #E0322B; fill: var(--white); stroke: none; }
.flag--veg svg { background: #43A047; }
.menu-card__note { margin-top: .45rem; font-size: .74rem; font-weight: 700; font-style: italic; color: #8a5a14; }

.menu-panel__next {
	display: flex; align-items: center; gap: .5rem; width: fit-content; margin: clamp(1.8rem, 3vw, 2.6rem) auto 0;
	padding: .6em 1.3em; font-weight: 700; text-decoration: none;
	border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink);
	transition: translate .18s var(--ease-pop), box-shadow .18s;
}
.menu-panel__next:hover { translate: 0 -2px; box-shadow: 0 6px 0 var(--ink); }
.menu-panel__next svg { width: 1.2rem; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.menu-list__foot { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; font-size: .82rem; color: #6b6158; }
.menu-list__cta { display: flex; justify-content: center; margin-top: 1.2rem; }

@media (prefers-reduced-motion: no-preference) {
	.menu-js .menu-panel.is-active .menu-card { animation: menu-card-in .55s var(--ease-pop) both; animation-delay: calc(min(var(--i), 10) * 45ms); }
}
@keyframes menu-card-in { from { opacity: 0; transform: translateY(26px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
	.flipbook { --turn: .01ms linear; }
	.flipbook__dot::after { animation: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.menu-hero__video { height: 70svh; min-height: 360px; }
	.menu-hero__img { object-position: 42% 50%; }
	.deco--b2 { display: none; }

	.flipbook.is-idle .flipbook__book { transform: rotateX(22deg) rotateZ(-5deg) scale(.86); }
	.flipbook__hint { position: relative; top: auto; left: auto; margin-top: .5rem; }
	.flipbook__stage { flex-direction: column; align-items: center; }
	.flipbook:not(.is-idle) .flipbook__hint { display: none; }
	.flipbook__jump { order: 4; }
	.flipbook__full { order: 5; }

	/* Categories become a sticky side rail beside the dishes (food-delivery-app style). */
	.menu-browser {
		display: grid; grid-template-columns: 6.3rem minmax(0, 1fr); align-items: start; gap: .75rem;
		margin: 1.6rem -3vw 0;
	}
	.menu-tabs {
		position: sticky; top: calc(var(--header-m, 4.4rem) + .4rem);
		max-height: calc(100svh - var(--header-m, 4.4rem) - 1.2rem); overflow-y: auto; overscroll-behavior: contain;
		scrollbar-width: none; background: #FFF5E6; border-radius: 18px;
	}
	.menu-tabs::-webkit-scrollbar { display: none; }
	.menu-tabs__list { position: relative; flex-direction: column; flex-wrap: nowrap; gap: .15rem; margin: 0; padding: .35rem; }
	.menu-tab {
		display: block; padding: .62rem .55rem; white-space: normal;
		font-size: .82rem; line-height: 1.2; color: #7A4300; background: none; border-radius: 12px;
	}
	.menu-tab:hover { background: #FFE4BF; translate: none; }
	.menu-tab[aria-selected="true"] { color: var(--white); background: var(--ink); }
	.menu-panel { margin-top: 0; scroll-margin-top: 5rem; }
	.menu-panel__head { text-align: left; }
	.menu-panel__title { font-size: 1.22rem; }
	.menu-panel__blurb { margin-top: .35rem; font-size: .84rem; line-height: 1.45; }

	/* Narrow column: photo on top, details below. */
	.menu-grid { grid-template-columns: 1fr; gap: .9rem; margin-top: 1rem; }
	.menu-card { grid-template-columns: 1fr; border-radius: 18px; }
	.menu-card__photo::before { padding-top: 100%; }
	.menu-card__body { padding: .8rem .95rem 1rem; }
	.hex { width: 2.05rem; height: 2.3rem; font-size: .68rem; }
	.menu-card__name { margin-top: .35rem; font-size: 1.08rem; }
	.menu-card__desc { font-size: .82rem; }
	.menu-panel__next { margin-top: 1.4rem; font-size: .88rem; }
}