/* arts.simonerenzi.com · sezione "Lo strumento" */
.cx-pf{position:relative;background:#050507;color:#f6f5f1;overflow:hidden}
.cx-pf-stage{position:relative;height:100vh;height:100lvh;min-height:560px}
.cx-pf-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cx-pf-score{position:absolute;left:0;right:0;top:53%;height:21%;z-index:1;overflow:hidden;opacity:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 26%,#000 74%,transparent 96%);mask-image:linear-gradient(90deg,transparent 4%,#000 26%,#000 74%,transparent 96%)}
.cx-pf-score .sp-strip{position:absolute;left:50%;top:50%;will-change:transform}
.cx-pf-score svg{display:block}
.cx-pf-line{position:absolute;left:50%;top:52%;height:23%;z-index:1;width:1px;background:linear-gradient(transparent,#d9b979 30%,#d9b979 70%,transparent);opacity:0;transition:opacity .6s}
.cx-pf.is-music .cx-pf-line{opacity:.9}
.cx-pf-k{margin:0 0 14px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,245,241,.72)}
.cx-pf-intro{position:absolute;left:var(--gut,64px);bottom:14%;max-width:760px;z-index:2}
.cx-pf-intro h2{margin:0;font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(54px,8.4vw,132px);line-height:.9;letter-spacing:-.01em}
.cx-pf-intro h2 em{font-style:italic;color:rgba(246,245,241,.78)}
.cx-pf-caps{position:absolute;inset:0;pointer-events:none;z-index:2}
.cx-pf-cap{position:absolute;left:var(--gut,64px);bottom:12%;max-width:440px;opacity:0;visibility:hidden}
.cx-pf-cap-hall{left:var(--gut,64px);right:auto;text-align:left}
.cx-pf-cap-hall::before{content:'';position:absolute;inset:-60px -120px -60px -64px;z-index:-1;background:radial-gradient(closest-side,rgba(5,5,7,.78),rgba(5,5,7,0))}
.cx-pf-cap-keys{bottom:3.5%;max-width:640px}
.cx-pf-cap-keys>div{max-width:640px}
.cx-pf-cap-keys p{font-size:15px}
.cx-pf-shade{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(transparent,rgba(5,5,7,.86) 30%,#050507 70%);opacity:0;transition:opacity .6s;pointer-events:none}
.cx-pf.is-music .cx-pf-shade{opacity:1}
.cx-pf-cap h3{margin:0 0 12px;font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(36px,4.2vw,64px);line-height:.95}
.cx-pf-cap p{margin:0;font-size:16px;line-height:1.6;color:rgba(246,245,241,.78)}
.cx-pf-play{margin-top:22px;min-height:48px;padding:0 22px 0 16px;border-radius:24px;border:0;background:#f6f5f1;color:#050507;display:inline-flex;align-items:center;gap:10px;
  font:600 13px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.cx-pf-play .i-play{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.cx-pf-play[aria-pressed="true"] .i-play{width:10px;height:13px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}
.cx-pf-play .t-pause{display:none}.cx-pf-play[aria-pressed="true"] .t-play{display:none}.cx-pf-play[aria-pressed="true"] .t-pause{display:inline}
.cx-pf-play:focus-visible{outline:2px solid #d9b979;outline-offset:3px}
.cx-pf-bar{position:absolute;left:50%;bottom:22px;width:min(220px,40vw);height:3px;transform:translateX(-50%);border-radius:3px;background:rgba(246,245,241,.12);overflow:hidden;z-index:3}
.cx-pf-bar i{display:block;height:100%;width:100%;background:#f6f5f1;transform-origin:0 50%;transform:scaleX(0)}
.cx-pf.no-gl .cx-pf-canvas{display:none}
html:not(.cx) .cx-pf-stage{height:auto;min-height:0;padding:110px var(--gut,24px)}
html:not(.cx) .cx-pf-intro,html:not(.cx) .cx-pf-cap{position:relative;inset:auto;left:auto;bottom:auto;top:auto;opacity:1;visibility:visible;margin:0 auto 48px;max-width:640px}
html:not(.cx) .cx-pf-canvas,html:not(.cx) .cx-pf-bar,html:not(.cx) .cx-pf-score,html:not(.cx) .cx-pf-line{display:none}
@media (max-width:760px){
  .cx-pf-cap-hall{left:20px;right:20px;text-align:left}
  .cx-pf-intro{left:20px;right:20px;bottom:16%}
  .cx-pf-cap{left:20px;right:20px;bottom:7%;max-width:none}
  .cx-pf-cap-keys{bottom:calc(5% + 64px)}
  .cx-pf-cap-keys p:not(.cx-pf-k){display:none}
  .cx-pf-score{top:49%;height:18%}
  .cx-pf-line{top:48%;height:20%}
  .cx-pf-bar{display:none}
}

/* il suono parte solo dopo un tocco: finche' non si ascolta, il pulsante chiama */
.cx-pf.is-listen:not(.is-playing) .cx-pf-play{animation:cxPfCall 1.9s ease-out infinite}
@keyframes cxPfCall{0%{box-shadow:0 0 0 0 rgba(246,245,241,.55)}70%{box-shadow:0 0 0 18px rgba(246,245,241,0)}100%{box-shadow:0 0 0 0 rgba(246,245,241,0)}}
@media (prefers-reduced-motion:reduce){.cx-pf.is-listen:not(.is-playing) .cx-pf-play{animation:none}}

/* didascalie della meccanica (in alto, sopra lo spartito) e della sala */
.cx-pf-cap-mech{top:clamp(90px,14vh,150px);bottom:auto}
.cx-pf-cap-mech::before,.cx-pf-cap-sala::before{content:'';position:absolute;inset:-60px -120px -60px -64px;z-index:-1;background:radial-gradient(closest-side,rgba(5,5,7,.72),rgba(5,5,7,0))}
.cx-pf-cap-sala{bottom:10%}
@media (max-width:760px){
  .cx-pf-cap-mech{top:84px;left:20px;right:20px}
  .cx-pf-cap-sala{left:20px;right:20px}
}

/* il pulsante dell'audio resta a portata per tutto il brano: tastiera, meccanica e sala */
.cx-pf-stage>.cx-pf-play{position:absolute;z-index:3;right:var(--gut,64px);bottom:4%;margin:0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s,transform .35s,visibility 0s .35s}
.cx-pf.is-listen .cx-pf-stage>.cx-pf-play{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .35s,visibility 0s}
@media (max-width:760px){.cx-pf-stage>.cx-pf-play{left:20px;right:auto;bottom:4%}}
html:not(.cx) .cx-pf-stage>.cx-pf-play{display:none}

/* Prima della prima nota: tre paragrafi nello stesso punto, uno alla volta */
.cx-pf-intro::before{content:'';position:absolute;inset:-80px -160px -80px -90px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(5,5,7,.8),rgba(5,5,7,0))}
.cx-pf-pre{display:grid;margin-top:clamp(18px,2.6vh,30px);max-width:540px}
.cx-pf-pre p{grid-area:1/1;margin:0;font-size:16px;line-height:1.65;color:rgba(246,245,241,.82);opacity:0;visibility:hidden}
@media (max-width:760px){.cx-pf-pre p{font-size:14.5px;line-height:1.55}.cx-pf-intro{bottom:10%}}
html:not(.cx) .cx-pf-pre{display:block}
html:not(.cx) .cx-pf-pre p{opacity:1;visibility:visible;margin:0 0 14px}