/* JoinBar - ported from Framer code component JoinBar.tsx
   A sticky join bar for narrow viewports. It is hidden at and above the
   "hide from width" (handled in JS, since that width is per-instance), rises
   once the page has scrolled past the "appear after" section and slides away
   before the "hide before" section, and stays dismissed until the page is
   reloaded. Every colour the TSX baked in is exposed as a --fr-joinbar-* custom
   property so a page can retheme it. The rise is a transform translateY(110% ->
   0) over .52s on the shared UNREEL ease; reduced motion keeps the appearance
   but drops the slide. */
.fr-joinbar {
  --fr-joinbar-ground: rgba(25, 25, 25, 0.94);
  --fr-joinbar-ink: #F4F1EA;
  --fr-joinbar-border: rgba(244, 241, 234, 0.14);
  --fr-joinbar-cta-bg: #F4F1EA;
  --fr-joinbar-cta-ink: #191919;
  --fr-joinbar-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fr-joinbar-dur: 0.52s;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Clark 2026-09-30: a slimmer bar (~47px, was ~64px) - on a phone it sat
     over the foot of the Home Moments cards. home.css reserves this height
     under the pinned rail; keep the two in step. */
  padding: 7px clamp(20px, 5vw, 128px) calc(7px + env(safe-area-inset-bottom));
  background: var(--fr-joinbar-ground);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--fr-joinbar-border);
  color: var(--fr-joinbar-ink);
  font-family: var(--jifu-font-body, Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif);
  transform: translateY(110%);
  transition: transform var(--fr-joinbar-dur) var(--fr-joinbar-ease);
}
.fr-joinbar.is-up { transform: translateY(0); }
/* At and above the per-instance "hide from width" JS adds .is-wide, matching
   the TSX's @media (min-width:maxWidth){display:none}. */
.fr-joinbar.is-wide { display: none; }
.fr-joinbar__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(244, 241, 234, 0.72);
}
.fr-joinbar__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--fr-joinbar-cta-bg);
  color: var(--fr-joinbar-cta-ink);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
}
.fr-joinbar__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.22s var(--fr-joinbar-ease), background 0.22s var(--fr-joinbar-ease);
}
.fr-joinbar__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.fr-joinbar__close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
@media (prefers-reduced-motion: reduce) {
  .fr-joinbar { transition: none; }
  .fr-joinbar__close { transition: none; }
}