/* --- fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Sansita+Swashed:wght@400;700&display=swap');


:root {
	--ketchup: #d92b1e;
	--mustard: #f2b705;
	--grease: #6b4a2a;
	--bun: #f4c27a;
	--neon: #00ffe1;
	--patina: rgba(0, 0, 0, 0.18);
	--paper: #fff6e6;
	--cheap-shadow: 4px 6px 0 rgba(0, 0, 0, 0.25);
	--tile-border: #e6cfa9;
}

/* --- page base --- */
html,
body {


	height: 100%;
	margin: 0;
	font-family: "Sansita Swashed", "Luckiest Guy", "Comic Sans MS", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color: #111;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background:
		radial-gradient(600px 300px at 10% 10%, rgba(255, 230, 200, 0.08), transparent 15%),
		repeating-linear-gradient(0deg, #fffef8 0 28px, #fff4e1 28px 56px);
	background-attachment: fixed;
	letter-spacing: .4px;
}

/* fake grease stains using pseudo-element on body */
body::before {
	content: '';
	position: fixed;
	left: 12%;
	top: 60%;
	width: 36vmax;
	height: 36vmax;
	pointer-events: none;
	background:
		radial-gradient(40% 30% at 20% 20%, rgba(255, 210, 140, 0.12), transparent 20%),
		radial-gradient(40% 30% at 80% 70%, rgba(0, 0, 0, 0.04), transparent 25%);
	transform: rotate(-12deg);
	mix-blend-mode: multiply;
	z-index: 0;
}

/* Solid mustard bar with ketchup trim; keep it sticky */
.navbar.b4b-glass {
	background: var(--mustard) !important;
	/* SOLID */
	border-bottom: 6px solid var(--ketchup);
	box-shadow: 0 10px 0 rgba(0, 0, 0, 0.12);
	position: sticky;
	top: 0;
	z-index: 999;
}

/* subtle dotted glaze over the solid color (still reads as solid) */
.navbar.b4b-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 12px 12px, rgba(255, 255, 255, .16) 2px, transparent 3px) 0 0/24px 24px;
	opacity: .25;
}

/* brand/title pop a bit more on mustard */
.navbar .b4b-title {
	color: #1b1b1b;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, .65), -1px 0 0 rgba(0, 0, 0, .05);
}


.btn-outline-light {
	border-color: #6b1b14;
	color: #6b1b14;
	background: #fff7f6;
}

/* tiny emoji glitter near the brand (tastefully tacky) */
.navbar .navbar-brand::after {
	content: ' 🍔✨🍟';
	margin-left: .35rem;
	animation: brandWiggle 2.2s ease-in-out infinite;
}

@keyframes brandWiggle {

	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-1px) rotate(-3deg);
	}
}

/* keep everything on one line on desktop; wrap cleanly on phones */
.navbar {
	flex-wrap: nowrap !important;
}

@media (max-width: 576px) {
	.navbar .container-fluid {
		flex-direction: column;
		align-items: stretch;
		gap: .35rem;
	}

	.navbar .navbar-brand {
		justify-content: center;
		width: 100%;
	}

	.navbar .d-flex.flex-wrap {
		justify-content: center;
		width: 100%;
		flex-wrap: wrap !important;
		gap: .4rem;
	}
}

/* cheap neon underline pulse */
.navbar.b4b-glass::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 6px;
	background: linear-gradient(90deg, var(--mustard), var(--ketchup));
	filter: drop-shadow(0 0 8px rgba(255, 0, 0, .6));
	animation: navGlow 2.8s ease-in-out infinite;
}

@keyframes navGlow {

	0%,
	100% {
		opacity: .9;
	}

	50% {
		opacity: .6;
	}
}

/* OPTIONAL: make the whole bar feel alive (very subtle) */
@media (prefers-reduced-motion: no-preference) {
	.navbar.b4b-glass {
		animation: cheapNeon 4s infinite ease-in-out;
	}

	@keyframes cheapNeon {

		0%,
		100% {
			box-shadow: 0 10px 0 rgba(0, 0, 0, .12), 0 0 10px rgba(255, 0, 0, .25);
		}

		50% {
			box-shadow: 0 10px 0 rgba(0, 0, 0, .12), 0 0 18px rgba(255, 255, 0, .35);
		}
	}
}


