/**
 * Motion for the drawn install scenes (prototype, docs only).
 * Ships next to `install-scenes.js`, so the scenes can be embedded into the site, into a
 * PWA banner or into the Telegram mini-app without dragging the modal stylesheet along.
 *
 * Each step plays its action once. Only the target echo repeats.
 */

.lf-scene {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 220;
  /* Whole-scene fade: switching steps swaps the drawing without a visible blank frame. */
  animation: lfFade 0.24s cubic-bezier(0.22, 0.78, 0.2, 1) both;
}

.lf-scene * {
  transform-box: fill-box;
  transform-origin: center;
}

.lf-scene .lf-hit {
  animation: lfEcho 1.9s cubic-bezier(0.22, 0.78, 0.2, 1) 0.55s infinite;
}

/* SVG text defaults to a serif face, which reads as a foreign font inside the drawing. */
.lf-scene text {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
  user-select: none;
}

/*
 * Ownership mark: readable only if someone zooms into a stolen frame, invisible in normal
 * reading. Never animated.
 */
.lf-scene .lf-mark {
  /* Light and hinted: bold strokes at this size smear into a grey smudge. */
  font-weight: 400;
  text-rendering: geometricPrecision;
  animation: none;
}

.lf-scene .lf-a-base {
  animation: lfFade 0.4s cubic-bezier(0.22, 0.78, 0.2, 1) both;
}

.lf-scene .lf-a-dim {
  animation: lfDim 0.5s cubic-bezier(0.22, 0.78, 0.2, 1) 0.25s both;
}

.lf-scene .lf-a-sheet {
  transform-origin: bottom center;
  animation: lfSheet 0.62s cubic-bezier(0.22, 0.78, 0.2, 1) 0.3s both;
}

.lf-scene .lf-a-panel {
  transform-origin: top right;
  animation: lfPanel 0.5s cubic-bezier(0.22, 0.78, 0.2, 1) 0.35s both;
}

.lf-scene .lf-a-dialog {
  animation: lfDialog 0.5s cubic-bezier(0.22, 0.78, 0.2, 1) 0.35s both;
}

.lf-scene .lf-a-row {
  animation: lfRow 0.42s cubic-bezier(0.22, 0.78, 0.2, 1) 0.6s both;
}

.lf-scene .lf-a-pop {
  animation: lfPop 0.54s cubic-bezier(0.34, 1.32, 0.5, 1) 0.42s both;
}

.lf-scene .lf-a-pointer {
  animation: lfPointer 0.7s cubic-bezier(0.22, 0.78, 0.2, 1) 0.22s both;
}

.lf-scene .lf-a-press {
  animation: lfPress 0.46s cubic-bezier(0.22, 0.78, 0.2, 1) 0.82s both;
}

.lf-scene .lf-a-takeover {
  animation: lfTakeover 0.6s cubic-bezier(0.22, 0.78, 0.2, 1) 0.3s both;
}

.lf-scene .lf-a-target {
  animation: lfFade 0.36s cubic-bezier(0.22, 0.78, 0.2, 1) 0.62s both;
}

.lf-scene .lf-a-stagger > * {
  animation: lfRise 0.45s cubic-bezier(0.22, 0.78, 0.2, 1) both;
}

.lf-scene .lf-a-stagger > *:nth-child(1) {
  animation-delay: 0.5s;
}
.lf-scene .lf-a-stagger > *:nth-child(2) {
  animation-delay: 0.58s;
}
.lf-scene .lf-a-stagger > *:nth-child(3) {
  animation-delay: 0.66s;
}
.lf-scene .lf-a-stagger > *:nth-child(4) {
  animation-delay: 0.74s;
}

@keyframes lfFade {
  from {
    opacity: 0;
  }
}

@keyframes lfDim {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.35;
  }
}

@keyframes lfSheet {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

@keyframes lfPanel {
  from {
    opacity: 0;
    transform: scale(0.93);
  }
}

@keyframes lfDialog {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.96);
  }
}

@keyframes lfRow {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
}

@keyframes lfPop {
  from {
    opacity: 0;
    transform: scale(0.68);
  }
}

@keyframes lfRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes lfPointer {
  from {
    opacity: 0;
    transform: translate(14px, 17px);
  }
}

@keyframes lfPress {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.9);
  }
}

@keyframes lfTakeover {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

@keyframes lfEcho {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.85);
  }
}

/* Reduced motion: show every step finished rather than animating it into place. */
@media (prefers-reduced-motion: reduce) {
  .lf-scene,
  .lf-scene * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .lf-scene .lf-a-dim {
    opacity: 0.35;
  }
}