/* ═══════════════════════════════════════════════════════
   Art Scroll Gallery + Upcycled Ecosystem Installation
   ═══════════════════════════════════════════════════════ */

/* ── Gallery Mode Toggle ─────────────────────────────── */
.art-mode-toggle {
  display: flex; align-items: center; gap: 4px;
  position: absolute; top: 0; right: 0;
}
.art-mode-btn {
  background: transparent; border: 1px solid var(--rule);
  border-radius: 4px; padding: 6px 8px; cursor: pointer;
  color: var(--ink-faint); transition: all 0.3s;
  display: flex; align-items: center; justify-content: center;
}
.art-mode-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.art-mode-btn.is-active { color: var(--ink); border-color: var(--ink); }
.art-mode-btn svg { width: 16px; height: 16px; }

/* ── Horizontal Scroll Gallery ───────────────────────── */
.asg-wrap {
  position: relative;
  margin-top: 48px;
}
.asg-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding: 0 var(--pad, 40px);
}
.asg-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-faint);
}
.asg-hint {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}

#art-scroll-gallery {
  overflow-x: auto; overflow-y: hidden;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 32px 0 48px;
  margin: 0 calc(-1 * var(--pad, 40px));
}
#art-scroll-gallery::-webkit-scrollbar { display: none; }
#art-scroll-gallery.asg-grabbing { cursor: grabbing; }

.asg-track {
  display: flex;
  align-items: stretch;          /* pieces fill the track height */
  gap: 32px;
  padding: 0 max(var(--pad, 40px), 5vw);
  min-height: 420px;
}