#menu .row:first-child img {
	width: 88px;
	max-width: 22vw;
	height: auto;
	image-rendering: pixelated;
}

@media (min-width: 768px) {
	#menu .row:first-child img {
		width: 110px;
	}
}


/* --- cards/grid/tiles --- */
.container {
	position: relative;
	z-index: 3;
}

/* card background — cheap paper tray look */
.b4b-card {
	background: linear-gradient(180deg, var(--paper), #fff0d8);
	border: 4px solid var(--tile-border) !important;
	box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.12), inset 0 -6px 0 rgba(0, 0, 0, 0.02);
	border-radius: 10px !important;
	color: #111;
}

.b4b-card img {
	width: 40%;
}

/* tile ratio — make it look like a greasy photo printed on newsprint */
.b4b-grid .ratio {
	border-radius: 8px;
	overflow: hidden;
	border: 3px dashed rgba(0, 0, 0, 0.06);
	background: linear-gradient(180deg, #fffef6, #fff7e6);
	box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.08);
	transform: rotate(-0.5deg);
	transition: transform .12s ease, box-shadow .12s ease;
}

/* hover effect: wobble and lift (tacky) */
.b4b-grid .ratio:hover {
	transform: translateY(-6px) rotate(-0.3deg) scale(1.02);
	box-shadow: 14px 16px 0 rgba(0, 0, 0, 0.14);
}

/* thumbnails — make them look over-saturated and slightly pixelated (low quality) */
.b4b-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(1.5) contrast(1.05) sepia(.06) brightness(.98);
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform: translateZ(0);
}

/* pretend sticker badge */
.b4b-tile-badge {
	position: absolute;
	top: .5rem;
	left: .5rem;
	font-size: .72rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 250, 0.95));
	color: #111;
	padding: .18rem .5rem;
	border-radius: 999px;
	border: 2px solid var(--mustard);
	box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.08);
	font-weight: 700;
}

/* modal video styling — cheap projector look */
.b4b-modal-video {
	width: 100%;
	height: auto;
	max-height: 72vh;
	background: #000;
	border: 6px solid #111;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
	filter: contrast(1.05) saturate(1.2);
}

/* modal content uses the paper tray background */
.modal-content.b4b-card {
	padding: .6rem;
	background: linear-gradient(180deg, #fffef8, #fff7e0);
	border-radius: 10px;
}

/* --- buttons --- */
.btn-b4b {
	background: linear-gradient(180deg, var(--ketchup), #d89b00);
	color: #1b1b1b;
	font-weight: 900;
	border: 3px solid var(--grease);
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12);
	text-transform: uppercase;
	letter-spacing: .8px;
	padding: .45rem .6rem;
	border-radius: 6px;
}

.btn-b4b:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.btn-outline-light {
	border: 3px dashed var(--ketchup);
	color: var(--ketchup);
	background: linear-gradient(180deg, #fff7f6, #fff1ef);
	font-weight: 700;
}


#testimonialBtn::after {
	content: 'SPECIAL';
	display: inline-block;
	margin-left: .45rem;
	font-size: .7rem;
	padding: .08rem .35rem;
	background: var(--ketchup);
	color: #fff;
	border-radius: 6px;
	border: 2px solid #6b1b14;
	transform: translateY(-1px);
}

/* small "special" sticker on submit button (pseudo) */
#submitBtn::after {
	content: 'NOW';
	display: inline-block;
	margin-left: .45rem;
	font-size: .7rem;
	padding: .08rem .35rem;
	background: var(--ketchup);
	color: #fff;
	border-radius: 6px;
	border: 2px solid #6b1b14;
	transform: translateY(-1px);
}

/* forms and inputs — cheap diner paper menu look */
.form-control,
.form-select {
	background: #fffef6;
	border: 2px solid rgba(0, 0, 0, 0.08);
	color: #222;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.03);
}

.form-control:focus {
	box-shadow: 0 0 0 .18rem rgba(210, 120, 20, 0.12);
	border-color: #e39a2b;
}

