/* ============================================
   AREA 1 — The Digital Gallery
   (アプリ開発 & Web/EC制作)
   concrete-jungle.jp
   Depends on: tokens.css
   ============================================ */

.gallery {
  background-color: var(--color-bg-concrete);
  position: relative;
}

/* Concrete grain texture overlay */
.gallery::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.08;
  pointer-events: none;
}

/* --- Header --- */
.gallery__header {
  margin-bottom: var(--space-xl);
  text-align: left;
}

.gallery__header span {
  display: block;
  margin-bottom: var(--space-sm);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
}

.gallery__header h2 {
  margin-bottom: var(--space-sm);
}

/* --- Horizontal Scroll Track --- */
.gallery__track {
  display: flex;
  gap: var(--space-xl);
  padding: 0 var(--space-xl) var(--space-xl) var(--space-xl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery__track::-webkit-scrollbar {
  display: none;
}

/* --- Gallery Items --- */
.gallery__item {
  flex: 0 0 auto;
  width: 350px;
  scroll-snap-align: center;
  transition: transform var(--duration-normal) var(--ease-out-expo);
  cursor: pointer;
}

.gallery__item:hover {
  transform: translateY(-8px);
}

/* --- Poster Frame --- */
.gallery__frame {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

/* --- Artwork Area --- */
.gallery__artwork {
  padding: var(--space-xl);
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  position: relative;
  background-color: var(--color-bg-elevated);
}

/* 白/グレーの薄いフィルター（視認性向上） */
.gallery__artwork::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(200, 200, 200, 0.15); /* 白・グレーの薄いフィルター */
  backdrop-filter: blur(2px) brightness(0.7); /* コントラストを高め、サイバー感を抑えるフォグ効果 */
  z-index: 0;
  transition: all var(--duration-normal);
}

.gallery__item:hover .gallery__artwork::after {
  backdrop-filter: blur(0px) brightness(0.9);
  background-color: rgba(200, 200, 200, 0.05);
}

.gallery__artwork-inner {
  position: relative;
  z-index: 1;
}

/* --- Label Badge --- */
.gallery__label {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.gallery__artwork-inner h3 {
  margin-bottom: var(--space-sm);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* --- Nameplate --- */
.gallery__plate {
  display: block;
  padding: var(--space-md);
  text-align: center;
  border-top: 1px solid var(--color-border);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* --- Scroll Hint --- */
.gallery__scroll-hint {
  text-align: center;
  padding-top: var(--space-lg);
  letter-spacing: var(--ls-ultra);
}