/* A moving score: marks become a page, a page becomes meaning. */
.signup-note { margin: 12px 0 0; font: 12px/1.6 var(--sans); color: var(--graphite); }
.waitlist.done .signup-note { display: none; }
.opening-signal { color: var(--graphite); width: 100%; align-self: center; }
.signal-orbit { width: 100%; max-height: 180px; display: block; }
.orbit-arm { transform-origin: 120px 85px; animation: orbit 12s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.score-band { margin-top: 56px; overflow: hidden; border-block: 1px solid var(--rule); padding: 18px 0; }
.score-track { width: max-content; display: flex; animation: score-drift 32s linear infinite; }
.score-track > span { flex: none; padding-right: 48px; font: 400 clamp(24px, 4vw, 52px)/1.3 var(--serif); font-style: italic; white-space: nowrap; }
.score-track i { font: 300 .7em var(--sans); color: var(--signal); margin: 0 28px; }
.score-track b { font: 500 .8em var(--sans); letter-spacing: -.04em; }
@keyframes score-drift { to { transform: translateX(-50%); } }
.frame-composer { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 290px; margin: 8px 0 52px; overflow: hidden; border-block: 1px solid var(--rule); }
.frame-stack { position: relative; height: 245px; perspective: 800px; }
.frame-sheet { position: absolute; left: 20%; top: 42px; width: 110px; height: 150px; padding: 12px; border: 1px solid var(--graphite); background: var(--paper); transform: translate(calc(var(--layer) * 10px), calc(var(--layer) * -5px)) rotate(-12deg); animation: frame-register 7s cubic-bezier(.65,0,.2,1) infinite; animation-delay: calc(var(--layer) * .1s); }
.frame-sheet span { font: 12px var(--mono); color: var(--graphite); }
.frame-sheet i { display: block; width: 85%; height: 1px; background: var(--graphite); margin-top: 14px; }
.frame-sheet i:nth-of-type(2) { width: 65%; }
.frame-sheet b { display: block; color: var(--signal); font: italic 36px var(--serif); margin-top: 4px; }
@keyframes frame-register { 0%,100% { transform: translate(calc(var(--layer) * 10px), calc(var(--layer) * -5px)) rotate(-12deg); } 35%,65% { transform: translate(calc(var(--layer) * 2px),0) rotate(0deg); border-color: var(--signal); } 80% { transform: translate(calc(var(--layer) * 13px),calc(var(--layer) * -8px)) rotate(7deg); } }
.frame-output { padding: 24px 0 24px 20px; }
.frame-output > span { font: 12px var(--mono); color: var(--graphite); }
.frame-output > b { display: block; font: 400 clamp(24px,3vw,38px)/1.15 var(--sans); letter-spacing: -.03em; }
.output-bars { display: flex; align-items: center; gap: 4px; height: 66px; margin: 12px 0; }
.output-bars i { width: 4px; height: 36px; background: var(--signal); transform: scaleY(.2); animation: bar-score 2.4s ease-in-out infinite; animation-delay: calc(var(--bar) * -.12s); }
@keyframes bar-score { 50% { transform: scaleY(1); } }
.notation-end { padding-top: 112px; }
.notation-art { grid-column: 1 / -1; height: 250px; position: relative; overflow: hidden; color: var(--signal); margin-bottom: 36px; }
.notation-staff { position: absolute; inset: 55px 0; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-4deg) scaleX(1.1); }
.notation-staff i { height: 1px; background: var(--rule); }
.notation-glyph { position: absolute; font: italic 150px/1 var(--serif); top: 40px; animation: glyph-float 6s ease-in-out infinite; }
.glyph-one { left: 10%; }
.glyph-two { left: 44%; animation-delay: -2s; font-style: normal; }
.glyph-three { left: 76%; animation-delay: -4s; }
@keyframes glyph-float { 50% { transform: translateY(-22px) rotate(8deg); } }
.notation-stroke { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; }
.notation-stroke path { stroke-dasharray: 1; animation: written-line 8s ease-in-out infinite; }
@keyframes written-line { 0%,8% { stroke-dashoffset: 1; } 50%,78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.notation-end .definition { grid-column: 2 / -1; max-width: 42rem; font: 400 clamp(20px,2.6vw,29px)/1.5 var(--serif); }
.notation-end .definition b { font: 500 clamp(36px,5vw,64px)/1.3 var(--sans); letter-spacing: -.04em; }
.notation-end .definition em { font-size: 19px; }
.notation-end .definition p { margin: 0; }
.motion-loop *, .motion-loop { animation-play-state: paused; }
.motion-loop.in-view *, .motion-loop.in-view { animation-play-state: running; }
.motion-rule { transform-origin: left; transition: transform 1.3s cubic-bezier(.16,1,.3,1); }
.motion-rule:not(.drawn) { transform: scaleX(0); }
.motion-heading { transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
.motion-heading:not(.drawn) { opacity: 0; transform: translateY(22px); }
.motion-heading.drawn { opacity: 1; }
.motion-row { transition: opacity .8s ease, transform 1s cubic-bezier(.16,1,.3,1); transition-delay: var(--row-delay,0s); }
.motion-row:not(.drawn) { opacity: 0; transform: translateY(30px); }
.schematic.motion-drawing .draw-path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s cubic-bezier(.45,0,.2,1) var(--draw-delay); }
.schematic.motion-drawing.drawn .draw-path { stroke-dashoffset: 0; }
.schematic .camera-pulse { fill: none; stroke: var(--signal); stroke-width: 1; transform-origin: 749px 169px; animation: camera-pulse 3.8s ease-out infinite; }
@keyframes camera-pulse { 0% { transform: scale(.5); opacity: 0; } 15% { opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
.schematic .optical-sweep { fill: var(--signal); opacity: .04; animation: optical-sweep 5s ease-in-out infinite; transform-origin: 749px 169px; }
@keyframes optical-sweep { 50% { opacity: .14; transform: scaleX(.82); } }
.page-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--signal); z-index: 50; transform: scaleX(var(--read-progress,0)); transform-origin: left; pointer-events: none; }
.wl-row button, .more { transition: transform .25s ease, box-shadow .25s ease; }
.wl-row button:hover, .more:hover { transform: translateY(-3px); box-shadow: 3px 4px 0 var(--ink); }
@media (max-width:1040px) { .opening-signal { display: none; } }
@media (max-width:720px) {
  .score-band { margin-top: 32px; padding: 14px 0; }
  .score-track i { margin: 0 14px; }
  .notation-end { padding-top: 80px; }
  .notation-end .definition { grid-column: 1; }
  .notation-art { height: 180px; margin-bottom: 22px; }
  .notation-glyph { font-size: 94px; top: 35px; }
  .notation-staff { inset: 35px 0; }
  .frame-composer { min-height: 235px; }
  .frame-stack { height: 215px; }
  .frame-sheet { left: 6%; width: 85px; height: 126px; }
  .frame-output { padding-left: 10px; }
  .output-bars { gap: 3px; }
}
@media (prefers-reduced-motion:reduce), print {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-heading, .motion-rule, .motion-row, html.js .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .schematic.motion-drawing .draw-path { stroke-dashoffset: 0 !important; }
  .camera-pulse, .page-progress { display: none; }
}