/**
 * FOODページ専用（page-food.php のときだけ読み込む）。
 * 色・書体・余白はサイト共通のトークン（main.css の :root）を使う。案Bでもトークンが置き換わるので、そのまま馴染む。
 *
 * 2. リードと写真（.food-hero）
 * 3. PICK UP（.pick）
 * 4. GALLERY（.food-gallery）
 * 7. 登場の動き（[data-rv]）
 */

.food {
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	overflow-x: clip;   /* はみ出す写真で横スクロールが出ないように */
}
.food img { display: block; width: 100%; height: 100%; object-fit: cover; }
.food-shape { overflow: hidden; background: var(--paper); }
.food-sec-title { margin-bottom: 28px; }
@media (min-width: 768px) { .food-sec-title { margin-bottom: 44px; } }

/* =========================================================
 * 2. FOOD（ページの頭）
 * ========================================================= */
.food-hero { position: relative; background: var(--shutter); container-type: inline-size; }
.food-hero__inner {
	max-width: calc(1280px + var(--gutter) * 2);
	margin-inline: auto;
	padding: 32px var(--gutter) 64px;
	display: grid;
	grid-template-areas: "photos" "lead";
	gap: 28px;
}
.food-hero__photos { grid-area: photos; position: relative; height: 98cqw; }
.food-hero__ph { position: absolute; margin: 0; }
.food-hero__ph--a { right: -12%; top: 0; width: 80%; aspect-ratio: 1; }
.food-hero__ph--a .food-shape { height: 100%; border-radius: 2px; }
.food-hero__ph--b { left: 0; bottom: 0; width: 54%; aspect-ratio: 4 / 3; z-index: 2; }
.food-hero__ph--b .food-shape { height: 100%; border-radius: 2px; border: 6px solid var(--shutter); }

.food-hero__lead { grid-area: lead; max-width: 34em; }
.food-hero__catch { margin: 0 0 14px; font-size: 1.5rem; line-height: 1.5; letter-spacing: 0.04em; word-break: auto-phrase; }
.food-hero__text { margin: 0; line-height: 2; color: var(--ink-soft); word-break: auto-phrase; }

/* タブレット：写真の重なりが縦に伸びすぎないように */
@media (min-width: 600px) and (max-width: 1023px) {
	.food-hero__photos { height: 66cqw; }
	.food-hero__ph--a { right: -6%; width: 64%; }
	.food-hero__ph--b { width: 44%; left: 4%; }
}

@media (min-width: 1024px) {
	.food-hero__inner {
		grid-template-columns: 5fr 6fr;
		grid-template-areas: "lead photos";
		align-items: center;
		gap: 48px 64px;
		padding-block: 64px 112px;
	}
	.food-hero__photos { height: auto; aspect-ratio: 1 / 0.92; }
	.food-hero__ph--a { right: -6%; top: 0; width: 82%; }
	.food-hero__ph--b { left: 0; bottom: 0; width: 52%; }
	.food-hero__catch { font-size: 2rem; }
	.food-hero__text { font-size: 1.0625rem; }
}


/* ---------------------------------------------------------
 * 2b. 上部の写真：大きい写真の左下に、黒い板をずらして敷く
 *     （PC は food.js が少し遅れて動かす＝data-speed。登場時は左から伸びる）
 * --------------------------------------------------------- */
.food-hero__ph--a { isolation: isolate; }
.food-hero__block {
	position: absolute;
	inset: 9% 9% -9% -9%;
	z-index: -1;
	background: var(--facade);
	pointer-events: none;
}

/* =========================================================
 * 3. PICK UP
 * ========================================================= */
.food-pick { padding-top: 72px; background: var(--shutter); }
@media (min-width: 768px) { .food-pick { padding-top: 120px; } }

.pick { padding-block: 40px 56px; }
.pick__inner {
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	gap: 24px;
}
.pick__photo { position: relative; margin: 0; }
.pick__num {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	letter-spacing: 0.2em;
	color: var(--ink-soft);
}
.pick__num::after { content: ""; display: inline-block; width: 40px; height: 1px; margin-left: 12px; vertical-align: middle; background: currentColor; }
.pick__en { margin: 0 0 4px; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.14em; color: var(--green-dark); }
.pick__name { margin: 0 0 14px; font-size: 1.625rem; line-height: 1.4; letter-spacing: 0.04em; word-break: auto-phrase; }
.pick__text { margin: 0; line-height: 2; color: var(--ink-soft); word-break: auto-phrase; }

