/* ArtPlus v23: editable Lottie showreel layers and native-scroll playback. */

body.home .ap-showreel--lottie {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

body.home .ap-showreel--lottie .ap-showreel-heading,
body.home .ap-showreel--lottie .ap-showreel-player-shell,
body.home .ap-showreel--lottie .apb-o-factor {
  position: relative;
  z-index: 3;
}

body.home .ap-showreel-lottie {
  pointer-events: none;
  opacity: var(--ap-lottie-opacity, 1);
}

body.home .ap-showreel-lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

body.home .ap-showreel-lottie--player {
  position: absolute;
  inset: 0;
  z-index: 1;
}

body.home .ap-showreel-lottie--section {
  position: absolute;
  inset: 0;
  z-index: 1;
}

body.home .ap-showreel-lottie--viewport {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100svh;
  visibility: hidden;
  opacity: 0;
  transition: opacity .28s ease, visibility 0s linear .28s;
}

body.home .ap-showreel--lottie-viewport.is-lottie-active .ap-showreel-lottie--viewport {
  visibility: visible;
  opacity: var(--ap-lottie-opacity, 1);
  transition-delay: 0s;
}

body.home .ap-showreel--lottie-section .ap-showreel-player,
body.home .ap-showreel--lottie-viewport .ap-showreel-player {
  background-color: rgba(25, 33, 32, .48);
  box-shadow: 0 36px 90px rgba(0, 0, 0, .2);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

body.home .ap-showreel--lottie-section .ap-showreel-shade,
body.home .ap-showreel--lottie-viewport .ap-showreel-shade {
  background: linear-gradient(180deg, rgba(5, 8, 8, .05), rgba(5, 8, 8, .42));
}

body.home .ap-showreel-lottie.is-lottie-error::after {
  content: "Lottie-animaatiota ei voitu ladata";
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.72);
  background: rgba(5,8,8,.72);
  font: 700 10px/1.2 "Space Mono", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  body.home .ap-showreel-lottie--viewport {
    transition: none;
  }
}