/* Nothing To Eat, "The menu card": the movement of the whole page, version 3 (driven by assets/js/motion.js).
   Everything waits for html.nte-moving (the script ran, motion allowed): without it every element stands complete.
   Scroll-linked and reversible: --t (a piece's entrance), --e / --p (a section entering / passing), --v (scroll speed).
   Transforms, opacity and clips only. */
:root { --nte-weight: cubic-bezier(.16, 1, .3, 1); --nte-press: cubic-bezier(.3, 1.6, .5, 1); }

/* Hover and press with weight */
.nte-btn { position: relative; box-shadow: 6px 6px 0 var(--nte-black); transition: background .25s, color .25s, transform .35s var(--nte-weight), box-shadow .35s var(--nte-weight); }
.nte-btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--nte-red); }
.nte-btn:active { transform: translate(5px, 5px); box-shadow: 1px 1px 0 var(--nte-red); transition-duration: .08s; }
.nte-bar__nav a { background: linear-gradient(var(--nte-red), var(--nte-red)) left bottom / 0 2px no-repeat; transition: background-size .45s var(--nte-weight), color .2s; }
.nte-bar__nav a:hover { background-size: 100% 2px; border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .nte-btn, .nte-btn:hover, .nte-btn:active { transform: none; transition: none; } }

/* The scroll progress */
.nte-progress { position: fixed; left: 0; right: 0; top: calc(var(--nte-bar) - 3px); height: 3px; z-index: 21; background: var(--nte-red); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

html.nte-moving {
	/* 1. The first screen: assembles once on arrival (it is on screen already), then parts with the scroll and comes
	   back together on the way up: the text lifts and thins, the sandwich drops, turns and grows. */
	& .nte-hero__name { animation: nte-assemble 1.1s var(--nte-weight) var(--nte-d0, .15s) both; }
	& .nte-hero__sub, & .nte-hero__line, & .nte-hero .nte-btn, & .nte-hero__foot { animation: nte-up .9s var(--nte-weight) both; }
	& .nte-hero__sub { animation-delay: calc(var(--nte-d0, .15s) + .35s); }
	& .nte-hero__line { animation-delay: calc(var(--nte-d0, .15s) + .45s); }
	& .nte-hero .nte-btn { animation-name: nte-up-btn; animation-delay: calc(var(--nte-d0, .15s) + .55s); }
	& .nte-hero__foot { animation-delay: calc(var(--nte-d0, .15s) + .7s); }
	& .nte-hero__pic img { animation: nte-plate 1.3s var(--nte-weight) var(--nte-d0, .15s) both; }
	& .nte-hero__text { transform: translate3d(0, calc(var(--p, 0) * -120px), 0); opacity: calc(1 - var(--p, 0) * .6); }
	& .nte-hero__pic { transform: translate3d(0, calc(var(--p, 0) * 160px), 0) rotate(calc(var(--p, 0) * 8deg)) scale(calc(1 + var(--p, 0) * .08)); }

	/* 2. Pieces: rise with weight; headings are written in by a clip from the left; labels slide in. */
	& .nte-r:not(.nte-dish):not(.nte-points):not(.nte-three):not(.nte-col):not(.nte-h2):not(.nte-poster__text):not(.nte-menu__group), & .nte-points > li, & .nte-list > li, & .nte-three > li, & .nte-dish__line, & .nte-dish__desc, & .nte-poster__text > p, & .nte-local__text > p, & .nte-menu__group {
		opacity: calc(var(--t, 1) * 1.4 - .4);
		transform: translate3d(0, calc((1 - var(--t, 1)) * 48px), 0);
	}
	& .nte-h2, & .nte-col__h, & .nte-dish__name, & .nte-poster__h {
		opacity: 1;
		transform: translate3d(calc((1 - var(--t, 1)) * -36px), calc((1 - var(--t, 1)) * 18px), 0) skewX(calc((1 - var(--t, 1)) * -6deg));
		clip-path: inset(-.3em calc((1 - var(--t, 1)) * 100%) -.3em -.3em);
	}
	/* list rows print: a hairline grows first, the words follow */
	& .nte-points > li, & .nte-list > li { clip-path: inset(0 calc((1 - var(--t, 1)) * 60%) 0 0); }
	& .nte-points h3::before, & .nte-list h4::before { transform: rotate(calc((1 - var(--t, 1)) * -180deg)) scale(calc(.4 + var(--t, 1) * .6)); }

	/* 3. The menu: the wordmark rises over the band; each sandwich picture is uncovered by a mask from its own side,
	   settles from a turn and a slight zoom, then drifts and leans with the scroll speed as it passes. */
	& .nte-menu__logo { transform: translate3d(0, calc((1 - var(--e, 1)) * 60px), 0) scale(calc(.86 + var(--e, 1) * .14)); }
	& .nte-dish__pic { clip-path: inset(0 calc((1 - var(--t, 1)) * 100%) 0 0 round calc((1 - var(--t, 1)) * 40px)); }
	& .nte-dish--flip .nte-dish__pic { clip-path: inset(0 0 0 calc((1 - var(--t, 1)) * 100%) round calc((1 - var(--t, 1)) * 40px)); }
	& .nte-dish__pic img { will-change: transform; transform: translate3d(0, calc((var(--p, .5) - .5) * -80px), 0) rotate(calc((1 - var(--t, 1)) * -7deg + (var(--p, .5) - .5) * -4deg)) scale(calc(1.18 - var(--t, 1) * .18)) skewY(calc(var(--v, 0) * 3deg)); }
	& .nte-dish--flip .nte-dish__pic img { transform: translate3d(0, calc((var(--p, .5) - .5) * -80px), 0) rotate(calc((1 - var(--t, 1)) * 7deg + (var(--p, .5) - .5) * 4deg)) scale(calc(1.18 - var(--t, 1) * .18)) skewY(calc(var(--v, 0) * -3deg)); }

	/* 4. The poster: a black card rising over the page, its corners opening; the chicken grows into place;
	   "Chicken Sandwich" is written in. */
	& .nte-poster { clip-path: inset(calc((1 - var(--e, 1)) * 12%) calc((1 - var(--e, 1)) * 7%) 0 round calc((1 - var(--e, 1)) * 44px)); }
	& .nte-poster__pic img { transform: scale(calc(1.24 - var(--e, 1) * .24)) translate3d(0, calc((var(--p, .5) - .5) * -40px), 0); transform-origin: 50% 60%; }

	/* 5. Local: the giant mark turns and sinks with the scroll, the three words follow */
	& .nte-local__mark { transform: translate3d(0, calc(var(--p, .5) * 160px - 80px), 0) rotate(calc(var(--p, .5) * 180deg - 90deg)) scale(calc(.8 + var(--e, 1) * .2)); }
}
html.nte-moving.nte-splash-on { --nte-d0: .7s; }
html.nte-moving.nte-splash-on .nte-hero__text, html.nte-moving.nte-splash-on .nte-hero__pic { animation: none; }

@keyframes nte-assemble { from { clip-path: inset(0 100% 0 0); transform: translate3d(-24px, 0, 0); } 60% { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes nte-up { from { opacity: .001; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes nte-up-btn { from { opacity: .001; transform: translate3d(0, 22px, 0); box-shadow: 0 0 0 var(--nte-black); } to { opacity: 1; transform: none; box-shadow: 6px 6px 0 var(--nte-black); } }
@keyframes nte-plate { from { transform: translate3d(40px, 30px, 0) rotate(7deg) scale(1.06); } to { transform: none; } }

@media print { .nte-progress { display: none; } html.nte-moving * { clip-path: none !important; opacity: 1 !important; transform: none !important; } }