/* Motion layer. Everything here sits on top of the page: at rest the page looks the same,
   motion.js only brings things in.
   Set in <head>: 'motion' (off for reduced motion) turns on the moving parts, 'mx-pre' hides
   what the intro brings in until motion.js has taken over. */

/* Sticky parts (summary, laptop) need the page to clip instead of being a scroll box. */
@supports (overflow: clip) {
  .sb-page {
    overflow: clip !important;
  }
}

/* Lenis smooth scrolling */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ------------------------------------------------------------ before the intro */

/* the hero card opens up in the intro */
.mx-pre .sb-hero {
  clip-path: inset(14% 9% 14% 9% round 40px);
}

.mx-pre .sb-hero > header,
.mx-pre .sb-hero-disc,
.mx-pre .sb-spread,
.mx-pre .sb-hero-h1,
.mx-pre .sb-hero-cta,
.mx-pre .sb-plogo,
.mx-pre .sb-ptitle,
.mx-pre .sb-picons,
.mx-pre #plans article,
.mx-pre .sb-summary {
  visibility: hidden;
}

/* the solutions page: its hero opens up the same way */
.mx-pre .ds-hero__card {
  clip-path: inset(14% 9% 14% 9% round 40px);
}

.mx-pre .ds-hero__card > header,
.mx-pre .ds-hero__title,
.mx-pre .ds-hero__rows,
.mx-pre .ds-sol__card,
.mx-pre .pg-head {
  visibility: hidden;
}

/* the contact page: its card opens up the same way */
.mx-pre .ct-card {
  clip-path: inset(14% 9% 14% 9% round 40px);
}

.mx-pre .ct-card > header,
.mx-pre .ct-main,
.mx-pre .ct-summary {
  visibility: hidden;
}

/* the pricing and portfolio pages: their cards open up the same way */
.mx-pre .pc-frame,
.mx-pre .pf-frame {
  clip-path: inset(14% 9% 14% 9% round 40px);
}

.mx-pre .pc-frame > header,
.mx-pre .pc-head,
.mx-pre .pc-cards,
.mx-pre .pf-frame > header,
.mx-pre .pf-body {
  visibility: hidden;
}

/* the about and FAQ pages: their cards open up the same way, the parts below rise in */
.mx-pre .pg-frame {
  clip-path: inset(14% 9% 14% 9% round 40px);
}

.mx-pre .pg-frame > header,
.mx-pre .pg-body,
.mx-pre .ab-topo,
.mx-pre .ab-person__name,
.mx-pre .ab-map__body > *,
.mx-pre .ab-say,
.mx-pre .ab-ladder__head,
.mx-pre .ab-steps,
.mx-pre .fq-group,
.mx-pre .fq-more {
  visibility: hidden;
}

/* split text: masks clip a little past the line box, so ascenders and descenders stay whole. A
   clip-path, not padding: the masks take exactly the room the text took, so nothing below moves when
   the text is split or put back together. */
.mx-l-mask,
.mx-w-mask,
.mx-c-mask {
  overflow: visible !important;
  clip-path: inset(-0.14em -0.08em -0.18em);
}

/* the hairline of a dark card, drawn by motion.js in place of the plain one it has at rest */
.sb-page .mx-framed {
  box-shadow: none;
}

.mx-frame {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.mx-frame rect {
  fill: none;
  stroke: rgba(122, 119, 114, 0.55);
  stroke-width: 1px;
}

/* film grain that never sits still, on the dark cards only */
.motion .sb-hero > .sb-grain-card,
.motion .sb-sol > .sb-grain-card,
.motion .wk__card > .sb-grain-card,
.motion .ft__card > .sb-grain-card,
.motion .ds-hero__card > .sb-grain-card,
.motion .ds-sol__panel > .sb-grain-card,
.motion .ct-card > .sb-grain-card,
.motion .pc-frame > .sb-grain-card,
.motion .pf-frame > .sb-grain-card {
  inset: -64px !important;
  animation: mx-grain 0.9s steps(1) infinite;
}

@keyframes mx-grain {
  0% { transform: translate3d(0, 0, 0); }
  12% { transform: translate3d(-27px, 18px, 0); }
  25% { transform: translate3d(31px, -22px, 0); }
  37% { transform: translate3d(-12px, -41px, 0); }
  50% { transform: translate3d(44px, 9px, 0); }
  62% { transform: translate3d(-38px, 35px, 0); }
  75% { transform: translate3d(15px, 46px, 0); }
  87% { transform: translate3d(-46px, -9px, 0); }
}

/* ------------------------------------------------------------ hover */

/* "Explore our plans": on hover the line redraws (a border too, so it is exactly as thick as the
   page's own underline, which stays in place at rest) and the circle fills */
.sb-hero-cta > span:last-child {
  position: relative;
}

.sb-hero-cta > span:last-child::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5px;
  border-bottom: 1.5px solid #252324;
  visibility: hidden;
}

