.c-reveal {
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .72s cubic-bezier(.22,1,.36,1)
}

.c-reveal.is-visible {
  opacity:1;
  transform:none
}

.c-letter-title.is-letter-animated .c-letter-title__char {
  display:inline-block;
  white-space:pre;
  opacity:0;
  transform:translate3d(0,-22px,0) rotate(var(--char-rotate,0deg)) scale(.96);
  filter:blur(1.5px);
  will-change:transform,opacity,filter
}

.c-letter-title.is-letter-animated.is-letter-visible .c-letter-title__char {
  opacity:1;
  transform:translate3d(0,0,0) rotate(0deg) scale(1);
  filter:blur(0);
  transition:
    opacity .15s ease,
    transform .29s cubic-bezier(.18,.88,.28,1.16),
    filter .18s ease;
  transition-delay:calc(var(--char-index,0) * .027s)
}

.p-home__service-card:nth-child(2) {
  transition-delay:.09s
}

.p-home__service-card:nth-child(3) {
  transition-delay:.18s
}

.p-about__intro-point:nth-child(2) {
  transition-delay:.1s
}

.p-about__intro-point:nth-child(3) {
  transition-delay:.2s
}

.p-home__hero-copy > * {
  animation:hero-copy-rise .76s cubic-bezier(.22,1,.36,1) both
}

.p-home__hero-copy > h1 {
  animation-delay:.08s
}

.p-home__hero-copy > p:not(.p-home__eyebrow) {
  animation-delay:.16s
}

.p-home__hero-actions {
  animation-delay:.24s
}

.p-home__hero-liquid-text::after {
  animation:hero-liquid-rise 2.38s linear .48s both;
  will-change:clip-path
}

.p-home__hero-stage.is-visible .p-home__hero-product-pos {
  animation:hero-device-arrive .95s cubic-bezier(.16,1,.3,1) .18s both
}

.p-home__hero-stage.is-visible .p-home__hero-product-card {
  animation:hero-card-arrive .95s cubic-bezier(.16,1,.3,1) .28s both
}

.p-home__hero-stage.is-visible .p-home__hero-cards li {
  animation:cube-arrive .68s cubic-bezier(.16,1,.3,1) both
}

.p-home__hero-stage.is-visible .p-home__hero-cards li:nth-child(1) {
  animation-delay:.35s
}

.p-home__hero-stage.is-visible .p-home__hero-cards li:nth-child(2) {
  animation-delay:.46s
}

.p-home__hero-stage.is-visible .p-home__hero-cards li:nth-child(3) {
  animation-delay:.57s
}

.p-home__hero-stage.is-visible .p-home__hero-cards li:nth-child(4) {
  animation-delay:.68s
}

.p-home__hero-stage.is-visible .p-home__hero-card-float {
  animation:hero-cube-float var(--cube-float-duration,8s) ease-in-out var(--cube-float-delay,1.2s) infinite;
  will-change:transform
}

.p-home__hero-trust-copy,
.p-home__hero-trust li {
  animation:trust-rise .62s cubic-bezier(.22,1,.36,1) both
}

.p-home__hero-trust-copy {
  animation-delay:.72s
}

.p-home__hero-trust li:nth-child(1) {
  animation-delay:.78s
}

.p-home__hero-trust li:nth-child(2) {
  animation-delay:.85s
}

.p-home__hero-trust li:nth-child(3) {
  animation-delay:.92s
}

.p-home__hero-trust li:nth-child(4) {
  animation-delay:.99s
}

.p-home__hero-trust li:nth-child(5) {
  animation-delay:1.06s
}

.p-home__service-card .p-home__service-art,
.p-home__service-card .p-home__service-title img,
.p-home__app-visual img {
  transition:transform .45s cubic-bezier(.22,1,.36,1)
}

.p-home__section-head.is-switching > * {
  animation:service-copy-switch .52s cubic-bezier(.22,1,.36,1) both
}

.p-home__section-head.is-switching h2 {
  animation-delay:.04s
}

.p-home__section-head.is-switching > p:last-child {
  animation-delay:.08s
}

.p-home__service-card:hover .p-home__service-art {
  transform:translateY(-6px)
}

.p-home__service-card:hover .p-home__service-title img {
  transform:translateX(5px)
}

.p-home__mosaic-copy {
  transform-origin:50% 0
}