/* v1：白地・左に大きな写真（スマホは右端まで） */
.pick--v1 .pick__photo { margin-right: calc(-1 * var(--gutter)); }
.pick--v1 .food-shape { aspect-ratio: 4 / 3; border-radius: 2px 0 0 2px; }
/* v2：灰地・右に丸い写真 */
.pick--v2 { background: var(--paper); padding-block: 56px; }
.pick--v2 .pick__photo { width: 84%; margin-left: auto; margin-right: -6%; }
.pick--v2 .food-shape { aspect-ratio: 4 / 5; border-radius: 2px; }
/* v3：黒地・横長の写真に、黒い札が重なる */
.pick--v3 { background: var(--facade); color: #fff; padding-block: 0 56px; }
.pick--v3 .pick__inner { padding-inline: 0; max-width: none; gap: 0; }
.pick--v3 .food-shape { aspect-ratio: 4 / 3; border-radius: 0; }
.pick--v3 .pick__body {
	position: relative;
	z-index: 2;
	margin: -56px var(--gutter) 0;
	padding: 24px 22px 4px;
	background: var(--facade);
	border-top: 1px solid var(--facade-2);
}
.pick--v3 .pick__num { color: var(--facade-soft); }
.pick--v3 .pick__en { color: var(--green); }
.pick--v3 .pick__name { color: #fff; }
.pick--v3 .pick__text { color: var(--facade-soft); }

@media (min-width: 768px) {
	.pick { padding-block: 64px 88px; }
	.pick__inner { grid-template-columns: 7fr 5fr; align-items: center; gap: 56px; }
	.pick__name { font-size: 2.25rem; }
	.pick__text { font-size: 1.0625rem; }

	.pick--v1 .pick__photo { margin-right: 0; margin-left: calc(-1 * var(--gutter)); }
	.pick--v1 .food-shape { border-radius: 0 2px 2px 0; }

	.pick--v2 { padding-block: 96px; }
	.pick--v2 .pick__inner { grid-template-columns: 6fr 5fr; }
	.pick--v2 .pick__photo { order: 2; width: 100%; margin: 0; }
	.pick--v2 .pick__body { padding-left: 4%; }

	.pick--v3 { padding-bottom: 96px; }
	.pick--v3 .pick__inner { grid-template-columns: 1fr; }
	.pick--v3 .food-shape { aspect-ratio: 21 / 9; }
	.pick--v3 .pick__body {
		width: min(560px, calc(100% - var(--gutter) * 2));
		margin: -160px 0 0 max(var(--gutter), calc((100% - var(--wrap)) / 2));
		padding: 36px 40px 8px;
	}
}

/* ---------------------------------------------------------
 * 3b. PICK UP の写真：ずらした細い線の枠・縦書きの「PICK UP」・大きな番号
 *     v1・v3 は枠を左上へ、v2（写真が右）は右上へずらして左右を反転
 * --------------------------------------------------------- */
.pick__photo { --fo: 10px; color: var(--ink); }
.pick__photo .food-shape { position: relative; z-index: 1; }
.pick__frame {
	position: absolute;
	inset: calc(-1 * var(--fo)) var(--fo) var(--fo) calc(-1 * var(--fo));
	z-index: 0;
	border: 1px solid currentColor;
	pointer-events: none;
}
.pick__no {
	position: absolute;
	right: 14px;
	bottom: 0;
	z-index: 2;
	translate: 0 50%;
	font-family: var(--font-display);
	font-size: clamp(2.75rem, 11vw, 4.75rem);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--green);
	pointer-events: none;
}
.pick__label { display: none; }
.pick__body { padding-top: 22px; }   /* 下にはみ出した番号の分 */

/* v1：スマホは右端まで出していたのをやめ、枠が見えるように内側へ */
.pick--v1 .pick__photo { margin-right: 0; }
.pick--v1 .food-shape { border-radius: 2px; }
/* v2：右にずらす（はみ出しをやめる）＋左右反転 */
.pick--v2 .pick__photo { width: 86%; margin-right: 0; }
.pick--v2 .pick__frame { inset: calc(-1 * var(--fo)) calc(-1 * var(--fo)) var(--fo) var(--fo); }
.pick--v2 .pick__no { right: auto; left: 14px; }
/* v3：黒地の上は白の線。写真は端まで出さず、上にも余白 */
.pick--v3 { padding-top: 56px; }
.pick--v3 .pick__photo { margin-inline: var(--gutter); color: rgba(255, 255, 255, 0.45); }
.pick--v3 .food-shape { border-radius: 2px; }
.pick--v3 .pick__body { margin-top: 0; padding: 44px 0 4px; border-top: 0; background: none; z-index: auto; }   /* スマホは写真に重ねない（番号が隠れないように） */

@media (min-width: 768px) {
	.pick__photo { --fo: 18px; }
	.pick__body { padding-top: 0; }
	.pick__label {
		position: absolute;
		top: 0;
		left: -44px;
		display: flex;
		align-items: center;
		gap: 14px;
		writing-mode: vertical-rl;
		rotate: 180deg;
		font-family: var(--font-display);
		font-size: 0.8125rem;
		letter-spacing: 0.32em;
		white-space: nowrap;
	}
	.pick__label::after { content: ""; width: 1px; height: 48px; background: currentColor; }
	.pick--v1 .pick__photo { margin-left: 44px; }
	.pick--v1 .food-shape { border-radius: 2px; }
	.pick--v2 .pick__photo { margin-right: 44px; width: auto; }
	.pick--v2 .pick__label { left: calc(100% + 30px); }
	.pick--v3 { padding-top: 96px; }
	.pick--v3 .pick__inner { max-width: calc(var(--wrap) + var(--gutter) * 2); padding-inline: var(--gutter); }
	.pick--v3 .pick__photo { margin: 0 0 0 44px; }
	.pick--v3 .pick__body { margin: -120px 0 0 44px; padding: 36px 40px 8px; border-top: 1px solid var(--facade-2); background: var(--facade); z-index: 2; }
}

/* =========================================================
 * 4. GALLERY：白い面に、大小の写真をタイルのように敷き詰める（すぐ下の黒いフッターと分かれるように白）
 * 6枚ごとの組み：PC は 1段目＝1 大きな横長＋2・3 を右に重ねる／2段目＝4・5・6 の縦長
 *                スマホは 2列：1 横長（全幅）／2・3 縦長／4 横長（全幅）／5・6 縦長
 * ========================================================= */
.food-gallery { padding-block: 72px 88px; background: var(--shutter); }
.food-gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.food-gallery__count {
	margin: 0 0 28px;
	font-family: var(--font-display);
	font-size: 0.875rem;
	letter-spacing: 0.24em;
	color: var(--ink-soft);
}
.food-gallery__list {
	max-width: calc(1280px + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter);
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 26vw;
	grid-auto-flow: dense;
	gap: 6px;
}
.gx { margin: 0; min-width: 0; min-height: 0; }
.gx--1, .gx--4 { grid-column: span 2; grid-row: span 2; }
.gx--2, .gx--3, .gx--5, .gx--6 { grid-row: span 2; }

.gx__shape {
	position: relative;
	height: 100%;
	margin: 0;
	border-radius: 3px;
	background: var(--paper);
	isolation: isolate;
}
.gx__shape img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out), scale 1.1s var(--ease-out), filter 0.6s; }
/* 番号：左上に小さく */
.gx__no {
	position: absolute;
	top: 12px;
	left: 14px;
	z-index: 2;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.gx__no::after { content: ""; display: inline-block; width: 22px; height: 1px; margin-left: 10px; vertical-align: middle; background: rgba(255, 255, 255, 0.7); }
/* キャプション：下に、暗いグラデーションの上で */
.gx__cap {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 40px 14px 12px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
	color: #fff;
	font-size: 0.8125rem;
	line-height: 1.6;
	letter-spacing: 0.04em;
}
/* 細い内枠（マウスを乗せると出る） */
.gx__shape::after {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, 0);
	border-radius: 2px;
	transition: border-color 0.5s, inset 0.6s var(--ease-out);
	pointer-events: none;
}
@media (hover: hover) {
	.gx__cap { opacity: 0; transform: translateY(8px); transition: opacity 0.45s, transform 0.6s var(--ease-out); }
	.gx:hover .gx__cap { opacity: 1; transform: none; }
	.gx:hover .gx__shape img { scale: 1.05; }
	.gx:hover .gx__shape::after { border-color: rgba(255, 255, 255, 0.55); inset: 14px; }
	.food-gallery__list:hover .gx:not(:hover) .gx__shape img { filter: brightness(0.82) saturate(0.8); }
}

