/* Musican home: "scroll to play". The page is played like a song: the logo plays itself, four verses
   on a phone that stays in place, the twelve lessons on twelve frets, and a red circle to close. */
@font-face { font-family: Heebo; src: url("/fonts/heebo.ttf"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Display; src: url("/fonts/secular_one.ttf"); font-display: swap; }
:root {
  --black: #000; --night: #0A0A0A; --white: #F8F8F8; --paper: #FAFAF8; --ink: #0B0B0B; --ink2: #6B6B6B; --grey: #9A9A9A; --line: #E7E7E4;
  --red: #ED3D33; --yellow: #FDBA1C; --green: #4EB855; --green-text: #2C7D33;
  --ease: cubic-bezier(.22, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--white); font-family: Heebo, system-ui, sans-serif; font-weight: 300; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 4px; }
.display { font-family: Display, Heebo, sans-serif; font-weight: 400; line-height: 1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.display .c { display: block; }
.red { color: var(--red); } .yellow { color: var(--yellow); } .green { color: var(--green); }
.label { font-size: 13px; letter-spacing: .14em; color: var(--grey); display: flex; align-items: center; gap: 12px; font-weight: 400; }
.label::after { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .6; }
.label b { font-weight: 500; color: inherit; direction: ltr; }

/* Header: just the name and one button, over everything. */
.top { position: fixed; inset: 0 0 auto 0; z-index: 20; padding: 18px clamp(16px, 4vw, 44px); display: flex; align-items: center; justify-content: space-between;
  pointer-events: none; color: #fff; transition: color .35s; }
.top.light { color: #0B0B0B; }
.top > * { pointer-events: auto; }
.top .name { font-family: Display, sans-serif; font-size: 22px; text-decoration: none; color: inherit; letter-spacing: .01em; }
.top nav { display: flex; gap: 26px; align-items: center; font-size: 15px; font-weight: 400; }
.top nav a { text-decoration: none; color: inherit; opacity: .85; }
.top nav .dl { border: 1px solid currentColor; border-radius: 99px; padding: 7px 16px; opacity: 1; }
@media (max-width: 640px) { .top nav a:not(.dl) { display: none; } }

/* 1. Overture: the logo plays itself (same timing as the logo film). */
.overture { position: relative; height: 100svh; min-height: 560px; display: grid; place-items: center; text-align: center; background: var(--black); overflow: hidden; }
.overture > div:not(.glow) { position: relative; z-index: 1; }
.overture .logo { width: min(74vw, 620px); height: auto; overflow: visible; }
.overture .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: rise .55s var(--ease) both; }
.overture .bar:nth-of-type(1) { animation-delay: .25s } .overture .bar:nth-of-type(2) { animation-delay: .39s } .overture .bar:nth-of-type(3) { animation-delay: .53s }
.overture .circle { transform-box: fill-box; transform-origin: 50% 50%; animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) .78s both; }
.overture .letter { animation: up .6s var(--ease) both; }
.overture .tag { margin-top: clamp(26px, 5vh, 48px); font-family: Display, sans-serif; font-size: clamp(30px, 6.4vw, 64px); line-height: 1.05; animation: fade .9s var(--ease) 1.9s both; }
.overture .tag .c { display: inline; }
.overture .cue { position: absolute; bottom: 30px; left: 0; right: 0; font-size: 13px; letter-spacing: .14em; color: var(--grey); animation: fade 1s ease 2.6s both; }
.overture .cue i { display: block; width: 1px; height: 38px; margin: 12px auto 0; background: linear-gradient(var(--grey), transparent); animation: drip 2.2s ease-in-out 3s infinite; }
.overture .glow { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient(circle, rgba(237, 61, 51, .16), transparent 60%); animation: fade 2s ease 1s both; pointer-events: none; }
@keyframes rise { from { transform: scaleY(0) } 60% { transform: scaleY(1.12) } to { transform: scaleY(1) } }
@keyframes pop { from { transform: scale(0) } to { transform: scale(1) } }
@keyframes up { from { transform: translateY(26px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top } 50% { transform: scaleY(1); transform-origin: top } 51% { transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

/* 2. Four verses on a phone that stays. The section is tall; the stage sticks while you scroll through it. */
.verses { position: relative; height: 480vh; background: var(--paper); color: var(--ink); }
.verses .stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: 0 clamp(16px, 7vw, 120px); overflow: hidden; }
.verses .texts { position: relative; height: 60vh; }
.verse { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.verse.on { opacity: 1; transform: none; }
.verse h2 { font-size: clamp(44px, 6.4vw, 96px); }
.verse p { margin: 0; color: var(--ink2); font-size: clamp(17px, 1.6vw, 21px); max-width: 32ch; }
.verse .label { color: var(--ink2); }
.progress { position: absolute; inset-inline-start: clamp(16px, 7vw, 120px); bottom: 7vh; display: flex; gap: 8px; }
.progress i { width: 26px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; position: relative; }
.progress i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--f, 0)); transform-origin: right; }
@media (max-width: 820px) {
  .verses .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; gap: 2vh; padding-top: 84px; }
  .verses .texts { order: 2; height: 34vh; }
  .verse { justify-content: flex-start; gap: 10px; }
  .verse h2 { font-size: clamp(34px, 10vw, 54px); }
  .verse p { font-size: 16px; }
  .progress { bottom: 3vh; }
}

/* The phone: a white app screen, as in the app. Its four states cross-fade. */
.phone { justify-self: center; position: relative; width: min(330px, 74vw); aspect-ratio: 9 / 18.5; border-radius: 46px; background: #fff; border: 10px solid #0E0E0E;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .35), 0 0 0 1px #2A2A2A; overflow: hidden; }
@media (max-width: 820px) { .phone { width: min(250px, 58vw); border-width: 8px; border-radius: 36px; } }
@media (max-width: 820px) and (max-height: 700px) { .phone { width: min(205px, 52vw); } }
.phone .notch { position: absolute; top: 8px; left: 50%; width: 30%; height: 18px; margin-left: -15%; border-radius: 12px; background: #0E0E0E; z-index: 3; }
.screen { position: absolute; inset: 0; padding: 40px 18px 18px; display: flex; flex-direction: column; opacity: 0; transition: opacity .55s var(--ease); color: #000; font-weight: 400; }
.screen.on { opacity: 1; }
.screen .bar { display: flex; justify-content: space-between; align-items: center; }
.screen .menu { display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.screen .menu i { width: 3px; height: 14px; border-radius: 2px; background: #000; } .screen .menu i:nth-child(2) { height: 16px; transform: translateY(-2px); }
.screen .av { width: 24px; height: 24px; border-radius: 50%; background: #000; }
.screen .title { text-align: center; margin-top: 16px; font-weight: 700; font-size: 17px; }
.screen .big { font-family: Display, sans-serif; font-size: 64px; text-align: center; line-height: 1; margin-top: 18px; direction: ltr; }
.screen .box { display: flex; justify-content: center; margin-top: 10px; }
.screen .box svg { width: 70%; height: auto; }
.screen .tagline { text-align: center; color: var(--ink2); font-size: 13px; margin-top: 4px; }
.screen .ok { margin-top: auto; border-radius: 12px; padding: 12px; background: rgba(78, 184, 85, .14); color: var(--green-text); font-weight: 700; font-size: 15px; text-align: center; opacity: 0; transform: translateY(10px); transition: all .5s var(--ease); }
.screen.on .ok.show { opacity: 1; transform: none; }
.meter { height: 6px; border-radius: 3px; background: #EEE; margin-top: 12px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 60%; background: var(--green); border-radius: 3px; animation: meter 1.2s ease-in-out infinite alternate; }
@keyframes meter { from { width: 24% } to { width: 78% } }
.barre { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55 } }
/* song lines: chords over syllables, an underline that fills as you scroll */
.lines { margin-top: 22px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.line { display: inline-flex; flex-direction: column; font-size: 13px; }
@media (min-width: 821px) { .line { font-size: 14.5px; } .line .seg i { font-size: 11px; } }
.line .row { display: flex; }
.line .seg { display: inline-flex; flex-direction: column; white-space: pre; }
.line .seg i { font-style: normal; font-weight: 700; font-size: 10px; height: 14px; direction: ltr; }
.line .u { height: 3px; border-radius: 2px; background: #EEE; margin-top: 3px; overflow: hidden; }
.line .u b { display: block; height: 100%; width: calc(var(--w, 0) * 100%); background: var(--green); margin-inline-start: 0; }
.line.miss .u b { background: linear-gradient(to left, var(--red) 0 38%, var(--green) 38%); }
.line .seg i.now { background: var(--yellow); border-radius: 3px; padding: 0 3px; }
/* the listen screen */
.screen.dark { background: #000; color: #fff; padding: 0; }
.screen.dark .top-part { padding: 46px 18px 0; text-align: center; }
.screen.dark .h { font-family: Display, sans-serif; color: var(--yellow); font-size: 30px; }
.eq { display: flex; gap: 6px; justify-content: center; align-items: flex-end; height: 56px; margin-top: 12px; }
.eq i { width: 10px; border-radius: 5px; background: #fff; transform-origin: bottom; animation: eq 1s ease-in-out infinite alternate; }
.eq i:nth-child(3n+2) { background: var(--red); }
.eq i:nth-child(1) { height: 24px } .eq i:nth-child(2) { height: 40px; animation-delay: -.4s } .eq i:nth-child(3) { height: 30px; animation-delay: -.1s } .eq i:nth-child(4) { height: 54px; animation-delay: -.7s } .eq i:nth-child(5) { height: 34px; animation-delay: -.3s } .eq i:nth-child(6) { height: 46px; animation-delay: -.6s } .eq i:nth-child(7) { height: 22px; animation-delay: -.2s }
@keyframes eq { to { transform: scaleY(.45) } }
.screen.dark .sheet { margin-top: auto; background: #fff; color: #000; border-radius: 22px 22px 0 0; padding: 18px 14px 20px; }
.screen.dark .k { font-weight: 700; font-size: 15px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; direction: ltr; justify-content: flex-end; margin-top: 10px; }
.chip { min-width: 40px; padding: 4px 10px; border-radius: 99px; border: 1.5px solid #000; font-weight: 700; font-size: 13px; text-align: center; opacity: 0; transform: scale(.7); transition: all .35s var(--ease); }
.chip.in { opacity: 1; transform: none; }
.chip.on { background: var(--yellow); border-color: var(--yellow); }
.capo { margin-top: 12px; padding: 9px 11px; border-radius: 10px; background: #F3F3F3; display: flex; justify-content: space-between; font-weight: 700; font-size: 12px; opacity: 0; transition: opacity .4s; }
.capo.in { opacity: 1; } .capo span:last-child { color: var(--green-text); }

/* 3. Twelve frets, twelve lessons. */
.neck { background: var(--black); padding: clamp(90px, 14vh, 150px) 0 clamp(70px, 10vh, 120px); }
.neck .head { padding: 0 clamp(16px, 7vw, 120px); display: flex; flex-direction: column; gap: 20px; }
.neck h2 { font-size: clamp(42px, 6.4vw, 96px); }
.neck .head p { color: var(--grey); margin: 0; max-width: 40ch; font-size: clamp(17px, 1.6vw, 21px); }
.fretboard { margin-top: clamp(40px, 7vh, 80px); overflow-x: auto; scrollbar-width: none; }
.fretboard::-webkit-scrollbar { display: none; }
.fretboard svg { display: block; min-width: 900px; width: 100%; height: auto; }
.fretboard .string { fill: none; stroke: #CFCFCF; }
.fretboard .lesson { font-family: Heebo; fill: var(--grey); font-size: 13px; transition: fill .3s; }
.fretboard .num { font-family: Display; fill: var(--white); font-size: 26px; }
.fretboard g.f:hover .lesson, .fretboard g.f:focus .lesson { fill: var(--white); }
.fretboard g.f:hover .pad { fill: rgba(253, 186, 28, .1); }
.neck .hint { padding: 14px clamp(16px, 7vw, 120px) 0; color: var(--grey); font-size: 14px; }
@media (min-width: 1000px) { .neck .hint { display: none; } }

/* 4. One quiet sentence. */
.quiet { background: var(--paper); color: var(--ink); padding: clamp(100px, 18vh, 200px) clamp(16px, 7vw, 120px); display: grid; gap: 26px; }
.quiet h2 { font-size: clamp(42px, 7vw, 108px); }
.quiet p { margin: 0; color: var(--ink2); max-width: 46ch; font-size: clamp(17px, 1.6vw, 21px); }
.quiet .mic { width: 54px; height: 54px; }

/* 5. Questions. */
.faq { scroll-margin-top: 70px; background: var(--paper); color: var(--ink); padding: 40px clamp(16px, 7vw, 120px) clamp(90px, 14vh, 150px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 5vw; }
.faq h2 { font-size: clamp(40px, 5vw, 72px); }
.faq details { border-top: 1px solid var(--line); padding: 22px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-size: 20px; font-weight: 400; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink2); flex: none; margin-top: 8px; transition: background .2s; }
.faq details[open] summary::after { background: var(--yellow); border-color: var(--yellow); }
.faq details p { margin: 12px 0 0; color: var(--ink2); max-width: 60ch; }
.faq a { color: var(--ink); }
@media (max-width: 820px) { .faq { grid-template-columns: minmax(0, 1fr); } }

/* 6. Coda: the red circle as a stage light. */
.coda { position: relative; min-height: 100svh; background: var(--black); display: grid; place-items: center; text-align: center; overflow: hidden; padding: 120px 20px; }
.coda .spot { position: absolute; width: min(90vw, 760px); aspect-ratio: 1; border-radius: 50%; background: var(--red); transform: scale(var(--s, .35)); transition: transform 1.2s var(--ease); }
.coda .inner { position: relative; display: grid; gap: 26px; justify-items: center; }
.coda .mark { width: 92px; height: auto; }
.coda h2 { font-size: clamp(48px, 9vw, 130px); color: var(--white); }
.coda .meta { color: rgba(255, 255, 255, .8); font-size: 15px; }
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 17px 32px; border-radius: 99px; background: var(--white); color: #000; font-weight: 700; font-size: 18px; text-decoration: none; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); transition: transform .3s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 20px; height: 20px; }
.coda .more { color: #fff; opacity: .85; font-size: 15px; }

footer { background: var(--black); color: var(--grey); padding: 26px clamp(16px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 16px 26px; justify-content: space-between; font-size: 14px; border-top: 1px solid #161616; }
footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
footer a { color: var(--grey); text-decoration: none; }
footer a:hover { color: var(--white); }

/* Reveal on scroll, from a visible resting state when scripts are off. */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}