.p-home__mosaic-copy.is-visible {
  animation:mosaic-panel-open .72s cubic-bezier(.22,1,.36,1) both
}

.p-home__mosaic-copy--top-right.is-visible {
  animation-delay:.08s
}

.p-home__mosaic-copy--bottom-left.is-visible {
  animation-delay:.12s
}

.p-home__mosaic-copy--bottom-right.is-visible {
  animation-delay:.2s
}

.p-home__app-copy .p-home__eyebrow,
.p-home__app-copy h2,
.p-home__app-copy .p-home__app-lead {
  opacity:0;
  transform:translateY(16px)
}

.p-home__app-copy.is-visible .p-home__eyebrow,
.p-home__app-copy.is-visible h2,
.p-home__app-copy.is-visible .p-home__app-lead {
  animation:app-copy-rise .62s cubic-bezier(.22,1,.36,1) both
}

.p-home__app-copy.is-visible h2 {
  animation-delay:.08s
}

.p-home__app-copy.is-visible .p-home__app-lead {
  animation-delay:.16s
}

.p-home__app-points li {
  opacity:0;
  transform:perspective(760px) rotateX(-22deg) translateY(-13px);
  transform-origin:50% 0
}

.p-home__app-copy.is-visible .p-home__app-points li {
  animation:paper-unfold .66s cubic-bezier(.16,1,.3,1) both
}

.p-home__app-copy.is-visible .p-home__app-points li:nth-child(1) {
  animation-delay:.28s
}

.p-home__app-copy.is-visible .p-home__app-points li:nth-child(2) {
  animation-delay:.4s
}

.p-home__app-copy.is-visible .p-home__app-points li:nth-child(3) {
  animation-delay:.52s
}

.p-home__app-visual.is-visible img {
  animation:phone-rise .9s cubic-bezier(.16,1,.3,1) .12s both
}

.p-home__blue-bubbles span {
  animation:bubble-rise var(--bubble-duration) ease-in var(--bubble-delay) infinite
}

.p-home__blue-cursor-bubbles span {
  animation:cursor-bubble-pop .58s cubic-bezier(.18,.88,.28,1) forwards
}

.p-home__blue-service-card:nth-child(1) {
  --blue-card-index:0
}

.p-home__blue-service-card:nth-child(2) {
  --blue-card-index:1
}

.p-home__blue-service-card:nth-child(3) {
  --blue-card-index:2
}

.p-home__blue-service-card:nth-child(4) {
  --blue-card-index:3
}

.p-home__blue-service-card:nth-child(5) {
  --blue-card-index:4
}

.p-home__blue-service-card:nth-child(6) {
  --blue-card-index:5
}

.p-home__blue-service-card.c-reveal.is-visible {
  transform-origin:50% 70%;
  animation:blue-service-card-fan-in .82s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--blue-card-index,0) * 96ms)
}

