/*
 * The footer: a few small links, then the scene. "Levo" is a solid wordmark (L as two bars, e and
 * o round, v as two slanted bars) that the Trash and its files land on; footer/scene.js runs it
 * on Box2D v3 (footer.js picks Throw 9 and the L5 letters). Reduced motion: the bin lies on the
 * L and the files rest on "evo", still.
 * Overrides levo.css's and mobile.css's .foot.
 */

.foot.lf {
	display: block;
	position: relative;
	max-width: none;
	margin: 120px 0 0;
	padding: 0;
	border-top: 0;
	overflow: hidden;
	color: var(--text);
	text-align: left;
}
.lf-links {
	position: relative;
	z-index: 2;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	font-size: 13px;
	color: var(--muted);
}
.lf-links a { color: inherit; text-decoration: none; transition: color .15s; }
.lf-links a:hover { color: var(--text); }
.lf-copy { margin-left: auto; }

/* The scene: its floor is the page's bottom edge; the page still scrolls over its empty parts. */
/* Tall enough for a throw's whole arc and the files' highest bounces (measured on Throw 9, ceiling
   lifted: at 1440 wide they rise about 375 px above the old 461 px stage), with about 40 px to
   spare; the scene's ceiling is this top edge, so nothing flies up behind the links. On a phone
   the throw stays low, and 340 px is the floor. */
.lf-stage { position: relative; height: clamp(340px, calc(60vw + 16px), 1200px); overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
/* The wordmark's ink at the letters' top (the Flat look); footer/scene.js fades it to nothing at the page's bottom edge. */
.lf-word { position: absolute; left: 0; top: 0; display: block; pointer-events: none; color: rgb(var(--ink) / 0.13); }
html.dark .lf-word { color: rgb(var(--ink) / 0.15); }
/* Depth (the physics test's "with depth" option): a lit ledge on top, a fine front edge, and a front
   face that softens downwards, all fading out towards the page's edge; and soft contact shadows. */
.lf-word { --lf-front: #DADADD; --lf-front-low: #E9E9EB; --lf-ledge: #ECECEE; --lf-edge: #F8F8F9; }
html.dark .lf-word { --lf-front: #232326; --lf-front-low: #151517; --lf-ledge: #303035; --lf-edge: #3D3D43; }
/* D1 (the physics test): one light from the top-left; tops lightest, faces turned away darker. */
.lf-word { --d1-top: #F2F2F4; --d1-side: #CFCFD4; --d1-front: #E1E1E4; --d1-front-low: #ECECEE; --d1-edge: #FFFFFF; }
html.dark .lf-word { --d1-top: #3B3B41; --d1-side: #18181B; --d1-front: #26262A; --d1-front-low: #131315; --d1-edge: #5A5A62; }
.lf-word3d { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.lf-shadow { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0)); will-change: transform, opacity; }
/* The carried bin's hand (the physics test): macOS's open and closed hand cursors. */
.lf-hand { position: absolute; left: 0; top: 0; z-index: 3; width: 32px; height: 32px; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
html.dark .lf-shadow { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)); }
.lf-shadow.is-faint { filter: opacity(0.45); }
.lf-bin, .lf-item {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	cursor: grab;
	touch-action: none;
	-webkit-user-drag: none;
	transform-origin: 50% 50%;
	will-change: transform;
}
.lf-bin { z-index: 2; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.14)); }
.lf-item { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.12)); }
.lf-item.is-in { opacity: 0; transition: opacity .18s; pointer-events: none; }
.lf-held { cursor: grabbing; z-index: 3; }
.lf-still .lf-bin, .lf-still .lf-item { cursor: default; will-change: auto; }

@media (max-width: 760px) {
	.foot.lf { margin-top: 96px; padding-bottom: env(safe-area-inset-bottom); }
	.lf-links { padding: 0 20px; gap: 8px 18px; }
	.lf-copy { margin-left: 0; width: 100%; }
}