@property --luna-float-y{
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

[data-custom-code-scope="ls-hero-art"] .luna-editor-showcase, [data-custom-code-scope="ls-hero-art"] .luna-editor-showcase *{
  box-sizing: border-box;
}

[data-custom-code-scope="ls-hero-art"] .luna-editor-showcase{
  --luna-yellow: #ffc800;
  --luna-purple: #8457ff;

  position: relative;
  isolation: isolate;

  width: min(100%, 54rem);
  aspect-ratio: 763 / 745;

  margin: 0 auto;
  overflow: visible;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}



[data-custom-code-scope="ls-hero-art"] .luna-orbit{
  position: absolute;
  z-index: 1;

  overflow: visible;

  border-radius: 50%;
  pointer-events: none;
}



[data-custom-code-scope="ls-hero-art"] .luna-orbit-one{
  left: 9%;
  top: 2%;

  width: 76%;
  height: 91%;

  color: var(--luna-yellow);

  border: 1px solid rgba(255, 200, 0, 0.62);
  transform: rotate(12deg);
}



[data-custom-code-scope="ls-hero-art"] .luna-orbit-two{
  left: 3%;
  top: 34%;

  width: 81%;
  height: 51%;

  color: var(--luna-purple);

  border: 1px dashed rgba(143, 101, 246, 0.52);
  transform: rotate(-11deg);
}



[data-custom-code-scope="ls-hero-art"] .luna-orbit-three{
  left: 44%;
  top: 5%;

  width: 51%;
  height: 89%;

  color: #c9cfe0;

  border: 1px solid rgba(194, 201, 222, 0.32);
  transform: rotate(-6deg);
}



[data-custom-code-scope="ls-hero-art"] .luna-orbit-track{
  position: absolute;
  inset: 0;

  display: block;

  pointer-events: none;
}

[data-custom-code-scope="ls-hero-art"] .luna-orbit-spinner{
  position: absolute;
  inset: 0;

  display: block;

  pointer-events: none;
}

[data-custom-code-scope="ls-hero-art"] .luna-orbit-planet{
  position: absolute;
  left: 0;
  top: 0;

  width: 9px;
  height: 9px;
  aspect-ratio: 1 / 1;

  border-radius: 50%;

  offset-path: ellipse(50% 50% at 50% 50%);
  offset-distance: 0%;
  offset-rotate: 0deg;
  offset-anchor: center;

  animation:
    cc-ls-hero-art-luna-orbit-travel var(--luna-orbit-speed, 20s) linear infinite;

  animation-delay: var(--luna-orbit-delay, 0s);

  pointer-events: none;
  will-change: offset-distance;
}

[data-custom-code-scope="ls-hero-art"] .luna-orbit-spinner-reverse .luna-orbit-planet{
  animation-direction: reverse;
}

[data-custom-code-scope="ls-hero-art"] .luna-orbit-planet-small{
  width: 6px;
  height: 6px;
}

[data-custom-code-scope="ls-hero-art"] .luna-orbit-planet-yellow{
  background: #ffd348;

  box-shadow:
    0 0 10px rgba(255, 211, 72, 0.65),
    0 0 20px rgba(255, 211, 72, 0.25);
}

[data-custom-code-scope="ls-hero-art"] .luna-orbit-planet-purple{
  background: #8d61ff;

  box-shadow:
    0 0 10px rgba(141, 97, 255, 0.65),
    0 0 20px rgba(141, 97, 255, 0.25);
}



[data-custom-code-scope="ls-hero-art"] .luna-orbit-spinner-1a .luna-orbit-planet{
  --luna-orbit-speed: 20s;
  --luna-orbit-delay: -3s;
}

[data-custom-code-scope="ls-hero-art"] .luna-orbit-spinner-1b .luna-orbit-planet{
  --luna-orbit-speed: 30s;
  --luna-orbit-delay: -16s;
}

[data-custom-code-scope="ls-hero-art"] .luna-orbit-spinner-2a .luna-orbit-planet{
  --luna-orbit-speed: 24s;
  --luna-orbit-delay: -8s;
}

[data-custom-code-scope="ls-hero-art"] .luna-orbit-spinner-2b .luna-orbit-planet{
  --luna-orbit-speed: 34s;
  --luna-orbit-delay: -20s;
}

[data-custom-code-scope="ls-hero-art"] .luna-orbit-spinner-3a .luna-orbit-planet{
  --luna-orbit-speed: 28s;
  --luna-orbit-delay: -6s;
}

[data-custom-code-scope="ls-hero-art"] .luna-orbit-spinner-3b .luna-orbit-planet{
  --luna-orbit-speed: 38s;
  --luna-orbit-delay: -24s;
}

@keyframes cc-ls-hero-art-luna-orbit-travel{
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}



[data-custom-code-scope="ls-hero-art"] .luna-floating{
  animation:
    cc-ls-hero-art-luna-floating-motion var(--luna-duration, 7s) ease-in-out infinite;

  animation-delay: var(--luna-delay, 0s);
}

@keyframes cc-ls-hero-art-luna-floating-motion{
  0%,
  100% {
    --luna-float-y: -8px;
  }

  50% {
    --luna-float-y: 8px;
  }
}



[data-custom-code-scope="ls-hero-art"] .luna-editor-image, [data-custom-code-scope="ls-hero-art"] .luna-center-image{
  position: absolute;

  margin: 0;
  padding: 0;

  overflow: visible;

  border: 1px solid rgba(162, 171, 207, 0.15);
  border-radius: clamp(8px, 1.1vw, 18px);

  background: #1d1d1d;

  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.015);

  pointer-events: none;

  will-change:
    transform,
    translate;
}