/* toast alerts — ketchup alert style */
.toast.b4b-toast {
	background: linear-gradient(180deg, #fffdf8, #fff6ea);
	color: #111;
	border: 3px solid var(--ketchup);
	font-weight: 700;
}

/* footer-like spacing for grid */
.b4b-grid {
	margin-top: 1rem;
}

/* accessibility: focus outline that's very visible */
.ratio[tabindex]:focus {
	outline: 4px dashed rgba(0, 0, 0, 0.12);
	box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.12);
}

/* small responsive tuning */
@media (max-width:576px) {
	.b4b-title {
		font-size: 1.1rem;
	}

	.b4b-logo {
		width: 40px;
		height: 40px;
	}

	.nav .d-flex::before {
		display: none;
	}
}

/* cheeky footer branding on bottom-left */
.container::after {
	content: 'BURGERS4BRYCE ™ — EST. 2025';
	position: fixed;
	left: 8px;
	bottom: 8px;
	font-size: .68rem;
	color: #6b4a2a;
	background: rgba(255, 255, 255, 0.85);
	padding: .25rem .5rem;
	border: 2px solid rgba(0, 0, 0, 0.06);
	border-radius: 6px;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.06);
	z-index: 6;
	transform: rotate(-3deg);
	pointer-events: none;
}


/* === BURGER SPLATS & FLASHY ANIMATIONS === */

/* === DRIPPY SPLATS 2.0 === */
.splat {
	position: fixed;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 9999;
	mix-blend-mode: multiply;
}

.splat .seed {
	position: absolute;
	width: var(--size, 90px);
	height: var(--size, 90px);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0.2);
	opacity: 0;
	animation: splatSeed 700ms ease-out forwards;
	filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .15));
}

.splat.ketchup .seed {
	background: radial-gradient(circle at 40% 40%, #e8402f 0%, #c32014 60%, #99140c 100%);
}

.splat.mustard .seed {
	background: radial-gradient(circle at 40% 40%, #ffd447 0%, #f2b705 60%, #cc9200 100%);
}

.splat .drop {
	position: absolute;
	width: var(--d, 10px);
	height: var(--d, 10px);
	border-radius: 55% 45% 60% 40%;
	transform: translate(-50%, -50%);
	opacity: 0.95;
	animation: splatDrop var(--t, 900ms) cubic-bezier(.2, .8, .25, 1) forwards;
	filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .15));
}

.splat.ketchup .drop {
	background: #d92b1e;
}

.splat.mustard .drop {
	background: #f2b705;
}

/* base puddle sheen */
.splat::after {
	content: "";
	position: absolute;
	left: var(--x, 0px);
	top: var(--y, 0px);
	width: calc(var(--size, 90px) * 1.15);
	height: calc(var(--size, 90px) * 0.65);
	transform: translate(-50%, -40%) rotate(var(--rot, 7deg));
	background:
		radial-gradient(100% 70% at 50% 40%, rgba(255, 255, 255, .25), transparent 60%);
	border-radius: 50%;
	opacity: .45;
	pointer-events: none;
}

/* seed pop */
@keyframes splatSeed {
	0% {
		transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
		opacity: 0;
	}

	45% {
		transform: translate(-50%, -50%) scale(1.25) rotate(8deg);
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -50%) scale(1) rotate(4deg);
		opacity: .98;
	}
}

/* droplets fling outward, arc, then drip down slightly */
@keyframes splatDrop {
	0% {
		transform: translate(calc(-50% + 0px), calc(-50% + 0px)) scale(0.6) rotate(0deg);
	}

	55% {
		transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rz));
	}

	100% {
		transform: translate(calc(-50% + var(--dx)), calc(-50% + calc(var(--dy) + var(--drip, 16px)))) scale(.95) rotate(var(--rz));
		opacity: .7;
	}
}


/* ✨ section headers get bounce + glow ✨ */
#testimonials h1,
#menu h2 {
	animation: headerPulse 3s infinite ease-in-out;
}

@keyframes headerPulse {

	0%,
	100% {
		text-shadow: 3px 3px 0 var(--mustard), 0 0 12px rgba(255, 255, 0, 0.4);
		transform: scale(1);
	}

	50% {
		text-shadow: 3px 3px 0 var(--ketchup), 0 0 24px rgba(255, 0, 0, 0.6);
		transform: scale(1.06);
	}
}

