/* ==========================================================================
   THE SOUND（声がそこに。演奏の空間が目の前に。）
   写真に浮かぶ液体の球（SOUND / 11）。地は色みのない面（写真の色をそのまま見せる）。
   ========================================================================== */
.sound {
  position: relative; isolation: isolate; overflow: hidden; text-align: left; color: var(--ink);
  padding-block: 120px 128px;
  background: var(--surface);
}
.sound .sound-inner { width: min(1180px, calc(100% - 80px)); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: center; }
.sound .sound-copy { padding-block: 30px; }
.sound .eyebrow { font-size: 11px; letter-spacing: .2em; color: var(--accent-strong); margin-bottom: 28px; }
.sound .display { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.5; letter-spacing: -.03em; color: var(--ink); }
.sound .accent { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sound .heading-end-adjust { display: none; }
.sound .lead { font-size: 16px; line-height: 1.85; margin-top: 30px; color: var(--muted); max-width: 440px; }
.sound .desktop-break { display: none; }
.sound .sound-caption { padding: 0; margin-top: 26px; font-size: 13px; color: var(--muted); }
.sound .sound-caption:empty { display: none; }

.sound-scene { margin: 0; min-width: 0; }
.sound-scene-image {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-l);
  background: var(--surface-2); box-shadow: var(--shadow-float);
}
.sound-scene-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sound-scene-image canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sound-scene figcaption:empty { display: none; }

/* 一時停止（WCAG 2.2.2）：写真の角の、控えめなガラスのボタン */
.sound-pause {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 38px; height: 38px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5); background: rgba(250, 250, 248, .28); color: #fff;
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  display: grid; place-items: center; opacity: .8; transition: opacity .35s, background .3s, transform .4s var(--ease);
}
.sound-pause[hidden] { display: none; }
.sound-pause:hover, .sound-pause:focus-visible { opacity: 1; background: rgba(30, 36, 35, .32); }
.sound-pause:active { transform: scale(.94); }
.sound-pause::before { content: ""; width: 10px; height: 12px; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px); }
.sound-pause[data-state="paused"]::before { width: 0; height: 0; margin-left: 3px; background: none; border-style: solid; border-width: 6.5px 0 6.5px 11px; border-color: transparent transparent transparent currentColor; }

@media (max-width: 1000px) {
  .sound .sound-inner { width: calc(100% - 64px); gap: 40px; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
  .sound .display { font-size: 30px; }
  .sound .lead { font-size: 14px; }
}
@media (max-width: 760px) {
  .sound { padding-block: 72px 64px; }
  .sound .sound-inner { width: calc(100% - 40px); display: flex; flex-direction: column; align-items: stretch; gap: 30px; }
  .sound .sound-copy { padding: 0; }
  .sound .eyebrow { margin-bottom: 18px; }
  .sound .display { font-size: clamp(27px, 7.5vw, 43px); line-height: 1.45; }
  .sound .lead { font-size: 14px; margin-top: 21px; max-width: 100%; }
  .sound-scene { width: min(540px, 100%); align-self: center; }
  .sound-scene-image { border-radius: var(--radius-m); }
  .sound-pause { right: 10px; bottom: 10px; }
}
@media print { .sound { background: #fff; } .sound-scene-image canvas, .sound-pause { display: none; } }

/* 写真の面が、近づくにつれて起き上がる */
.sound-inner { perspective: 1600px; }
html[data-motion="on"] .sound-scene { transform-origin: 50% 100%; rotate: 1 0 0 calc(var(--vp, 0) * 8deg); translate: 0 calc(var(--vp, 0) * 36px); }