/* JSTUDIO hero entrance: the wordmark lands first, supporting copy follows. */

.js-hero-intro-pending .js-hero-wordmark {
  visibility: hidden;
}

.js-hero-intro-pending .js-nav,
.js-hero-intro-pending .js-hero-index,
.js-hero-intro-pending .js-hero-copy,
.js-hero-intro-pending .js-scroll-note {
  opacity: 0;
}

.js-hero-intro-active .js-hero-wordmark {
  visibility: visible;
}

.js-hero-wordmark .js-intro-letter {
  --fall-rotate: 0deg;
  --bounce-height: -5.2vh;
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, filter, opacity;
  animation: js-letter-drop 1080ms var(--intro-delay) both;
  animation-timing-function: linear;
}

.js-hero-wordmark .js-intro-letter-glyph {
  display: inline-block;
  transform: translate3d(0, var(--letter-lift, 0), 0) rotate(var(--letter-tilt, 0deg));
  transform-origin: 50% 82%;
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.js-hero-wordmark .js-intro-letter:nth-child(1) {
  --fall-rotate: -3.8deg;
  --bounce-height: -4.6vh;
}

.js-hero-wordmark .js-intro-letter:nth-child(2) {
  --fall-rotate: 2.2deg;
  --bounce-height: -5.8vh;
}

.js-hero-wordmark .js-intro-letter:nth-child(3) {
  --fall-rotate: -1.4deg;
  --bounce-height: -4.9vh;
}

.js-hero-wordmark .js-intro-letter:nth-child(4) {
  --fall-rotate: 3.1deg;
  --bounce-height: -6.2vh;
}

.js-hero-wordmark .js-intro-letter:nth-child(5) {
  --fall-rotate: -2.6deg;
  --bounce-height: -5.1vh;
}

.js-hero-wordmark .js-intro-letter:nth-child(6) {
  --fall-rotate: 1.6deg;
  --bounce-height: -5.6vh;
}

.js-hero-wordmark .js-intro-letter:nth-child(7) {
  --fall-rotate: -2deg;
  --bounce-height: -4.7vh;
}

.js-hero-wordmark .js-intro-letter--i .js-intro-letter-glyph {
  transform-origin: 50% 100%;
  animation: js-i-compress 760ms 1810ms cubic-bezier(.22, .75, .22, 1) both;
}

.js-hero-wordmark .js-intro-letter--o {
  animation-name: js-o-drop-and-bounce;
  animation-duration: 1250ms;
  animation-delay: 1320ms;
}

.js-hero-wordmark.js-signature-physics .js-intro-letter--o,
.js-hero-wordmark.js-signature-physics .js-intro-letter--i .js-intro-letter-glyph {
  animation: none;
}

.js-hero-wordmark.js-signature-physics .js-intro-letter--o {
  opacity: 0;
}

.js-hero-wordmark.js-signature-physics.js-signature-complete .js-intro-letter--o {
  opacity: 1;
  filter: none;
  transform: none;
}

.js-hero-wordmark .js-intro-mark {
  opacity: 0;
  transform-origin: 50% 100%;
  animation: js-mark-drop 500ms 2540ms cubic-bezier(.16, .9, .28, 1.35) both;
}

.js-hero-intro-active .js-nav,
.js-hero-intro-active .js-hero-index,
.js-hero-intro-active .js-eyebrow,
.js-hero-intro-active .js-hero-title,
.js-hero-intro-active .js-hero-body,
.js-hero-intro-active .js-scroll-note {
  animation: js-copy-arrive 580ms cubic-bezier(.2, .8, .2, 1) both;
}

.js-hero-intro-active .js-nav {
  animation-delay: 2610ms;
}

.js-hero-intro-active .js-hero-index {
  animation-delay: 2670ms;
}

.js-hero-intro-active .js-eyebrow {
  animation-delay: 2700ms;
}

.js-hero-intro-active .js-hero-title {
  animation-delay: 2750ms;
}

.js-hero-intro-active .js-hero-body {
  animation-delay: 2820ms;
}

.js-hero-intro-active .js-scroll-note {
  animation-delay: 2910ms;
}

.js-hero-intro-complete .js-nav,
.js-hero-intro-complete .js-hero-index,
.js-hero-intro-complete .js-eyebrow,
.js-hero-intro-complete .js-hero-title,
.js-hero-intro-complete .js-hero-body,
.js-hero-intro-complete .js-scroll-note {
  opacity: 1;
  filter: none;
  transform: none;
}

.js-hero-intro-complete .js-intro-letter--i .js-intro-letter-glyph {
  animation: none;
}

@keyframes js-letter-drop {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, -112vh, 0) rotate(var(--fall-rotate)) scale3d(.96, 1.04, 1);
  }
  43% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -10vh, 0) rotate(calc(var(--fall-rotate) * .24)) scale3d(.985, 1.015, 1);
  }
  52% {
    transform: translate3d(0, 0, 0) rotate(0) scale3d(1.065, .78, 1);
  }
  67% {
    transform: translate3d(0, var(--bounce-height), 0) rotate(calc(var(--fall-rotate) * -.18)) scale3d(.982, 1.045, 1);
  }
  79% {
    transform: translate3d(0, 0, 0) rotate(0) scale3d(1.032, .92, 1);
  }
  89% {
    transform: translate3d(0, -1.1vh, 0) rotate(calc(var(--fall-rotate) * .06)) scale3d(.993, 1.018, 1);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0) scale3d(1, 1, 1);
  }
}

