/* steps — the three "How it works" illustrations (built by motion/steps.js).
   1 a photographed sheet is framed, shot, deskewed and scanned clean;
   2 chords drop over the right words, sections get their tags, one chord is
     corrected with the picker; 3 the key steps G → A → Bb and a capo turns
     the shapes back into G.
   Only transform / opacity move (clip-path for the scan reveal, a 2px blur to
   bridge letter swaps). Everything is scoped under .stp. */

/* Reserve the panel before the script runs, so inserting it moves nothing.
   `scripting: enabled` keeps a no-JS page free of an empty box. */
@media (scripting: enabled) {
  .hero + .section .features > .feature::before {
    content: ""; display: block; align-self: stretch; height: 164px; margin-bottom: 20px;
    border-radius: 12px; background: var(--sunken, #EEF0F3);
  }
  .hero + .section .features > .feature.stp-host::before { display: none; }
}

.stp {
  --stp-d: 1;                                     /* inline direction: 1 ltr, -1 rtl */
  --stp-ease: cubic-bezier(0.23, 1, 0.32, 1);     /* entrances */
  --stp-move: cubic-bezier(0.77, 0, 0.175, 1);    /* on-screen movement */
  --stp-scan: cubic-bezier(0.45, 0, 0.25, 1);     /* the scan line's sweep */
  position: relative; align-self: stretch; height: 164px; margin-bottom: 20px;
  /* Lit Paper: a sunken well 8px inside its card (card 20 = 12 + 8). */
  border-radius: 12px; background: var(--sunken, #EEF0F3); box-shadow: inset 0 1px 2px rgba(16, 24, 40, .05);
  overflow: hidden; isolation: isolate; text-align: start; line-height: 1;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
[dir="rtl"] .stp { --stp-d: -1; }
.stp b, .stp i { font-style: normal; }

/* The scene is a fixed 272×140 stage in the middle of the panel; narrow cards
   (288px at the 640px breakpoint) still fit it. The stage fades between loops. */
.stp-stage {
  position: absolute; top: 50%; left: 50%; width: 272px; height: 140px; margin: -70px 0 0 -136px;
  transition: opacity 320ms var(--stp-ease);
}
.stp-stage.is-out { opacity: 0; transition-duration: 200ms; transition-timing-function: ease; }
.stp-scene { position: absolute; inset: 0; }
.stp-instant *, .stp-instant *::before, .stp-instant *::after { transition: none !important; animation: none !important; }

@keyframes stp-press { 0% { transform: scale(1); } 40% { transform: scale(0.9); } 100% { transform: scale(1); } }

/* ───────── shared chart card (scenes 2 and 3) ───────── */
.stp-card {
  position: absolute; inset: 0; padding: 14px; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px var(--gray-200), 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);
}
.stp-sec { display: flex; gap: 8px; }
.stp-sec + .stp-sec { margin-top: 8px; }
.stp-rail { flex: none; width: 22px; }
.stp-tag {
  display: inline-block; padding: 3px 4px; border-radius: 4px;
  background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-200);
  color: var(--brand-700); font: 700 9px/1 var(--font); letter-spacing: .02em;
}
.stp-lines { position: relative; flex: 1; min-width: 0; }
.stp-row { position: relative; height: 26px; }
.stp-w {
  position: absolute; inset-inline-start: var(--x); width: var(--w); top: 16px; height: 6px;
  border-radius: 3px; background: var(--gray-200);
}
.stp-ch {
  position: absolute; inset-inline-start: var(--x); top: 1px;
  font: 700 11px/12px var(--font); color: var(--brand-600); white-space: nowrap;
}
.stp-acc { margin-inline-start: -.04em; }
.stp-acc.is-flat { margin-inline-start: -.2em; -webkit-text-stroke: .35px currentColor; }

/* ───────── 1 · Snap or upload ───────── */
.s1-sheet {
  position: absolute; top: 4px; left: 78px; width: 116px; height: 132px; border-radius: 3px;
  /* A phone photo of paper: seen from an angle, turned, a little small. */
  transform: translate(calc(-3px * var(--stp-d)), 3px) perspective(420px) rotateX(16deg) rotate(calc(-7deg * var(--stp-d))) scale(0.9);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 8px 14px -8px rgba(16, 24, 40, .22);
  transition: transform 760ms var(--stp-move);
}
/* The digitised page sits a touch higher: a sharper, lifted shadow fades in. */
.s1-sheet::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  box-shadow: 0 0 0 1px var(--gray-200), 0 12px 16px -6px rgba(16, 24, 40, .12);
  transition: opacity 500ms ease;
}
.s1-page { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #FBFBF9; }
.s1-rough, .s1-clean { position: absolute; inset: 0; }
.s1-rough svg { position: absolute; inset: 0; width: 116px; height: 132px; max-width: none; }
.s1-rough path { fill: none; stroke: var(--gray-500); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.s1-rc, .s1-rtag {
  position: absolute; inset-inline-start: var(--x); top: var(--y); transform: rotate(var(--r, 0deg));
  font: 400 11px/1 "Bradley Hand", "Segoe Print", "Marker Felt", "Comic Sans MS", cursive;
  color: var(--gray-700); white-space: nowrap;
}
/* The scan moves like a scanner head: gets going quickly, even speed, soft stop. */
.s1-clean { background: #fff; clip-path: inset(0 100% 0 0); transition: clip-path 1250ms var(--stp-scan); }
[dir="rtl"] .s1-clean { clip-path: inset(0 0 0 100%); }
.s1-w { position: absolute; inset-inline-start: var(--x); width: var(--w); top: var(--y); height: 5px; border-radius: 3px; background: var(--gray-300); }
.s1-cc {
  position: absolute; inset-inline-start: var(--x); top: var(--y);
  font: 700 9.5px/11px var(--font); color: var(--brand-600); white-space: nowrap;
}
.s1-ctag {
  position: absolute; inset-inline-start: 8px; top: 6px; padding: 2px 3px; border-radius: 3px;
  background: var(--brand-50); color: var(--brand-700); font: 700 7.5px/1 var(--font);
}
/* Photo light: a soft falloff across the paper, gone once it is scanned. */
.s1-shade {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0) 35%, rgba(16, 24, 40, .09) 100%);
  transition: opacity 500ms ease;
}
/* Scan head: a bright line at the leading edge with a glow trailing it. */
.s1-sweep {
  position: absolute; inset: 0; opacity: 0; transform: translateX(calc(-100% * var(--stp-d)));
  transition: transform 1250ms var(--stp-scan), opacity 200ms ease;
}
.s1-sweep::before, .s1-sweep::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; }
.s1-sweep::before { width: 30px; background: linear-gradient(to right, rgba(46, 144, 250, 0), rgba(46, 144, 250, .22)); }
[dir="rtl"] .s1-sweep::before { background: linear-gradient(to left, rgba(46, 144, 250, 0), rgba(46, 144, 250, .22)); }
.s1-sweep::after { width: 2px; background: var(--brand-500); box-shadow: 0 0 6px 1px rgba(46, 144, 250, .55); }
.s1-ok {
  /* Above the sheet's ::after (the lifted page's ring and shadow), which is
     later in paint order and otherwise draws its edge lines across the badge. */
  position: absolute; z-index: 1; top: -8px; inset-inline-end: -8px; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--success-500); color: #fff;
  box-shadow: 0 0 0 3px var(--gray-100); opacity: 0; transform: scale(0.9);
  transition: opacity 220ms ease, transform 420ms var(--stp-ease);
}
.s1-ok svg { width: 12px; height: 12px; }

