;(function () {
/* Top-of-screen ambience layer — pure mirror of BottomFade.

   Same recipe as BottomFade, anchored to the TOP of the screen instead of
   the bottom and with the gradient direction flipped so the saturated teal
   lands at the top edge. */

/* Blur strip matches the tint band (60px) so the blur covers the full
   visibly-tinted area instead of just a thin sliver at the edge. */
const STRIP = 60;

const TopFade = () => {
  return (
    <>
      {/* L1 · tint — colors reversed so the saturated 0.43-alpha stop is at
         the TOP edge instead of the bottom. Height matches L2 blur. */}
      <div
        style={{
          position: 'absolute',
          left: 0, right: 0, top: 0,
          height: `${STRIP}px`,
          zIndex: 5,
          pointerEvents: 'none',
          background: 'linear-gradient(180deg, rgba(0,175,171,0.43) 0%, rgba(0,175,171,0.31) 25%, rgba(0,175,171,0.14) 60%, rgba(0,175,171,0) 100%)',
        }}
      />
      {/* L2 · single blur layer with a mask-image gradient — replaces the
         previous 6-layer stacked-blur ramp which produced visible bands.
         Mask fades opaque-to-transparent from the top edge down, so the
         blur applies at full strength at the top and seamlessly tapers to
         nothing at the inner edge of the strip. Smooth Gaussian falloff. */}
      <div
        style={{
          position: 'absolute',
          left: 0, right: 0, top: 0,
          height: `${STRIP}px`,
          zIndex: 6,
          pointerEvents: 'none',
          backdropFilter: 'blur(16px)',
          WebkitBackdropFilter: 'blur(16px)',
          maskImage: 'linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)',
          WebkitMaskImage: 'linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)',
        }}
      />
    </>
  );
};

Object.assign(window, { TopFade });
})();