[data-custom-code-scope="ls-hero-art"] .luna-editor-image::after, [data-custom-code-scope="ls-hero-art"] .luna-center-image::after{
  content: "";

  position: absolute;
  z-index: -1;

  inset: -6px;

  border: 2px dashed rgba(132, 87, 255, 0.78);
  border-radius: calc(clamp(8px, 1.1vw, 18px) + 5px);

  pointer-events: none;

  box-shadow: 0 0 14px rgba(132, 87, 255, 0.08);
}



[data-custom-code-scope="ls-hero-art"] .luna-editor-image{
  z-index: 6;

  transform: rotate(var(--luna-rotation, 0deg));
  translate: 0 var(--luna-float-y, 0px);
}

[data-custom-code-scope="ls-hero-art"] .luna-editor-image img{
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;

  border: 0;
  border-radius: inherit;

  pointer-events: none;
  user-select: none;
}



[data-custom-code-scope="ls-hero-art"] .luna-center-image{
  z-index: 4;

  left: 50%;
  top: calc(52% - clamp(20px, 3.5vw, 50px));

  width: 92%;
  height: calc(52.99% - 20px);
  aspect-ratio: auto;

  transform: translate(-50%, -50%);
  translate: 0 var(--luna-float-y, 0px);

  background: transparent;

  --luna-duration: 8s;
  --luna-delay: -2s;

  pointer-events: none;
  overflow: hidden;
  background: #000;

  border: 2px solid var(--luna-purple);
  outline: 2px dotted rgba(132, 87, 255, 0.95);
  outline-offset: 7px;

  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 0 26px rgba(132, 87, 255, 0.24);
}

[data-custom-code-scope="ls-hero-art"] .luna-center-image::after{
  display: none;
}

[data-custom-code-scope="ls-hero-art"] .luna-center-image iframe, [data-custom-code-scope="ls-hero-art"] .luna-video-poster, [data-custom-code-scope="ls-hero-art"] .luna-video-shield{
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  border: 0;
  border-radius: inherit;
}

[data-custom-code-scope="ls-hero-art"] .luna-center-image iframe{
  z-index: 1;

  background: #000;
  pointer-events: none;
  user-select: none;
  touch-action: none;
}

[data-custom-code-scope="ls-hero-art"] .luna-video-poster{
  z-index: 2;

  object-fit: cover;
  opacity: 1;

  pointer-events: none;
  user-select: none;

  transition: opacity 0.12s linear;
}

[data-custom-code-scope="ls-hero-art"] .luna-video-shield{
  z-index: 3;

  background: transparent;
  pointer-events: none;
}

[data-custom-code-scope="ls-hero-art"] .luna-center-image.luna-video-ready:not(.luna-video-looping) .luna-video-poster{
  opacity: 0;
}



[data-custom-code-scope="ls-hero-art"] .luna-editor-1{
  left: calc(-2% - 20px);
  top: 24%;

  width: 13%;

  --luna-rotation: -4deg;
  --luna-duration: 6.2s;
  --luna-delay: -1.4s;
}



[data-custom-code-scope="ls-hero-art"] .luna-editor-2{
  left: 12%;
  top: 6%;

  width: 17%;

  --luna-rotation: 3deg;
  --luna-duration: 7.4s;
  --luna-delay: -2.8s;
}



[data-custom-code-scope="ls-hero-art"] .luna-editor-4{
  right: calc(-5% - 20px);
  top: 47%;

  width: 16%;

  --luna-rotation: -3deg;
  --luna-duration: 7.7s;
  --luna-delay: -3.1s;
}



[data-custom-code-scope="ls-hero-art"] .luna-editor-5{
  left: calc(-5% - 20px);
  top: 47%;

  width: 16%;

  --luna-rotation: -3.5deg;
  --luna-duration: 7.1s;
  --luna-delay: -2.1s;
}



[data-custom-code-scope="ls-hero-art"] .luna-editor-7{
  left: 35%;
  top: calc(80% - 20px);

  width: 30%;

  --luna-rotation: 2deg;
  --luna-duration: 8.2s;
  --luna-delay: -2.5s;
}



