/* ============================================================
   Balance Farm — modal shell (.bkflow)

   The chrome every modal shares: overlay + backdrop, the panel and its
   painted surface, the grow-out-of-the-nav morph, the floating header,
   and the scroll-region layout. Load BEFORE the modal-specific files
   (booking-flow.css, enquiry.css), which layer their own content on top.

   Panel: full screen minus a 16px outer margin. The header floats above
   the content (48px desktop / 56px mobile, via --bkflow-topbar-h) and each
   scroll region reserves that height plus its own --bkflow-gutter.
   ============================================================ */

/* ---- Overlay + blurred backdrop ---- */
.bkflow {
  position: fixed;
  inset: 0;
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-base) ease;
}
.bkflow[hidden] { display: none; }
.bkflow.is-open { opacity: 1; pointer-events: auto; transition-duration: 0ms; }

.bkflow__backdrop {
  position: fixed;
  inset: 0;
  background: var(--tint-1);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
}

/* ---- Panel: full screen minus a 16px outer margin ---- */
.bkflow__panel {
  --bkflow-topbar-h: 48px;      /* one source of truth for the floating header */
  position: fixed;
  top: var(--chrome-inset);
  right: var(--chrome-inset);
  bottom: var(--chrome-inset);
  left: var(--chrome-inset);
  width: auto;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  background: transparent;      /* the surface layer paints the panel */
  border-radius: var(--r-md);
  overflow: hidden;

  color: var(--color-ink);
  transform: translateY(10px);
  opacity: 0;
  transition: transform 380ms var(--e-move), opacity var(--d-base) ease;
}
.bkflow.is-open .bkflow__panel { transform: translateY(0); opacity: 1; }

/* the painted surface: white fill, blur, shadow. Separated from the panel
   so it can be transformed on its own — it holds no content, so scaling it
   distorts nothing and stays on the compositor. */
.bkflow__surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--paper);
  border-radius: var(--r-md);
}
/* the topbar keeps its own absolute positioning + z-index: 5 (above the
   surface already), so only the body needs stacking here */
.bkflow__panel > .bkflow__body { position: relative; z-index: 1; }

/* ============================================================
   Desktop: the nav bar and the modal are ONE object in two states.

   State A  the blurred nav bar (small, frosted)
   State B  the white modal panel (full bleed inside its 16px margin)

   The morph is carried by .bkflow__surface — a solid-colour sheet holding
   no content — transformed from the nav's measured rect to the panel's.
   Solid colour means the growth is pure compositor work: no backdrop blur
   is re-sampled per frame (that was the lag), and no text is scaled. The
   real nav bar hands off by fading as the sheet leaves its rect, so the
   two never read as separate objects; the blur behind the sheet comes from
   the static backdrop instead of the moving layer.

   Base rules describe state A, so they are also the CLOSING transitions —
   closing is the exact reverse: content out, sheet shrinks home, nav back.
   JS writes --grow-* from the live nav rect, so nothing here is hardcoded.
   ============================================================ */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .bkflow__panel,
  .bkflow {
    transform: none;
    opacity: 1;
    transition: none;
  }

  /* the backdrop owns the blur (static) and the fade, so the root can stay
     opaque for the whole morph */
  .bkflow__backdrop {
    opacity: 0;
    transition: none;                        /* closing is instant */
  }
  .bkflow.is-open .bkflow__backdrop {
    opacity: 1;
    transition: opacity 280ms ease;          /* opening: immediate */
  }

  /* ---- the morphing sheet ---- */
  .bkflow__surface {
    transform-origin: 0 0;
    transform:
      translate3d(var(--grow-x, 0px), var(--grow-y, 0px), 0)
      scale(var(--grow-sx, 1), var(--grow-sy, 1));
    /* matches the nav's own surface while it sits in the nav's place */
    background: var(--nav-surface, var(--chrome));
    /* counter-scaled so the corner reads as the nav's 4px at rest. The
       elliptical radius this produces is only right for the full-bleed
       booking panel — a sheet is small enough that the stretched corners
       read as a blob, so it keeps a constant radius (below). */
    border-radius: calc(4px / var(--grow-sx, 1)) / calc(4px / var(--grow-sy, 1));
    will-change: transform;
    transition: none;                        /* closing is instant; opening below */
  }
  .bkflow__surface.no-anim { transition: none !important; }

  .bkflow--sheet .bkflow__surface { border-radius: var(--r-md); }

  .bkflow.is-open .bkflow__surface {
    transform: translate3d(0, 0, 0) scale(1, 1);
    background: var(--paper);
    border-radius: var(--r-md);
    transition:
      transform var(--d-slow) var(--e-out),
      border-radius var(--d-slow) var(--e-out),
      background-color 260ms ease 260ms;
  }

  /* ---- the nav hands off instantly ----
     The sheet sits exactly over the nav's rect and is painted above it, so
     there is nothing to cross-fade. Animating opacity on the nav forced its
     28px backdrop blur to re-render every frame — that was the lag on close.
     visibility drops the blurred layer out of the compositor entirely. */
  .nav.is-morphing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }

  /* content belongs to the open state only; on close it fades out first */
  .bkflow__panel > .bkflow__topbar,
  .bkflow__panel > .bkflow__body {
    opacity: 0;
    transition: none;                        /* closing is instant */
  }
  .bkflow.is-open .bkflow__panel > .bkflow__topbar,
  .bkflow.is-open .bkflow__panel > .bkflow__body {
    opacity: 1;
    transition: opacity 240ms ease 400ms;
  }
}

