/* =============================================================
   MOTO KOHEI — Rotunda（360° 展示室）
   トップページ（index.html）の最初の画面。js/room-gl.js（WebGL）と js/room.js（CSS 版）と対。
   文字の案内は出さない。下の丸い見取り図・カーソルの形で、できることを伝える。
   JS が動かない環境では非表示（次の場面から始まる）。
   ============================================================= */
.rotunda {
  position: relative;
  z-index: 2;
  background: #050505;
}
.rotunda:not([data-armed]) { display: none; }

.rot-stage {
  --lamp: 255, 238, 214;
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y pinch-zoom; /* 縦スクロールはページへ、横ドラッグは見回しへ。2本指の拡大はブラウザに任せる */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  perspective-origin: 50% 50%;
  outline: none;
  background: linear-gradient(#060606, #0b0a0a 46%, #0b0a0a 54%, #070707);
}
.rot-stage:focus-visible { box-shadow: inset 0 0 0 1px var(--line-strong); }
.rot-stage.is-dragging { cursor: grabbing; }
.rot-stage::before {              /* CSS 版：左右の壁が闇に溶けていく */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, #080808, rgba(8,8,8,0) 18%, rgba(8,8,8,0) 82%, #080808);
}
/* 次の場面へ、境目なく暗転でつなぐ */
.rotunda::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14vh;
  z-index: 3;
  background: linear-gradient(rgba(10,10,10,0), #0a0a0a);
  pointer-events: none;
}

/* ---- CSS 版（WebGL2 が使えない端末）：壁を円周に並べる ---- */
.rot-room {
  position: absolute;
  left: 50%; top: 0;
  width: 0; height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.rot-panel {
  --lit: 0;
  position: absolute;
  top: calc(50% - var(--wh) / 2);
  left: calc(var(--w) / -2 - 1px);
  width: calc(var(--w) + 2px);
  height: var(--wh);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--wh) * .14);
  transform-style: preserve-3d;
  background: linear-gradient(#131211, #100f0e 70%, #0c0b0b);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.rot-panel::before {     /* 壁を照らす光 */
  content: "";
  position: absolute;
  left: -10%; right: -10%; top: 0; bottom: 6%;
  background: radial-gradient(48% 52% at 50% 40%, rgba(var(--lamp), .14), rgba(var(--lamp), .04) 60%, transparent 80%);
  opacity: var(--lit);
  pointer-events: none;
}
.rot-floor,
.rot-ceil {
  position: absolute;
  left: 0; right: 0;
  height: var(--depth);
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.rot-floor {
  top: 100%;
  transform-origin: top;
  transform: rotateX(90deg);
  clip-path: polygon(0 0, 100% 0, 62.5% 100%, 37.5% 100%);
  background:
    radial-gradient(30% 22% at 50% 0%, rgba(var(--lamp), .06), transparent 80%),
    linear-gradient(#141312, #0a0a09 45%, #070707);
}
.rot-ceil {
  bottom: 100%;
  transform-origin: bottom;
  transform: rotateX(-90deg);
  clip-path: polygon(37.5% 0, 62.5% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(to top, rgba(var(--lamp), .16), rgba(var(--lamp), .03) 3%, transparent 9%),
    linear-gradient(to top, #0d0c0b, #050505 60%);
}
.rot-work {
  position: relative;
  width: calc(var(--w) * .74);
  height: 54%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: inherit;
}
.rot-work img {
  max-width: calc(100% * var(--sz, 1));    /* 実寸の比率（js/room.js がいちばん大きい作品を 1 として入れる） */
  max-height: calc(100% * var(--sz, 1));
  width: auto;
  height: auto;
  box-shadow: 0 34px 56px -28px rgba(0,0,0,.95), 0 3px 10px rgba(0,0,0,.5);
  filter: brightness(calc(.4 + .6 * var(--lit)));
  pointer-events: none;
}
.rot-work:focus-visible { outline: 1px solid var(--ink-dim); outline-offset: 10px; }
.rot-label {
  position: relative;
  margin-top: calc(var(--wh) * .035);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: calc((var(--lit) - .45) * 2.2);
  pointer-events: none;
}
.rot-no { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; color: var(--ink-dim); }
.rot-title { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink); }

/* ---- WebGL 版（js/room-gl.js）：光の計算で描く展示室 ---- */
.rot-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rot-stage[data-gl] { background: #050505; }
.rot-stage[data-gl] .rot-room,
.rot-stage[data-gl]::before { display: none; }

/* ---- 見取り図（上から見た部屋。いま向いている方向が上） ----
   点＝作品（押すとその作品へ）、弧＝作家名の壁、扇形＝いま見えている範囲。輪を回すと向きが変わる */
.rot-ui {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(18px, 4.2vh, 42px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.rot-compass {
  width: 78px; height: 78px;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  opacity: 0;
  transform: scale(.9);
  transition: opacity 1.6s var(--ease) 2.6s, transform 1.6s var(--ease) 2.6s;
}
.rotunda[data-armed] .rot-compass { opacity: 1; transform: none; }
.rot-compass:active { cursor: grabbing; }
.rot-compass svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cp-ring  { fill: rgba(6,6,6,.42); stroke: rgba(255,255,255,.2); stroke-width: .8; }
.cp-title { fill: none; stroke: rgba(255,238,214,.8); stroke-width: 2.4; stroke-linecap: round; }
.cp-hit   { fill: transparent; cursor: pointer; }
.cp-pt    { fill: rgba(255,255,255,.38); transition: fill .4s var(--ease), transform .4s var(--ease); }
.cp-dot:hover .cp-pt { fill: rgba(255,255,255,.85); transform: scale(1.3); }
.cp-dot.is-on .cp-pt { fill: #fff; transform: scale(1.55); }
.cp-cone  { fill: rgba(255,238,214,.13); }
.cp-pos   { fill: rgba(255,238,214,.92); }

/* ---- カーソル（マウスの時だけ）：輪と左右の小さな矢印＝ドラッグで見回せる
        作品の上＝大きな輪（近づく）／近づいた作品の上＝「＋」（拡大） ---- */
.rot-stage.has-cursor,
.rot-stage.has-cursor.is-dragging { cursor: none; }
.rot-cursor {
  position: absolute;
  left: 0; top: 0;
  z-index: 5;
  width: 0; height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.rot-cursor.is-in { opacity: 1; }
.rot-cursor::before {
  content: "";
  position: absolute;
  left: -13px; top: -13px;
  width: 26px; height: 26px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  transition: transform .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
}
.rot-cursor::after {
  content: "";
  position: absolute;
  left: -25px; top: -5px;
  width: 50px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 10'><path d='M4 1.5 L0.8 5 L4 8.5 M46 1.5 L49.2 5 L46 8.5' fill='none' stroke='white' stroke-opacity='.62' stroke-width='1'/></svg>") no-repeat center / 100% 100%;
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.rot-cursor.is-art::before  { transform: scale(2.3); background-color: rgba(255,255,255,.05); border-color: rgba(255,255,255,.5); }
.rot-cursor.is-art::after   { opacity: 0; transform: scaleX(1.6); }
.rot-cursor.is-open::before { transform: scale(2.6); background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.55); }
.rot-cursor.is-open::after  {
  left: -7px; top: -7px; width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M7 0 V14 M0 7 H14' stroke='white' stroke-opacity='.85' stroke-width='1'/></svg>");
}
.rot-cursor.is-back::before { transform: scale(.7); }
.rot-stage.is-dragging .rot-cursor::before { transform: scale(1.2, .82); }

/* 下へ続くことを示す細い線（文字は出さない） */
.hall-cue {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  bottom: clamp(22px, 4.4vh, 46px);
  width: 1px; height: 54px;
  overflow: hidden;
  background: linear-gradient(rgba(255,255,255,.2), transparent);
  opacity: 0;
  transition: opacity 1.6s var(--ease) 3.4s;
}
.rotunda[data-armed] .hall-cue { opacity: 1; }
.hall-cue::after {
  content: "";
  position: absolute;
  top: -50%; left: 0;
  width: 100%; height: 50%;
  background: var(--ink);
  animation: cueSlide 2.4s var(--ease) infinite;
}

@media (max-width: 760px) {
  .rot-compass { width: 66px; height: 66px; }
    .hall-cue { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hall-cue::after { animation: none; }
  .rot-compass, .hall-cue { transition: none; }
}

/* 見取り図が空の時（CSS 版）は、見えない箱がスクロールを止めないように消す */
.rot-compass:empty { display: none; }
/* 横向きのスマホ：部屋の高さを画面に収める（下の見取り図が画面の外に出ないように） */
@media (orientation: landscape) and (max-height: 520px) {
  .rot-stage { min-height: 0; }
}