/*
 * Top-page main visual animation
 * Layout, typography and colors continue to be managed by css/style.css.
 */

.mv-anime__media {
  position: relative;
  isolation: isolate;
}

.mv-anime__slides,
.mv-anime__slide,
.mv-anime__kenburns-layer {
  position: absolute;
  inset: 0;
}

.mv-anime__slides {
  overflow: hidden;
}

.mv-anime__slide {
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  clip-path: circle(0% at 0% 100%);
}

.mv-anime__slide.is-mv-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  clip-path: circle(165% at 0% 100%);
}

.mv-anime__slide.is-mv-leaving {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  clip-path: circle(165% at 0% 100%);
}

.mv-anime__slide.is-mv-entering {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  animation: mv-anime-curved-reveal 1s cubic-bezier(0.22, 0.72, 0.22, 1) both;
}

.mv-anime__pointer-layer {
  position: absolute;
  inset: -8px;
  transform: none;
}

.mv-anime__kenburns-layer {
  transform-origin: center;
}

.mv-anime__slide--01 img {
  object-position: 50% 50%;
}

.mv-anime__slide--02 img {
  object-position: 56% 48%;
}

.mv-anime__slide--03 img {
  object-position: 43% 48%;
}

.mv-anime__copy-line {
  display: block;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

html.is-mv-js:not(.is-mv-fallback) .mv-anime:not(.is-mv-ready) .hero__label,
html.is-mv-js:not(.is-mv-fallback) .mv-anime:not(.is-mv-ready) .mv-anime__copy-line,
html.is-mv-js:not(.is-mv-fallback) .mv-anime:not(.is-mv-ready) .hero__fields li {
  opacity: 0;
}

html.is-mv-js:not(.is-mv-fallback) .mv-anime:not(.is-mv-ready) .mv-anime__slide.is-mv-active {
  clip-path: circle(0% at 0% 100%);
}

html.is-mv-js .mv-anime.is-mv-ready:not(.is-mv-animation-complete) .mv-anime__slide.is-mv-active {
  animation: mv-anime-initial-reveal 4.0s 0.1s cubic-bezier(0.22, 0.72, 0.22, 1) both;
}

html.is-mv-js .mv-anime.is-mv-ready .hero__label {
  animation: mv-anime-copy-in 0.65s 0.9s cubic-bezier(0.22, 0.72, 0.22, 1) both;
}

html.is-mv-js .mv-anime.is-mv-ready .mv-anime__copy-line {
  animation: mv-anime-copy-in 0.8s cubic-bezier(0.22, 0.72, 0.22, 1) both;
}

html.is-mv-js .mv-anime.is-mv-ready .mv-anime__copy-line:nth-child(1) {
  animation-delay: 1.1s;
}

html.is-mv-js .mv-anime.is-mv-ready .mv-anime__copy-line:nth-child(2) {
  animation-delay: 1.33s;
}

html.is-mv-js .mv-anime.is-mv-ready .mv-anime__copy-line:nth-child(3) {
  animation-delay: 1.56s;
}

html.is-mv-js .mv-anime.is-mv-ready .hero__fields li {
  animation: mv-anime-field-in 0.62s cubic-bezier(0.22, 0.72, 0.22, 1) both;
}

html.is-mv-js .mv-anime.is-mv-ready .hero__fields li:nth-child(1),
html.is-mv-js .mv-anime.is-mv-ready .hero__fields li:nth-child(2) {
  animation-delay: 1.62s;
}

html.is-mv-js .mv-anime.is-mv-ready .hero__fields li:nth-child(3),
html.is-mv-js .mv-anime.is-mv-ready .hero__fields li:nth-child(4) {
  animation-delay: 1.78s;
}

html.is-mv-js .mv-anime.is-mv-ready .hero__fields li:nth-child(5),
html.is-mv-js .mv-anime.is-mv-ready .hero__fields li:nth-child(6) {
  animation-delay: 1.94s;
}

html.is-mv-js .mv-anime.is-mv-ready .hero__fields li:nth-child(7),
html.is-mv-js .mv-anime.is-mv-ready .hero__fields li:nth-child(8) {
  animation-delay: 2.1s;
}

html.is-mv-js .mv-anime.is-mv-ready .hero__fields li:nth-child(9) {
  animation-delay: 2.26s;
}

html.is-mv-js .mv-anime.is-mv-ready .mv-anime__slide.is-mv-active .mv-anime__kenburns-layer,
html.is-mv-js .mv-anime.is-mv-ready .mv-anime__slide.is-mv-entering .mv-anime__kenburns-layer {
  animation-duration: 6.5s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

html.is-mv-js .mv-anime.is-mv-ready .mv-anime__slide--01.is-mv-active .mv-anime__kenburns-layer,
html.is-mv-js .mv-anime.is-mv-ready .mv-anime__slide--01.is-mv-entering .mv-anime__kenburns-layer {
  animation-name: mv-anime-kenburns-01;
}

html.is-mv-js .mv-anime.is-mv-ready .mv-anime__slide--02.is-mv-active .mv-anime__kenburns-layer,
html.is-mv-js .mv-anime.is-mv-ready .mv-anime__slide--02.is-mv-entering .mv-anime__kenburns-layer {
  animation-name: mv-anime-kenburns-02;
}

html.is-mv-js .mv-anime.is-mv-ready .mv-anime__slide--03.is-mv-active .mv-anime__kenburns-layer,
html.is-mv-js .mv-anime.is-mv-ready .mv-anime__slide--03.is-mv-entering .mv-anime__kenburns-layer {
  animation-name: mv-anime-kenburns-03;
}

@keyframes mv-anime-initial-reveal {
  from {
    clip-path: circle(0% at 0% 100%);
  }

  to {
    clip-path: circle(165% at 0% 100%);
  }
}

@keyframes mv-anime-curved-reveal {
  from {
    clip-path: circle(0% at 0% 100%);
  }

  to {
    clip-path: circle(165% at 0% 100%);
  }
}

@keyframes mv-anime-copy-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mv-anime-field-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mv-anime-kenburns-01 {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }
}

@keyframes mv-anime-kenburns-02 {
  from {
    transform: translate3d(10px, 0, 0) scale(1.01);
  }

  to {
    transform: translate3d(-10px, 0, 0) scale(1.05);
  }
}

@keyframes mv-anime-kenburns-03 {
  from {
    transform: translate3d(-8px, 7px, 0) scale(1.01);
  }

  to {
    transform: translate3d(8px, -7px, 0) scale(1.05);
  }
}

@media (max-width: 700px) {
  .mv-anime__pointer-layer {
    inset: -4px;
  }

  html.is-mv-js .mv-anime.is-mv-ready .mv-anime__slide.is-mv-active .mv-anime__kenburns-layer,
  html.is-mv-js .mv-anime.is-mv-ready .mv-anime__slide.is-mv-entering .mv-anime__kenburns-layer {
    animation-duration: 6.5s;
  }

  @keyframes mv-anime-kenburns-01 {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(1.03);
    }
  }

  @keyframes mv-anime-kenburns-02 {
    from {
      transform: translate3d(4px, 0, 0) scale(1.005);
    }

    to {
      transform: translate3d(-4px, 0, 0) scale(1.03);
    }
  }

  @keyframes mv-anime-kenburns-03 {
    from {
      transform: translate3d(-3px, 3px, 0) scale(1.005);
    }

    to {
      transform: translate3d(3px, -3px, 0) scale(1.03);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-mv-js:not(.is-mv-fallback) .mv-anime:not(.is-mv-ready) .hero__label,
  html.is-mv-js:not(.is-mv-fallback) .mv-anime:not(.is-mv-ready) .mv-anime__copy-line,
  html.is-mv-js:not(.is-mv-fallback) .mv-anime:not(.is-mv-ready) .hero__fields li,
  html.is-mv-js .mv-anime.is-mv-ready .hero__label,
  html.is-mv-js .mv-anime.is-mv-ready .mv-anime__copy-line,
  html.is-mv-js .mv-anime.is-mv-ready .hero__fields li {
    animation: none;
    opacity: 1;
    transform: none;
  }

  html.is-mv-js:not(.is-mv-fallback) .mv-anime:not(.is-mv-ready) .mv-anime__slide.is-mv-active,
  html.is-mv-js .mv-anime.is-mv-ready:not(.is-mv-animation-complete) .mv-anime__slide.is-mv-active,
  html.is-mv-js .mv-anime.is-mv-ready .mv-anime__slide.is-mv-entering,
  html.is-mv-js .mv-anime.is-mv-ready.is-mv-animation-complete .mv-anime__slide .mv-anime__kenburns-layer {
    animation: none;
  }

  .mv-anime .mv-anime__slide {
    opacity: 0;
    visibility: hidden;
    clip-path: none;
  }

  .mv-anime .mv-anime__slide:first-child {
    z-index: 1;
    opacity: 1;
    visibility: visible;
  }

  .mv-anime .mv-anime__pointer-layer,
  .mv-anime .mv-anime__kenburns-layer {
    transform: none;
  }
}