:root {
  --ym-ease: cubic-bezier(.22, 1, .36, 1);
}

html.ym-motion-ready,
html.ym-motion-ready body {
  overflow-x: clip;
}

.ym-word {
  display: inline-block;
}

.ym-lines-built > .ym-line-mask {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  display: block;
  overflow: clip;
  overflow-clip-margin: .12em;
}

.ym-lines-built > .ym-line-mask > span {
  display: block;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
}

html.ym-motion-ready [data-motion="lines"] .ym-line-mask > span {
  transform: translateY(110%) rotate(2deg);
  transform-origin: 0 100%;
  transition: transform 1.15s var(--ym-ease) min(600ms, calc(var(--li, 0) * var(--ym-line-step, 110ms) + var(--d, 0ms)));
}

html.ym-motion-ready [data-motion="lines"].is-in .ym-line-mask > span {
  transform: none;
}

html.ym-motion-ready [data-motion]:not([data-motion="lines"]) {
  transition: opacity 1s var(--ym-ease) var(--d, 0ms), transform 1.15s var(--ym-ease) var(--d, 0ms);
}

html.ym-motion-ready [data-motion]:not([data-motion="lines"]):not(.is-in) {
  opacity: 0;
}

html.ym-motion-ready [data-motion="left"]:not(.is-in) {
  transform: translateX(-36px);
}

html.ym-motion-ready [data-motion="up"]:not(.is-in),
html.ym-motion-ready [data-motion="draw"]:not(.is-in) {
  transform: translateY(46px);
}

html.ym-motion-ready [data-motion="rise"]:not(.is-in) {
  transform: perspective(1600px) translateY(110px) rotateX(14deg) scale(.97);
  transform-origin: 50% 0;
}

html.ym-motion-ready [data-motion="blur"] {
  transition: opacity 1s var(--ym-ease) var(--d, 0ms), transform 1.15s var(--ym-ease) var(--d, 0ms), filter 1s var(--ym-ease) var(--d, 0ms);
}

html.ym-motion-ready [data-motion="blur"]:not(.is-in) {
  transform: translateY(60px) scale(.96);
  filter: blur(10px);
}

html.ym-motion-ready .ym-hero-item:not(.is-in),
html.ym-motion-ready .ym-hero-item:not(.is-in) .ym-line-mask > span {
  transition: none;
}

html.ym-motion-ready [data-motion-hero] .ym-line-mask > span {
  transition-delay: min(350ms, calc(var(--li, 0) * 110ms + var(--d, 0ms)));
}

html.ym-motion-ready [data-motion].is-instant,
html.ym-motion-ready [data-motion].is-instant .ym-line-mask > span {
  transition: none !important;
  animation: none !important;
}

.ym-line-static,
.ym-step-static,
.ym-spotlight-static {
  position: relative;
}

.ym-line-rail {
  display: none;
  position: absolute;
  pointer-events: none;
  background: rgb(255 255 255 / 8%);
}

html.ym-motion-ready .ym-line-rail {
  display: block;
}

.ym-line-rail > span {
  position: absolute;
  inset: 0;
  background: var(--pink, #fc6299);
  transform: scaleY(0);
  transform-origin: 0 0;
}

html.ym-motion-ready .ym-process-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pink, #fc6299);
  pointer-events: none;
  opacity: .15;
  transform: scale(.6);
  transition: opacity .3s, transform .3s var(--ym-ease);
}

html.ym-motion-ready .ym-process-step.is-lit::after {
  opacity: 1;
  transform: scale(1);
}

.ym-spotlight-light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgb(252 98 153 / 10%), transparent 65%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity .3s;
}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .ym-spotlight:hover > .ym-spotlight-light {
    opacity: 1;
  }
}

.ym-tab-fade {
  backface-visibility: hidden;
}

@media (max-width: 768px) {
  html.ym-motion-ready [data-motion="left"]:not(.is-in) {
    transform: translateX(-12px);
  }

  html.ym-motion-ready [data-motion="up"]:not(.is-in),
  html.ym-motion-ready [data-motion="draw"]:not(.is-in) {
    transform: translateY(30px);
  }

  html.ym-motion-ready [data-motion="rise"]:not(.is-in),
  html.ym-motion-ready [data-motion="blur"]:not(.is-in) {
    transform: translateY(60px);
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ym-motion-ready [data-motion],
  html.ym-motion-ready [data-motion] .ym-line-mask > span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }

  .ym-spotlight-light,
  .ym-line-rail,
  .ym-process-step::after {
    display: none !important;
  }
}