/* Camera: corner brackets that settle onto the page, a shutter, an upload tile. */
.s1-vf { position: absolute; top: -6px; left: 60px; width: 152px; height: 152px; opacity: 0; transform: scale(1.08); transition: opacity 260ms ease, transform 560ms var(--stp-ease); }
.s1-vf i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--brand-600); }
.s1-vf i:nth-child(1) { top: 0; left: 0; border-width: 2.5px 0 0 2.5px; border-top-left-radius: 5px; }
.s1-vf i:nth-child(2) { top: 0; right: 0; border-width: 2.5px 2.5px 0 0; border-top-right-radius: 5px; }
.s1-vf i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2.5px 2.5px; border-bottom-left-radius: 5px; }
.s1-vf i:nth-child(4) { bottom: 0; right: 0; border-width: 0 2.5px 2.5px 0; border-bottom-right-radius: 5px; }
.s1-shutter, .s1-tile {
  position: absolute; top: 54px; opacity: 0;
  transition: opacity 260ms ease, transform 480ms var(--stp-ease);
}
.s1-shutter {
  inset-inline-end: 8px; width: 32px; height: 32px; border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 2px var(--gray-300), var(--shadow-xs);
  transform: translateX(calc(8px * var(--stp-d)));
}
.s1-shutter::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--brand-600); }
.s1-tile {
  inset-inline-start: 10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  background: #fff; color: var(--gray-500); box-shadow: inset 0 0 0 1px var(--gray-200), var(--shadow-xs);
  transform: translateX(calc(-8px * var(--stp-d)));
}
.s1-tile svg { width: 16px; height: 16px; }
.s1-flash { position: absolute; inset: -40px -400px; background: #fff; opacity: 0; }

.stp-s1.is-cam .s1-vf { opacity: 1; transform: none; }
.stp-s1.is-cam .s1-shutter, .stp-s1.is-cam .s1-tile { opacity: 1; transform: none; }
.stp-s1.is-cam .s1-tile { transition-delay: 60ms; }
.stp-s1.is-shoot .s1-shutter::before { animation: stp-press 280ms var(--stp-ease); }
.stp-s1.is-shoot .s1-flash { animation: s1-flash 560ms ease-out both; }
@keyframes s1-flash { 0% { opacity: 0; } 12% { opacity: .92; } 100% { opacity: 0; } }
.stp-s1.is-shot .s1-vf { opacity: 0; transform: scale(0.97); transition-duration: 220ms; }
.stp-s1.is-shot .s1-shutter, .stp-s1.is-shot .s1-tile { opacity: 0; transition-duration: 220ms; transition-delay: 0ms; }
.stp-s1.is-straight .s1-sheet { transform: none; }
.stp-s1.is-scan .s1-clean { clip-path: inset(0); }
.stp-s1.is-scan .s1-sweep { opacity: 1; transform: none; }
.stp-s1.is-crisp .s1-sweep { opacity: 0; transition-duration: 1250ms, 260ms; }
.stp-s1.is-crisp .s1-shade { opacity: 0; }
.stp-s1.is-crisp .s1-sheet::after { opacity: 1; }
.stp-s1.is-done .s1-ok { opacity: 1; transform: none; }

/* ───────── 2 · Check and adjust ───────── */
.stp-s2 .stp-ch {
  opacity: 0; transform: translateY(-7px) scale(0.96);
  transition: opacity 260ms ease, transform 480ms var(--stp-ease);
  transition-delay: calc(var(--i) * 120ms);
}
.stp-s2.is-chords .stp-ch { opacity: 1; transform: none; }
.stp-s2 .stp-tag {
  opacity: 0; transform: translateX(calc(-8px * var(--stp-d)));
  transition: opacity 240ms ease, transform 440ms var(--stp-ease);
  transition-delay: calc(var(--i) * 80ms);
}
.stp-s2.is-tags .stp-tag { opacity: 1; transform: none; }

/* The chord being corrected: old spelling, new spelling, ring, picker, check. */
.s2-a { display: inline-block; transition: opacity 160ms ease, filter 160ms ease, transform 220ms ease; }
.s2-b {
  position: absolute; top: 0; inset-inline-start: 0; opacity: 0; transform: translateY(3px); filter: blur(2px);
  transition: opacity 220ms ease, transform 380ms var(--stp-ease), filter 220ms ease;
}
.s2-ring {
  position: absolute; inset: -3px -4px; border-radius: 5px;
  box-shadow: 0 0 0 1.5px var(--brand-500), 0 0 0 4.5px var(--brand-100);
  opacity: 0; transform: scale(0.9); transition: opacity 200ms ease, transform 380ms var(--stp-ease);
}
.s2-pop {
  position: absolute; top: 17px; inset-inline-start: -9px; z-index: 3; display: flex; gap: 3px; padding: 4px;
  border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--gray-200), var(--shadow-lg);
  opacity: 0; transform: translateY(-2px) scale(0.96); transform-origin: 14px 0;
  transition: opacity 160ms ease, transform 280ms var(--stp-ease);
}
[dir="rtl"] .s2-pop { transform-origin: calc(100% - 14px) 0; }
.s2-chip {
  position: relative; isolation: isolate; padding: 5px 7px; border-radius: 5px;
  font: 700 10px/1 var(--font); color: var(--gray-700);
}
.s2-chip.is-cur { background: var(--gray-100); }
.s2-chip.is-new { color: var(--brand-700); }
.s2-chip.is-new::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-300);
  opacity: 0; transition: opacity 160ms ease;
}
.s2-ok {
  position: absolute; top: -1px; inset-inline-start: calc(100% + 4px); display: grid; place-items: center;
  width: 13px; height: 13px; border-radius: 50%; background: var(--success-500); color: #fff;
  opacity: 0; transform: scale(0.9); transition: opacity 200ms ease, transform 380ms var(--stp-ease);
}
.s2-ok svg { width: 9px; height: 9px; }

