;(function () {
/* Bottom-of-screen ambience layer behind the BottomNav pill.
The pill sits at bottom:28 (height 58), so the area "below the pill" is the
28px home-indicator strip from y=0 to y=28.
Layer recipe (back → front, all still beneath the pill since BottomNav has zIndex 50):
L1 · Teal tint — peak teal at the very bottom edge, fading up. Confined to
the 50px slot so the saturated teal lands directly under the
pill in the home-indicator gap.
L2 · 10 stacked BlurViews of equal intensity, overlapping heights —
cumulative intensity rises smoothly toward the screen edge.
Single-layer intensity is small enough that no individual
step is perceptible (≈10% relative steps), so the blur ramp
reads as continuous instead of banded. */
/* Two strips:
- TINT_STRIP: shorter (60px) — saturated teal sits in the home-indicator
gap and softly fades up, anchored to the pill.
- BLUR_STRIP: taller (108px) — blur extends well above the tint, giving
the mask gradient more pixels to taper across so the previously-visible
"line" at the top edge of the blur disappears. */
const TINT_STRIP = 60;
const BLUR_STRIP = 108;
const BottomFade = () => {
return (
<>
{/* L1 · tint — confined to TINT_STRIP. */}
{/* L2 · blur — taller strip with a softer mask gradient. The mask now
goes opaque→transparent over the full BLUR_STRIP, so the top edge
of the blur fades over ~108px instead of cutting off sharply. */}
);
};
Object.assign(window, { BottomFade });
})();