/* Klankbaan · v3: the playful layer on top of v2. Grounds that follow your
   hands, letters that light when they sound, shapes with weight, and a
   bounce in everything that arrives. */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ── grounds: every block keeps its own colour; the bar takes the block under it ── */

[data-tone="notes"]   { --bg: #2B4BF2; --fg: #EDEAF4; }
[data-tone="audio"]   { --bg: #FF5B35; --fg: #191919; }
[data-tone="control"] { --bg: #7A3FF0; --fg: #EDEAF4; }
[data-tone="fx"]      { --bg: #FF4D9E; --fg: #191919; }
[data-tone="neon"]    { --bg: #C8FF00; --fg: #191919; }
[data-tone="ink"], :root { --bg: #191919; --fg: #F5F1F4; }
[data-tone] { --fg-72: color-mix(in srgb, var(--fg) 72%, transparent); --fg-50: color-mix(in srgb, var(--fg) 50%, transparent); --fg-30: color-mix(in srgb, var(--fg) 30%, transparent); --fg-14: color-mix(in srgb, var(--fg) 14%, transparent); --fg-08: color-mix(in srgb, var(--fg) 8%, transparent); --lp: var(--fg); }
html, body { background: var(--bg); }
.topbar { background: color-mix(in srgb, var(--bg) 78%, transparent); }
.btn { background: var(--fg); color: var(--bg); } .btn:hover { background: var(--fg); transform: translateY(-3px) rotate(-1deg); }
.cta:hover { background: var(--fg); color: var(--bg); }
.deck .play, .bf .go button { background: var(--fg); color: var(--bg); }
/* the wordmark on every ground, as the visual system has it: ink on paper, paper on ink,
   paper on orange with ink accents, ink on neon, ink on pink with paper accents; the two
   grounds the system doesn't list (blue, violet) take paper letters and ink accents */
.wm-big polygon, .wm-big path, .home-wm polygon, .home-wm path, .tail-wm polygon, .tail-wm path { fill: var(--wm); transition: fill .6s ease; }
.wm-big rect, .wm-big circle, .home-wm rect, .home-wm circle, .tail-wm rect, .tail-wm circle { transition: fill .6s ease; }
[data-tone="ink"], :root { --wm: #EDEAF4; }
[data-tone="paper"] { --wm: #191919; }
[data-tone="neon"]  { --wm: #191919; }
[data-tone="audio"] { --wm: #EDEAF4; --wm-acc: #191919; }
[data-tone="fx"]    { --wm: #191919; --wm-acc: #EDEAF4; }
[data-tone="notes"], [data-tone="control"] { --wm: #EDEAF4; --wm-acc: #191919; }
[data-tone="audio"] :is(.wm-big, .home-wm, .tail-wm) :is(rect, circle), [data-tone="fx"] :is(.wm-big, .home-wm, .tail-wm) :is(rect, circle), [data-tone="notes"] :is(.wm-big, .home-wm, .tail-wm) :is(rect, circle), [data-tone="control"] :is(.wm-big, .home-wm, .tail-wm) :is(rect, circle) { fill: var(--wm-acc); }
.mq-i .mi, .dot.paper, .mq-i { color: var(--fg); }
[data-tone]:not([data-tone="ink"]) .dot { background: var(--fg); }
/* the paper components keep their own colours whatever the ground */
.stagebox, .card, .gcard, .done, .shots img, .shots video { color-scheme: light; }

/* ── the pads ────────────────────────────────────────────────────────────── */
.wm-big { position: relative; }
.wm-big .pad { cursor: pointer; outline: none; }
.wm-big .pad > * { transition: fill .5s ease; }
.wm-big .pad.hit > * { fill: var(--blue); transition: fill .05s; }
[data-tone="notes"] .wm-big .pad.hit > * { fill: var(--ink); }
.wm-big .pad:focus-visible > * { fill: var(--neon); }
body.sound-on .wm-big .pad:hover > * { fill: var(--fg-72); }
.poke { position: absolute; right: 0; top: 100%; margin-top: 10px; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-50); transition: opacity .6s; animation: poke 1.6s ease-in-out infinite; }
.poke.gone { opacity: 0; animation: none; }
@keyframes poke { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* the letters land with a bounce now */

/* ── the crowd ───────────────────────────────────────────────────────────── */
.crowd { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.crowd .sh { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab; animation: none; will-change: transform; transition: filter .3s; }
.crowd .sh.held { cursor: grabbing; filter: brightness(1.15); }
.crowd .sh.asleep { filter: saturate(.85); }
.crowd .sh.diamond { transform-origin: center; }
@media (max-width: 899px) { .crowd { display: block; } .crowd .sh { width: 18px !important; height: 18px !important; } }

/* ── bounce in the arrivals, a lean in the type ──────────────────────────── */
.ln > span { transition-duration: 1.1s; }
[data-reveal] { transition-timing-function: var(--spring); }
.btn:active, .cta:active, .deck .play:active, .mq-i:active { transform: scale(.94); transition-duration: .08s; }
.mq-i .mi { transition: transform .45s var(--spring); } .mq-i:hover .mi { transform: scale(1.6) rotate(-8deg); }
.gcard { transition: transform .45s var(--spring), box-shadow .3s; } .gcard:hover { transform: translateY(-6px) rotate(-.6deg); }
.cursor i { transition-timing-function: var(--spring); }
/* portrait: no hover zoom (the zoom pushed the raw photo past the ink lift and drew a dark rim) */

@media (prefers-reduced-motion: reduce) { html, body, .topbar { transition: none; } .poke { animation: none; } .h1 .ln:hover, .h2 .ln:hover { transform: none; } }
/* a lane the colour of the ground would vanish, so it borrows the type colour */
[data-tone="notes"] .lane .tr i[style*="#2B4BF2"], [data-tone="audio"] .lane .tr i[style*="#FF5B35"], [data-tone="control"] .lane .tr i[style*="#7A3FF0"], [data-tone="fx"] .lane .tr i[style*="#E5197F"], [data-tone="neon"] .lane .tr i[style*="#C8FF00"] { background: var(--fg) !important; }
[data-tone="notes"] .dot.notes, [data-tone="audio"] .dot.audio, [data-tone="control"] .dot.control, [data-tone="fx"] .dot.fx { background: var(--fg); }

/* ── v3.1: the songs on paper, and the phone opener from v1 ──────────────── */
[data-tone="paper"] { --bg: #F5F1F4; --fg: #191919; --cable: #191919; }
[data-tone="paper"] .lane .tr i[style*="#C8FF00"] { background: #6F8A00 !important; }
.wmwrap { display: contents; }
@media (max-width: 620px) {
  .intro { --spine: calc(100svh - 76px); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 16px; padding-top: 64px; }
  .wmwrap { display: block; grid-column: 1; grid-row: 1 / 4; align-self: start; position: relative; width: calc(var(--spine) * 288 / 1980); height: var(--spine); }
  .wm-big { position: absolute; top: 0; left: 0; width: var(--spine); height: auto; margin: 0; transform-origin: 0 0; transform: rotate(90deg) translateY(-100%); }
  .wm-big svg > * { animation-name: wm-in-side; }
  @keyframes wm-in-side { to { opacity: 1; transform: none; } }
  .poke { display: none; }
  .intro-body { grid-column: 2; grid-row: 1 / 3; grid-template-columns: minmax(0, 1fr); padding-top: 18px; gap: 18px; align-content: end; min-width: 0; }
  .intro-side { max-width: 100%; min-width: 0; }
  .intro-side p { overflow-wrap: anywhere; }
  .h1 { font-size: clamp(28px, 9vw, 40px); line-height: .95; }
  .intro-side p { font-size: 13px; }
  .meta { grid-column: 2; grid-row: 3; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 22px; }
}
/* hero diamond: a real polygon so the accent needs no SVG transform (the intro animation would override it) */
.wm-big .acc { fill: #9E6BFF; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: acc-in .7s var(--ease) 1s forwards; }
[data-tone="audio"] .wm-big .acc, [data-tone="fx"] .wm-big .acc, [data-tone="notes"] .wm-big .acc, [data-tone="control"] .wm-big .acc { fill: var(--wm-acc); }
/* portrait duotone: the photo takes the page's ground. Pink page = pink duotone, neon page = neon duotone, its own (ink) page = the real photo.
   Same .6s ease as the page background, and the photo's black maps to the exact ground colour, so there is never an edge. */
@property --tp { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --tn { syntax: '<number>'; inherits: true; initial-value: 0; }
.me-photo { --tp: 0; --tn: 0; transition: --tp .6s ease, --tn .6s ease; }   /* the fade runs on the same clock as the page background */
.me-photo img { position: relative; z-index: 0; }
.me-photo::after { z-index: 1; }
.me-photo .duo { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.me-photo .duo-fx { filter: url(#duo-fx); opacity: var(--tp); }
.me-photo .duo-neon { filter: url(#duo-neon); opacity: var(--tn); }
.me-photo .duo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[data-tone="fx"] .me-photo { --tp: 1; }
[data-tone="neon"] .me-photo { --tn: 1; }

/* no divider lines between the chapters, nor above the footer */
.sec, .tail { border-top: 0; }

/* scrolling settles on the next chapter when you land near it; long chapters still scroll freely inside */
html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
.intro, .sec, .tail { scroll-snap-align: start; scroll-snap-stop: normal; }

/* after the form is sent, the chapter is just the thank-you */
#output.sent .sec-head { display: none; }
#output.sent .done { display: block; padding-top: 0; }
#output.sent .done h2 { font-size: clamp(40px, 7vw, 112px); letter-spacing: -.04em; line-height: .92; margin-bottom: 18px; }
#output.sent .done p { font-size: 17px; max-width: 560px; }

/* two places to find Klankbaan: one per line in the maker's chapter */
.reach .sep { display: none; }
.reach a { display: block; }
.reach a + a { margin-top: 6px; }

/* the tutorials live on YouTube: a proper menu item, and a link where the clips are */
.menu .yt { color: var(--fg); }
.lead a { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--fg-30); }
.lead a:hover { text-decoration-color: var(--fg); }

/* the short text beside each title: right-aligned, its edge on the page margin */
@media (min-width: 900px) {
  .sec-head > .lead { justify-self: end; text-align: right; }
  .intro-body > .intro-side { justify-self: end; text-align: right; }
  .intro-body > .intro-side .acts { display: flex; justify-content: flex-end; }
}