/* カルーセル、画像リビール、全面リンクの部品を担当する。
   sections.css の後、responsive.css の前に読み込む。 */
.carousel {
  --carousel-side: max(var(--space-side), calc((100vw - 1120px) / 2 + var(--space-side)));
  --slide-size: clamp(17rem, 30vw, 23rem);
  position: relative;
}

.collection-viewport {
  /* 見出し整列軸の左を静的にクリップし、循環カードの退出端を隠す。 */
  clip-path: inset(0 0 0 var(--carousel-side));
  cursor: grab;
  overflow-x: hidden;
  overflow-y: clip;
  perspective: 1000px;
  touch-action: pan-y;
}

.collection-viewport:active {
  cursor: grabbing;
}

.collection-track {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  /* 額装影42pxと3D変形が上下端へ接触しない実測用の内側安全域。 */
  padding-block: clamp(2.75rem, 5vw, 4rem);
  padding-inline: var(--carousel-side) 0;
  position: relative;
  transform-style: preserve-3d;
}

html:not(.js) .collection-viewport {
  clip-path: none;
  cursor: auto;
  overflow: visible;
}

html:not(.js) .collection-track {
  flex-wrap: wrap;
}

.product-card {
  flex: 0 0 var(--slide-size);
  transform-origin: center;
  transform-style: preserve-3d;
}

.product-flip {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: block;
  padding: 0;
  position: relative;
  text-align: left;
}

.product-flip:focus-visible {
  /* 外側に固定矩形を残さず、回転面内のフォーカスリングへ置き換える。 */
  outline: none;
}

.product-flip:focus-visible .product-flip-inner {
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.product-flip-inner {
  display: grid;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition:
    transform var(--duration-flip) var(--ease-thread),
    box-shadow var(--duration-fast) var(--ease-thread);
}

.product-card.is-flipped .product-flip-inner {
  transform: rotateY(180deg);
}

.product-face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: var(--linen);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 42px rgba(68, 47, 28, 0.11);
  display: block;
  grid-area: 1 / 1;
  padding: clamp(0.625rem, 1.2vw, 0.875rem);
  position: relative;
  transform-style: preserve-3d;
  transition:
    border-color var(--duration-fast) var(--ease-thread),
    box-shadow var(--duration-fast) var(--ease-thread);
}

.product-face::after {
  border: 1px solid rgba(var(--gold-rgb), 0.86);
  content: "";
  inset: 2px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(0.992);
  transition: opacity var(--duration-fast) var(--ease-thread);
  z-index: 4;
}

.product-card.is-frame-glinting .product-face::after {
  animation: frame-hairline-glint 1.08s var(--ease-thread) 1;
}

@keyframes frame-hairline-glint {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.992);
  }

  42% {
    opacity: 0.88;
    transform: scale(1);
  }

  72% {
    opacity: 0.26;
    transform: scale(1.004);
  }
}

.product-back {
  transform: rotateY(180deg) translateZ(1px);
}

.product-media {
  display: block;
  position: relative;
}

.product-face picture,
.product-face picture img {
  aspect-ratio: 1;
}

.product-face picture img {
  object-fit: cover;
}

.product-copy {
  display: block;
  padding: 1.5rem 0 0.75rem;
}

.product-title,
.product-description,
.product-price,
.flip-hint {
  display: block;
}

.product-title {
  font-family: var(--serif-jp);
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.625rem;
}

.product-description {
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.product-price {
  color: var(--gold);
  font-family: var(--serif-latin);
  letter-spacing: 0.08em;
  margin-top: 1.25rem;
}

.flip-hint {
  border-top: 1px solid var(--line);
  color: rgba(var(--gold-rgb), 0.74);
  font-family: var(--serif-jp);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
}

.product-back-copy {
  padding-inline: 0.25rem;
}

.sparkle {
  /* 細い金属ハイライトとして見える最小の装飾寸法。 */
  height: 52px;
  mix-blend-mode: screen;
  opacity: 0;
  filter: drop-shadow(0 0 0.4rem rgba(var(--gold-rgb), 0.22));
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%) scale(0.35) rotate(-16deg);
  width: 52px;
  animation: sparkle-glint 10.5s ease-in-out infinite;
  animation-play-state: paused;
}

