/* ===================================================================================================== Holy Bagel: the motion language (SGO, 16/10/2026 v2, package BG). Loads on every page, after every other polish layer except header/static (inc/polish.php, layer 'story'). Driven by polish-story.js (window.hbMotion: the same curves and durations in JS). THE IDEA: "the ring". A bagel is a ring, so the bagel's job on this site is to show that something is held, done or on its way: the intro's ring opens into the page, a ring draws around a choice, a ring fills as a flow progresses, a ring lands on the cart when something is added, an empty order shows the still bagel. Nothing else bounces, spins or performs. Everything else (sections, cards, photos) moves the same restrained way: it rises a little and its photo window opens, once. ONE TIMING TABLE (the only one; polish-order.css reads it and no longer repeats it, FX-4 16/10/2026) UI feedback Page motion --hb-t-press 90ms press give --hbm-t-reveal 800ms section/card arrival (opacity 500ms) --hb-t-tick 160ms digit roll, chip tick --hbm-t-stagger 80ms between siblings, max 6 steps --hb-t-swap 140ms content cross-fade --hbm-t-ring 700ms a ring drawing itself in --hb-t-enter 220ms small UI entrance --hbm-t-intro 1000ms the whole intro, first frame to page --hbm-t-hover 260ms hover in/out --hbm-scrub 0.6 scroll-linked scenes lag (seconds) --hb-t-pulse 260ms landing ring pulse --hb-t-land 260ms UI landing (counter, pill) --hb-t-fly 420ms add flight (360 phones) --hbm-t-land 420ms a body settling (squash) --hb-t-celebrate 640ms success seal, once --hb-step 26ms UI stagger (mega, drawer) Curves: --hbm-out (.22,1,.36,1) arrivals and answers to the pointer · --hbm-soft fades · --hbm-inout travel and scrubbed scenes · --hbm-land one hair of overshoot, landings only · --hbm-fall / --hbm-up gravity (JS flights). Rules: transform, opacity and clip-path only; one moving subject per action; prefers-reduced-motion and the site's own switch (html.hb-a11y-motion) get the finished picture standing still; never more than ~12 seeds in one burst. CUT 16/10/2026 (package BG): the home page's three cut-out food scenes (the rolling bagel over the packages, the exploding sandwich build with its deli stamp, the FAQ sandwich cut). Each was a separate gag with its own physics, none had a job, and together they put 220-340px of air above three section titles. ===================================================================================================== */ :root { --hbm-out: cubic-bezier(.22, 1, .36, 1); --hbm-inout: cubic-bezier(.65, 0, .35, 1); --hbm-soft: cubic-bezier(.33, 1, .68, 1); --hbm-fall: cubic-bezier(.55, 0, .85, .45); --hbm-up: cubic-bezier(.2, .6, .4, 1); --hbm-land: cubic-bezier(.34, 1.25, .64, 1); /* UI rows (the only definition; polish-order.css and order-app.css read them) */ --hb-t-press: 90ms; --hb-t-tick: 160ms; --hb-t-swap: 140ms; --hb-t-enter: 220ms; --hb-t-pulse: 260ms; --hb-t-land: 260ms; --hb-t-fly: 420ms; --hb-t-celebrate: 640ms; --hb-step: 26ms; --hbm-t-tap: var(--hb-t-press); --hbm-t-hover: 260ms; --hbm-t-land: 420ms; /* page rows */ --hbm-t-reveal: 800ms; --hbm-t-stagger: 80ms; --hbm-t-ring: 700ms; --hbm-t-intro: 1000ms; --hbm-squash-soft: .055; --hbm-squash-firm: .09; --hbm-shadow: 64, 40, 20; } @media (max-width: 767px) { :root { --hb-t-fly: 360ms; } } /* A layer for timed seed bursts (hbMotion.burst): above everything, never takes a pointer. */ .hbs-layer { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; } .hbs-layer .hbs-seed { position: absolute; } /* Sesame and poppy seeds, bread crumbs (the only particles on the site). */ .hbs-seed { position: absolute; left: 0; top: 0; width: 4px; height: 7px; margin: -3.5px 0 0 -2px; border-radius: 50%; pointer-events: none; background: #f4e6c6; box-shadow: inset -1px -1px 0 rgba(150, 105, 50, .4); opacity: 0; will-change: transform, opacity; } .hbs-seed.is-poppy { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: #2d2622; box-shadow: none; } .hbs-seed.is-crumb { width: 6px; height: 5px; margin: -2.5px 0 0 -3px; border-radius: 45% 55% 40% 60%; background: #d9a564; box-shadow: inset 1px 1px 0 rgba(255, 236, 200, .55); } /* ---- The ring: hbMotion.ring() — a progress ring for multi-step flows (and a "done" ring) ---------------------- : a fine track and a sage arc that fills to the value, with a bagel-crust dot riding its leading end. Size from --hbm-ring-size (default 44px). */ .hbm-ring { --hbm-ring-size: 44px; --hbm-ring-w: 3px; --hbm-ring-c: var(--hb-o-sage, #657b63); position: relative; display: inline-grid; place-items: center; flex: none; width: var(--hbm-ring-size); height: var(--hbm-ring-size); color: var(--hb-ink-warm, #352b24); } .hbm-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg) scaleX(-1); } /* starts at 12 o'clock, fills right-to-left (RTL reading) */ [dir="ltr"] .hbm-ring svg { transform: rotate(-90deg); } .hbm-ring__track { fill: none; stroke: rgba(53, 43, 36, .12); stroke-width: var(--hbm-ring-w); } .hbm-ring__arc { fill: none; stroke: var(--hbm-ring-c); stroke-width: var(--hbm-ring-w); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transition: stroke-dashoffset var(--hbm-t-ring) var(--hbm-out); } .hbm-ring__label { position: relative; font-weight: 700; font-size: calc(var(--hbm-ring-size) * .3); line-height: 1; font-variant-numeric: tabular-nums; } .hbm-ring.is-done .hbm-ring__arc { stroke: var(--hbm-ring-c); } .hbm-ring__check { position: absolute; width: 46%; height: 46%; opacity: 0; transform: scale(.6); transition: opacity var(--hb-t-enter) var(--hbm-out), transform var(--hb-t-enter) var(--hbm-out); } .hbm-ring.is-done .hbm-ring__check { opacity: 1; transform: none; transition-delay: calc(var(--hbm-t-ring) * .6); } .hbm-ring.is-done .hbm-ring__label { opacity: 0; } /* Reduced motion and the site's "stop animations" switch: the finished picture, still. */ @media (prefers-reduced-motion: reduce) { .hbs-seed { display: none; } .hbm-ring__arc, .hbm-ring__check { transition: none !important; } } html.hb-a11y-motion .hbs-seed { display: none; } html.hb-a11y-motion :is(.hbm-ring__arc, .hbm-ring__check) { transition: none !important; } /* The button arrow's resting turn is part of its drawing, not motion (main.css rotates the asset 90deg). polish-motion.css resets every transform on .hb-btn__arrow for reduced motion, which left every button arrow pointing down (package HM, 16/10/2026). Same selectors, loaded later: the arrow keeps its direction, it simply never slides. */ @media (prefers-reduced-motion: reduce) { .hb-btn__arrow { transform: rotate(90deg) !important; translate: none !important; } } html.hb-a11y-motion .hb-btn__arrow { transform: rotate(90deg) !important; translate: none !important; } /* BG2 (16/10/2026): the footer bagel is a small sign-off, one step down from the home's seam bagel (190px) so the scale reads as one hero moment (the intro), one signature (the seam), then small accents. */ .hb-footer .hb-footer__bagel-whole { width: 96px; margin: -66px 0 0 -48px; } @media (max-width: 767px) { .hb-footer .hb-footer__bagel-whole { width: 80px; margin: -56px 0 0 -40px; } } /* HM3 (16/10/2026): the footer bagel sits fully below the rule (it used to straddle it, so the line cut through the crust) and the bottom row makes room for it. While the cookie notice is open on a phone, the footer gains the notice's height so the sign-off can always be scrolled clear of it. */ .hb-footer .hb-footer__bagel-whole { top: 22px; width: 96px; margin: 0 0 0 -48px; } .hb-footer .hb-footer__bottom { padding-top: 140px; } @media (max-width: 767px) { .hb-footer .hb-footer__bagel-whole { top: 20px; width: 80px; margin: 0 0 0 -40px; } .hb-footer .hb-footer__bottom { padding-top: 120px; } body:has(.hb-cookie.is-in:not([hidden])) .hb-footer { padding-bottom: calc(var(--hb-cookie-h, 190px) + 24px); } }