.pinata-experience{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:clamp(32px,6vw,96px);padding-block:52px 64px;border-bottom:1px solid var(--line)}
.pinata-copy{max-width:470px}
.pinata-copy h2{max-width:15ch;text-wrap:balance}
.pinata-intro{margin-top:24px;font-size:20px;line-height:1.65}
.pinata-controls{margin-top:28px}
.pinata-controls>p:first-child{max-width:34ch;margin-bottom:18px}
.pinata-play{min-width:230px}
.pinata-play[aria-disabled="true"]{opacity:.7;cursor:wait}
.pinata-status{min-height:3.2em;margin-top:14px;font-size:15px;max-width:38ch}
.pinata-copy>.text-link{margin-top:12px}
.pinata-figure{min-width:0;margin:0}
.pinata-stage{position:relative;isolation:isolate;aspect-ratio:1;width:100%;max-width:660px;margin-inline:auto;scroll-margin-top:24px}
.pinata-art,.pinata-stage picture,.pinata-crack{position:absolute;inset:0;display:block;width:100%;height:100%}
.pinata-stage img{display:block;width:100%;height:100%;object-fit:contain}
.pinata-shell-left{clip-path:polygon(0 0,55% 0,55% 25.5%,53.2% 32.3%,56.1% 36.9%,50.5% 41.4%,52.5% 47.1%,48.3% 51.9%,50.9% 57.6%,49.3% 64.2%,49.3% 100%,0 100%)}
.pinata-shell-right{clip-path:polygon(55% 0,100% 0,100% 100%,49.3% 100%,49.3% 64.2%,50.9% 57.6%,48.3% 51.9%,52.5% 47.1%,50.5% 41.4%,56.1% 36.9%,53.2% 32.3%,55% 25.5%)}
.pinata-open,.pinata-crack{opacity:0}
.pinata-experience[data-state="ready"] .pinata-shell-left{clip-path:none}
.pinata-experience[data-state="ready"] .pinata-shell-right{opacity:0}
.pinata-crack path{stroke:var(--cocoa);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.pinata-stage .pinata-mallet{inset:11% auto auto 51%;width:37%;height:37%;transform-origin:50% 88%;transform:rotate(30deg);pointer-events:none}
.pinata-figure figcaption{max-width:48ch;margin:8px auto 0;text-align:center;font-size:14px;line-height:1.6}
.pinata-experience[data-state="opened"] .pinata-shell,.pinata-experience[data-state="opened"] .pinata-crack{opacity:0}
.pinata-experience[data-state="opened"] .pinata-open{opacity:1}
.pinata-experience[data-state="opened"] .pinata-mallet{opacity:.45;transform:translate(10%,8%) rotate(55deg)}
@media(max-width:760px){
  .pinata-experience{grid-template-columns:1fr;gap:16px;padding-block:44px 48px}
  .pinata-copy{display:contents}
  .pinata-copy h2{grid-row:1;max-width:16ch}
  .pinata-intro{grid-row:2;font-size:18px;margin-top:0}
  .pinata-figure{grid-row:3}
  .pinata-stage{max-width:480px}
  .pinata-controls{grid-row:4;margin-top:16px}
  .pinata-copy>.text-link{grid-row:5;justify-self:start;margin-top:0}
  .pinata-status{min-height:1.6em}
}
@media(prefers-reduced-motion:reduce){
  .pinata-experience[data-state="opened"] .pinata-mallet{transform:rotate(30deg)}
}