/* Pages, the draw stave and the start button. Added Oct 2026 on top of the 2022 build. */

.page { display: none; }
.page.active { display: block; }

#about p, #how p { max-width: 46rem; }
#about .reveal, #how .reveal { margin-bottom: 3rem; }

/* The start button covers the whole page until the mic is running. */
#start {
  position: fixed;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2rem;
  font-family: "Petaluma Script";
  font-size: 1.2rem;
  color: #000;
}
body.listening #start { display: none; }

/* Until the mic is live (or if it's refused): lights off, sheet blurred, one note on top. Tapping asks. */
#nomic { display: none; }
body.nomic { background: #000; }
body.nomic > :not(#nomic):not(#start) { filter: invert(1) blur(3px); opacity: .7; pointer-events: none; }
body.nomic #start { color: transparent; }
body.nomic #nomic {
  display: block;
  position: fixed;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  padding: 0 20px;
  text-align: center;
  color: #fff;
  pointer-events: none;
}
#nomic p { max-width: 30rem; margin: 0 auto .8rem; }
#nomic p:first-child { font-size: 1.6rem; }
body.nomic > :not(#nomic):not(#start) { transition: filter .6s, opacity .6s; }

/* The face: 'Can you build' sketches it in faintly, 'How about draw' inks it. */
#dot-build span { opacity: 0; transition: opacity .3s; }
#dot-build span.sketch { opacity: .18; }
#dot-build span.ink { opacity: 1; }

/* Reveal: sentences arrive a few per note. */
.reveal .sentence { opacity: 0; transition: opacity .6s; }
.reveal .sentence.shown { opacity: 1; }

@media print {
  #start, #menu, .menu-button, .hint { display: none !important; }
}

/* Jam: the stave fills with what you whistle, then lights up as the page plays it back. */
.jam .note.playing { color: #00b7ff; }
.line .hint.hint-4 { display: block; position: absolute; width: auto; height: auto; left: 11rem; top: calc(100% + .2rem); text-align: left; white-space: nowrap; }
.hint.hint-4 span { font-size: 2.4rem; height: 10px; line-height: 1; position: absolute; transform: rotate(-150deg); left: -2.4rem; top: -.2rem; }
.hint.hint-4 p { position: relative; transform: rotate(-4deg); padding-top: 4px; font-size: .9rem; }