/* =============================================================
   MOTO KOHEI — Home（没入型の展示）
   index.html 専用。js/home.js と対で動く。最初の画面（360° 展示室）は css/room.css。
     1  Header（下スクロールで隠れる）
     2  Scene 1 — Enter（壁の1枚に歩み寄り、絵の中へ → ステートメント）
     3  Scene 2 — Surface（絵肌を光で照らす）
     4  News / Index
     5  Responsive / reduced motion
   方針：作品そのものは歪めない。演出は「光」と「距離」だけ。
   [data-armed] は home.js が付ける。付いていない時（JS 無効・「視差効果を減らす」設定）は
   演出なしの静かな縦並びで表示される。
   ============================================================= */

.home {
  --wall:   #0d0c0b;
  --lamp:   255, 238, 214;          /* 照明の色（暖色の白） */
  --grain:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- 1. Header：隠す・出す動きは style.css（全ページ共通） */

/* ---------- 2. Scene 1 — Enter ------------------------------ */
.enter {
  position: relative;
  z-index: 2;
  background: #0a0a0a;
}
.enter-pin {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(120px, 18vh, 170px) var(--gutter) clamp(80px, 12vh, 140px);
}

/* 壁：天井の照明が壁を照らす（ウォールウォッシュ）＋ ごく薄い粒子 */
.enter-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 46% at 50% 40%, rgba(var(--lamp), .11), rgba(var(--lamp), .035) 55%, transparent 76%),
    radial-gradient(16% 11% at 50% 0%, rgba(var(--lamp), .16), transparent 70%),
    linear-gradient(#0f0e0d, #0b0a0a 70%, #080808);
}
.enter-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .07;
  pointer-events: none;
}

.enter-art {
  position: relative;
  z-index: 1;
  width: min(84vw, calc(56svh * 1.278));
  aspect-ratio: 1.278;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.95), 0 4px 12px rgba(0,0,0,.5);
  transform-origin: 50% 50%;
}
.enter-art img { width: 100%; height: 100%; object-fit: cover; }

.enter-shade { display: none; }
.enter .hero-petals { z-index: 3; }

.enter-statement {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: clamp(90px, 16vh, 180px);
}
.enter-statement .u-label { color: var(--ink-dim); }
.enter-vert {
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: clamp(26px, 4vh, 44px) 0 clamp(10px, 2vh, 20px);
  font-family: var(--mincho);
  font-weight: 400;
  flex-shrink: 0;          /* 縦書きの列が縮められて途中で折り返さないように */
  /* 1文＝1列に収まる大きさ（最長の1文が21字＝約24em。高さの 60% に収める） */
  font-size: min(clamp(18px, 2.6vw, 32px), calc(60svh / 24.2));
  line-height: 2;
  letter-spacing: .14em;
  color: var(--ink);
  text-shadow: 0 0 28px rgba(0,0,0,.65);
}
.enter-vert p + p { margin-block-start: .5em; }
.enter-vert em { font-style: normal; }
.enter-vert .accent {
  text-emphasis: filled dot var(--ink-soft);
  -webkit-text-emphasis: filled dot var(--ink-soft);
  text-emphasis-position: left;
  -webkit-text-emphasis-position: left;
}
.enter-en { margin: clamp(26px, 4vh, 44px) 0 0; max-width: 900px; }
.enter-en p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 3.2vw, 42px);
  line-height: 1.5;
  color: var(--ink-soft);
  text-shadow: 0 0 28px rgba(0,0,0,.65);
}
.enter-en em { color: var(--ink); }
.enter-sign {
  margin-top: clamp(22px, 3.4vh, 36px);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--ink-dim);
}
.enter-anchor { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* ---- 演出あり（home.js が data-armed を付けた時） ---- */
.enter[data-armed] { height: 360vh; }
.enter[data-armed] .enter-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding: 0;
  display: block;
}
.enter[data-armed] .enter-art {
  position: absolute;
  left: 50%; top: 50%;
  width: auto;           /* 実寸は home.js が「画面を覆うサイズ」で指定し、縮小して壁に掛ける */
  aspect-ratio: auto;
  will-change: transform;
  opacity: 0;
}
.enter[data-armed] .enter-shade {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(75% 75% at 50% 50%, rgba(6,6,6,.62), rgba(6,6,6,.94));
  opacity: 0;
  pointer-events: none;
}
.enter[data-armed] .enter-statement {
  position: absolute;
  inset: 0;
  margin: 0;
  justify-content: center;
  padding: 64px var(--gutter) 36px;
  pointer-events: none;
}
.enter[data-armed] [data-at] { opacity: 0; will-change: opacity, transform; }
.enter[data-armed] .enter-anchor { top: calc((100% - 100svh) * .9 + 84px); }