/* ---- Header: floats above the content, transparent, never clips ----
   Absolutely positioned so the scroll regions run full height and the
   content simply passes beneath it; each region reserves the header's
   height as top padding and fades out behind it. */
.bkflow__topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  height: var(--bkflow-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--bkflow-gutter, 16px);   /* aligns with the column gutters */
  background: transparent;
  pointer-events: none;        /* clicks pass through to the content */
}
.bkflow__topbar > * { pointer-events: auto; }
.bkflow__topbar-left { display: flex; align-items: center; gap: var(--s-4); }

/* header type — one rule for every modal: Crimson Text, 16px, -2% */
.bkflow__brand,
.bkflow__step,
.bkflow__close-text {
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  font-weight: var(--w-regular);
  letter-spacing: var(--t-sm-track);
  line-height: 1;
  color: var(--color-ink);
}
.bkflow__step[hidden] { display: none; }
.bkflow__close-text {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity var(--d-fast) ease;
}
@media (hover: hover) {
  .bkflow__close-text:hover { opacity: 0.55; }
}

/* ---- Body: 3fr info / 2fr form ---- */
.bkflow__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;               /* enquiry fallback: two 50% cols */
}

/* every scroll region clears the floating header, keeping the column's own
   gutter beneath it (same distance as when the header sat in the layout) */
.bkflow__panel .bkflow__info,
.bkflow__panel .bkflow__form {
  padding-top: calc(var(--bkflow-topbar-h) + var(--bkflow-gutter, 16px) - 14px);
  scroll-padding-top: calc(var(--bkflow-topbar-h) + var(--bkflow-gutter, 16px) - 14px);
}
/* the right column sits slightly lower than the left */
.bkflow__panel .bkflow__form {
  padding-top: calc(var(--bkflow-topbar-h) + var(--bkflow-gutter, 16px) - 6px);
  scroll-padding-top: calc(var(--bkflow-topbar-h) + var(--bkflow-gutter, 16px) - 6px);
}


/* ---- Below 1200px: same full-bleed panel ---- */
@media (max-width: 1200px) {
  .bkflow__panel { left: var(--chrome-inset); right: var(--chrome-inset); width: auto; }
}

/* ---- Mobile: full-bleed panel, taller header ---- */
@media (max-width: 1024px) {
  .bkflow__panel {
    --bkflow-topbar-h: 56px;
    top: 0; left: 0;
    width: 100%; height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    transform: translateY(10px);
  }
  .bkflow.is-open .bkflow__panel { transform: translateY(0); }
  .bkflow__topbar { top: 0; left: 0; right: 0; }
  .bkflow__panel .bkflow__info,
  .bkflow__panel .bkflow__form {
    padding: var(--bkflow-gutter, 16px);
    overflow: visible;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bkflow, .bkflow__panel { transition-duration: 1ms !important; }
}


/* ============================================================
   Narrow sheet variant (.bkflow--sheet) — auth + enquiry.
   585px wide, hugging its content, and growing out of the nav the
   same way the booking panel does (the surface layer carries the
   morph — see the grow rules above).
   ============================================================ */
.bkflow--sheet .bkflow__panel {
  --bkflow-gutter: 20px;
  top: var(--chrome-inset);
  /* centred by auto margins rather than a transform: the grow rules reset
     `transform` on the open panel, which would knock it off-centre */
  left: 0;
  right: 0;
  bottom: auto;
  width: min(585px, calc(100vw - var(--chrome-inset) * 2));
  height: auto;
  max-height: calc(100dvh - var(--chrome-inset) * 2);
  margin-inline: auto;
  border-radius: var(--r-md);
  overflow: hidden;                  /* the surface paints this box */
}
.bkflow--sheet .bkflow__surface { border-radius: var(--r-md); }
/* the body is the scroll container, so the surface behind it never scrolls
   away and the panel keeps its background at any content length */
.bkflow--sheet .bkflow__body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: var(--bkflow-topbar-h);
}
@media (max-width: 600px) {
  .bkflow--sheet .bkflow__panel {
    width: calc(100vw - var(--chrome-inset) * 2);   /* sides match the top margin */
    max-height: calc(100dvh - var(--chrome-inset) * 2);
  }
}