/* ==========================================================================
   CEAR LINK（1台で／3台で／もっと広く）
   3枚の写真を1つの空間として横に並べ、切り替えるとカメラが横へ移動する。
   調整の目安：--link-duration（移動の時間）／--link-parallax（写真の中の奥行き）
   ========================================================================== */
.connection { --link-duration: 1.4s; --link-parallax: 7%; text-align: center; background: var(--paper); padding-block: clamp(40px, 5vh, 56px); }
.connection .eyebrow { color: var(--accent-strong); }
.connection .eyebrow { margin-bottom: 12px; }
.connection .display { font-size: clamp(32px, 3.3vw, 46px); }
.connection .section-intro { margin-top: 18px; font-size: 17px; }
.link-stage { max-width: 960px; margin-top: 24px; }
.link-viewport { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--studio); height: clamp(220px, 30vh, 290px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.link-track { --index: 0; display: flex; width: 300%; height: 100%; transform: translate3d(calc(var(--index) * -100% / 3), 0, 0); }
.link-track[data-index="0"] { --index: 0; }
.link-track[data-index="1"] { --index: 1; }
.link-track[data-index="2"] { --index: 2; }
.link-frame { position: relative; flex: 0 0 calc(100% / 3); height: 100%; overflow: hidden; }
.link-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 両端をスタジオの色へなじませ、3枚が続いた1つの空間に見えるように */
.link-viewport::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--studio) 0%, transparent 9%, transparent 91%, var(--studio) 100%); }
.link-control-area { position: relative; padding-top: 18px; }
.link-options { display: inline-flex; padding: 5px; gap: 3px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.link-option { border: 0; border-radius: 99px; padding: 10px 24px; min-height: 44px; background: transparent; font-size: 15px; font-weight: 500; color: var(--muted); transition: color .3s, background .45s var(--ease), box-shadow .45s var(--ease); }
.link-option:hover { color: var(--ink); }
.link-option[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-chip); }
.link-caption { margin-top: 10px; font-size: 16px; font-weight: 550; color: var(--ink); }

 .connection .fine-print { margin-top: 10px; }
.connection .text-link { margin-top: 14px; }

@media (max-width: 700px) {
  .connection .display { font-size: 30px; }
  .connection .section-intro { font-size: 16px; }
  .link-stage { margin-top: 20px; }
  .link-viewport { height: auto; aspect-ratio: 2 / 1; border-radius: var(--radius-l); }
  .link-option { padding: 11px 18px; font-size: 14px; }
  .link-caption { font-size: 15px; line-height: 1.7; padding-inline: 12px; }
}

/* ---------- 動き：同じ空間を、カメラが横へ ---------- */
html[data-motion="on"] .link-track { transition: transform var(--link-duration) var(--ease-camera); }
/* 写真の中身は枠より少し遅れて動き、カメラの移動に奥行きが出る */
html[data-motion="on"] .link-frame img { transform: translate3d(calc((var(--index) - var(--i)) * var(--link-parallax)), 0, 0) scale(1.08); transition: transform var(--link-duration) var(--ease-camera); }
html[data-motion="on"] .link-track[data-moving] .link-frame img { filter: blur(.6px); }

@media (min-width: 701px) and (max-height: 780px) {
  .connection { padding-block: 16px 24px; }
  .connection .eyebrow { margin-bottom: 10px; }
  .connection .display { font-size: 36px; }
  .connection .section-intro { margin-top: 10px; font-size: 16px; }
  .link-stage { margin-top: 12px; }
  .link-viewport { height: 200px; }
  .link-control-area { padding-top: 12px; }
}