/* Backgrounds, patterns, section edges and motion helpers. Loaded on every page.
   Patterns are drawn on ::before layers so they never affect text contrast. */

/* ---------- Patterned surfaces ---------- */
.section--cream,
.menu-body-wrap,
.cart__body {
	position: relative;
	isolation: isolate;
}

.section--cream::before,
.menu-body-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../images/doodle.svg") 0 0 / 240px 240px repeat;
	opacity: 0.06;
	pointer-events: none;
}

/* Ink: yellow dot grid that fades toward the centre + film grain */
.section--ink,
.site-footer,
.strip {
	position: relative;
	isolation: isolate;
}

.section--ink::before,
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgb(255 237 0 / 0.22) 1.2px, transparent 1.6px);
	background-size: 22px 22px;
	mask-image: radial-gradient(120% 90% at 50% 0%, transparent 35%, #000 100%);
	pointer-events: none;
}

.section--ink::after,
.site-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
	opacity: 0.09;
	mix-blend-mode: overlay;
	pointer-events: none;
}

/* Teal: drifting wave lines */
.section--teal {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.section--teal::before {
	content: "";
	position: absolute;
	inset: -40px 0;
	z-index: -1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40'%3E%3Cpath d='M0 20c20-14 60-14 80 0s60 14 80 0' fill='none' stroke='%23fff' stroke-width='2' opacity='.13'/%3E%3C/svg%3E") 0 0 / 160px 40px;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.section--teal::before {
		animation: drift 18s linear infinite;
	}
}

@keyframes drift {
	to {
		background-position: 160px 40px;
	}
}

/* Yellow: soft sun glows behind the hero + menu header */
.hero::after,
.menu-hero::after,
.page-hero::after,
.branch-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(40% 55% at 85% 20%, rgb(255 255 255 / 0.55), transparent 70%),
		radial-gradient(30% 45% at 10% 95%, rgb(20 108 129 / 0.12), transparent 70%);
	pointer-events: none;
}

.menu-hero,
.page-hero,
.branch-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.menu-hero::before,
.page-hero::before,
.branch-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: repeating-linear-gradient(-35deg, transparent 0 46px, rgb(35 31 32 / 0.04) 46px 48px);
	pointer-events: none;
}

.menu-hero > .wrap,
.page-hero > .wrap,
.branch-hero > .wrap,
.hero > .wrap {
	position: relative;
	z-index: 1;
}

/* ---------- Scalloped "menu card" edge under yellow blocks ---------- */
.scallop {
	position: relative;
	z-index: 4;
	height: 16px;
	margin-bottom: -16px;
	background: radial-gradient(circle at 12px 0, var(--yellow) 11px, transparent 12px) 0 0 / 24px 16px repeat-x;
	pointer-events: none;
}

/* ---------- Tilted marquee band ---------- */
.marquee {
	position: relative;
	z-index: 3;
	overflow: hidden;
	margin-block: -6px -30px;
	padding-block: 14px;
	background: var(--ink);
	color: var(--yellow);
	border-block: 3px solid var(--yellow);
	rotate: -2deg;
	box-shadow: 0 12px 30px -16px rgb(35 31 32 / 0.7);
	scale: 1.04;
}

.marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.marquee__group {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-right: 28px;
	font-family: var(--f-head);
	font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.marquee__group .icon {
	width: 0.9em;
	height: 0.9em;
	color: var(--paper);
}

.marquee--teal {
	background: var(--teal);
	color: var(--paper);
	rotate: 1.5deg;
}

.marquee--teal .icon {
	color: var(--yellow);
}

/* CSS fallback scroll; motion.js takes over with scroll-velocity control */
@media (prefers-reduced-motion: no-preference) {
	.marquee__track {
		animation: marquee 38s linear infinite;
	}
	.marquee--teal .marquee__track {
		animation-direction: reverse;
	}
	.has-motion .marquee__track {
		animation: none;
	}
}

@keyframes marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ---------- Scroll progress ---------- */
.progress {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 70;
	height: 4px;
	background: var(--teal);
	transform-origin: 0 50%;
	transform: scaleX(0);
	pointer-events: none;
}

/* ---------- Fly-to-cart dot ---------- */
.fly-dot {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 90;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--yellow);
	pointer-events: none;
}

/* ---------- Hero entrance (motion.js animates; CSS safety net if it never runs) ---------- */
.js .hero__title .w,
.js .hero [data-hero-in] {
	opacity: 0;
}

.has-motion .hero__title .w,
.has-motion .hero [data-hero-in],
.motion-fallback .hero__title .w,
.motion-fallback .hero [data-hero-in] {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.js .hero__title .w,
	.js .hero [data-hero-in] {
		opacity: 1;
	}
}

.hero__title .w {
	display: inline-block;
}

/* Steam wisps rising off the platter photo */
.steam {
	position: absolute;
	left: 18%;
	top: -6%;
	z-index: 3;
	width: 34%;
	color: var(--ink);
	pointer-events: none;
}

.steam path {
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.steam path {
		animation: steam 3.6s ease-in-out infinite;
	}
	.steam path:nth-child(2) {
		animation-delay: 1.2s;
	}
	.steam path:nth-child(3) {
		animation-delay: 2.4s;
	}
}

@keyframes steam {
	0% {
		opacity: 0;
		transform: translateY(18px) scaleY(0.8);
	}
	35% {
		opacity: 0.55;
	}
	100% {
		opacity: 0;
		transform: translateY(-26px) scaleY(1.1);
	}
}

/* Count-up numbers keep their width */
[data-count] {
	font-variant-numeric: tabular-nums;
}

/* Room for the tilted marquee that overlaps the strip bottom */
.strip {
	padding-bottom: 26px;
}