/* Chord Lens — hero and the live chord-strip demo. */

.hero {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -30% 0 auto 50%;
  translate: -50% 0;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(224, 20, 50, 0.16), transparent 62%);
  pointer-events: none;
  z-index: -1;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

/* Wide, the copy holds a measured column and the video stage takes the rest
   of the shell, so the hero sits centred like every section under it. */
@media (min-width: 1000px) {
  .hero::before { inset-inline-start: 77%; }
  .hero__grid { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); column-gap: 2.25rem; }
}

/* The product, and where it runs, where the eyebrow used to be. */
.hero__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero__mark {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--accent-hot);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__for {
  margin-inline-start: 0.15rem;
  padding-inline-start: 0.75rem;
  border-inline-start: 1px solid var(--line-strong);
  color: var(--text-dim);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}

.hero h1 { margin-top: 1.4rem; font-size: clamp(2.2rem, 3.6vw, 2.6rem); }

/* What it does, as a row of small tags rather than a paragraph to read. */
.hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.hero__features li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-700);
  font-size: 0.84rem;
  font-weight: 600;
}

.hero__features svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--accent-hot);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero h1 em {
  font-style: normal;
  white-space: nowrap;
  background: linear-gradient(100deg, var(--accent-hot), #ff7a5c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lede { margin-top: 1.25rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.4rem;
  margin-top: 2.25rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.hero__proof li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
}

/* A quiet dot between the facts, and the one that matters most in white. */
.hero__proof li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-inline-end: 0.5rem;
  border-radius: 50%;
  background: var(--text-faint);
  flex: none;
}

.hero__proof b { color: var(--text); font-weight: 600; }

.hero__proof ul, .hero__proof { padding: 0; margin-block: 2.25rem 0; }

/* ---- The demo: the player overlay, over a video ----------------------- */

/* Stand-in for the video the panel floats over: a paused concert frame in a
   YouTube player, lit warm from the left, washed in the brand's crimson from
   below, rimmed cool on the right, with a few stage lights out of focus. A
   16:9 player, or taller when the panel needs the room: flex rather than
   grid, and no overflow clip, so the content's height can win over the
   ratio. The panel sits dead
   centre, with room above and below to clear the player's controls. */
.hero__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  padding-block: 3.75rem;
  padding-inline: clamp(0.75rem, 2vw, 1rem);
  border-radius: 12px;
  background:
    linear-gradient(0deg, rgb(0 0 0 / 0.7), transparent 22%),
    radial-gradient(130% 100% at 50% 45%, transparent 50%, rgb(4 5 8 / 0.7)),
    radial-gradient(18px 18px at 14% 16%, rgb(255 214 160 / 0.55), transparent),
    radial-gradient(26px 26px at 27% 9%, rgb(255 190 130 / 0.35), transparent),
    radial-gradient(14px 14px at 71% 12%, rgb(255 225 190 / 0.45), transparent),
    radial-gradient(34px 34px at 86% 24%, rgb(150 180 255 / 0.28), transparent),
    radial-gradient(20px 20px at 58% 6%, rgb(255 120 140 / 0.35), transparent),
    radial-gradient(60% 75% at 18% 12%, rgb(255 150 90 / 0.3), transparent 70%),
    radial-gradient(45% 70% at 96% 30%, rgb(90 120 255 / 0.22), transparent 70%),
    radial-gradient(80% 70% at 60% 100%, rgb(224 20 50 / 0.3), transparent 70%),
    linear-gradient(160deg, #1d1418, #0e0c12 55%, #07080c);
  box-shadow: 0 40px 80px -46px rgb(0 0 0 / 0.9);
}

/* The panel takes the width it is given, up to its own maximum. */
.hero__stage > .demo { inline-size: 100%; }

@media (min-width: 1000px) {
  .hero__stage { padding-inline: 1rem; }
}

/* The hero's copy of the panel (panel.css) only needs a width to stop at. */
.demo { max-inline-size: 52.5rem; }

.demo__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  padding: 0.62rem 0.8rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.75rem;
  background: var(--ink-800);
}

.demo__stat { color: var(--text-dim); white-space: nowrap; }
.demo__stat b { color: var(--text); font-weight: 600; }

