/* LOCKEDIN3D Starship sequence (assets/launch.js); builds on assets/triptych.css */
.ls-piece{will-change:opacity}
.ls-piece img{object-fit:contain}
/* moment 1: a measure under each piece */
.ls-meas{position:absolute;left:0;top:0;z-index:21;display:grid;justify-items:center;gap:6px;pointer-events:none;visibility:hidden;opacity:0;white-space:nowrap;text-align:center;text-shadow:0 1px 14px rgba(0,0,0,.8)}
.ls-meas .k{font:500 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.ls-meas .v{display:flex;align-items:baseline;gap:5px}
.ls-meas .v b{font:650 clamp(24px,2.1vw,32px)/1 var(--display);font-stretch:118%;letter-spacing:-.01em;color:var(--fg);font-variant-numeric:tabular-nums}
.ls-meas .v em{font:italic 400 clamp(18px,1.5vw,23px)/1 var(--serif);color:var(--bronze-hi)}
.ls-meas .g{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--fg-2,#cfcac3)}
.ls-meas .g b{font-weight:500;font-variant-numeric:tabular-nums}
/* progress: five dots on the right; the current one names its moment; each one is a way back to its moment */
.ls-dots{position:absolute;right:var(--gr);top:50%;transform:translateY(-50%);z-index:24;display:grid;gap:4px;justify-items:end;opacity:0;visibility:hidden;transition:opacity .6s var(--ease,ease),visibility 0s .6s}
.ls-dots.on{opacity:1;visibility:visible;transition:opacity .6s var(--ease,ease)}
.ls-dots button{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:7px 0 7px 10px}
.ls-dots i{width:6px;height:6px;border-radius:50%;background:rgba(232,229,224,.28);transition:background .4s,transform .4s,box-shadow .4s}
.ls-dots .n{font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);opacity:0;transform:translateX(6px);transition:opacity .4s,transform .4s}
.ls-dots button:hover .n,.ls-dots button.on .n,.ls-dots button:focus-visible .n{opacity:1;transform:none}
.ls-dots button.on i{background:var(--bronze-hi);transform:scale(1.35);box-shadow:0 0 12px rgba(228,193,140,.55)}
.ls-dots button.on .n{color:var(--fg)}
.ls-dots button:hover i{background:var(--fg)}
.ls-dots button:focus-visible i{outline:1px solid var(--bronze);outline-offset:4px}
/* Skip: quiet, top right under the menu */
.ls-skip{all:unset;cursor:pointer;position:absolute;right:var(--gr);top:max(13vh,104px);z-index:24;display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;
  font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  background:rgba(13,11,9,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s,color .3s,box-shadow .3s}
.ls-skip.on{opacity:1;visibility:visible;transition:opacity .5s,color .3s,box-shadow .3s}
.ls-skip:hover,.ls-skip:focus-visible{color:var(--fg);box-shadow:inset 0 0 0 1px var(--bronze)}
.ls-skip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* the last caption: what can be bought, and the button */
.ls-final .ls-var{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.ls-final .ls-var-h{margin:18px 0 0;font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.ls-final .ls-var li{padding:7px 11px;border-radius:999px;font:400 12px/1 var(--sans);color:var(--fg-2,#cfcac3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);background:rgba(13,11,9,.35)}
.ls-final .btn{margin-top:20px;pointer-events:auto}
@media (max-width:760px){
  .ls-dots{top:auto;bottom:auto;top:96px;transform:none;right:12px;gap:0}
  .ls-dots .n{display:none}
  .ls-dots button{padding:5px 0 5px 8px}
  .ls-skip{top:auto;bottom:auto;top:90px;right:auto;left:16px;padding:8px 12px}
  .ls-meas .k{font-size:8px;letter-spacing:.14em}
  .ls-meas .v b{font-size:20px}.ls-meas .v em{font-size:16px}
  .ls-meas .g{font-size:10px}
  .ls-final .ls-var{margin-top:12px;gap:5px 6px}
  .ls-final .ls-var-h{margin-top:12px}
  .ls-final .ls-var li{padding:6px 9px;font-size:11px}
  .ls-final .btn{margin-top:14px;--h:44px}
}