/* Front gallery (museum wall)
--------------------------------------------- */
.front-gallery {
  position: relative;
  padding: clamp(96px, 12vw, 180px) 0 clamp(80px, 10vw, 150px);
  background: #ffffff;
  color: #1a1a1a;
  overflow: hidden;
}

.front-gallery__inner {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

/* motifs: faint monochrome pattern scattered on the wall */
.front-gallery__motifs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.front-gallery__motif {
  position: absolute;
  display: block;
  width: var(--motif-size, 520px);
  height: auto;
  opacity: var(--motif-opacity, 0.045);
  transform: rotate(var(--motif-rotate, 0deg));
  filter: grayscale(1);
  user-select: none;
  /* ゆっくり回転（1周 2〜4分）。--motif-spin で周期、--motif-dir で向き */
  animation: frontGalleryMotifSpin var(--motif-spin, 180s) linear infinite;
  animation-direction: var(--motif-dir, normal);
  will-change: transform;
}

@keyframes frontGalleryMotifSpin {
  from { transform: rotate(var(--motif-rotate, 0deg)); }
  to   { transform: rotate(calc(var(--motif-rotate, 0deg) + 360deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .front-gallery__motif { animation: none; }
}

.front-gallery__motif--1 { --motif-spin: 220s; --motif-dir: normal;  --motif-size: 640px; --motif-opacity: 0.05; --motif-rotate: -8deg;  top: -140px; left: -180px; }
.front-gallery__motif--2 { --motif-spin: 150s; --motif-dir: reverse; --motif-size: 420px; --motif-opacity: 0.04;  --motif-rotate: 14deg;  top: 12%;    right: -120px; }
.front-gallery__motif--3 { --motif-spin: 120s; --motif-dir: normal;  --motif-size: 300px; --motif-opacity: 0.035; --motif-rotate: 0deg;   top: 38%;    left: 6%; }
.front-gallery__motif--4 { --motif-spin: 190s; --motif-dir: reverse; --motif-size: 560px; --motif-opacity: 0.045; --motif-rotate: 22deg;  top: 52%;    right: 10%; }
.front-gallery__motif--5 { --motif-spin: 140s; --motif-dir: normal;  --motif-size: 360px; --motif-opacity: 0.035; --motif-rotate: -18deg; bottom: 10%; left: 28%; }
.front-gallery__motif--6 { --motif-spin: 240s; --motif-dir: reverse; --motif-size: 700px; --motif-opacity: 0.045; --motif-rotate: 6deg;   bottom: -260px; right: -220px; }

@media (max-width: 767px) {
  .front-gallery__motif--1 { --motif-size: 380px; top: -100px; left: -140px; }
  .front-gallery__motif--2 { --motif-size: 260px; right: -90px; }
  .front-gallery__motif--3 { display: none; }
  .front-gallery__motif--4 { --motif-size: 320px; right: -80px; }
  .front-gallery__motif--5 { display: none; }
  .front-gallery__motif--6 { --motif-size: 420px; bottom: -160px; right: -160px; }
}

/* intro */
.front-gallery__intro {
  max-width: 520px;
  margin-bottom: clamp(56px, 8vw, 120px);
}

.front-gallery__label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: rgba(26, 26, 26, 0.56);
}

.front-gallery__heading {
  margin: 0 0 18px;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #1a1a1a;
}

.front-gallery__text {
  margin: 0;
  font-size: 13px;
  line-height: 2.1;
  color: rgba(26, 26, 26, 0.72);
}

/* wall: 12-col grid, each work placed like on a museum wall */
.front-gallery__wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2.4vw, 32px);
  row-gap: clamp(64px, 9vw, 140px);
  align-items: start;
}

.front-gallery__item {
  margin: 0;
  min-width: 0;
}

.front-gallery__item--1 { grid-column: 1 / span 7; }
.front-gallery__item--2 { grid-column: 9 / span 4; margin-top: clamp(80px, 14vw, 220px); }
.front-gallery__item--3 { grid-column: 3 / span 5; margin-top: clamp(-40px, -3vw, -20px); }
.front-gallery__item--4 { grid-column: 8 / span 5; margin-top: clamp(60px, 10vw, 160px); }

/* frame: white mat + hairline + soft wall shadow */
.front-gallery__frame {
  position: relative;
  padding: clamp(10px, 1.4vw, 18px);
  background: #ffffff;
  border: 1px solid rgba(26, 26, 26, 0.08);
  box-shadow:
    0 1px 0 rgba(26, 26, 26, 0.04),
    0 24px 48px -28px rgba(26, 26, 26, 0.35),
    0 40px 80px -40px rgba(26, 26, 26, 0.18);
}

.front-gallery__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* plate: museum wall label */
.front-gallery__plate {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 18px 0 0 2px;
  padding-left: 12px;
  border-left: 1px solid rgba(26, 26, 26, 0.18);
}

.front-gallery__plate-title {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #1a1a1a;
}

.front-gallery__plate-caption {
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: rgba(26, 26, 26, 0.56);
}

/* reveal — 動きは js/front-gallery.js がスクロール量に連動して制御する */
.js-gallery-reveal {
  opacity: 0;
  transform: translate3d(0, 88px, 0);
  will-change: opacity, transform;
}

.js-gallery-reveal .front-gallery__frame img {
  opacity: 0.72;
  transform: scale(1.035);
  transform-origin: center center;
  will-change: opacity, transform, filter;
}

@media (prefers-reduced-motion: reduce) {
  .js-gallery-reveal,
  .js-gallery-reveal .front-gallery__frame img {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (max-width: 767px) {
  .front-gallery__wall {
    row-gap: 56px;
  }
  .front-gallery__item--1 { grid-column: 1 / span 10; }
  .front-gallery__item--2 { grid-column: 4 / span 9; margin-top: 0; }
  .front-gallery__item--3 { grid-column: 1 / span 9; margin-top: 0; }
  .front-gallery__item--4 { grid-column: 3 / span 10; margin-top: 0; }
}

/* =========================================================
   Gallery: unified frame proportions（2026-09-15）
   写真の縦横比がバラバラなので、額の比率を固定して object-fit で
   トリミング表示する。横位置は 4:3、2枠目（縦位置）は 3:4。
   ========================================================= */
.front-gallery__frame img {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center center;
}

.front-gallery__item--2 .front-gallery__frame img {
  aspect-ratio: 3 / 4;
}

/* 焦点の微調整：2枠目（緑の星の群れ）は中心やや上、3枠目（金箔の帯）は中央 */
.front-gallery__item--2 .front-gallery__frame img {
  object-position: 50% 45%;
}

@media (max-width: 767px) {
  .front-gallery__item--2 .front-gallery__frame img {
    aspect-ratio: 4 / 5;
  }
}

/* =========================================================
   Gallery: lower pair centered（2026-09-15）
   PCで下段2点が右に流れて見えるため、12カラムの中央（2〜6 / 7〜11）に
   左右対称に置き、段差も控えめにして「対」として読ませる。
   ========================================================= */
@media (min-width: 768px) {
  .front-gallery__item--3 {
    grid-column: 2 / span 5;
    margin-top: 0;
  }
  .front-gallery__item--4 {
    grid-column: 7 / span 5;
    margin-top: clamp(48px, 7vw, 110px);
  }
}

/* =========================================================
   Gallery: even rhythm（2026-09-15）
   下段右の下げ幅を最小限にし、上段右の下げ幅も少し詰めて
   4点の段差を均等に近づける。
   ========================================================= */
@media (min-width: 768px) {
  .front-gallery__item--2 {
    margin-top: clamp(64px, 10vw, 150px);
  }
  .front-gallery__item--4 {
    margin-top: clamp(20px, 3vw, 44px);
  }
}

/* =========================================================
   Gallery: lift lower-left（2026-09-15）
   下段左（金箔）を上段右の額のすぐ下まで引き上げ、
   右→左→右と視線が斜めに落ちる並びにする。
   ========================================================= */
@media (min-width: 768px) {
  .front-gallery__item--3 {
    margin-top: clamp(-140px, -7vw, -80px);
  }
}

/* =========================================================
   Motifs: drifting（2026-09-16）
   JSが .front-gallery__motifs に .is-drifting を付けると、
   各模様はランダムな位置に「フェードイン → 回転しながら滞在 → フェードアウト」を繰り返す。
   JSなし／reduced-motion のときは従来の固定配置のまま。
   ========================================================= */
.front-gallery__motifs.is-drifting .front-gallery__motif {
  top: auto;
  right: auto;
  bottom: auto;
  left: 0;
  opacity: 0;
  transition: opacity var(--motif-fade, 4s) ease-in-out;
}

.front-gallery__motifs.is-drifting .front-gallery__motif.is-on {
  opacity: var(--motif-opacity, 0.045);
}