/* =========================================
   Art page
   - カーテン演出
   - 背景帯
   - 作品一覧
   - カルーセル（スマホフリック対応前提）
========================================= */

/* --- カーテン --- */
.curtain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  pointer-events: none;
}

.curtain-panel {
  flex: 1;
  background: #111;
  transition: transform 1.2s cubic-bezier(.8, 0, .2, 1);
  will-change: transform;
}

.curtain-overlay.open .curtain-panel.left {
  transform: translateX(-100vw);
}

.curtain-overlay.open .curtain-panel.right {
  transform: translateX(100vw);
}

/* --- ページ固有のトップバー変数 --- */
:root {
  --topbar-height: 54px;
  --topbar-blur: 4px;
  --topbar-bg: rgba(255, 255, 255, 0.35);

  /* Art / Product 共通カルーセルサイズ */
  --work-carousel-width-desktop: min(50vw, 900px);
  --work-carousel-width-mobile: calc(100vw - 16px);
  --work-carousel-ratio-desktop: 5 / 4;
  --work-carousel-ratio-mobile: 4 / 3;
}

/* --- ベース --- */
body {
  margin: 0;
  background: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

.bg-image {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../images/art/art_main.webp') center center / cover no-repeat;
  height: 100vh;
  transition: height 1s cubic-bezier(.77, 0, .25, 1), box-shadow .5s;
  box-shadow: none;
}

/* bg-image.fixed の高さ変更は style.css 側を利用 */

/* --- 初期メニュー --- */
.art-menu .menu-item {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.art-menu  {
  opacity: .95;
  border-bottom: 2px solid rgba(255, 255, 255, .65);
}

/* --- メインコンテンツ領域 --- */
.art_main-area {
  position: fixed;
  left: 0;
  right: 0;
  top: 100vh;
  bottom: 0;
  z-index: 20;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: top 1s cubic-bezier(.7, .1, .3, 1), opacity .6s;
  background: none;
}

.art_main-area.show {
  opacity: 1;
  pointer-events: auto;
}

.grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 12px 60px;
}

.art-main {
  width: 100%;
}

.art-list {
  width: 100%;
}

/* --- タイポ --- */
.art-title {
  text-align: center;
  font-size: var(--work-h1-size, 1.2rem);
  letter-spacing: var(--work-h1-letter, 0);
  font-weight: 600;
  margin: 10px 0 30px;
}

.art-item {
  margin-bottom: 18%;
}

.art-item h2 {
  text-align: center;
  font-size: var(--work-h2-size, 1.02rem);
  letter-spacing: var(--work-h2-letter, 0);
  font-weight: 600;
  margin: 0.5em 0;
}

.art-desc {
  font-size: .9rem;
  letter-spacing: .08em;
  line-height: 1.65;
  opacity: .78;
  text-align: center;
  margin: 10px 0 0;
}

/* --- カルーセル --- */
.art-carousel {
  position: relative;
  width: var(--work-carousel-width-desktop);
  margin: 0 auto 16px;
  overflow: hidden;
}

.art-carousel-track {
  display: flex;
  width: 100%;
  aspect-ratio: var(--work-carousel-ratio-desktop);
  transition: transform .4s ease;
  touch-action: pan-y;
}

.art-carousel-track picture {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
}

.art-carousel-track picture img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: var(--work-carousel-ratio-desktop);
  object-fit: cover;
  background: #23201c;
}

/* --- 矢印 --- */
.art-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: none;
  border: none;
  padding: 0;
  font-size: 2rem;
  line-height: 1;
  color: #a38c54;
  cursor: pointer;
}

.art-carousel-prev {
  left: 10px;
}

.art-carousel-next {
  right: 10px;
}

/* --- プレースホルダー / 画像一般 --- */
.grid img:not([src]),
.grid img[src=""] {
  background: repeating-linear-gradient(135deg, #2d2a25 0 16px, #39342d 16px 32px);
  border: 2.2px dashed #8a7f61;
  box-shadow: 0 0 0 1.7px #fff3 inset;
  min-height: 60px;
}

/* --- スマホ最適化 --- */
@media (max-width: 1023px) and (orientation: portrait) {
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .grid {
    padding: 18px 8px 48px;
  }

  .art-item {
    margin-bottom: 26%;
  }

  .art-carousel {
    width: var(--work-carousel-width-mobile);
    margin: 0 auto 12px;
  }

  .art-carousel-track {
    width: 100%;
    aspect-ratio: var(--work-carousel-ratio-mobile);
    transition: transform .35s ease;
  }

  .art-carousel-track picture {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .art-carousel-track picture img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--work-carousel-ratio-mobile);
    object-fit: cover;
    background: #23201c;
  }

  .art-carousel-btn {
    font-size: 1.5rem;
  }

  .art-carousel-prev {
    left: 6px;
  }

  .art-carousel-next {
    right: 6px;
  }
}
/* =========================
   ART entrance - open button
========================= */
.art-menu .open-btn {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  display: inline-block;
  z-index: 30;
  border: 1.5px solid white;   /* 全方向の枠 */
  padding: 12px 24px;

  color: white;
  font-size: 25px;
  line-height: 1;

  letter-spacing: 0.5em;
  text-indent: 0.5em;


  
  background: transparent;
}

@media (max-width:768px){

.open-btn{
  top:68%;                 /* 少し下に */

  min-width:140px;         /* タップしやすい */
  min-height:46px;

  padding:14px 32px;

  font-size:1rem;
  letter-spacing:0.32em;

  border:1px solid rgba(255,255,255,0.75);
}

}

/* =========================
   ART top fixed nav - mobile
========================= */


/* MOBILE NAV ADJUSTMENT */
@media (max-width:768px){

.art-menu.fixed,
.archive-menu.fixed,
.products-menu.fixed{
  min-height:60px;
  height: 7vh;
  padding:6px 20px;
  gap:8px;
}

.art-menu.fixed .menu-item,
.archive-menu.fixed .menu-item,
.products-menu.fixed .menu-item{
  min-height:60px;
  height: 7vh;
  padding:18px 18px;
  font-size:0.9rem;
  line-height:1;
  letter-spacing:0.04em;
  white-space:nowrap;
}

.art-menu.fixed img,
.archive-menu.fixed img,
.products-menu.fixed img{
  min-height:40px;
  height:7vh;
  width:auto;
}

}