/* studio-gallery.css — トップ「やごうStudio」フォトギャラリーセクション（無限スライダー） */
@charset "UTF-8";

.studio-gallery { background: var(--color-surface); }
.studio-gallery__title { text-align: center; margin-bottom: 0.75rem; }
.studio-gallery__title::after { margin-left: auto; margin-right: auto; }
.studio-gallery__lead {
  text-align: center;
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  margin-bottom: 2.75rem;
}

/* 無限スライダー: track を2セット分並べて -50% まで流し、ループ地点で0%へ戻す(継ぎ目なし) */
.studio-gallery__slider {
  overflow: hidden;
  margin: 0 calc(-1 * clamp(1.25rem, 4vw, 3rem)) 2.75rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.studio-gallery__track {
  display: flex;
  width: max-content;
  gap: 1.5rem;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  animation: studio-gallery-scroll 90s linear infinite;
}

.studio-gallery__slider:hover .studio-gallery__track { animation-play-state: paused; }

.studio-gallery__item {
  flex: 0 0 auto;
  width: min(360px, 78vw);
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16/10;
  box-shadow: var(--shadow-card);
}
.studio-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: none;
  display: block;
}

.studio-gallery__cta { text-align: center; }
.studio-gallery__cta .btn {
  background-color: #F1AEB9 !important;
  border-color: #F1AEB9 !important;
  color: #4f3910 !important;
}
.studio-gallery__cta .btn:hover {
  background-color: #e99aa8 !important;
  border-color: #e99aa8 !important;
  color: #4f3910 !important;
}

@keyframes studio-gallery-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 560px) {
  .studio-gallery__lead { margin-bottom: 2rem; }
  .studio-gallery__item { width: min(280px, 74vw); }
  .studio-gallery__track { gap: 1rem; animation-duration: 68s; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-gallery__track { animation: none; }
  .studio-gallery__slider { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}