/* Circle 1 - "the big beginning". The flyer's navy and pale blue, a notebook page, things taped on in a hurry
   (a flyer, a phone screenshot, a paper sign), a route drawn by hand from Zion Square to the First Station,
   and then the night itself: the warm orange light of the station's rope heart takes over the page. */

.cx-w1 { --bg-warm: #1c0d12; --grid: rgba(143, 196, 255, 0.07); background:
  linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 30px 30px,
  linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 30px 30px,
  linear-gradient(180deg, var(--bg) 0, var(--bg2) 55vh, var(--bg) 150vh); }

/* paper things: tape and a little tilt */
.cx-w1 .k-paper .cx-pic, .cx-w1 .cx-open-flyer .cx-pic, .cx-w1 .v-note .cx-v-media .cx-pic { background: #fff; padding: 8px; border-radius: 3px; box-shadow: 0 22px 50px -22px #000, 0 2px 0 rgba(0, 0, 0, 0.2); overflow: visible; }
.cx-w1 .k-paper, .cx-w1 .cx-open-flyer, .cx-w1 .v-note .cx-v-media > * { position: relative; }
.cx-w1 .k-paper::before, .cx-w1 .cx-open-flyer::before, .cx-w1 .v-note .cx-v-media::before {
  content: ''; position: absolute; z-index: 2; top: -12px; inset-inline-start: 50%; width: 110px; height: 28px; translate: 50% 0; rotate: -4deg;
  background: var(--tape); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); mix-blend-mode: normal; }
.cx-w1 .k-paper.tilt { rotate: 3deg; }
.cx-w1 .k-paper { rotate: -2deg; }
.cx-w1 .k-paper figcaption, .cx-w1 .k-phone figcaption { font: 600 1rem var(--f-hand); color: var(--c2); text-align: center; margin-top: 12px; }

/* ---------- opening: the rope heart of the station in the flyer's blue, the first flyer taped over it ---------- */
.cx-w1 .cx-open { background: var(--bg); }
.cx-w1 .cx-open-bg { background: var(--c1); }
.cx-w1 .cx-open-bg img { mix-blend-mode: luminosity; opacity: 0.85; filter: contrast(1.15) brightness(1.1); }
.cx-w1 .cx-open-bg::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(30vmax 26vmax at 50% 36%, rgba(255, 150, 70, 0.45), transparent 70%),
  linear-gradient(90deg, color-mix(in srgb, var(--bg) 10%, transparent) 0%, color-mix(in srgb, var(--bg) 25%, transparent) 45%, color-mix(in srgb, var(--bg) 78%, transparent) 75%),
  linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), transparent 30%, transparent 70%, var(--bg));
  mix-blend-mode: normal; }
