/* The rolling bagel (17/10/2026, folded in from the ?concept=1 preview, HOLYBAGEL-BAGEL-CONCEPT.md §3A).
   A bagel is a wheel: as a framed panel scrolls in, one lit bagel rolls along that panel's top seam from the
   reading start (right) and stops at its resting point, then gives a small landing rock. The roll is scrubbed by
   the scroll itself (CSS scroll-driven animation on a named view timeline; polish-bagel.js is the fallback), so it
   is always exactly as far as the visitor has scrolled and reverses when they scroll back.
   An absolute layer on <body>: zero layout, transform/opacity only, never takes a pointer. */
.hbb-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 7; pointer-events: none; } /* above the host panel (home .hb-catering is z 5), below header/bars/dialogs */
.hbb-roll {
	--s: 76px; --hbb-x: 0px; --hbb-y: -999px; --hbb-d: 0px; --hbb-turn: 0deg;
	position: absolute; top: 0; left: 0; width: var(--s); height: var(--s); contain: layout style;
	/* The resting place (reduced motion, and the end of the roll). */
	transform: translate3d(calc(var(--hbb-x) - var(--hbb-d)), var(--hbb-y), 0);
}
.hbb-roll__shadow {
	position: absolute; left: 8%; right: 8%; bottom: -5%; height: 15%; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(53, 43, 36, .32), rgba(53, 43, 36, 0));
	transform-origin: 50% 50%;
}
.hbb-roll__body { position: absolute; inset: 0; transform-origin: 50% 100%; }
.hbb-roll__img { display: block; width: 100%; height: 100%; transform: rotate(var(--hbb-turn)); }
/* The light does not turn with the bagel: a fixed key light top-left and a core shadow bottom-right, clipped to
   the bagel's own silhouette. A turning texture under still light is what reads as a solid object. */
.hbb-roll__light {
	position: absolute; inset: 0;
	-webkit-mask: var(--hbb-mask) center / 100% 100% no-repeat; mask: var(--hbb-mask) center / 100% 100% no-repeat;
	background:
		radial-gradient(circle at 32% 26%, rgba(255, 247, 232, .6), rgba(255, 247, 232, 0) 34%),
		radial-gradient(circle at 72% 80%, rgba(46, 28, 14, .4), rgba(46, 28, 14, 0) 52%);
	mix-blend-mode: soft-light;
}
@media (max-width: 767px) { .hbb-roll { --s: 56px; } }

/* Scroll-driven path. Translation and turn share one timeline, one range and one curve, so the turn is always
   distance / radius: it rolls, it never slides. The curve is rolling friction (fast in, slow to a stop). */
.hbb-sda .hbb-roll { will-change: transform; animation: hbb-roll linear both; animation-timeline: var(--hbb-tl); animation-range: cover 5vh cover 60vh; animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
.hbb-sda .hbb-roll__img { will-change: transform; animation: hbb-turn linear both; animation-timeline: var(--hbb-tl); animation-range: cover 5vh cover 60vh; animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
.hbb-sda .hbb-roll__body { animation: hbb-in linear both; animation-timeline: var(--hbb-tl); animation-range: cover 5vh cover 14vh; }
@keyframes hbb-roll { from { transform: translate3d(var(--hbb-x), var(--hbb-y), 0); } to { transform: translate3d(calc(var(--hbb-x) - var(--hbb-d)), var(--hbb-y), 0); } }
@keyframes hbb-turn { from { transform: rotate(0deg); } to { transform: rotate(var(--hbb-turn)); } }
@keyframes hbb-in { from { opacity: 0; } to { opacity: 1; } }

/* Still: the bagel simply rests in place. */
@media (prefers-reduced-motion: reduce) {
	.hbb-roll, .hbb-roll__img, .hbb-roll__body { animation: none !important; will-change: auto; }
	.hbb-roll__body { opacity: 1 !important; }
}
html.hb-a11y-motion .hbb-roll, html.hb-a11y-motion .hbb-roll__img, html.hb-a11y-motion .hbb-roll__body { animation: none !important; will-change: auto; }
html.hb-a11y-motion .hbb-roll__body { opacity: 1 !important; }
@media print { .hbb-layer { display: none; } }

/* English (dir=ltr, handoff 66): polish-bagel.js already measures the mirrored path (signed --hbb-d), so the layer
   and the bagel stay anchored at the left. Beats the generated ltr.css mirror, which pushed the bagel ~300px past
   the right edge (horizontal scroll on /en/). */
html[dir="ltr"] .hbb-layer { left: 0; right: auto; }
html[dir="ltr"] .hbb-roll { left: 0; right: auto; transform: translate3d(calc(var(--hbb-x) - var(--hbb-d)), var(--hbb-y), 0); }