/* PC：12列。1段目＝大（7列）＋右に2枚、2段目＝縦長3枚 */
@media (min-width: 768px) {
	.food-gallery { padding-block: 120px 140px; }
	.food-gallery__count { margin-bottom: 44px; }
	.food-gallery__list {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-auto-rows: clamp(56px, 5.4vw, 76px);
		gap: 10px;
	}
	.gx--1 { grid-column: span 7; grid-row: span 8; }
	.gx--2, .gx--3 { grid-column: span 5; grid-row: span 4; }
	.gx--4, .gx--5, .gx--6 { grid-column: span 4; grid-row: span 7; }
	.gx__no { top: 18px; left: 20px; }
	.gx__cap { padding: 56px 20px 18px; font-size: 0.875rem; }
}
/* 6枚に満たないときも、隙間ができないように（最後の1枚は残りを埋める） */
.food-gallery__list > .gx:last-child:nth-child(6n + 2) { grid-column: 1 / -1; }

/* =========================================================
 * 7. 登場の動き（food.js が html.food-js を付けたときだけ。JSなし・動きを減らす設定では最初から表示）
 * ========================================================= */
html.food-js [data-rv] {
	transition:
		opacity 0.9s var(--ease-out) var(--rv-d, 0ms),
		transform 1s var(--ease-out) var(--rv-d, 0ms),
		clip-path 1.1s cubic-bezier(0.7, 0, 0.2, 1) var(--rv-d, 0ms);
}
html.food-js [data-rv="rise"]:not(.is-in)  { opacity: 0; transform: translateY(36px); }
html.food-js [data-rv="fade"]:not(.is-in)  { opacity: 0; }
html.food-js [data-rv="pop"]:not(.is-in)   { opacity: 0; transform: scale(0.96); }
html.food-js [data-rv="tilt"]:not(.is-in)  { opacity: 0; transform: translateY(40px); }
html.food-js [data-rv="reveal"]:not(.is-in) { clip-path: inset(0 0 100% 0); }
html.food-js [data-rv="reveal"].is-in      { clip-path: inset(0 0 0 0); }
/* 大きな文字は下からせり上がる */
html.food-js [data-rv="mask"] { transition: transform 1.1s var(--ease-out) var(--rv-d, 0ms); }
html.food-js [data-rv="mask"]:not(.is-in) { transform: translateY(105%); }
/* 写真は中で少し寄った状態から戻る */
html.food-js [data-rv] .food-shape img,
html.food-js .food-shape[data-rv] img { transition: transform 1.6s var(--ease-out) var(--rv-d, 0ms), scale 0.6s var(--ease-out); }
html.food-js [data-rv]:not(.is-in) .food-shape img,
html.food-js .food-shape[data-rv]:not(.is-in) img { transform: scale(1.22); }

