/* Variante de câmera: reaproveita os menus, o cursor e o relógio da animação. */
.ls-original-background .luzshade-animation {
  --ls-scene-paper: #22251c;
  --ls-scene-ink: #e9ecdf;
}
.ls-original-background .luzshade-animation .ls-art { isolation: isolate; }
.ls-original-background .luzshade-animation .ls-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--ls-backdrop-left, 0px);
  top: var(--ls-backdrop-top, 0px);
  width: var(--ls-backdrop-width, 100%);
  height: var(--ls-backdrop-height, 100%);
  background:
    radial-gradient(ellipse at 87% 12%, #eef5da18 0%, transparent 46%),
    radial-gradient(ellipse at 95% 35%, #dada1e38 0%, transparent 59%),
    radial-gradient(ellipse at 12% 90%, #73794a30 0%, transparent 55%),
    linear-gradient(135deg, #22251c 5%, #343a27 54%, #191d16 100%);
}
.ls-original-background .luzshade-animation .ls-shortcut {
  text-shadow: 0 1px 2px #000, 1px 1px #000;
}
.ls-original-background .luzshade-animation .ls-caption > span { text-shadow: 0 2px 5px #000; }
.ls-original-background .luzshade-animation .ls-caption b { border-color: #ffffff40; }
.ls-original-background .luzshade-animation .ls-click { border-color: #e2f4eb; }

.ls-camera .luzshade-animation .ls-art {
  overflow: visible;
  transform-origin: 0 0;
  animation-name: luzshade-camera-framing;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.ls-camera:not(.ls-camera-ready) .ls-art { visibility: hidden; }
.ls-camera:not(.ls-camera-ready) .ls-animated { animation-play-state: paused; }
.ls-camera .luzshade-animation .ls-modern { animation-name: luzshade-camera-modern; }
.ls-camera .luzshade-animation .ls-right-click { top: 51px; }
.ls-camera .luzshade-animation .ls-pointer { animation-name: luzshade-camera-pointer; }

/* O SVG do site já contém a sombra e a marca de atalho. */
.ls-compact-menu .luzshade-animation .ls-game-icon { box-shadow: none; }
.ls-compact-menu .luzshade-animation .ls-game-icon img { object-fit: contain; border-radius: 0; }
.ls-compact-menu .luzshade-animation .ls-shortcut-badge { display: none; }
.ls-compact-menu .luzshade-animation .ls-options {
  background-image: url("show-more-options.svg");
  background-size: 18px 18px;
  background-position: center;
}
.ls-compact-menu .luzshade-animation .ls-install { animation-name: luzshade-site-install; }
@keyframes luzshade-site-install {
  0%, 77%, 94.5%, 100% { background: transparent; color: var(--ls-ink); }
  78%, 93% { background: #dada1e; color: #000; }
}

@keyframes luzshade-camera-framing {
  0%, 14%, 100% { transform: var(--ls-frame-icon); }
  22%, 60% { transform: var(--ls-frame-menu); }
  66%, 96% { transform: var(--ls-frame-submenu); }
}
@keyframes luzshade-camera-modern {
  0%, 21% { opacity: 0; visibility: hidden; transform: translateY(-4px); }
  43%, 100% { opacity: 0; visibility: hidden; transform: translateY(0); }
  22.2%, 41.8% { opacity: 1; visibility: visible; transform: translateY(0); }
}
@keyframes luzshade-camera-pointer {
  0%, 5%, 100% { transform: translate(var(--ls-pointer-start-x, 160px), var(--ls-pointer-start-y, 115px)); opacity: 1; }
  12%, 23% { transform: translate(83px, 67px); }
  34%, 45% { transform: translate(var(--ls-more-x), var(--ls-more-y)); }
  59%, 69% { transform: translate(var(--ls-luz-x), var(--ls-luz-y)); }
  74% { transform: translate(var(--ls-bridge-x), var(--ls-bridge-y)); }
  79%, 91% { transform: translate(var(--ls-install-x), var(--ls-install-y)); opacity: 1; }
  94% { transform: translate(var(--ls-install-x), var(--ls-install-y)); opacity: 0; }
  94.1%, 97% { transform: translate(var(--ls-pointer-start-x, 160px), var(--ls-pointer-start-y, 115px)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-camera .luzshade-animation .ls-art {
    animation: none;
    transform: var(--ls-frame-submenu);
  }
  .ls-camera .luzshade-animation .ls-modern,
  .ls-camera .luzshade-animation .ls-pointer { animation: none; }
}