/* ==========================================================================
   Book-a-demo modal

   A square sheet — no corner radius anywhere, which is the house style — over
   a blurred view of the page behind it. The blur is backdrop-filter on the
   scrim, so it is the real page showing through rather than a screenshot of
   it: the sphere keeps turning behind the sheet.

   backdrop-filter is the one thing here that can be missing (older Firefox
   without the flag). The fallback is a heavier flat scrim, which is why the
   background-color is set alongside the filter rather than relying on it.
   ========================================================================== */

/* 8% of the viewport top and bottom, so the sheet stands as tall as it can
   and still reads as centred rather than as a band across the middle. The
   padding is what centres it -- align-items: center on a sheet that fills the
   space would do nothing. */
.demo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh calc(48 * var(--s));
}

.demo[hidden] { display: none; }

/* Without JS the CTAs are still ordinary links to #demo, so :target opens the
   sheet on its own -- an author rule, which is why it beats [hidden]'s UA
   one. Scoped to .no-js so the two never fight: once JS is running it owns
   the open state and the hash plays no part. */
.no-js .demo:target { display: flex; }
.no-js .demo:target .demo__scrim { opacity: 1; }
.no-js .demo:target .demo__sheet { opacity: 1; transform: none; }

.demo__scrim {
  position: absolute;
  inset: 0;
  /* Opaque enough to carry the sheet on its own where the blur is absent. */
  background: rgba(3, 12, 27, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
          backdrop-filter: blur(18px) saturate(120%);
  opacity: 0;
  transition: opacity 520ms var(--ui-ease);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* With a real blur the scrim can be lighter, so more of the page reads. */
  .demo__scrim { background: rgba(3, 12, 27, 0.45); }
}

/* The whole form has to be on screen at once -- no scrolling inside the
   sheet. Everything in here is written in --s, so redefining --s on the sheet
   resizes the sheet AND its contents together: take whichever of the page's
   own scale and the one the free height allows is smaller, and the form
   always fits. 950 is the content's measured height in design units plus a
   little slack, so at 84vh of room the second term is what binds on a short
   window.

   Capped at the page scale so it never grows past its designed size on a
   tall screen. */
.demo__sheet {
  position: relative;
  /* 1000, not 950: the two-column sheet stands taller than the single
     column did -- the Business Type chips take a second row on the narrower
     measure -- and the old budget left it 37 units short, which is what put
     a scrollbar down its side. */
  --s: min(var(--s-page), calc(84vh / 1000));
  width: calc(880 * var(--s));
  max-width: 100%;
  /* Its content's height, not the space available: the sheet is as tall as
     the form and the padding above centres it. */
  height: auto;
  max-height: none;
  /* No scroll: the sheet is one static rectangle, sized to its content. */
  overflow-y: visible;
  padding: calc(56 * var(--s)) calc(64 * var(--s)) calc(64 * var(--s));
  /* Square. Nothing on this site is rounded. */
  border-radius: 0;
  /* Mono/Dark, and opaque. The sheet was Mono/Light-Dark at 86%, which is the
     colour the fields inside it are -- so the inputs had nothing to sit
     against. The page reads through the scrim around the sheet instead, which
     is where the blur belongs. */
  background: var(--c-mono-dark);
  /* A hairline instead of the corner brackets: the sheet needs an edge
     against a blurred backdrop, and the brackets were removed on request. */
  border: 1px solid rgba(236, 247, 255, 0.14);
  opacity: 0;
  /* A short rise and the last two per cent of a scale. Scaling a sheet this
     size properly reads as a pop, but coming up dead flat reads as a slide;
     0.98 is enough to give it somewhere to arrive from without either. The
     transform runs longer than the fade so the sheet is fully legible while
     it is still settling, which is what makes it feel unhurried rather than
     slow. */
  transform: translateY(calc(28 * var(--s))) scale(0.98);
  transition:
    opacity 480ms var(--ui-ease),
    transform 760ms var(--rv-ease);
  will-change: transform, opacity;
}

.demo.is-open .demo__scrim { opacity: 1; }
.demo.is-open .demo__sheet { opacity: 1; transform: none; }

/* Leaving is quicker than arriving, and without the stagger: a dialog being
   dismissed should get out of the way, and replaying the entrance backwards
   makes closing feel like it is resisting. */
.demo:not(.is-open) .demo__sheet {
  transition:
    opacity 220ms var(--ui-ease),
    transform 260ms var(--ui-ease);
}
.demo:not(.is-open) .demo__scrim { transition: opacity 260ms var(--ui-ease); }
.demo:not(.is-open) .demo__title,
.demo:not(.is-open) .demo__form .cfields > * {
  transition-duration: 160ms;
  transition-delay: 0s;
}

/* The sheet's contents come up behind it, one beat at a time, so it does not
   arrive as one solid slab. Each row starts while the one above is still
   travelling -- 70ms apart against a 640ms travel -- which reads as a single
   movement passing down the form rather than six separate ones. */
.demo__title,
.demo__form .cfields > * {
  opacity: 0;
  transform: translateY(calc(16 * var(--s)));
  transition:
    opacity 520ms var(--ui-ease),
    transform 640ms var(--rv-ease);
}
.demo__title { transition-delay: 140ms; }
.demo__form .cfields > *:nth-child(1) { transition-delay: 230ms; }
.demo__form .cfields > *:nth-child(2) { transition-delay: 300ms; }
.demo__form .cfields > *:nth-child(3) { transition-delay: 370ms; }
.demo__form .cfields > *:nth-child(4) { transition-delay: 440ms; }
.demo__form .cfields > *:nth-child(5) { transition-delay: 510ms; }
.demo__form .cfields > *:nth-child(6) { transition-delay: 580ms; }

.demo.is-open .demo__title,
.demo.is-open .demo__form .cfields > * { opacity: 1; transform: none; }

.demo__close {
  position: absolute;
  right: calc(20 * var(--s));
  top: calc(16 * var(--s));
  width: calc(40 * var(--s));
  height: calc(40 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: calc(28 * var(--s));
  line-height: 1;
  color: var(--c-mono-light);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 180ms var(--ui-ease);
}
.demo__close:hover,
.demo__close:focus-visible { opacity: 1; }

/* The sheet takes focus on open so the dialog is announced; it is not an
   interactive control, so it should not draw a ring for that. */
.demo__sheet:focus { outline: none; }

/* Submit sits right in the sheet, under the end of the fields, and keeps the
   corner brackets the contact page's has. The sheet's own brackets were the
   ones taken out, and they went from the markup -- this used to hide every
   bracket inside the sheet, the button's included. */
.demo .cfields__submit {
  display: flex;
  justify-content: flex-end;
}

.demo__title {
  /* The lede below this is gone, so the title carries the gap to the form. */
  margin: 0 0 calc(40 * var(--s));
  font-family: var(--f-display);
  font-size: calc(48 * var(--s));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: calc(-1.44 * var(--s));
  color: var(--c-mono-light);
}

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  /* Below the reflow breakpoint --s is pinned to 1px and the form lays out
     in real pixels, so the fit-to-height trick has nothing to scale. The
     sheet scrolls here instead -- on a phone that is the normal thing for a
     full-height form to do. */
  .demo { padding: 5vh 16px; align-items: center; }
  .demo__sheet { --s: 1px; width: 100%; height: 100%; max-height: none; padding: 28px 20px 32px; }
  .demo__close { right: 10px; top: 8px; width: 36px; height: 36px; font-size: 24px; }
  .demo__title { font-size: 28px; letter-spacing: -0.6px; margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo__scrim, .demo__sheet,
  .demo__title, .demo__form .cfields > * {
    transition: none;
    transform: none;
  }
  .demo.is-open .demo__title,
  .demo.is-open .demo__form .cfields > * { opacity: 1; }
}

/* --- the photograph -------------------------------------------------------
   The same picture the Contact page runs beside its fields, and the same
   arrangement: the heading across the top, the photograph on the left and
   the form on the right. Desktop only -- below the reflow the sheet stays a
   single column and the picture is off, as it is on the Contact page. */
.demo__photo { display: none; }

@media (min-width: 1201px), (min-width: 1024px) and (orientation: landscape) {
  .demo__sheet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(48 * var(--s));
    width: calc(1440 * var(--s));
  }
  .demo__title { grid-column: 1 / -1; }

  .demo__photo {
    display: block;
    grid-column: 1;
    position: relative;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: var(--c-light-dark);
    --brk-color: var(--c-accent-yellow);
  }
  .demo__photo img { width: 100%; height: 100%; object-fit: cover; }
  .demo__photo .brk__c { z-index: 1; }
  .demo__form { grid-column: 2; }
}