/* Hero — "Paper → Chart" (built by motion/hero.js). The printed sheet that
   develops into the app's chart, the scan line that develops it, and the
   chords and Live badge that land after. Only transform / opacity / clip-path
   move; nothing here exists under prefers-reduced-motion (hero.js adds none
   of these classes then). */

.chart-cols.hp-host { position: relative; }

/* The sheet covers the chart area and a little more, so no edge of the real
   chart shows around a crooked page. */
.hp-layer { position: absolute; inset: -14px -16px -10px; z-index: 2; pointer-events: none; }
.hp-paper {
  --hp-tilt: -1.4deg;
  position: absolute; inset: 0; overflow: hidden; border-radius: 3px;
  transform: rotate(var(--hp-tilt));
  /* A photographed print: off-white, lit a little unevenly, one fold. */
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(16, 24, 40, .045) 50%, transparent 50.3%),
    radial-gradient(120% 90% at 22% 12%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #FBFBF8, #EFEEE9);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .08), 0 14px 28px -12px rgba(16, 24, 40, .28);
  filter: grayscale(1);
}
[dir="rtl"] .hp-paper { --hp-tilt: 1.4deg; }
.hp-sheet { position: absolute; inset: 14px 16px 10px; display: grid; gap: 24px; }
@media (min-width: 768px) { .hp-sheet { grid-template-columns: 1fr 1fr; gap: 40px; } }
.hp-sheet .col2 { display: none; }
@media (min-width: 768px) { .hp-sheet .col2 { display: block; } }
/* Printed in a typewriter face, the way most chord sheets still are. */
.hp-sheet .chart { color: #2B2B2B; font-family: 'Courier New', Courier, ui-monospace, monospace; font-size: 15px; }
.hp-sheet .chart .ln { background: none !important; box-shadow: none !important; }
.hp-sheet .ch::before { color: #111; font-family: inherit; font-weight: 700; font-size: 14px; }
.hp-sheet .sec-tag { color: #555; font-family: 'Courier New', Courier, monospace; text-transform: uppercase; letter-spacing: .06em; }

/* The scan line: the app's beam — a lit hairline with a soft wake above it. */
.hp-beam {
  position: absolute; inset-inline: -2%; top: 0; height: 2px; z-index: 3; opacity: 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb, 21, 112, 239), 0), rgb(var(--accent-rgb, 21, 112, 239)) 18%, rgb(var(--accent-rgb, 21, 112, 239)) 82%, rgba(var(--accent-rgb, 21, 112, 239), 0));
}
.hp-beam::before {
  content: ""; position: absolute; inset-inline: 6%; bottom: 2px; height: 42px;
  background: linear-gradient(to bottom, rgba(var(--accent-rgb, 21, 112, 239), 0), rgba(var(--accent-rgb, 21, 112, 239), .10));
}

/* Chords wait under the sheet, then land in reading order. */
.chart-cols .chart .ch::before {
  transition: color 300ms ease, opacity 260ms cubic-bezier(.23, 1, .32, 1) var(--hp-d, 0ms), translate 420ms var(--spring-lively, cubic-bezier(.34, 1.3, .64, 1)) var(--hp-d, 0ms);
}
.chart-cols.hp-wait > :not(.hp-layer) .ch::before { opacity: 0; translate: 0 5px; }

/* The Live badge settles last. */
.hp-badge { opacity: 0; scale: .9; }
.hp-badge.hp-on { opacity: 1; scale: 1; transition: opacity 200ms ease, scale 450ms var(--spring-lively, cubic-bezier(.34, 1.3, .64, 1)); }