/* 😍 floating emoji background decor 😍 */
body::after {
	content: '🍔🍟🥤💥😋🍔🍔🍟';
	position: fixed;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 2rem;
	animation: floatEmoji 6s infinite ease-in-out;
	opacity: 0.7;
	pointer-events: none;
}

@keyframes floatEmoji {

	0%,
	100% {
		transform: translate(-50%, 0) rotate(0deg);
		opacity: 0.8;
	}

	50% {
		transform: translate(-50%, -12px) rotate(6deg);
		opacity: 1;
	}
}

/* 🌟 blinking neon border on testimonials */
#testimonials {
	position: relative;
	border: 4px double var(--ketchup);
	box-shadow: 0 0 18px rgba(255, 0, 0, 0.3), 0 0 36px rgba(255, 255, 0, 0.2);
	animation: borderFlash 2.5s infinite ease-in-out;
	padding: 1rem;
	border-radius: 12px;
}

@keyframes borderFlash {

	0%,
	100% {
		box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
		border-color: var(--mustard);
	}

	50% {
		box-shadow: 0 0 22px rgba(255, 0, 0, 0.7);
		border-color: var(--ketchup);
	}
}

/* 🕺 fun hover bounce on buttons */
.btn-b4b:hover {
	transform: translateY(-3px) scale(1.05) rotate(-1deg);
	box-shadow: 0 8px 0 rgba(0, 0, 0, 0.12);
}

.btn-b4b:active {
	transform: translateY(3px) scale(0.95);
}

/* fake sparkle text for “BEST MEAT” banner */
.best-meat-banner {
	display: inline-block;
	background: linear-gradient(90deg, var(--ketchup), var(--mustard));
	color: #fff;
	font-weight: 900;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	box-shadow: 0 0 12px rgba(255, 0, 0, 0.5);
	animation: sparkleText 1.8s infinite ease-in-out;
}

@keyframes sparkleText {

	0%,
	100% {
		filter: brightness(1);
		transform: rotate(-2deg);
	}

	50% {
		filter: brightness(1.3);
		transform: rotate(2deg);
	}
}


.gif-line {
	border: none;
	height: 40px;
	/* set to the height of your GIF */
	background: url('assets/shakingburger_aj.gif') repeat-x center;
	background-size: auto 100%;
	/* scale to fit height */
	margin: 2rem 0;
	opacity: 1 !important
}


/* 🍔 side GIFs */
.side-gif {
	max-width: 100%;
	width: 120px;
	height: auto;
	animation: bob 2.5s ease-in-out infinite;
}

@keyframes bob {

	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-6px) rotate(-3deg);
	}
}

/* 🔥 horizontal GIF lines */
.gif-line-top,
.gif-line-bottom {
	height: 40px;
	background: url('assets/burger_line.gif') repeat-x center;
	background-size: auto 100%;
	margin: 1.5rem 0;
	animation: scrollLine 12s linear infinite;
	filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.4));
}

.gif-line-bottom {
	transform: scaleY(-1);
	/* mirror bottom line */
}

@keyframes scrollLine {
	from {
		background-position-x: 0;
	}

	to {
		background-position-x: -500px;
	}
}

/* Responsive: hide side gifs on small screens */
@media (max-width: 768px) {
	.side-gif {
		display: none;
	}

	.gif-line-top,
	.gif-line-bottom {
		height: 28px;
	}
}


/* === Footer: solid bar + ketchup trim + neon pulse === */
.b4b-footer {
	position: relative;
	background: var(--mustard);
	border-top: 6px solid var(--ketchup);
	box-shadow: 0 -10px 0 rgba(0, 0, 0, 0.12);
	color: #1b1b1b;
	overflow: hidden;
	z-index: 5;
}

.b4b-footer::before {
	/* subtle dotted glaze texture */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 12px 12px, rgba(255, 255, 255, .16) 2px, transparent 3px) 0 0/24px 24px;
	opacity: .25;
}