/* ---------- 3. Scene 2 — Surface ---------------------------- */
.surface {
  --r: clamp(170px, 26vmax, 400px);
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #050505;
}
.surface-media { position: absolute; inset: -4%; will-change: transform; }
.surface-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.12) saturate(1.06);
}
.surface-dark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(62% 62% at 60% 55%, rgba(5,5,5,.15), rgba(5,5,5,.88) 80%);
}
.surface[data-armed] .surface-dark {
  inset: auto;
  left: 0; top: 0;
  width: 300vmax; height: 300vmax;
  margin: -150vmax 0 0 -150vmax;
  background: radial-gradient(circle at 50% 50%,
    rgba(5,5,5,0) 0,
    rgba(5,5,5,.06) calc(var(--r) * .32),
    rgba(5,5,5,.7) calc(var(--r) * .74),
    #050505 var(--r));
  will-change: transform;
}
.surface[data-armed] .surface-dark::before {   /* 光のぬくもり */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--r) * 1.1);
  height: calc(var(--r) * 1.1);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,214,170,.09), transparent);
}
.surface-copy {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  top: clamp(96px, 15vh, 160px);
  max-width: 440px;
  pointer-events: none;
}
.surface-copy .u-label { display: block; margin-bottom: 22px; }
.surface-title {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(42px, 5.4vw, 84px);
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 30px rgba(0,0,0,.8);
}
.surface-title .lang-ja, .surface-title .lang-zh { font-family: var(--mincho); font-style: normal; font-size: .3em; letter-spacing: .3em; color: var(--ink-soft); }
.surface-text {
  margin-top: 22px;
  font-family: var(--mincho);
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 2.2;
  letter-spacing: .08em;
  color: var(--ink-soft);
  text-shadow: 0 0 20px rgba(0,0,0,.9);
}
.surface-text .lang-en { font-family: var(--serif); font-size: 1.15em; letter-spacing: .01em; }
.surface-cap {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: 26px;
  font-size: 10px;
  color: var(--ink-faint);
}

/* ---------- 3b. Originals（販売中の作品）-------------------- */
.home-shop { position: relative; z-index: 2; }
.home-shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

/* ---------- 4. News / Index -------------------------------- */
.news { position: relative; z-index: 2; }
.news-h {
  margin-bottom: clamp(22px, 3vw, 36px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 48px);
  color: var(--ink);
}

/* ほかのページへの入口：大きな1語だけ。マウスを乗せると、そのページの写真がふわりと浮かぶ */
.index {
  position: relative;
  z-index: 2;
  padding: clamp(40px, 7vw, 100px) 0 clamp(80px, 12vw, 160px);
}
.idx { display: flex; flex-direction: column; }
.idx-row {
  --mx: 0;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: clamp(10px, 1.4vw, 18px) 0;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-soft);
  transition: color .5s var(--ease);
}
.idx-row:last-child { border-bottom: 1px solid var(--line-soft); }
.idx-w {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: 1.05;
  letter-spacing: .005em;
  transition: transform .7s var(--ease);
}
.idx-n {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--ink-faint);
}
.idx-row img {
  position: absolute;
  z-index: 1;
  right: 12%;
  top: 50%;
  width: clamp(160px, 17vw, 260px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  opacity: 0;
  transform: translate(calc(var(--mx) * 90px), -50%) rotate(-2deg) scale(.94);
  transition: opacity .55s var(--ease), transform .7s var(--ease);
  pointer-events: none;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.9);
}
.idx-row:hover, .idx-row:focus-visible { color: var(--ink); }
.idx-row:hover .idx-w, .idx-row:focus-visible .idx-w { transform: translateX(14px); }
.idx-row:hover img, .idx-row:focus-visible img { opacity: 1; transform: translate(calc(var(--mx) * 90px), -50%) rotate(-2deg); }
@media (hover: none) {
  .idx-row { align-items: center; }
  .idx-row:hover .idx-w { transform: none; }
  .idx-row img, .idx-row:hover img, .idx-row:focus-visible img {   /* タップした時の :hover でも動かさない */
    position: static;
    margin-left: auto;
    width: 64px;
    aspect-ratio: 1;
    opacity: .85;
    transform: none;
    box-shadow: none;
  }
}

/* ---------- 5. Responsive / reduced motion ------------------ */
@media (max-width: 760px) {
  .enter[data-armed] { height: 330vh; }
  .enter-vert { font-size: min(5.2vw, 22px, calc(54svh / 24.2)); }
  .surface-copy { top: auto; bottom: 74px; right: var(--gutter); }
  .surface-cap { bottom: 22px; }
}