/* ただ一枚 — 静かな鑑賞のための画面
   作品を主役に、UIは徹底して引く。美術作品を尊重する設計。 */

:root {
  --wall:        #20231e;   /* 黒ではない、深いオリーブの壁 */
  --wall-edge:   #11140f;   /* 周縁の穏やかな翳り */
  --glow:        #343329;   /* 中央のやわらかな壁光 */
  --ink:         #f0e9da;   /* 温白色のテキスト */
  --ink-dim:     #aaa18f;   /* 控えめな副次テキスト */
  --accent:      #cab17d;   /* 額の真鍮を思わせる金 */
  --accent-soft: #ead49d;
  --frame-shadow: 0 28px 80px -24px rgba(4,7,4,.72), 0 8px 28px -10px rgba(0,0,0,.48);
  --ease: cubic-bezier(.22,.61,.36,1);
  --stage-left-base: clamp(18rem, 25vw, 26rem);
  --stage-left: var(--stage-left-fit, var(--stage-left-base));
  --stage-right: clamp(7rem, 10vw, 11rem);
  --stage-top: clamp(4.5rem, 8vh, 6.5rem);
  --stage-bottom: clamp(5.5rem, 10vh, 7rem);
  --art-title-size: clamp(1.55rem, 3.4vw, 2.7rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--wall);
  background-image: radial-gradient(125% 95% at 50% 38%, var(--glow) 0%, var(--wall) 46%, var(--wall-edge) 100%);
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 壁の微細なグレイン */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px;
}

/* ── 作品ステージ ───────────────────────────── */
#stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--stage-top) var(--stage-right) var(--stage-bottom) var(--stage-left);
  cursor: pointer;
  z-index: 2;
}

.art-frame {
  display: flex; align-items: center; justify-content: center;
  max-width: min(calc(100vw - var(--stage-left) - var(--stage-right)), 1400px);
  max-height: calc(100svh - var(--stage-top) - var(--stage-bottom));
}

#artwork {
  max-width: min(calc(100vw - var(--stage-left) - var(--stage-right)), 1400px);
  max-height: calc(100svh - var(--stage-top) - var(--stage-bottom));
  width: auto; height: auto;
  object-fit: contain;            /* 作品は決して切り抜かない */
  background: #11130f;
  box-shadow: var(--frame-shadow);
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}
#artwork.is-visible { opacity: 1; transform: none; }

/* ── キャプション ───────────────────────────── */
.caption {
  position: fixed;
  left: clamp(1.25rem, 4vw, 3.5rem);
  top: clamp(6rem, 15vh, 9.5rem);
  width: max(14rem, calc(var(--stage-left) - 4rem));
  max-width: calc(100vw - var(--stage-right) - 4rem);
  z-index: 4;
  opacity: 0;
  transition: opacity .55s var(--ease);
  padding-left: 1rem;
  border-left: 1px solid color-mix(in oklab, var(--accent) 38%, transparent);
  text-shadow: none;
  pointer-events: none;
}
.caption[hidden] { display: none; }
.caption > * { pointer-events: auto; }
.caption.is-visible { opacity: 1; }

.art-title {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-size: var(--art-title-size);
  line-height: 1.28;
  letter-spacing: .015em;
  white-space: nowrap;
}
.art-artist {
  margin-top: .65rem;
  font-size: clamp(.95rem, 1.6vw, 1.12rem);
  font-weight: 500;
  color: var(--accent-soft);
  letter-spacing: .05em;
}
.art-meta {
  margin-top: .4rem;
  display: flex; gap: .85rem; flex-wrap: wrap;
  font-size: .85rem;
  color: var(--ink-dim);
  letter-spacing: .05em;
}
.art-meta span:empty { display: none; }
.art-source {
  display: inline-block;
  margin-top: 1rem;
  font-size: .8rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  padding-bottom: 1px;
  transition: color .25s, border-color .25s;
}
.art-source[hidden] { display: none; }
.art-source:hover, .art-source:focus-visible { color: var(--accent-soft); border-color: var(--accent-soft); }