.b4b-footer::after {
	/* neon underline */
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 6px;
	background: linear-gradient(90deg, var(--mustard), var(--ketchup));
	filter: drop-shadow(0 0 8px rgba(255, 0, 0, .6));
	animation: navGlow 2.8s ease-in-out infinite;
}

/* reuse existing @keyframes navGlow if defined */

/* Footer title pop */
.b4b-footer-title {
	font-family: "Luckiest Guy", sans-serif;
	letter-spacing: 0.5px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, .65), -1px 0 0 rgba(0, 0, 0, .05);
}

/* Badge area */
.b4b-badges img {
	height: 28px;
	width: auto;
	image-rendering: -webkit-optimize-contrast;
}

.footer-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .15rem .4rem;
	background: linear-gradient(180deg, #fff, #fff4e6);
	border: 2px solid rgba(0, 0, 0, .12);
	border-radius: 8px;
	box-shadow: 2px 4px 0 rgba(0, 0, 0, .08);
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.footer-badge:hover {
	transform: translateY(-2px) rotate(-1deg);
	filter: brightness(1.1);
	box-shadow: 4px 6px 0 rgba(0, 0, 0, .12);
}

/* Ad slot placeholder */
.b4b-ad-slot {
	height: 50px;
	width: 300px;
	max-width: 100%;
	border: 3px dashed rgba(0, 0, 0, .25);
	border-radius: 10px;
	background: linear-gradient(180deg, #fffdf5, #fff4dd);
	color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 4px 6px 0 rgba(0, 0, 0, .1);
}

/* Footer separator */
.footer-hr {
	border: none;
	height: 4px;
	background:
		linear-gradient(90deg, var(--ketchup), var(--mustard));
	opacity: .85;
	border-radius: 999px;
}

/* Footer links */
.footer-link {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .6px;
	text-decoration: none;
	padding: .25rem .5rem;
	border-radius: 6px;
	background: linear-gradient(180deg, #fff, #fff5eb);
	border: 2px solid rgba(0, 0, 0, .08);
	color: #1b1b1b;
	transition: transform .12s ease, box-shadow .12s ease;
}

.footer-link:hover {
	transform: translateY(-2px) rotate(-1deg);
	box-shadow: 0 6px 0 rgba(0, 0, 0, .12);
}

/* Footer marquee */
.footer-marquee {
	border-top: 2px dashed rgba(0, 0, 0, .12);
	border-bottom: 2px dashed rgba(0, 0, 0, .12);
	background: rgba(255, 255, 255, .35);
}

.footer-marquee-track {
	display: inline-block;
	white-space: nowrap;
	padding: .25rem .5rem;
	font-weight: 900;
	letter-spacing: .5px;
	animation: marquee 18s linear infinite;
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}

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

@media (prefers-reduced-motion: reduce) {
	.footer-marquee-track {
		animation: none;
	}
}

/* Responsive: stack nicely on small screens */
@media (max-width: 576px) {
	.b4b-footer .row>[class*="col-"] {
		text-align: center;
	}

	.b4b-badges {
		justify-content: center;
	}
}


.login-subtitle {
	font-family: "Sansita Swashed", cursive;
	font-size: 1.1rem;
	color: var(--grease);
	margin-top: 0.5rem;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
	animation: subtleFloat 4s ease-in-out infinite;
}

/* subtle float for subtitle */
@keyframes subtleFloat {

	0%,
	100% {
		transform: translateY(0);
		opacity: 1;
	}

	50% {
		transform: translateY(-3px);
		opacity: 0.95;
	}
}

/* use your existing pulse from nav if defined, else re-declare */
@keyframes headerPulse {

	0%,
	100% {
		text-shadow: 3px 3px 0 var(--mustard), 0 0 12px rgba(255, 255, 0, 0.4);
		transform: scale(1);
	}

	50% {
		text-shadow: 3px 3px 0 var(--ketchup), 0 0 24px rgba(255, 0, 0, 0.6);
		transform: scale(1.06);
	}
}

/* responsive tuning */
@media (max-width: 576px) {
	.login-title {
		font-size: 1.8rem;
	}

	.login-subtitle {
		font-size: 1rem;
		padding: 0 .5rem;
	}
}