/* ASTERISM — コズミッククチュール 3Dスクロールデモ
   色は CSS カスタムプロパティが正。JS は getComputedStyle で読む。 */

:root {
  --space-deep: #060409;
  --space-mid: #0d0a16;
  --pearl: #f2eee9;
  --pearl-dim: #b9b2ab;
  --chrome: #d7d9e0;
  --iris-a: #7ce4ff;
  --iris-b: #c99cff;
  --iris-c: #ff9ecf;
  --line: rgba(242, 238, 233, .16);
  --star-rgb: 242 238 233;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--space-deep);
  color: var(--pearl);
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  font-feature-settings: "palt";
  line-height: 1.9;
  overflow-x: hidden;
}

::selection { background: var(--iris-b); color: var(--space-deep); }

.sp { display: none; }
@media (max-width: 700px) { .sp { display: inline; } }

/* ── 背景の星空 ─────────────────────────── */
#starfield {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── トップバー ─────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 28px;
  z-index: 40;
  mix-blend-mode: difference;
}
.topbar__brand {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px; letter-spacing: .42em; font-weight: 500;
}
.topbar__note {
  font-size: 10px; letter-spacing: .24em; color: var(--pearl-dim);
}

main { position: relative; z-index: 1; }

/* ── S1 ヒーロー ────────────────────────── */
.hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
#heroSeq, #glitter {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 46%, rgba(6,4,9,.72) 100%),
    linear-gradient(to bottom, rgba(6,4,9,.35), transparent 24%, transparent 70%, var(--space-deep) 100%);
}
.hero__type {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  padding: 0 24px;
}
.hero__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(52px, 13vw, 176px);
  letter-spacing: .18em;
  text-indent: .18em; /* 字間ぶんのセンター補正 */
  line-height: 1;
  text-shadow: 0 0 42px rgba(201,156,255,.35), 0 0 12px rgba(124,228,255,.25);
}
.hero__title span { display: inline-block; }
.hero__tagline {
  margin-top: 26px;
  font-size: clamp(15px, 2.4vw, 22px);
  letter-spacing: .58em; text-indent: .58em;
}
.hero__sub {
  margin-top: 14px;
  font-size: 10px; letter-spacing: .34em; text-indent: .34em;
  color: var(--pearl-dim);
}
.hero__cue {
  position: absolute; bottom: 26px; left: 50%;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 10px;
}
.hero__cue-line {
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, transparent, var(--pearl));
}
.js .hero__cue-line { animation: cueDrop 2.2s ease-in-out infinite; }
@keyframes cueDrop {
  0% { clip-path: inset(0 0 100% 0); }
  55% { clip-path: inset(0); }
  100% { clip-path: inset(100% 0 0 0); }
}
.hero__cue-text { font-size: 9px; letter-spacing: .34em; color: var(--pearl-dim); }

/* pin スペーサーの下に白帯を出さない */
.pin-spacer { background: var(--space-deep); }

/* ── S2 マニフェスト ────────────────────── */
.manifesto {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(120px, 22vh, 220px) 28px;
  text-align: center;
}
.manifesto__kicker, .collection__kicker {
  font-size: 11px; letter-spacing: .4em; text-indent: .4em;
  color: var(--iris-a);
  margin-bottom: 34px;
}
.manifesto__lead {
  font-size: clamp(26px, 5vw, 46px);
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.7;
  margin-bottom: 42px;
}
.manifesto__body {
  max-width: 620px; margin: 0 auto 28px;
  font-size: 15px; color: var(--pearl-dim);
}
.manifesto__body strong { color: var(--pearl); font-weight: 500; }
.manifesto__stats {
  display: flex; justify-content: center; gap: clamp(28px, 7vw, 80px);
  list-style: none; margin-top: 64px;
}
.manifesto__stats li { display: grid; gap: 4px; }
.manifesto__stats .num {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1;
  color: var(--chrome);
}
.manifesto__stats .unit { font-size: 11px; letter-spacing: .18em; color: var(--pearl-dim); }