/* =========================================================
 * 3a. 営業日カレンダー（ボタン → モーダル）
 *     ボタン：黒い板（上部の写真と同じ黒）に白い文字。押すと、画像が下から幕が上がるように開く
 * ========================================================= */
.food-cal { background: var(--shutter); padding: 8px 0 8px; }
.food-cal__inner { max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.food-cal__btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 18px 20px;
	background: var(--facade);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
}
/* マウスを乗せる・押すと、緑の帯が左から満ちる */
.food-cal__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--green-dark);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.food-cal__btn:hover,
.food-cal__btn:focus-visible { color: #fff; }
.food-cal__btn:hover::before,
.food-cal__btn.is-tap::before { transform: scaleX(1); }
.food-cal__btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.food-cal__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; color: var(--yellow); }
.food-cal__txt { display: grid; gap: 2px; min-width: 0; }
.food-cal__en { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-family: var(--font-display); font-size: 1.375rem; line-height: 1; letter-spacing: 0.06em; white-space: nowrap; }
.food-cal__month { font-size: 0.875rem; letter-spacing: 0.12em; color: var(--yellow); }
.food-cal__ja { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75); }
@media (max-width: 359px) { .food-cal__btn { gap: 12px; padding: 16px 14px; } .food-cal__ja { letter-spacing: 0.02em; } }   /* 小さい画面でも1行に */
.food-cal__ja { white-space: nowrap; }
/* 右端の「＋」：押すと「×」の向きへ回る（開いている間） */
.food-cal__plus { position: relative; flex: none; width: 22px; height: 22px; margin-left: auto; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.food-cal__plus::before,
.food-cal__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }
.food-cal__plus::after { transform: rotate(90deg); }
.food-cal__btn:hover .food-cal__plus { transform: rotate(90deg); }
@media (min-width: 768px) {
	.food-cal { padding: 16px 0 8px; }
	.food-cal__btn { width: auto; min-width: 440px; padding: 22px 28px; gap: 20px; }
	.food-cal__icon { width: 52px; height: 52px; }
	.food-cal__en { font-size: 1.875rem; }
}

