Problem
The hero artwork appeared split in half by a straight horizontal line. The composition reuses one splash image twice at different scales, once cropped for the large arc and once for the glass, and the glass copy was revealed with clip-path: inset(40% 0 0 0).
Solution
Replaced the hard clip with paired CSS gradient masks so the splash layer fades out across its lower band exactly as the glass layer fades in across its upper band. The stops were chosen so each layer still fully covers the other's hard boundary, eliminating the seam without changing the composition.
Problem
The flavor carousel behaved oddly on the last slide: the right side went empty while a sliver of the previous card bled in from the left. All component state (index, counter, pills, inert flags) was verified correct, so it was purely visual.
Solution
The Carousel had a utility forcing Embla's own viewport to overflow: visible. Embla only repositions a slide to the other side once it believes that slide is off-screen, so visible overflow exposed the gap where the wrap-around slide had not yet moved. Letting the viewport clip made every slide frame identically.
Problem
Section headings rendered far smaller than specified despite using the correct utility classes.
Solution
tailwind-merge was conflating the custom font-size utilities with text colour utilities and stripping them. Extended the cn helper's class-group configuration to register the custom font-size and text-wrap groups.
Problem
The flavor vial product images had no usable transparency; their alpha had been flattened into a baked-in checkerboard pattern, so they could not sit on the brand backgrounds.
Solution
Wrote a programmatic flood-fill tool to detect and strip the fake checkerboard and restore a real alpha channel, then converted the full asset set to WebP for a substantial size reduction.
Problem
Docker builds began failing with ERR_PNPM_MINIMUM_RELEASE_AGE_VIOLATION whenever a dependency had published within the previous day.
Solution
The package.json had no packageManager field, so Corepack resolved a newer pnpm that enforces a 24-hour minimumReleaseAge policy. Pinned the pnpm version and switched the Dockerfile to corepack enable && corepack install in both the deps and runtime stages for deterministic builds.
Problem
SQLite permits only one writer, which conflicts with container orchestration defaults that would briefly run two instances against the same database file.
Solution
Documented and configured a single-replica deployment with rolling deploys disabled, and mounted a persistent volume at /app/data so the database survives redeploys rather than being lost with the container.
Problem
Scroll-reveal animations server-render at opacity 0, so the page would have been effectively blank for anyone without JavaScript, and motion-sensitive visitors needed a genuine opt-out.
Solution
Gated every animation behind useReducedMotion, forcing final visible states rather than skipped transitions, and added a noscript style block that overrides the opacity-0 inline styles so the full page renders without JavaScript.
Problem
The original prototype sized type and layout in vw units, so text scaled erratically and the visual hierarchy collapsed at some viewport widths.
Solution
Replaced vw sizing with a clamp()-based fluid type scale and spacing tokens defined once in the Tailwind @theme layer, then verified the result across seven breakpoints from 320px to 1672px.
