/* Shared scroll motion. The page itself stays in normal document flow: only
   the decorative edge and the footer's inner presentation move. */
html.br-scroll-inertia { scroll-behavior: auto; }

.br-scroll-footer {
  position: relative;
  isolation: isolate;
  --br-cap-color: #fff;
}

.br-scroll-footer.footer { --br-cap-color: #e9e6df; }

.br-scroll-footer__inner {
  display: flow-root;
  position: relative;
  z-index: 1;
  transform: translate3d(0, var(--br-footer-y, 0px), 0);
}

.br-scroll-footer__cap {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: 0;
  width: 100%;
  height: var(--br-cap-height, 0px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.br-scroll-footer__ellipse {
  position: absolute;
  top: 0;
  left: 50%;
  width: 150%;
  height: 750%;
  border-radius: 50%;
  background: var(--br-cap-color);
  transform: translate(-50%, -86.666%);
}

/* This positioning context has precisely the original rule's width. The
   button retains its responsive right offset and its own magnetic transform. */
.br-scroll-button-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  transform: translate3d(var(--br-button-x, 0px), 0, 0);
}
.br-scroll-button-track > .contact-button { pointer-events: auto; }

/* Reading this stable viewport height avoids moving the edge when a mobile
   browser's address bar retracts. It never takes space or receives focus. */
.br-scroll-viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  height: 100svh;
  visibility: hidden;
  pointer-events: none;
  contain: strict;
}

@media (prefers-reduced-motion: reduce) {
  .br-scroll-footer__cap { display: none; }
  .br-scroll-footer__inner,
  .br-scroll-button-track { transform: none !important; }
  .br-scroll-footer .contact-arrow { transform: none !important; }
}