[data-custom-code-scope="ls-hero-art"] .luna-editor-8{
  right: 12%;
  top: 7%;
  bottom: auto;

  width: 17%;

  --luna-rotation: 4deg;
  --luna-duration: 6.9s;
  --luna-delay: -3.4s;
}



[data-custom-code-scope="ls-hero-art"] .luna-editor-9{
  right: calc(-2% - 20px);
  top: 24%;

  width: 13%;

  --luna-rotation: -2deg;
  --luna-duration: 7.3s;
  --luna-delay: -1.8s;
}



[data-custom-code-scope="ls-hero-art"] .luna-moon{
  position: absolute;
  z-index: 7;

  left: 44%;
  top: 5%;

  width: 12%;
  aspect-ratio: 1;

  border-radius: 50%;

  background: #f2d24a;

  box-shadow:
    0 0 30px rgba(242, 210, 74, 0.15),
    inset -8px -10px 0 rgba(220, 183, 44, 0.35);

  translate: 0 var(--luna-float-y, 0px);

  --luna-duration: 8.4s;
  --luna-delay: -2.4s;
}

[data-custom-code-scope="ls-hero-art"] .luna-moon-crater{
  position: absolute;

  display: block;

  border-radius: 50%;

  background: rgba(206, 171, 45, 0.55);
}

[data-custom-code-scope="ls-hero-art"] .luna-moon-crater-a{
  top: 19%;
  left: 18%;

  width: 25%;
  height: 25%;
}

[data-custom-code-scope="ls-hero-art"] .luna-moon-crater-b{
  right: 17%;
  bottom: 18%;

  width: 32%;
  height: 32%;
}

[data-custom-code-scope="ls-hero-art"] .luna-moon-crater-c{
  top: 15%;
  left: 36%;

  width: 14%;
  height: 14%;

  background: rgba(245, 224, 120, 0.75);
}



@media (max-width: 720px){
  [data-custom-code-scope="ls-hero-art"] .luna-editor-image, [data-custom-code-scope="ls-hero-art"] .luna-center-image{
    border-radius: 7px;

    box-shadow:
      0 12px 25px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.015);
  }

  [data-custom-code-scope="ls-hero-art"] .luna-editor-image::after, [data-custom-code-scope="ls-hero-art"] .luna-center-image::after{
    inset: -4px;

    border-width: 1px;
    border-radius: 10px;
  }

  [data-custom-code-scope="ls-hero-art"] .luna-center-image{
    width: 96%;
    outline-width: 1px;
    outline-offset: 4px;
  }

  [data-custom-code-scope="ls-hero-art"] .luna-moon{
    left: 43%;
    width: 14%;
    top: 7%;
  }

  [data-custom-code-scope="ls-hero-art"] .luna-editor-1{
    left: -8px;
    top: 23%;
    width: 12%;
  }

  [data-custom-code-scope="ls-hero-art"] .luna-editor-2{
    left: 8%;
    top: 7%;
    width: 16%;
  }

  [data-custom-code-scope="ls-hero-art"] .luna-editor-4{
    right: -8px;
    top: 47%;
    width: 14%;
  }

  [data-custom-code-scope="ls-hero-art"] .luna-editor-5{
    left: -8px;
    top: 47%;
    width: 14%;
  }

  [data-custom-code-scope="ls-hero-art"] .luna-editor-7{
    left: 35%;
    top: calc(81% - 8px);
    width: 30%;
  }

  [data-custom-code-scope="ls-hero-art"] .luna-editor-8{
    right: 8%;
    top: 8%;
    width: 16%;
  }

  [data-custom-code-scope="ls-hero-art"] .luna-editor-9{
    right: -8px;
    top: 23%;
    width: 12%;
  }

  [data-custom-code-scope="ls-hero-art"] .luna-orbit-planet{
    width: 7px;
    height: 7px;
  }

  [data-custom-code-scope="ls-hero-art"] .luna-orbit-planet-small{
    width: 5px;
    height: 5px;
  }
}

@media (prefers-reduced-motion: reduce){
  [data-custom-code-scope="ls-hero-art"] .luna-floating, [data-custom-code-scope="ls-hero-art"] .luna-orbit-planet{
    animation: none;
  }
}


[data-custom-code-scope="ls-hero-art"] .luna-center-image .luna-hero-native-video{
  position: absolute;
  inset: -10px 0 auto;
  z-index: 1;
  display: block;
  width: 100%;
  height: calc(100% + 20px);
  border: 0;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}


@media (max-width: 720px){
  [data-custom-code-scope="ls-hero-art"] .luna-editor-showcase{
    width: min(100%, 54rem);
    margin-inline: auto;
    transform: scale(1.2);
    transform-origin: center;
  }
}