/* モーダル：<dialog>。背景は黒く暗転、中身は下から幕が上がるように出て、画像は少し寄った状態から戻る */
.food-cal-modal {
	width: min(760px, calc(100vw - 24px));
	max-width: none;
	max-height: calc(100dvh - 24px);
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	overflow: visible;
}
.food-cal-modal::backdrop { background: rgba(10, 10, 10, 0); backdrop-filter: blur(0); transition: background-color 0.4s ease, backdrop-filter 0.4s ease; }
.food-cal-modal.is-open::backdrop { background: rgba(10, 10, 10, 0.82); backdrop-filter: blur(3px); }
.food-cal-modal__panel {
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 24px);
	background: var(--shutter);
	box-shadow: 14px 14px 0 var(--facade);
	clip-path: inset(100% 0 0 0);
	transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.2, 1);
}
.food-cal-modal.is-open .food-cal-modal__panel { clip-path: inset(0 0 0 0); }
.food-cal-modal.is-closing .food-cal-modal__panel { clip-path: inset(0 0 100% 0); transition-duration: 0.45s; }
.food-cal-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; background: var(--facade); color: #fff; }
.food-cal-modal__title { display: flex; align-items: baseline; gap: 12px; margin: 0; font-family: var(--font-display); font-size: 1.375rem; letter-spacing: 0.06em; line-height: 1; }
.food-cal-modal__month { font-size: 0.875rem; letter-spacing: 0.12em; color: var(--yellow); }
.food-cal-modal__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.3s; }
.food-cal-modal__close .icon { width: 20px; height: 20px; }
.food-cal-modal__close:hover { background: var(--yellow); color: #000; transform: rotate(90deg); }
.food-cal-modal__close:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.food-cal-modal__fig { margin: 0; overflow: auto; overscroll-behavior: contain; background: #fff; }
.food-cal-modal__fig img { display: block; width: 100%; height: auto; transform: scale(1.08); opacity: 0; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, opacity 0.5s ease 0.25s; }
.food-cal-modal.is-open .food-cal-modal__fig img { transform: none; opacity: 1; }
/* モーダルが開いている間は、後ろのページを動かさない */
html.has-food-cal { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.food-cal__btn::before, .food-cal__plus, .food-cal-modal__panel, .food-cal-modal__fig img, .food-cal-modal::backdrop { transition: none; }
	.food-cal-modal__panel { clip-path: none; }
	.food-cal-modal__fig img { transform: none; opacity: 1; }
}

/* =========================================================
 * 7b. ページ上部の2枚：順番に幕が開く
 *   1枚目（大）＝下から上へ幕が上がる → 2枚目（小）＝左から右へ → 最後に黒い板が左から伸びる
 *   写真の中身は、少し寄った状態から戻る（PICK UP と同じ）。PC では2枚目と黒い板がスクロールで少しずれて動く
 * ========================================================= */
html.food-js .food-hero .food-shape[data-rv] { transition: clip-path 1.2s cubic-bezier(0.7, 0, 0.2, 1); }
html.food-js .food-hero .food-shape[data-rv="reveal"] { transition-delay: 0.1s; }
html.food-js .food-hero .food-shape[data-rv="reveal-l"] { transition-delay: 0.55s; }
html.food-js .food-hero .food-shape[data-rv="reveal-l"]:not(.is-in) { clip-path: inset(0 100% 0 0); }
html.food-js .food-hero .food-shape[data-rv="reveal-l"].is-in { clip-path: inset(0 0 0 0); }
html.food-js .food-hero .food-shape[data-rv] img { transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1), scale 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
html.food-js .food-hero .food-shape[data-rv="reveal"] img { transition-delay: 0.1s, 0s; }
html.food-js .food-hero .food-shape[data-rv="reveal-l"] img { transition-delay: 0.55s, 0s; }
html.food-js .food-hero .food-hero__block[data-rv="wipe"] { transition: clip-path 1s cubic-bezier(0.7, 0, 0.2, 1) 1s; }
html.food-js .food-hero .food-hero__block[data-rv="wipe"]:not(.is-in) { clip-path: inset(0 100% 0 0); }
html.food-js .food-hero .food-hero__block[data-rv="wipe"].is-in { clip-path: inset(0 0 0 0); }