@keyframes hero-copy-rise {
  from {
    opacity:0;
    transform:translateY(18px)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes hero-liquid-rise {
  0% {
    clip-path:polygon(0 100%,10% 100%,20% 100%,30% 100%,40% 100%,50% 100%,60% 100%,70% 100%,80% 100%,90% 100%,100% 100%,100% 100%,0 100%)
  }
  6% {
    clip-path:polygon(0 70%,10% 66%,20% 75%,30% 88%,40% 96%,50% 99%,60% 100%,70% 100%,80% 100%,90% 100%,100% 100%,100% 100%,0 100%)
  }
  13% {
    clip-path:polygon(0 38%,10% 44%,20% 51%,30% 63%,40% 78%,50% 90%,60% 97%,70% 100%,80% 100%,90% 99%,100% 100%,100% 100%,0 100%)
  }
  21% {
    clip-path:polygon(0 55%,10% 48%,20% 43%,30% 50%,40% 58%,50% 67%,60% 75%,70% 84%,80% 90%,90% 94%,100% 91%,100% 100%,0 100%)
  }
  31% {
    clip-path:polygon(0 35%,10% 42%,20% 50%,30% 56%,40% 62%,50% 66%,60% 59%,70% 48%,80% 42%,90% 47%,100% 52%,100% 100%,0 100%)
  }
  43% {
    clip-path:polygon(0 18%,10% 14%,20% 22%,30% 30%,40% 38%,50% 43%,60% 47%,70% 50%,80% 55%,90% 60%,100% 57%,100% 100%,0 100%)
  }
  57% {
    clip-path:polygon(0 34%,10% 30%,20% 24%,30% 18%,40% 22%,50% 29%,60% 35%,70% 32%,80% 24%,90% 18%,100% 21%,100% 100%,0 100%)
  }
  72% {
    clip-path:polygon(0 5%,10% 9%,20% 14%,30% 12%,40% 17%,50% 23%,60% 28%,70% 25%,80% 20%,90% 24%,100% 30%,100% 100%,0 100%)
  }
  87% {
    clip-path:polygon(0 12%,10% 8%,20% 5%,30% 7%,40% 10%,50% 8%,60% 5%,70% 7%,80% 10%,90% 6%,100% 3%,100% 100%,0 100%)
  }
  100% {
    clip-path:polygon(0 0,10% 0,20% 0,30% 0,40% 0,50% 0,60% 0,70% 0,80% 0,90% 0,100% 0,100% 100%,0 100%)
  }
}

@keyframes blue-service-card-fan-in {
  0% {
    opacity:0;
    transform:translate3d(34px,28px,0) rotate(8deg) scale(.84);
    filter:blur(6px)
  }
  62% {
    opacity:1;
    transform:translate3d(-4px,-6px,0) rotate(-1.4deg) scale(1.025);
    filter:blur(0)
  }
  100% {
    opacity:1;
    transform:translate3d(0,0,0) rotate(0) scale(1);
    filter:blur(0)
  }
}

@keyframes hero-device-arrive {
  from {
    opacity:0;
    transform:translateY(34px)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes hero-card-arrive {
  from {
    opacity:0;
    transform:translateY(34px) rotate(-7deg) scale(.94)
  }
  to {
    opacity:1;
    transform:rotate(-7deg)
  }
}

@keyframes cube-arrive {
  from {
    opacity:0;
    transform:translateY(24px) scale(.9)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes hero-cube-float {
  0%,
  100% {
    transform:translateY(0)
  }
  31% {
    transform:translateY(var(--cube-float-lift,-5px))
  }
  67% {
    transform:translateY(var(--cube-float-settle,2px))
  }
  84% {
    transform:translateY(var(--cube-float-mid,-2px))
  }
}

@keyframes trust-rise {
  from {
    opacity:0;
    transform:translateY(10px)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes service-copy-switch {
  from {
    opacity:0;
    transform:translateY(12px)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes mosaic-panel-open {
  from {
    opacity:0;
    transform:perspective(760px) rotateX(-10deg) translateY(18px)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes app-copy-rise {
  to {
    opacity:1;
    transform:none
  }
}

@keyframes paper-unfold {
  to {
    opacity:1;
    transform:none
  }
}

@keyframes phone-rise {
  from {
    opacity:0;
    transform:translateY(38px) rotate(2deg) scale(.96)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes bubble-rise {
  0% {
    opacity:0;
    transform:translate3d(0,0,0) scale(.62)
  }
  16% {
    opacity:.5
  }
  62% {
    opacity:.32
  }
  82%,
  100% {
    opacity:0;
    transform:translate3d(var(--bubble-drift),var(--bubble-rise),0) scale(1.18)
  }
}

@keyframes cursor-bubble-pop {
  0% {
    opacity:0;
    transform:translate3d(-50%,-50%,0) scale(.45)
  }
  10% {
    opacity:.82
  }
  100% {
    opacity:0;
    transform:translate3d(calc(-50% + var(--cursor-drift)),calc(-50% - 22px),0) scale(1.12)
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  html body *,
  html body *::before,
  html body *::after {
    scroll-behavior:auto;
    transition-duration:.01ms;
    animation-duration:.01ms;
    animation-delay:0s;
    animation-iteration-count:1
  }

  .c-reveal,
  .c-letter-title.is-letter-animated .c-letter-title__char,
  .p-home__app-copy .p-home__eyebrow,
  .p-home__app-copy h2,
  .p-home__app-copy .p-home__app-lead,
  .p-home__app-points li {
    opacity:1;
    transform:none;
    filter:none
  }

  .p-home__blue-bubbles span,
  .p-home__blue-cursor-bubbles span {
    display:none
  }

}