.cx-w1 .cx-open-bg::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 30px 30px; }
.cx-w1 .cx-open-bg img { animation: c1-breathe 16s ease-in-out infinite alternate; }
@keyframes c1-breathe { to { transform: scale(1.06); } }
.cx-w1 .cx-open-name { text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55); rotate: -1.5deg; transform-origin: right; }
.cx-w1 .cx-open-flyer { max-width: 380px; justify-self: center; rotate: -4deg; animation: c1-tape 1s 0.2s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes c1-tape { from { opacity: 0; transform: translateY(-40px) rotate(-10deg) scale(1.08); } }
.cx-w1 .cx-open-num { color: transparent; -webkit-text-stroke: 3px var(--c2); text-shadow: 0 0 40px var(--glow); }
.cx-w1 .cx-open-name { font-weight: 900; }
.cx-w1 .cx-open-k { color: var(--c2); }
.cx-w1 .cx-open-place { font-family: var(--f-hand); font-size: clamp(1.1rem, 2vw, 1.45rem); }
.cx-w1 .cx-was { color: var(--ink2); }
.cx-w1 .cx-now { color: var(--hi); background: linear-gradient(transparent 58%, color-mix(in srgb, var(--acc) 45%, transparent) 58%); padding-inline: 4px; }
.cx-w1 .cx-now::before { content: '← '; color: var(--acc); }
.cx-w1 .cx-cue { font-size: 1.1rem; color: var(--c2); }

/* ---------- the road: a route drawn by hand, notes on both sides ---------- */
.cx-w1 .v-desk .cx-head { margin-inline: auto; text-align: center; }
.cx-w1 .v-desk .cx-mark { justify-content: center; }
.cx-w1 .v-desk .cx-beat-list { padding-inline-start: clamp(44px, 6vw, 84px); }
.cx-w1 .cx-route { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 40px; height: 100%; overflow: visible; }
.cx-w1 .cx-route path { fill: none; stroke: var(--c2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: calc((1 - var(--p, 0)) * 1000); opacity: 0.6; vector-effect: non-scaling-stroke; }
.cx-w1 .v-desk .cx-beat { position: relative; }
.cx-w1 .v-desk .cx-beat::before { content: ''; position: absolute; top: 6px; inset-inline-start: calc(-1 * clamp(44px, 6vw, 84px) + 11px); width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 3px solid var(--c2); box-shadow: 0 0 14px var(--glow); }
.cx-w1 .v-desk .cx-beat.in::before { background: var(--acc); border-color: var(--acc); transition: background 0.4s 0.3s; }
.cx-w1 .cx-when { display: inline-block; font-size: 1.05rem; color: var(--hi); background: linear-gradient(transparent 55%, color-mix(in srgb, var(--acc) 50%, transparent) 55%); padding-inline: 4px; }
.cx-w1 .cx-beat.stamp { text-align: start; }
.cx-w1 .cx-beat.stamp .cx-when { display: table; }
.cx-w1 .cx-beat.stamp h3 { color: var(--acc); }
.cx-w1 .cx-beat.stamp .cx-beat-t { max-width: 680px; }
.cx-w1 .k-phone { max-width: 300px; margin-inline: auto; }
.cx-w1 .k-phone .cx-pic { border-radius: 34px; padding: 14px 10px; background: #111; box-shadow: 0 0 0 2px #333, 0 30px 70px -25px #000; }
.cx-w1 .k-phone .cx-pic img { border-radius: 20px; }
.js .cx-w1 .cx-beat.in .cx-beat-m { animation: c1-drop 0.8s 0.25s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes c1-drop { from { opacity: 0; transform: translateY(-30px) rotate(-6deg); } }

/* ---------- the night: the photo opens, the warm light takes the page ---------- */
.cx-w1 .v-burst { overflow: hidden; }
.cx-w1 .v-burst .cx-pic { height: min(92svh, 900px); cursor: zoom-in; }
.cx-w1 .v-burst .cx-pic img { animation: c1-open linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
@keyframes c1-open { from { transform: scale(1.25); filter: saturate(0.2) brightness(0.55); } to { transform: none; filter: none; } }
.cx-w1 .v-burst::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  radial-gradient(60% 50% at 50% 40%, rgba(255, 138, 61, 0.35), transparent 70%),
  linear-gradient(180deg, var(--bg) 0%, transparent 18%); mix-blend-mode: screen; }
.cx-w1 .v-burst .cx-photo-over { z-index: 2; background: linear-gradient(to top, var(--bg-warm) 6%, color-mix(in srgb, var(--bg-warm) 60%, transparent) 45%, transparent); }
.cx-w1 .v-burst .cx-mark { color: #ffd0a8; font-size: 1.05rem; }
.cx-w1 .v-burst .cx-title { font-size: clamp(2.6rem, 8vw, 6.4rem); text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5); }
.cx-w1 .v-burst ~ * { --acc: var(--warm); --glow: rgba(255, 138, 61, 0.45); }
.cx-w1 .v-burst ~ .cx-sec, .cx-w1 .v-burst ~ .cx-line { background: var(--bg-warm); }
.cx-w1 .v-burst ~ .cx-band { background: radial-gradient(70vmax 60vmax at 90% 0%, rgba(255, 110, 50, 0.16), transparent 60%), var(--bg-warm); }

.cx-w1 .v-after-burst { padding-top: clamp(30px, 5vw, 60px); }
.cx-w1 .v-after-burst .cx-line-t { max-width: 30ch; font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.4; }
.cx-w1 .v-after-burst .cx-line-sub { max-width: 620px; font-size: 1.15rem; line-height: 1.7; }

/* ---------- the band: eight inputs on the desk ---------- */
.cx-band-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cx-desk { padding: 22px 20px 18px; border-radius: 18px; background: linear-gradient(180deg, #2a2230, #17121c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px #000; }
.cx-desk-k { margin: 0 0 16px; font: 700 1.1rem var(--f-hand); color: #ffd0a8; text-align: center; }
.cx-chans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.cx-chans li { display: grid; justify-items: center; gap: 10px; }
.cx-knob { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #666, #1a1a1a); box-shadow: 0 2px 4px #000; position: relative; }
.cx-knob::after { content: ''; position: absolute; top: 3px; left: 50%; width: 2px; height: 8px; background: var(--warm); translate: -50% 0; }
.cx-fader { position: relative; width: 8px; height: 120px; border-radius: 4px; background: #0b080d; box-shadow: inset 0 0 0 1px #000; }
.cx-fader i { position: absolute; left: 50%; bottom: 6%; width: 26px; height: 14px; border-radius: 3px; translate: -50% 0; background: linear-gradient(#ddd, #888); box-shadow: 0 3px 6px #000; transition: bottom 0.9s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--i) * 110ms + 200ms); }
.cx-desk.in .cx-fader i { bottom: calc(50% + mod(var(--i) * 37, 30) * 1%); }
.cx-chans b { font: 700 0.85rem var(--f-display); color: #9d8fa8; }
.cx-desk.in .cx-chans b { color: var(--warm); text-shadow: 0 0 10px var(--glow); transition: color 0.3s calc(var(--i) * 110ms + 600ms); }
.cx-band-t .cx-pull p { font-family: var(--f-hand); font-weight: 700; }
.cx-band-ph { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(32px, 5vw, 56px); }
.cx-band-ph .cx-pic { flex: 1 1 200px; height: clamp(150px, 18vw, 230px); border-radius: 12px; }

/* ---------- Daniel's note: a print taped next to it ---------- */
.cx-w1 .v-note .cx-pull p { font-family: var(--f-hand); }
.cx-w1 .v-note .cx-v-media { rotate: 2.5deg; max-width: 460px; }

/* ---------- the album: prints pinned to a board ---------- */
.cx-w1 .v-board .cx-wall-in { columns: 4 220px; column-gap: 18px; }
.cx-w1 .v-board .cx-w-item { padding: 7px; background: #fbf8f1; border-radius: 3px; margin-bottom: 18px; box-shadow: 0 16px 34px -16px #000; rotate: calc((mod(var(--i), 5) - 2) * 1.3deg); aspect-ratio: auto; transition: rotate 0.3s, transform 0.3s; }
.cx-w1 .v-board .cx-w-item img { aspect-ratio: var(--ar); height: auto; }
.cx-w1 .v-board .cx-w-item:hover { rotate: 0deg; transform: scale(1.03); z-index: 2; position: relative; }
.cx-w1 .v-board .cx-w-item:nth-child(4n + 1)::before { content: ''; position: absolute; top: -9px; left: 50%; width: 70px; height: 20px; translate: -50% 0; rotate: 3deg; background: var(--tape); z-index: 2; }
.cx-w1 .v-board .cx-w-item { position: relative; overflow: visible; }

/* ---------- the end ---------- */
.cx-w1 .v-end { padding-bottom: clamp(50px, 7vw, 90px); }
.cx-w1 .v-end .cx-line-t { font-family: var(--f-hand); color: var(--hi); text-shadow: 0 0 50px var(--glow); }
.cx-w1 .v-end .cx-line-sub { max-width: 640px; line-height: 1.7; }

@media (max-width: 800px) {
  .cx-w1 .v-desk .cx-beat-list { padding-inline-start: 34px; }
  .cx-w1 .cx-route { width: 24px; inset-inline-start: -8px; }
  .cx-w1 .v-desk .cx-beat::before { inset-inline-start: -32px; width: 14px; height: 14px; }
  .cx-w1 .cx-open-flyer { max-width: 230px; rotate: -3deg; }
  .cx-w1 .cx-open-num { -webkit-text-stroke-width: 2px; }
  .cx-band-in { grid-template-columns: 1fr; }
  .cx-fader { height: 84px; }
  .cx-chans { gap: 4px; }
  .cx-knob { width: 20px; height: 20px; }
  .cx-band-ph .cx-pic { flex-basis: 40%; height: 130px; }
  .cx-w1 .v-board .cx-wall-in { columns: 2; column-gap: 10px; }
  .cx-w1 .v-board .cx-w-item { padding: 4px; margin-bottom: 10px; }
  .cx-w1 .v-note .cx-v-media { rotate: 0deg; }
}

/* ---------- photos behind the scenes: blue before the night, warm after it ---------- */
.cx-w1 .has-bg { --bgph-tint: var(--c1); --bgph-blend: luminosity; --bgph-o: 0.3; }
.cx-w1 .v-burst ~ .has-bg { --bgph-tint: #7a2a12; --bgph-blend: luminosity; --bgph-o: 0.34; --bgph-veil: linear-gradient(180deg, var(--bg-warm) 0%, color-mix(in srgb, var(--bg-warm) 55%, transparent) 25%, color-mix(in srgb, var(--bg-warm) 62%, transparent) 75%, var(--bg-warm) 100%); }
.cx-w1 .v-desk.has-bg { --bgph-veil: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 20%, color-mix(in srgb, var(--bg) 80%, transparent) 80%, var(--bg) 100%); }
.cx-w1 .v-end.has-bg { --bgph-o: 0.5; }
.cx-w1 .cx-strip { background: var(--bg-warm); }

/* ---------- the desk you can play with ---------- */
.cx-chan { all: unset; box-sizing: border-box; display: grid; justify-items: center; gap: 10px; cursor: pointer; padding: 4px 2px; border-radius: 8px; }
.cx-chan:focus-visible { outline: 2px solid var(--warm); }
.cx-chan.on .cx-fader i { bottom: 84% !important; transition-delay: 0s !important; background: linear-gradient(#fff, #ffcf9e); box-shadow: 0 0 14px var(--warm), 0 3px 6px #000; }
.cx-chan.on b { color: #fff !important; text-shadow: 0 0 12px var(--warm); }
.cx-chan.on .cx-knob { box-shadow: 0 0 0 2px var(--warm), 0 0 14px var(--warm); }
.cx-desk-hint { margin: -10px 0 14px; text-align: center; font-size: 0.85rem; color: #b8a8b8; }
.cx-desk.full { box-shadow: 0 0 0 2px var(--warm), 0 0 60px -10px var(--warm), 0 30px 60px -30px #000; transition: box-shadow 0.6s; }
body:has(.cx-w1) { background: #1c0d12; }