.sb-hero-cta:hover > span:last-child {
  border-bottom-color: transparent !important;
}

.sb-hero-cta:hover > span:last-child::after {
  visibility: visible;
  animation: mx-redraw 0.9s cubic-bezier(0.6, 0, 0.2, 1);
}

@keyframes mx-redraw {
  0% { transform: scaleX(1); transform-origin: 100% 50%; }
  45% { transform: scaleX(0); transform-origin: 100% 50%; }
  46% { transform: scaleX(0); transform-origin: 0 50%; }
  100% { transform: scaleX(1); transform-origin: 0 50%; }
}

.sb-hero-cta > span:first-child {
  transition: background-color 0.3s ease;
}

.sb-hero-cta:hover > span:first-child {
  background: #252324;
}

.sb-pill {
  transition: background-color 0.2s ease, scale 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.sb-pill:hover {
  scale: 1.04;
}

.sb-sol-ic svg {
  transition: translate 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.sb-sol-row:hover .sb-sol-ic svg {
  translate: 2px 0;
}

/* steps: the line under each title draws itself */
.mx-line {
  background: linear-gradient(#d3d1bb, #d3d1bb) 0 0 / var(--p, 100%) 100% no-repeat !important;
}

/* ------------------------------------------------------------ from page to page */

/* Where the browser can (Chrome, Edge, Safari), the page you leave sinks back as a card while the new
   one comes up over it from below and lands flat. Going back through history, the other way round:
   the page drops away and the one before comes forward. Elsewhere pages change as they always do,
   and with reduced motion there is no transition. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition {
  background: #252324;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  animation-duration: 0.85s;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  animation-fill-mode: both;
}

::view-transition-old(root) {
  animation-name: pt-sink;
}

::view-transition-new(root) {
  animation-name: pt-rise;
}

html:active-view-transition-type(back)::view-transition-old(root) {
  z-index: 1;
  animation-name: pt-drop;
}

html:active-view-transition-type(back)::view-transition-new(root) {
  animation-name: pt-lift;
}

@keyframes pt-sink {
  from {
    clip-path: inset(0 round 0);
  }

  to {
    transform: translate3d(0, -4%, 0) scale(0.9);
    clip-path: inset(0 round 40px);
    opacity: 0.35;
  }
}

@keyframes pt-rise {
  from {
    transform: translate3d(0, 100%, 0);
    clip-path: inset(0 round 40px 40px 0 0);
  }

  to {
    transform: none;
    clip-path: inset(0 round 0);
  }
}

@keyframes pt-drop {
  from {
    clip-path: inset(0 round 0);
  }

  to {
    transform: translate3d(0, 100%, 0);
    clip-path: inset(0 round 40px 40px 0 0);
  }
}

@keyframes pt-lift {
  from {
    transform: translate3d(0, -4%, 0) scale(0.9);
    clip-path: inset(0 round 40px);
    opacity: 0.35;
  }

  to {
    clip-path: inset(0 round 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-pill,
  .sb-sol-ic svg {
    transition: none;
  }

  .sb-pill:hover {
    scale: none;
  }

  .sb-hero-cta:hover > span:last-child {
    border-bottom-color: #252324 !important;
  }

  .sb-hero-cta:hover > span:last-child::after {
    visibility: hidden;
    animation: none;
  }
}