/*
 * Market Solo motion and depth system.
 * Fast interaction: 180ms. Medium reveal: 520ms. Ambient movement: 4-8s.
 */

:root {
  --ms-motion-fast: 180ms;
  --ms-motion-medium: 520ms;
  --ms-motion-slow: 6s;
  --ms-ease-out: cubic-bezier(.2, .75, .25, 1);
  --ms-ease-spring: cubic-bezier(.18, .85, .25, 1.08);
}

body { overflow-x: hidden; }

.ms-hero,
.ms-dark,
.ms-demo-section,
.ms-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ms-hero::before,
.ms-dark::before,
.ms-demo-section::before,
.ms-page-hero::before {
  position: absolute;
  z-index: -1;
  width: min(52vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  opacity: .55;
  filter: blur(32px);
  will-change: transform;
  animation: ms-ambient-drift 7s var(--ms-ease-out) infinite alternate;
}

.ms-hero::before {
  top: -35%;
  right: -8%;
  background: radial-gradient(circle, rgba(36, 87, 255, .34), rgba(36, 87, 255, 0) 68%);
}
.ms-dark::before {
  top: -22%;
  right: 4%;
  background: radial-gradient(circle, rgba(36, 87, 255, .3), rgba(36, 87, 255, 0) 70%);
}
.ms-demo-section::before {
  top: 8%;
  left: -14%;
  background: radial-gradient(circle, rgba(255, 75, 43, .24), rgba(255, 75, 43, 0) 70%);
}
.ms-page-hero::before {
  top: -55%;
  right: 4%;
  background: radial-gradient(circle, rgba(36, 87, 255, .28), rgba(36, 87, 255, 0) 70%);
}

.ms-hero::after,
.ms-dark::after,
.ms-demo-section::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .035), transparent 24%, transparent 74%, rgba(255, 255, 255, .025)),
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .045), transparent 28%);
  opacity: .72;
}

.ms-motion-ready .ms-reveal {
  --ms-reveal-y: 28px;
  --ms-reveal-scale: .985;
  opacity: 0;
  transform: translate3d(0, var(--ms-reveal-y), 0) scale(var(--ms-reveal-scale));
  transition:
    opacity var(--ms-motion-medium) var(--ms-ease-out) var(--ms-reveal-delay, 0ms),
    transform var(--ms-motion-medium) var(--ms-ease-out) var(--ms-reveal-delay, 0ms);
}
.ms-motion-ready .ms-reveal.is-revealed {
  --ms-reveal-y: 0px;
  --ms-reveal-scale: 1;
  opacity: 1;
}

.ms-motion-surface {
  --ms-parallax-y: 0px;
  --ms-tilt-x: 0deg;
  --ms-tilt-y: 0deg;
  --ms-pointer-x: 50%;
  --ms-pointer-y: 34%;
  transform:
    perspective(1200px)
    translate3d(0, var(--ms-parallax-y), 0)
    rotateX(var(--ms-tilt-x))
    rotateY(var(--ms-tilt-y));
  transform-style: preserve-3d;
  transition: transform 420ms var(--ms-ease-out), box-shadow 420ms var(--ms-ease-out);
  will-change: transform;
}
.ms-motion-ready .ms-motion-surface.ms-reveal {
  transform:
    perspective(1200px)
    translate3d(0, calc(var(--ms-parallax-y) + var(--ms-reveal-y)), 0)
    rotateX(var(--ms-tilt-x))
    rotateY(var(--ms-tilt-y))
    scale(var(--ms-reveal-scale));
}

.ms-product-frame::after,
.ms-demo-frame::after,
.ms-context > .ms-shell::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at var(--ms-pointer-x) var(--ms-pointer-y), rgba(255, 255, 255, .22), transparent 23%),
    linear-gradient(115deg, rgba(255, 255, 255, .17), transparent 18%, transparent 80%, rgba(255, 255, 255, .06));
  opacity: .34;
  transition: opacity var(--ms-motion-medium) var(--ms-ease-out);
}
.ms-product-frame:hover::after,
.ms-demo-frame:hover::after,
.ms-context > .ms-shell:hover::after { opacity: .58; }

.ms-product-frame {
  box-shadow:
    26px 26px 0 var(--ms-accent-primary),
    0 46px 110px rgba(0, 0, 0, .42),
    0 0 90px rgba(36, 87, 255, .14);
}
.ms-product-frame:hover {
  box-shadow:
    22px 30px 0 var(--ms-accent-primary),
    0 58px 130px rgba(0, 0, 0, .5),
    0 0 115px rgba(36, 87, 255, .2);
}

.ms-goal-card {
  position: relative;
  padding: clamp(26px, 3.5vw, 42px);
  border: 1px solid rgba(255, 255, 255, .13);
  background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 34px 80px rgba(0, 0, 0, .3);
  backdrop-filter: blur(16px);
}
.ms-goal-card::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 75, 43, .12), transparent 34%, transparent 76%, rgba(36, 87, 255, .12));
}