.stp-s2.is-select .s2-ring { opacity: 1; transform: none; }
.stp-s2.is-pop .s2-pop { opacity: 1; transform: none; }
.stp-s2.is-pick .s2-chip.is-new::before { opacity: 1; }
.stp-s2.is-pick .s2-chip.is-new { animation: stp-press 260ms var(--stp-ease); }
.stp-s2.is-fixed .s2-pop { opacity: 0; transform: scale(0.97); transition-duration: 140ms; }
.stp-s2.is-fixed .s2-ring { opacity: 0; transition-duration: 220ms; }
.stp-s2.is-fixed .s2-a { opacity: 0; filter: blur(2px); transform: translateY(-3px); }
.stp-s2.is-fixed .s2-b { opacity: 1; filter: none; transform: none; transition-delay: 40ms; }
.stp-s2.is-fixed .s2-ok { opacity: 1; transform: none; transition-delay: 260ms; }

/* ───────── 3 · Play it ───────── */
.s3-bar { display: flex; align-items: center; justify-content: space-between; height: 24px; margin-bottom: 10px; }
.s3-step {
  display: inline-flex; align-items: center; height: 24px; border-radius: 7px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--gray-300), var(--shadow-xs);
}
.s3-btn { position: relative; isolation: isolate; display: grid; place-items: center; width: 24px; height: 24px; color: var(--gray-500); }
.s3-btn::before {
  content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 5px;
  background: var(--brand-50); opacity: 0; transition: opacity 220ms ease;
}
.s3-btn.is-on::before { opacity: 1; }
.s3-btn svg { width: 12px; height: 12px; }
.s3-kw {
  display: grid; place-items: center; min-width: 34px; height: 24px;
  box-shadow: inset 1px 0 0 var(--gray-200), inset -1px 0 0 var(--gray-200);
}
.s3-key { display: inline-block; font: 700 12px/1 var(--font); color: var(--gray-900); white-space: nowrap; }
.s3-capo {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding-inline: 8px 9px; border-radius: 999px;
  background: var(--gray-50); box-shadow: inset 0 0 0 1px var(--gray-200);
}
.s3-capo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-200);
  opacity: 0; transition: opacity 280ms ease;
}
.s3-neck { display: block; width: 20px; height: 14px; overflow: visible; }
.s3-neck .nut { fill: var(--gray-500); }
.s3-neck .str { stroke: var(--gray-400); stroke-width: 1; }
.s3-neck .fret { stroke: var(--gray-300); stroke-width: 1; }
.s3-neck .cap { fill: var(--brand-600); opacity: 0; transform: translateX(-5px); transition: opacity 220ms ease, transform 460ms var(--stp-ease); }
.s3-n { display: inline-block; min-width: 7px; text-align: center; font: 700 11px/1 var(--font); color: var(--gray-700); }
.stp-s3.is-capo .s3-capo::before { opacity: 1; }
.stp-s3.is-capo .s3-capo { animation: stp-press 280ms var(--stp-ease); }
.stp-s3.is-capo .s3-neck .cap { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .stp *, .stp *::before, .stp *::after, .stp-stage { transition: none !important; animation: none !important; }
}