/* ── S3 クチュール ──────────────────────── */
.couture {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.couture__media { position: absolute; inset: 0; }
#coutureSeq {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
}
.couture__vignette {
  position: absolute; inset: 0;
  /* 映像が明るい（白ドレス・銀河）ので、キャプション側の帯は濃いめに敷く */
  background:
    linear-gradient(to right, rgba(4,3,7,.86) 0%, rgba(4,3,7,.55) 26%, transparent 56%),
    linear-gradient(to bottom, rgba(6,4,9,.5), transparent 22%, transparent 74%, var(--space-deep) 100%);
}
.couture__captions {
  position: absolute; inset: 0;
  display: grid; align-items: center;
  padding: 0 clamp(24px, 7vw, 110px);
}
.couture__cap {
  grid-area: 1 / 1;
  max-width: 380px;
  opacity: 0;
  transform: translateY(30px);
}
.couture__cap-no {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(64px, 10vw, 120px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(215,217,224,.6);
  display: block; margin-bottom: 8px;
}
.couture__cap h3 {
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: .2em; font-weight: 500;
  margin-bottom: 12px;
  text-shadow: 0 2px 18px rgba(4,3,7,.95), 0 0 6px rgba(4,3,7,.8);
}
.couture__cap p {
  font-size: 14px; color: var(--pearl); max-width: 34em;
  text-shadow: 0 2px 14px rgba(4,3,7,.95), 0 0 6px rgba(4,3,7,.8);
}
.couture__cap-no { text-shadow: 0 2px 18px rgba(4,3,7,.9); }

/* JS 無効時はキャプションを縦に全部見せる */
html:not(.js) .couture { height: auto; }
html:not(.js) .couture__captions {
  position: relative; display: block; padding: 80px 28px;
}
html:not(.js) .couture__cap { opacity: 1; transform: none; margin-bottom: 48px; }

/* ── S4 コレクション ────────────────────── */
.collection {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  padding: clamp(120px, 20vh, 200px) 28px;
  text-align: center;
  /* 傾いたカードが右端からはみ出しても横スクロールを出さない
     （clip はスクロールコンテナを作らないので pin や sticky に影響しない） */
  overflow-x: clip;
}
.collection__title {
  font-size: clamp(30px, 5.4vw, 52px);
  letter-spacing: .2em; text-indent: .2em; font-weight: 500;
  margin-bottom: clamp(48px, 8vh, 88px);
}
.collection__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
/* パースは「カード1枚ごと」に張る。グリッドに1つだけ張ると投影の中心がグリッド中央に
   なり、左右のカードで浮いた文字が外側へ流れてカードからはみ出す（実害あり）。
   数値が小さいほど歪みが強い */
.card-slot {
  perspective: 620px;
  perspective-origin: 50% 46%;
  z-index: 1;
}
.card-slot:has(.card:hover) { z-index: 3; }
.card {
  position: relative;
  padding: 42px 30px 34px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(24,20,34,.9), rgba(10,8,16,.92));
  border: 1px solid var(--line);
  text-align: left;
  transform-style: preserve-3d;
  /* JS はカスタムプロパティだけを書き、変換の組み立ては CSS 側で行う
     （こうすると離れたときの戻りに transition が効く） */
  transform:
    rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg))
    translateZ(var(--tz, 0px)) scale(var(--sc, 1));
  transition: transform .55s cubic-bezier(.2, .8, .25, 1), border-color .4s ease;
  will-change: transform;
  height: 100%;
}
/* 指を動かしている間は即応、離した瞬間だけゆっくり戻す */
.card.is-tilting { transition: transform .09s linear, border-color .4s ease; }
/* ポインタを追う光沢。カード表面をなめる */
.card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 14px;
  background:
    radial-gradient(420px circle at var(--px, 50%) var(--py, 50%),
      rgba(255,255,255,.20), rgba(201,156,255,.08) 34%, transparent 62%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: 1;
}
.card:hover::after { opacity: 1; }
.card::before {
  /* 虹彩の縁光。ホバーで一周する */
  content: "";
  position: absolute; inset: -1px;
  border-radius: 15px;
  padding: 1px;
  background: conic-gradient(from var(--sweep, 0deg),
    var(--iris-a), var(--iris-b), var(--iris-c), var(--iris-a));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.card:hover::before { opacity: .9; }
/* 各要素の translateZ が奥行きの段差になる。差を広げるほど視差が強く出る。
   宝石だけはポインタと逆方向にわずかに流して、浮いている感じを足す */
.card__gem {
  width: 88px; height: 88px;
  margin-bottom: 26px;
  transform:
    translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 12px), 108px);
  /* カードの外まで浮き出るので、隣のカードのホバー判定を奪わないようにする */
  pointer-events: none;
}
/* 実画像が届いたら CSS モックの形・グラデを捨てて、画像そのものを見せる。
   background-image は JS がインラインで入れるので、ここで background ショートハンドを
   書くと（!important 付きだと特に）画像ごと消える。個別プロパティだけを指定する。 */