.demo__chips {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
  flex: none;
}

.demo__chip {
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.72rem;
  white-space: nowrap;
}

.demo__chip--on {
  border-color: var(--accent-line);
  color: #ffc9d0;
  background: var(--accent-soft);
}

/* ---- Key and tempo: controls, not readouts ----------------------------- */

/* The header does not just report the song's key and tempo, it moves them. So
   each one is drawn as what it is: a minus, the value you are hearing, a plus,
   and — once you have moved — a badge saying how far from the recording you
   are. The value is the destination, never a "+2" to work out. */
.demo__stat--set {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.set {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.1rem 0.12rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink-600);
}

.set__step {
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 4px;
  background: var(--ink-700);
  color: var(--text-dim);
  line-height: 1;
}

.set__val {
  /* Wide enough for a three-digit tempo, so the row does not twitch as the
     value changes. Anything wider is just air around a letter. */
  min-width: 2.1em;
  padding-inline: 0.1em;
  text-align: center;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.set__badge {
  padding: 0.06em 0.45em;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: #ffc9d0;
  font-size: 0.88em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Capo, bars-per-row and the section jump are drop-downs in the extension,
   so they carry the caret that says so. */
.demo__chip--sel {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  background: var(--ink-700);
}

@container (max-width: 470px) {
  .demo__chip--extra { display: none; }
}

.demo__strip {
  position: relative;
  padding: 1.1rem 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Default is the no-script layout: a centred row of cards that reads correctly
   on its own. The script sets data-live and takes over positioning. */
.demo__track {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.demo__track[data-live="true"] {
  justify-content: flex-start;
  padding-inline: 50%;
  width: max-content;
  transition: transform 0.5s var(--ease);
  will-change: transform;
}

.card {
  flex: none;
  width: 100px;
  padding: 0.7rem 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-600);
  text-align: center;
  transition: border-color 0.3s, background 0.3s, scale 0.35s var(--ease);
  scale: 0.94;
  /* The tiers are carried on the ink, mixed toward the card's own ground so
     the name stays opaque. Fading the whole card turns muddy over a blur. */
  --tier: 48%;
  --card-ink: var(--text);
  --card-ground: var(--ink-600);
}

.card__name {
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: color-mix(in srgb, var(--card-ink) var(--tier), var(--card-ground));
  transition: color 0.3s;
}

.card__name sup {
  font-size: 0.5em;
  font-weight: 700;
  margin-left: 1px;
  vertical-align: super;
}

.card__meta {
  margin-top: 0.4rem;
  font-size: 0.66rem;
  color: var(--text-faint);
  white-space: nowrap;
}

.card__rail {
  margin-top: 0.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.card__fill {
  height: 100%;
  width: 0;
  background: var(--accent-hot);
  transform-origin: left;
}

.card[data-state="active"] {
  --tier: 100%;
  scale: 1;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--ink-600));
  box-shadow: 0 0 0 1px var(--accent-line), 0 10px 30px -14px var(--accent-hot);
}

.card[data-state="next"] { --tier: 78%; }

/* ---- The lyric line under the strip ------------------------------------ */

/* The overlay carries the line being sung and the one after it. The block
   holds its height whether or not a song has words, so the strip above it
   never jumps when the lyrics arrive mid-song. */
.demo__lyric {
  padding: 0.1rem 0.9rem 1rem;
  text-align: center;
  min-height: 4.2rem;
}

.demo__lyric-now {
  font-size: clamp(0.95rem, 2.6cqi, 1.12rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.demo__lyric-next {
  margin-top: 0.3rem;
  font-size: clamp(0.8rem, 2.1cqi, 0.92rem);
  color: var(--text-faint);
  text-wrap: balance;
}

/* ---- Trust strip ------------------------------------------------------ */

.trust {
  border-block: 1px solid var(--line-soft);
  background: var(--ink-900);
  padding: 1.5rem 0;
}

.trust__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: center;
  align-items: center;
  font-size: 0.86rem;
  color: var(--text-dim);
  text-align: center;
}

.trust__row b { color: var(--text); font-weight: 600; }