/* キャプションの段階的な立ち上がり */
.caption.is-visible .art-title,
.caption.is-visible .art-artist,
.caption.is-visible .art-meta,
.caption.is-visible .art-source { animation: rise .7s var(--ease) both; }
.caption.is-visible .art-artist { animation-delay: .08s; }
.caption.is-visible .art-meta   { animation-delay: .16s; }
.caption.is-visible .art-source { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── 作品移動 ───────────────────────────────── */
.controls {
  position: fixed;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(1.5rem, 5vh, 3rem);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.controls[hidden] { display: none; }

.nav-button {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: inherit; font-size: .85rem; letter-spacing: .06em;
  color: var(--ink);
  background: color-mix(in oklab, var(--wall) 65%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  border-radius: 999px;
  padding: .72rem 1.15rem .72rem 1.3rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color .25s, border-color .25s, background .25s, transform .25s var(--ease);
}
.nav-button:disabled {
  cursor: default;
  color: color-mix(in oklab, var(--ink-dim) 58%, transparent);
  border-color: color-mix(in oklab, var(--ink) 12%, transparent);
  background: color-mix(in oklab, var(--wall) 42%, transparent);
}
.nav-button svg { transition: transform .3s var(--ease); }
.nav-button:not(:disabled):hover,
.nav-button:not(:disabled):focus-visible {
  color: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
}
.nav-button:not(:disabled):active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .nav-button--previous:not(:disabled):hover svg,
  .nav-button--previous:not(:disabled):focus-visible svg { transform: translateX(-4px); }
  .nav-button--next:not(:disabled):hover svg,
  .nav-button--next:not(:disabled):focus-visible svg { transform: translateX(4px); }
}

/* ── 常時クレジット（出典明示・規約遵守） ──────── */
.credit {
  position: fixed;
  top: clamp(1rem, 3vh, 1.85rem);
  left: clamp(1.25rem, 4vw, 3.5rem);
  z-index: 4;
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--ink-dim);
}
.credit a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.credit a:hover { color: var(--ink); border-color: color-mix(in oklab, var(--ink) 30%, transparent); }

/* ── ローダー ───────────────────────────────── */
.loader { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; z-index: 3; pointer-events: none; }
.loader.is-hidden { display: none; }
.loader span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .4; animation: pulse 1.1s var(--ease) infinite; }
.loader span:nth-child(2) { animation-delay: .18s; }
.loader span:nth-child(3) { animation-delay: .36s; }
@keyframes pulse { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-5px); } }

/* ── 空状態 ─────────────────────────────────── */
.empty { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; text-align: center; padding: 2rem; z-index: 6; }
.empty[hidden] { display: none; }
.empty p { font-family: "Zen Old Mincho", serif; font-size: 1.3rem; color: var(--ink); }
.empty .empty-sub { font-family: inherit; font-size: .85rem; color: var(--ink-dim); }
.empty code { font-family: ui-monospace, monospace; color: var(--accent-soft); }

/* ── アクセシビリティ補助 ───────────────────── */
.skip-link { position: fixed; left: -999px; top: 0; z-index: 20; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--wall); padding: .5rem .8rem; border-radius: 6px; }

@media (max-width: 640px) {
  .credit { font-size: .66rem; }
  .nav-button span { display: none; }
  .nav-button { padding: .72rem; }
}

@media (max-width: 900px) {
  :root {
    --stage-left-base: clamp(1rem, 4vw, 1.5rem);
    --stage-left-fit: var(--stage-left-base);
    --stage-right: clamp(1rem, 4vw, 1.5rem);
    --stage-top: clamp(4.5rem, 12svh, 5.75rem);
    --stage-bottom: clamp(11rem, 30svh, 14rem);
    --art-title-size: clamp(1.25rem, 5.6vw, 1.8rem);
  }

  .caption {
    top: auto;
    right: clamp(1rem, 4vw, 1.5rem);
    bottom: clamp(1rem, 3svh, 1.5rem);
    width: auto;
    max-width: none;
    padding-left: .85rem;
  }

  .art-title {
    line-height: 1.25;
    white-space: normal;
  }

  .art-artist { margin-top: .45rem; }
  .art-source { margin-top: .75rem; }

  .controls {
    top: clamp(1rem, 3svh, 1.35rem);
    bottom: auto;
  }

  .credit {
    max-width: calc(100vw - 9rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; }
  #artwork { transition: opacity .3s linear; transform: none !important; }
}