.card__gem.img-on {
  width: 100%; height: 168px;
  margin-bottom: 22px;
  /* 画像スロットは更に前へ出す（カード面から 130px 浮く） */
  transform: translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 15px), 130px);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  clip-path: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 8px 24px rgba(124,228,255,.30));
}
.card__gem--star {
  background: linear-gradient(135deg, var(--chrome), #fff 45%, var(--iris-b));
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 18px rgba(201,156,255,.5));
}
.card__gem--bubble {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 8%, transparent 26%),
    conic-gradient(from 210deg, var(--iris-a), var(--iris-b), var(--iris-c), var(--iris-a));
  filter: drop-shadow(0 0 18px rgba(124,228,255,.4));
  opacity: .9;
}
.card__gem--chrome {
  border-radius: 46% 54% 52% 48% / 58% 44% 56% 42%;
  background: linear-gradient(140deg, #fff, var(--chrome) 38%, #6d7080 62%, #fff);
  filter: drop-shadow(0 0 16px rgba(215,217,224,.45));
}
.card h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 24px; letter-spacing: .14em; font-weight: 500;
  transform: translateZ(72px);
  position: relative; z-index: 2;
}
.card__jp {
  font-size: 12px; letter-spacing: .2em; color: var(--iris-a); margin: 6px 0 16px;
  transform: translateZ(58px); position: relative; z-index: 2;
}
.card__desc {
  font-size: 13px; color: var(--pearl-dim); min-height: 3.8em;
  transform: translateZ(38px); position: relative; z-index: 2;
}
.card__price {
  margin-top: 18px; font-size: 12px; letter-spacing: .12em; color: var(--chrome);
  transform: translateZ(26px); position: relative; z-index: 2;
}

/* ── S5 フィナーレ ──────────────────────── */
.finale {
  position: relative;
  height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  text-align: center;
}
.finale__inner { padding: 0 24px; }
.finale__kicker {
  font-size: 11px; letter-spacing: .44em; text-indent: .44em;
  color: var(--iris-c); margin-bottom: 30px;
}
.finale__title {
  font-size: clamp(34px, 7vw, 84px);
  font-weight: 500; letter-spacing: .14em; line-height: 1.5;
  text-shadow: 0 0 60px rgba(124,228,255,.3);
}
.finale__note {
  margin-top: 30px; font-size: 12px; color: var(--pearl-dim);
}
@media (max-width: 700px) {
  .finale__title { font-size: clamp(28px, 8.6vw, 40px); letter-spacing: .08em; }
}
.finale__cta {
  display: inline-block;
  margin-top: 40px;
  padding: 16px 52px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--pearl);
  text-decoration: none;
  font-size: 13px; letter-spacing: .3em; text-indent: .3em;
  transition: border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
.finale__cta:hover {
  border-color: var(--iris-a);
  box-shadow: 0 0 34px rgba(124,228,255,.35), inset 0 0 18px rgba(124,228,255,.12);
  background: rgba(124,228,255,.06);
}

/* ── フッター ───────────────────────────── */
.foot {
  position: relative; z-index: 1;
  padding: 34px 28px 44px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 11px; color: var(--pearl-dim);
  background: var(--space-deep);
}

/* ── リビール初期状態(JS が生きているときだけ隠す) ── */
.js [data-reveal] { opacity: 0; transform: translateY(34px); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__cue-line { animation: none; }
}