.sparkle-hero-a {
  animation-duration: 6.4s;
  animation-name: hero-metal-glint;
  height: 96px;
  inset-block-start: 35%;
  inset-inline-start: 30%;
  width: 96px;
}

.sparkle-hero-b {
  animation-delay: -2.35s;
  animation-duration: 7.2s;
  animation-name: hero-metal-glint;
  height: 76px;
  inset-block-start: 60%;
  inset-inline-start: 66%;
  width: 76px;
}

.sparkle-hero-c {
  animation-delay: -4.7s;
  animation-duration: 6.85s;
  animation-name: hero-metal-glint;
  height: 64px;
  inset-block-start: 49%;
  inset-inline-start: 75%;
  width: 64px;
}

.sparkle-hero-d {
  animation-delay: -1.15s;
  animation-duration: 7.65s;
  animation-name: hero-metal-glint;
  height: 70px;
  inset-block-start: 73%;
  inset-inline-start: 55%;
  width: 70px;
}

.product-sparkle {
  animation-delay: -2.7s;
  height: 52px;
  inset-block-start: 28%;
  inset-inline-start: 64%;
  width: 52px;
}

.hero-sparkles.is-ambient-active .sparkle,
.carousel.is-in-view .product-card[data-active="true"] .product-sparkle {
  animation-play-state: running;
}

@keyframes sparkle-glint {
  0%,
  72%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35) rotate(-16deg);
  }

  77% {
    opacity: 0.96;
    transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
  }

  83% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(13deg);
  }
}

@keyframes hero-metal-glint {
  0%,
  100% {
    opacity: 0.14;
    transform: translate(-50%, -50%) scale(0.62) rotate(-14deg);
  }

  38% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.72) rotate(-7deg);
  }

  47% {
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(1.06) rotate(0deg);
  }

  57% {
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(0.68) rotate(11deg);
  }
}