@keyframes js-o-drop-and-bounce {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(var(--o-impact-x), -112vh, 0) rotate(-7deg) scale3d(.96, 1.04, 1);
    animation-timing-function: cubic-bezier(.38, 0, .88, .42);
  }
  34% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(var(--o-impact-x), calc(var(--o-impact-y) - 10vh), 0) rotate(-3deg) scale3d(.985, 1.015, 1);
    animation-timing-function: cubic-bezier(.18, .72, .24, 1);
  }
  42% {
    transform: translate3d(var(--o-impact-x), var(--o-impact-y), 0) rotate(-1deg) scale3d(1.025, .94, 1);
    animation-timing-function: cubic-bezier(.18, .72, .22, 1);
  }
  50% {
    transform: translate3d(var(--o-impact-x), var(--o-pressed-y), 0) rotate(2deg) scale3d(1.06, .82, 1);
    animation-timing-function: cubic-bezier(.28, .05, .24, 1);
  }
  58% {
    transform: translate3d(var(--o-impact-x), var(--o-rebound-y), 0) rotate(5deg) scale3d(.985, 1.035, 1);
    animation-timing-function: cubic-bezier(.2, .7, .25, 1);
  }
  70% {
    transform: translate3d(var(--o-arc-x), var(--o-arc-y), 0) rotate(8deg) scale3d(1, 1, 1);
    animation-timing-function: cubic-bezier(.3, .05, .28, 1);
  }
  86% {
    transform: translate3d(var(--o-overshoot-x), 0, 0) rotate(1.5deg) scale3d(1.04, .88, 1);
    animation-timing-function: cubic-bezier(.16, .72, .28, 1);
  }
  93% {
    transform: translate3d(var(--o-return-x), -1.7vh, 0) rotate(-2deg) scale3d(.985, 1.035, 1);
    animation-timing-function: cubic-bezier(.2, .7, .28, 1);
  }
  97% {
    transform: translate3d(3px, 0, 0) rotate(.5deg) scale3d(1.018, .95, 1);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0) scale3d(1, 1, 1);
  }
}

@keyframes js-i-compress {
  0%, 7% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  20% {
    transform: translate3d(0, 0, 0) scale3d(1.12, .58, 1);
  }
  34% {
    transform: translate3d(0, 0, 0) scale3d(1.075, .69, 1);
  }
  57% {
    transform: translate3d(0, 0, 0) scale3d(.965, 1.11, 1);
  }
  76% {
    transform: translate3d(0, 0, 0) scale3d(1.025, .965, 1);
  }
  90% {
    transform: translate3d(0, 0, 0) scale3d(.993, 1.018, 1);
  }
  100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes js-mark-drop {
  0% {
    opacity: 0;
    transform: translate3d(0, -90px, 0) rotate(-14deg) scale(.55);
  }
  65% {
    opacity: 1;
    transform: translate3d(0, 3px, 0) rotate(4deg) scale(1.12, .88);
  }
  82% {
    transform: translate3d(0, -5px, 0) rotate(-2deg) scale(.96, 1.04);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

@keyframes js-copy-arrive {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 16px, 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 767px) {
  .js-hero-wordmark .js-intro-letter {
    --bounce-height: -3.2vh;
    animation-duration: 920ms;
  }

  .js-hero-wordmark .js-intro-mark {
    animation-delay: 2210ms;
  }

  .js-hero-wordmark .js-intro-letter--i .js-intro-letter-glyph {
    animation-duration: 662ms;
    animation-delay: 1578ms;
  }

  .js-hero-wordmark .js-intro-letter--o {
    animation-duration: 1080ms;
    animation-delay: 1160ms;
  }

  .js-hero-intro-active .js-nav {
    animation-delay: 2280ms;
  }

  .js-hero-intro-active .js-hero-index {
    animation-delay: 2340ms;
  }

  .js-hero-intro-active .js-eyebrow {
    animation-delay: 2370ms;
  }

  .js-hero-intro-active .js-hero-title {
    animation-delay: 2420ms;
  }

  .js-hero-intro-active .js-hero-body {
    animation-delay: 2490ms;
  }

  .js-hero-intro-active .js-scroll-note {
    animation-delay: 2580ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-hero-wordmark .js-intro-letter,
  .js-hero-wordmark .js-intro-mark,
  .js-hero-intro-active .js-nav,
  .js-hero-intro-active .js-hero-index,
  .js-hero-intro-active .js-eyebrow,
  .js-hero-intro-active .js-hero-title,
  .js-hero-intro-active .js-hero-body,
  .js-hero-intro-active .js-scroll-note {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .js-hero-wordmark .js-intro-letter-glyph {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}