/* =============================================================================
   themes/compositions.css — independent music
   -----------------------------------------------------------------------------
   Art direction: "the score". Five dry-brush staff lines carry a short phrase
   of ink-drop notes that paint in one by one and resolve on the spark (the
   only gold on the page). The tracks below sit like a short programme.
   Uses the shared audio player (base.css 09h); no autoplay, preload="none".
   ============================================================================= */

.theme-compositions .score-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(50vw 40vh at 78% 40%, rgba(58, 42, 140, .16), transparent 70%);
}
.score-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px clamp(16px, 2.6vw, 44px);
  align-items: center;
}
.score-hero__id { grid-column: 1 / span 5; }
.score { grid-column: 7 / span 6; }
@media (max-width: 960px) { .score-hero__id, .score { grid-column: 1 / -1; } }
.score-hero .case-title { max-width: 12ch; }

/* The staff: five lines, a step (--step) apart. Notes sit on lines or spaces. */
.score {
  --step: clamp(9px, 1.15vw, 15px);            /* half the gap between two lines */
  position: relative;
  height: calc(var(--step) * 8 + 90px);
  padding-block: 45px;
}
.score__staff {
  position: absolute;
  inset: 45px 0;
  display: grid;
  align-content: space-between;
}
.score__staff span {
  height: 4px;
  background: rgba(243, 237, 226, .5);
  -webkit-mask: url("/assets/brand/brush-dry.svg") center / 100% 100% no-repeat;
          mask: url("/assets/brand/brush-dry.svg") center / 100% 100% no-repeat;
}
.score__staff span:nth-child(even) { transform: scaleX(-1); transform-origin: center; }  /* mirrored so no two strokes match */
.score__bar {                                   /* the closing bar line */
  position: absolute;
  right: 2%;
  top: 45px; bottom: 45px;
  width: 3px;
  background: rgba(243, 237, 226, .55);
  border-radius: 2px;
}

/* A note: an ink drop (tilted oval) with a fine stem */
.note {
  position: absolute;
  left: var(--x);
  top: calc(45px + var(--y) * var(--step) - var(--step) * .8);
  width: calc(var(--step) * 2.2);
  height: calc(var(--step) * 1.6);
  border-radius: 50%;
  background: var(--light);
  transform: rotate(-22deg);
}
.note::after {                                  /* stem, up by default */
  content: "";
  position: absolute;
  right: 1px;
  bottom: 50%;
  width: 2px;
  height: calc(var(--step) * 6);
  background: var(--light);
  transform: rotate(22deg);
  transform-origin: bottom center;
}
.note--stem-down::after { right: auto; left: 1px; bottom: auto; top: 50%; transform-origin: top center; }
/* The last note is the spark — gold belongs to it alone */
.note--spark {
  width: calc(var(--step) * 3.2);
  height: calc(var(--step) * 3.2);
  top: calc(45px + var(--y) * var(--step) - var(--step) * 1.6);
  border-radius: 0;
  background: none;
  color: var(--hot-core);
  transform: none;
  filter: drop-shadow(0 0 10px var(--filament-lit)) drop-shadow(0 0 22px rgba(255, 201, 112, .45));
}
.note--spark::after { display: none; }
.note--spark svg { width: 100%; height: 100%; }

/* Paint-in: the phrase writes itself when the score scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.calm) .score .note { opacity: 0; translate: 0 6px; transition: opacity .6s var(--ease-brush) var(--d), translate .6s var(--ease-brush) var(--d); }
  html.js:not(.calm) .score.is-visible .note { opacity: 1; translate: 0 0; }
  html.js:not(.calm) .score .score__staff span { scale: 0 1; transition: scale 1.1s var(--ease-brush); }
  html.js:not(.calm) .score .score__staff span:nth-child(odd) { transform-origin: left center; }
  html.js:not(.calm) .score.is-visible .score__staff span { scale: 1 1; }
}