.flip-edge-light,
.flip-particle,
.fortune-land-light {
  /* 一時的な縁光・金粒に既存の高精細スプライトを流用する。 */
  background: url("luxury-sparkle-alpha-128.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 0.3rem rgba(var(--gold-rgb), 0.28));
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 8;
}

.flip-edge-light {
  height: 42px;
  left: -21px;
  top: -21px;
  width: 42px;
}

.flip-particle {
  height: var(--flip-particle-size);
  left: var(--flip-particle-x);
  top: var(--flip-particle-y);
  width: var(--flip-particle-size);
}

.fortune-land-light {
  height: 64px;
  left: -32px;
  top: 24%;
  width: 64px;
}

.carousel-controls {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.carousel-button {
  /* 操作ボタンに44px以上のタップ領域を確保する固定寸法。 */
  align-items: center;
  background: rgba(251, 248, 242, 0.72);
  border: 1px solid var(--hairline);
  color: var(--gold);
  box-shadow: 0 6px 20px rgba(68, 47, 28, 0.08);
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  padding: 0;
  width: 48px;
}

.carousel-button svg {
  /* 矢印アイコンの視認サイズを一定に保つための装飾寸法。 */
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  width: 20px;
}

.carousel-icon-diamond {
  fill: var(--paper);
}

.carousel-position {
  color: var(--gold);
  font-family: var(--serif-latin);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.collection-title-group {
  align-items: flex-start;
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.pendulum-earring {
  /* 写実ピアスの振り子支点と44px以上の操作領域を共有する装飾寸法。 */
  background: transparent;
  border: 0;
  cursor: grab;
  height: 176px;
  margin-top: -3.4rem;
  padding: 0;
  position: relative;
  touch-action: none;
  width: 104px;
}

.pendulum-earring:active {
  cursor: grabbing;
}

.pendulum-thread {
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  height: 34px;
  left: 50%;
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  width: 1px;
}

.pendulum-photo {
  /* 振り子画像をボタン内に収め、純黒をscreen合成する内在サイズ制御。 */
  display: block;
  height: 100%;
  transform-box: fill-box;
  transform-origin: 50% 7%;
  width: 100%;
}

.pendulum-photo img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.earring-sparkle {
  /* 大きく揺れた時だけ見せる十字光の装飾寸法。 */
  height: 14px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%) scale(0.35) rotate(-18deg);
  width: 14px;
}

.earring-sparkle::before,
.earring-sparkle::after,
.cursor-glint::before,
.cursor-glint::after {
  background: var(--gold-light);
  content: "";
  inset: 47% 0 auto;
  position: absolute;
}

.earring-sparkle::before,
.cursor-glint::before {
  /* 十字光の横線を視認できる最小太さへ固定する装飾寸法。 */
  height: 1px;
}

.earring-sparkle::after,
.cursor-glint::after {
  /* 横線と同じ要素を回転し、縦線として使う装飾寸法。 */
  height: 1px;
  transform: rotate(90deg);
}

.earring-sparkle-a {
  left: 69%;
  top: 65%;
}

.earring-sparkle-b {
  left: 28%;
  top: 82%;
}

.product-card[data-fortune-match="true"] .product-face {
  border-color: var(--focus-ring);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 18px 42px rgba(68, 47, 28, 0.11);
}

.product-card[data-active="true"] .product-face {
  border-color: rgba(var(--gold-rgb), 0.36);
}

.product-card.is-lookbook-highlight .product-face {
  box-shadow:
    inset 0 0 0 1px rgba(var(--gold-rgb), 0.52),
    0 24px 58px rgba(68, 47, 28, 0.21);
  border-color: rgba(var(--gold-rgb), 0.4);
}

.product-card.is-lookbook-highlight .product-face::after {
  opacity: 0.64;
}

.cursor-glint {
  /* pointer:fine専用の十字光を写真上で視認できる装飾寸法。 */
  height: 28px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.3) rotate(-16deg);
  width: 28px;
  z-index: 80;
}

.image-reveal {
  overflow: hidden;
  position: relative;
}

.image-reveal-cover {
  background: var(--paper);
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(101%);
  z-index: 5;
}

.theme-wash {
  background: var(--tone-wash);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transform: scale(0.985);
  z-index: 90;
}

/* 商品・工程・素材・作り手・着用写真に共通する高級額装。 */
.product-face picture,
.atelier-visual,
.material-photo,
.maker-image,
.shop-collage-photo,
.gift-photo {
  background: var(--linen);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 42px rgba(68, 47, 28, 0.14), 0 2px 8px rgba(68, 47, 28, 0.08);
  overflow: hidden;
  padding: clamp(0.45rem, 1vw, 0.75rem);
}

.js .product-face picture img,
.js .atelier-visual img,
.js .material-photo img,
.js .maker-image > picture:not(.maker-lamp-optical) img,
.js .shop-collage-photo img,
.js .gift-photo picture img {
  transform: scale(1.03);
}

.product-face picture.is-frame-visible img,
.atelier-visual.is-frame-visible img,
.material-photo.is-frame-visible img,
.maker-image.is-frame-visible > picture:not(.maker-lamp-optical) img,
.shop-collage-photo.is-frame-visible img,
.gift-photo.is-frame-visible picture img {
  transform: scale(1);
}

.product-face picture img,
.atelier-visual img,
.material-photo img,
.maker-image > picture:not(.maker-lamp-optical) img,
.shop-collage-photo img,
.gift-photo picture img {
  transition: transform var(--duration-frame) var(--ease-thread);
}

.shop-card {
  appearance: none;
  align-items: center;
  background: rgba(251, 248, 242, 0.9);
  border: 1px solid var(--hairline);
  box-shadow: 0 14px 34px rgba(68, 47, 28, 0.1);
  color: inherit;
  display: flex;
  font: inherit;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
  position: relative;
  text-align: left;
  text-decoration: none;
}

.shop-card strong,
.shop-card small {
  display: block;
}

.shop-card strong {
  font-family: var(--serif-jp);
  font-size: 1.125rem;
  font-weight: 500;
}

.shop-card small {
  color: var(--ink-soft);
  font-size: 0.75rem;
  margin-top: 0.75rem;
}

.shop-arrow {
  /* チケット右端の細線矢印アイコン寸法。 */
  color: var(--gold);
  fill: none;
  height: 18px;
  margin-left: 0.75rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
  width: 36px;
}

.shop-arrow-diamond {
  fill: var(--paper);
}