/* ── Category dividers ── */
.asg-cat-label {
  flex-shrink: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 16px 8px;
  border-right: 1px solid var(--rule);
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.asg-cat-spacer {
  flex-shrink: 0;
  width: 48px;
}
.asg-group-spacer {
  flex-shrink: 0;
  width: 24px;
}

/* ── Gallery Pieces ── */
.asg-piece {
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.35s ease;
  position: relative;
  /* Size the piece to its frame width and stack the caption below, centered.
     Without this, the 200px caption max-width drags the piece much wider
     than narrow scroll-v paintings, leaving the frame floating in empty
     space at the left edge.
     justify-content: center vertically centers the frame+caption pair within
     the stretched piece, so all frames line up at the same Y across the
     track regardless of caption length differences. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.asg-piece:hover { transform: translateY(-4px); }

.asg-gentleman { margin-right: -12px; }
.asg-gentleman:last-of-type { margin-right: 0; }

.asg-caption {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-dim);
  text-align: center;
  margin-top: 12px;
  opacity: 0;
  transition: opacity 0.3s;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}
/* Tighter caption on mobile so a long Chinese title doesn't drag the
   piece wider than its frame (especially for narrow scroll-v paintings). */
@media (max-width: 700px) {
  .asg-caption { max-width: 140px; font-size: 11px; line-height: 1.3; }
}
.asg-piece:hover .asg-caption { opacity: 1; }
/* Touch devices have no hover — show captions by default so users know what they're looking at. */
@media (hover: none) {
  .asg-caption { opacity: 1; }
}

/* ── Frame Styles ── */
.asg-frame {
  position: relative;
  background: #f0ebe1;
  padding: 6px;
  box-shadow:
    0 2px 8px rgba(20,18,14,0.08),
    0 8px 24px rgba(20,18,14,0.06),
    inset 0 0 0 1px rgba(20,18,14,0.08);
  border-radius: 2px;
  overflow: hidden;
  transition: box-shadow 0.35s;
}
.asg-piece:hover .asg-frame {
  box-shadow:
    0 4px 16px rgba(20,18,14,0.12),
    0 16px 48px rgba(20,18,14,0.1),
    inset 0 0 0 1px rgba(20,18,14,0.1);
}

.asg-frame img {
  display: block;
  object-fit: cover;
}

/* Vertical scroll painting */
.asg-frame-scroll-v { width: auto; }
.asg-frame-scroll-v img { height: 380px; width: auto; }

/* Portrait */
.asg-frame-portrait { width: auto; }
.asg-frame-portrait img { height: 360px; width: auto; }

/* Fan / Landscape */
.asg-frame-fan { width: auto; }
.asg-frame-fan img { height: 220px; width: auto; }

.asg-frame-landscape { width: auto; }
.asg-frame-landscape img { height: 200px; width: auto; }

/* ── Couplet Pair ── */
.asg-couplet-pair {
  display: flex;
  gap: 12px;
  align-items: center;
}
.asg-frame-couplet-l,
.asg-frame-couplet-r {
  position: relative;
  background: #1a1412;
  padding: 4px;
  box-shadow:
    0 2px 8px rgba(20,18,14,0.15),
    0 8px 24px rgba(20,18,14,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.asg-frame-couplet-l img,
.asg-frame-couplet-r img {
  display: block;
  height: 340px;
  width: auto;
}

/* ── Notebook (Pen Calligraphy) ── */
.asg-notebook {
  position: relative;
  width: 280px;
  height: 380px;
  perspective: 800px;
  cursor: pointer;
}
.asg-notebook-page {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  overflow: hidden;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s;
  transform-origin: left center;
  background: #f5f0e6;
  box-shadow: 2px 2px 12px rgba(20,18,14,0.1);
}
.asg-notebook-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.asg-nb-bottom { z-index: 1; }
.asg-nb-top {
  z-index: 2;
  transform: rotateY(0deg);
}
.asg-nb-top[data-flipped="true"] {
  transform: rotateY(-170deg);
  box-shadow: -4px 2px 16px rgba(20,18,14,0.2);
}
.asg-notebook:hover .asg-nb-top:not([data-flipped="true"]) {
  transform: rotateY(-15deg);
  box-shadow: 4px 2px 16px rgba(20,18,14,0.15);
}
.asg-notebook-piece .asg-caption { opacity: 1; }

/* ── Open Book Spread (Pen Calligraphy) ── */
.asg-book-spread {
  display: flex;
  align-items: stretch;
  perspective: 1200px;
  filter: drop-shadow(0 8px 24px rgba(20,18,14,0.2));
}
.asg-book-page {
  position: relative;
  overflow: hidden;
  background: #f5f0e6;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(180,170,155,0.12) 27px, rgba(180,170,155,0.12) 28px),
    linear-gradient(135deg, rgba(200,190,175,0.06) 0%, transparent 50%);
}
.asg-book-page img {
  display: block;
  height: 360px;
  width: auto;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.95;
}
.asg-book-left {
  border-radius: 4px 0 0 4px;
  transform: rotateY(4deg);
  transform-origin: right center;
  box-shadow: inset -8px 0 16px -8px rgba(20,18,14,0.12), 2px 4px 12px rgba(20,18,14,0.1);
}
.asg-book-right {
  border-radius: 0 4px 4px 0;
  transform: rotateY(-4deg);
  transform-origin: left center;
  box-shadow: inset 8px 0 16px -8px rgba(20,18,14,0.12), -2px 4px 12px rgba(20,18,14,0.1);
}
/* Page edges */
.asg-book-left::after,
.asg-book-right::after {
  content: '';
  position: absolute;
  top: 2px; bottom: 2px;
  width: 3px;
  background: repeating-linear-gradient(180deg, #e8e0d4 0px, #e8e0d4 1px, #f0eae0 1px, #f0eae0 3px);
}
.asg-book-left::after { right: 0; }
.asg-book-right::after { left: 0; }

.asg-book-spine {
  width: 6px;
  background: linear-gradient(90deg, #d4cbbe 0%, #c4b9a8 30%, #bfb49e 50%, #c4b9a8 70%, #d4cbbe 100%);
  box-shadow: inset 0 0 4px rgba(20,18,14,0.15);
  flex-shrink: 0;
  border-radius: 1px;
}
/* Book-flip on hover — only on devices that actually have hover. On touch the
   tap would set the transform and never clear it, leaving the book stuck open. */
@media (hover: hover) {
  .asg-book-spread:hover .asg-book-left { transform: rotateY(6deg); }
  .asg-book-spread:hover .asg-book-right { transform: rotateY(-6deg); }
}
.asg-book-page { transition: transform 0.4s ease; }

/* ── Lightbox ── */
.art-lb {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.art-lb.art-lb-open { opacity: 1; pointer-events: auto; }
.art-lb-overlay {
  position: absolute; inset: 0;
  background: rgba(10, 8, 6, 0.88);
  backdrop-filter: blur(8px);
}
.art-lb-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  max-width: 90vw; max-height: 90vh;
  transform: scale(0.95); transition: transform 0.4s;
}
.art-lb-open .art-lb-content { transform: scale(1); }

.art-lb-img img {
  max-height: 80vh;
  max-width: 85vw;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 16px 64px rgba(0,0,0,0.4);
}
.art-lb-couplet {
  display: flex; gap: 16px; align-items: center;
}
.art-lb-couplet img {
  max-height: 80vh;
  max-width: 40vw;
  object-fit: contain;
}
.art-lb-info {
  margin-top: 16px;
  display: flex; gap: 16px; align-items: baseline;
  color: rgba(255,255,255,0.8);
}
.art-lb-title {
  font-family: var(--serif-display); font-style: italic;
  font-size: 16px;
}
.art-lb-year {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase;
  opacity: 0.6;
}
.art-lb-close {
  position: absolute; top: -40px; right: -10px;
  background: none; border: none;
  color: rgba(255,255,255,0.7); font-size: 28px;
  cursor: pointer; transition: color 0.2s;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.art-lb-close:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════
   3D Gallery (Three.js mode)
   ═══════════════════════════════════════════════════════ */
#art-3d-gallery {
  width: 100%;
  height: 70vh;
  min-height: 500px;
  background: #0a0908;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-top: 48px;
  display: none;
}
#art-3d-gallery.is-active { display: block; }
#art-3d-gallery canvas { width: 100% !important; height: 100% !important; }
.art-3d-hint {
  position: absolute; bottom: 16px; right: 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .asg-track { gap: 20px; min-height: 300px; }
  .asg-frame-scroll-v img { height: 260px; }
  .asg-frame-portrait img { height: 240px; }
  .asg-frame-fan img { height: 160px; }
  .asg-frame-landscape img { height: 140px; }
  .asg-frame-couplet-l img,
  .asg-frame-couplet-r img { height: 240px; }
  .asg-notebook { width: 200px; height: 280px; }
  .asg-cat-label { height: 200px; font-size: 9px; }
}