.ms-demo-frame {
  box-shadow:
    22px 22px 0 var(--ms-accent-secondary),
    0 48px 120px rgba(0, 0, 0, .55),
    0 0 100px rgba(255, 75, 43, .08);
}
.ms-context > .ms-shell {
  position: relative;
  overflow: hidden;
  box-shadow: 0 42px 100px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.ms-capabilities article,
.ms-steps li,
.ms-pricing article,
.ms-flow-sources span,
.ms-flow-actions span,
.ms-post-grid article {
  position: relative;
  transition:
    transform 380ms var(--ms-ease-out),
    background-color 380ms var(--ms-ease-out),
    border-color 380ms var(--ms-ease-out),
    box-shadow 380ms var(--ms-ease-out);
}
.ms-capabilities article::after,
.ms-pricing article::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .45), transparent 24%, transparent 78%, rgba(36, 87, 255, .06));
  opacity: 0;
  transition: opacity 380ms var(--ms-ease-out);
}
.ms-capabilities article:hover,
.ms-pricing article:not(.is-featured):hover {
  z-index: 2;
  transform: translate3d(0, -6px, 0);
  border-color: rgba(16, 16, 18, .28);
  background: rgba(255, 253, 249, .82);
  box-shadow: 0 28px 60px rgba(16, 16, 18, .12);
}
.ms-capabilities article:hover::after,
.ms-pricing article:hover::after { opacity: 1; }
.ms-steps li:hover { transform: translate3d(0, -4px, 0); }
.ms-flow-sources span:hover,
.ms-flow-actions span:hover { z-index: 1; transform: translate3d(0, -3px, 0); background: rgba(255, 253, 249, .75); }
.ms-post-grid article:hover { transform: translate3d(8px, 0, 0); }

.ms-button {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--ms-motion-fast) var(--ms-ease-spring),
    background-color var(--ms-motion-fast) var(--ms-ease-out),
    border-color var(--ms-motion-fast) var(--ms-ease-out),
    box-shadow var(--ms-motion-fast) var(--ms-ease-out);
}
.ms-button::after,
.ms-waitlist-form button::after {
  position: absolute;
  top: -40%;
  left: -45%;
  width: 34%;
  height: 180%;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent);
  transform: translate3d(-180%, 0, 0) rotate(18deg);
  transition: transform 620ms var(--ms-ease-out);
}
.ms-button:hover,
.ms-waitlist-form button:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 14px 30px rgba(255, 75, 43, .24);
}
.ms-button:hover::after,
.ms-waitlist-form button:hover::after { transform: translate3d(520%, 0, 0) rotate(18deg); }
.ms-button:active,
.ms-waitlist-form button:active { transform: translate3d(0, 0, 0); }
.ms-waitlist-form button { position: relative; overflow: hidden; transition: transform var(--ms-motion-fast) var(--ms-ease-out), box-shadow var(--ms-motion-fast) var(--ms-ease-out); }

.ms-nav nav a,
.ms-footer nav a,
.ms-demo-placeholder a,
.ms-post-grid article > a {
  position: relative;
  display: inline-block;
}
.ms-nav nav a::after,
.ms-footer nav a::after,
.ms-demo-placeholder a::after,
.ms-post-grid article > a::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--ms-ease-out);
}
.ms-nav nav a:hover::after,
.ms-footer nav a:hover::after,
.ms-demo-placeholder a:hover::after,
.ms-post-grid article > a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

@keyframes ms-ambient-drift {
  from { transform: translate3d(-2%, -2%, 0) scale(.96); }
  to { transform: translate3d(5%, 4%, 0) scale(1.06); }
}

@media (max-width: 980px) {
  .ms-motion-surface,
  .ms-motion-ready .ms-motion-surface.ms-reveal {
    --ms-tilt-x: 0deg !important;
    --ms-tilt-y: 0deg !important;
  }
  .ms-product-frame {
    box-shadow: 16px 16px 0 var(--ms-accent-primary), 0 34px 80px rgba(0, 0, 0, .36);
  }
}

@media (max-width: 640px) {
  .ms-motion-ready .ms-reveal { --ms-reveal-y: 18px; }
  .ms-motion-surface,
  .ms-motion-ready .ms-motion-surface.ms-reveal { --ms-parallax-y: 0px !important; }
  .ms-hero::before,
  .ms-dark::before,
  .ms-demo-section::before { opacity: .36; filter: blur(42px); }
  .ms-product-frame { box-shadow: 9px 9px 0 var(--ms-accent-primary), 0 28px 60px rgba(0, 0, 0, .34); }
  .ms-demo-frame { box-shadow: 9px 9px 0 var(--ms-accent-secondary), 0 30px 70px rgba(0, 0, 0, .4); }
  .ms-capabilities article:hover,
  .ms-pricing article:not(.is-featured):hover,
  .ms-steps li:hover,
  .ms-flow-sources span:hover,
  .ms-flow-actions span:hover,
  .ms-post-grid article:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-hero::before,
  .ms-dark::before,
  .ms-demo-section::before,
  .ms-page-hero::before { animation: none !important; }
  .ms-reveal,
  .ms-motion-surface,
  .ms-motion-ready .ms-motion-surface.ms-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ms-product-frame::after,
  .ms-demo-frame::after,
  .ms-context > .ms-shell::after,
  .ms-button::after,
  .ms-waitlist-form button::after { display: none; }
  .ms-capabilities article:hover,
  .ms-pricing article:hover,
  .ms-steps li:hover,
  .ms-flow-sources span:hover,
  .ms-flow-actions span:hover,
  .ms-post-grid article:hover,
  .ms-button:hover,
  .ms-waitlist-form button:hover { transform: none !important; }
}