/* 元の水景を背景に保ち、読み込み後だけ水中の描画へ切り替える。 */
.water-surface { position: absolute; inset: 0; z-index: -1; background: url('/assets/water.webp') center / cover; opacity: .86; transition: opacity 1.4s var(--ease); }
/* 水面をなぞって魚と遊びながら、二本指での拡大はブラウザーに任せる。 */
#water { display: block; width: 100%; height: 100%; visibility: hidden; touch-action: pinch-zoom; }
/* 表題の揺れは水面の屈折と一緒に描画し、文字だけが上に浮いて見える動きを避ける。 */
.portal { position: absolute; padding: 14px 10px; min-width: 48px; min-height: 48px; font-size: 14px; letter-spacing: .14em; text-align: left; white-space: nowrap; }
/* 押せる入口の反応は短く小さくし、水面より強く目を引かないようにする。 */
.portal span { display: inline-block; border-bottom: 1px solid var(--line); padding-bottom: 7px; transition: transform .24s var(--ease), color .24s; }
.portal:hover span, .portal[aria-expanded='true'] span { transform: translateY(-2px); color: #314943; }
/* 制作物の存在だけを入口に添え、詳しい説明は開いた水面にまとめる。 */
.portal-preview { display: block; margin-top: 8px; font-size: 11px; line-height: 1.7; letter-spacing: .04em; color: var(--quiet); }
.portal i { position: absolute; display: block; width: 5px; height: 5px; border: 1px solid #687573; border-radius: 50%; }
.portal i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; border: 1px solid #86989166; border-radius: 50%; transform: translate(-50%, -50%); transition: transform .26s var(--ease); }
.portal:hover i::after, .portal:focus-visible i::after { transform: translate(-50%, -50%) scale(1.5); }
.portal::after { content: ''; position: absolute; height: 1px; background: var(--line); transform-origin: left center; pointer-events: none; }
/* ウェブの入口を左側へ寄せ、右側の音と工房についてとの間に余白を作る。 */
.portal-web { left: 24%; top: 17.8%; }
/* 名前の下を線が横切らないよう、ウェブの装飾は作品名の右から伸ばす。 */
.portal-web::after { width: 62px; left: 123px; top: 50px; transform: rotate(37deg); }
.portal-web i { left: 173px; top: 87px; }
/* 中間の画面幅でも長い入口名が欠けないよう、右端に必要な余白を残す。 */
.portal-sound { left: min(84%, calc(100% - 144px)); top: 42%; }
.portal-sound::after { width: 73px; left: 12px; top: 52px; transform: rotate(141deg); }
.portal-sound i { left: -48px; top: 96px; }
.portal-about { left: min(84%, calc(100% - 144px)); top: 75%; }
.portal-about::after { width: 58px; left: 12px; top: 48px; transform: rotate(144deg); }
.portal-about i { left: -39px; top: 80px; }