/* Optional variant. Loaded only by products that select vertical travel / horizontal reveal. */
.lp-opening[data-opening-direction="bottom-to-top"],
.lp-opening[data-opening-split="horizontal"] { animation-delay: var(--lp-opening-max, 1900ms); }
.lp-opening[data-opening-direction="bottom-to-top"] .lp-opening__character {
  left: 50%;
  top: 0;
  width: min(360px, 70vw, 52vh);
  transform: translate3d(-50%, calc(100vh + 32px), 0) scale(.74, 1.15);
}
.lp-opening[data-opening-direction="bottom-to-top"].is-playing .lp-opening__character {
  animation: lp-opening-up calc(var(--lp-opening-flight, 850ms) * var(--lp-opening-scale)) linear calc(.1s * var(--lp-opening-scale)) both;
}
.lp-opening[data-opening-split="horizontal"] .lp-opening__panel { top: 0; bottom: auto; height: 100%; width: calc(50% + 1px); }
.lp-opening[data-opening-split="horizontal"] .lp-opening__panel--left { left: 0; right: auto; }
.lp-opening[data-opening-split="horizontal"] .lp-opening__panel--right { left: auto; right: 0; }
.lp-opening[data-opening-split="horizontal"].is-playing .lp-opening__panel {
  animation: lp-opening-left calc(var(--lp-opening-reveal, 650ms) * var(--lp-opening-scale)) cubic-bezier(.7,0,.3,1) calc(var(--lp-opening-reveal-delay, 1000ms) * var(--lp-opening-scale)) both;
}
.lp-opening[data-opening-split="horizontal"].is-playing .lp-opening__panel--right { animation-name: lp-opening-right; }
@keyframes lp-opening-up {
  from { transform: translate3d(-50%, calc(100vh + 32px), 0) scale(.74, 1.15); }
  to { transform: translate3d(-50%, calc(-125% - 32px), 0) scale(.74, 1.15); }
}
@keyframes lp-opening-left { to { transform: translateX(-101%); } }
@keyframes lp-opening-right { to { transform: translateX(101%); } }