/* ============================================================
   cocone Winter Collection 2026 - ジュエリーカシス 復刻特設サイト
   モバイル設計 750px(=375pt @2x) / 縦長 17620px
   bg.jpg を全面背景に、動かす要素を % 座標で絶対配置する構成
   ============================================================ */

:root{
  --page-bg:#070d18;     /* PCで中央寄せした時の外側背景 */
  --stage-max:500px;     /* PCでの表示幅（モバイルLPを中央カラム表示） */
}

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

html{-webkit-text-size-adjust:100%;}

body{
  background:var(--page-bg);
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  overflow-x:hidden;
}

/* イントロ表示中はスクロールを固定 */
body.intro-lock{overflow:hidden;height:100dvh;}

/* ---------- LP本体 ---------- */
.stage{
  max-width:var(--stage-max);
  margin:0 auto;
  position:relative;
}
.lp{
  position:relative;
  width:100%;
}
.lp .bg{
  display:block;
  width:100%;
  height:auto;
}

/* ---------- 各パーツ（bg上に絶対配置） ---------- */
.part{
  position:absolute;
  display:block;
}
.part img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
}

/* CTAボタン：ホバーは色の変化のみ（動きなし） */
.btn{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:filter .25s ease;
}
.btn:hover{filter:brightness(1.06) saturate(1.05);}
.btn:active{filter:brightness(.98);}

/* ============================================================
   パーツ座標（750 x 20967 を基準にした %）
   ============================================================ */
/* トップ「復刻！」（徐々に浮かび上がる） */
#hukkoku{left:46.0000%;top:0.8776%;width:39.8667%;}
/* どんな香り？セクションのテキスト */
#af1{left:10.9333%;top:39.4334%;width:83.7333%;}
#af2{left:12.4000%;top:42.6814%;width:76.1333%;}
/* ジュエリーカシスシャンプーとは？ラベル */
#about-shampoo{left:6.6667%;top:28.3541%;width:46.6667%;}
/* 成分アイコンの円リング（完成イメージの白リングに一致：中心(143/613,12305) 半径106） */
#ring-green{left:4.8000%;top:58.1771%;width:28.5333%;}
#ring-pink{left:67.4667%;top:58.1771%;width:28.5333%;}
/* 特別バスセット（見出し＋商品写真＋玉ボケ） */
#bathset-midashi{left:12.4000%;top:64.0626%;width:76.5333%;}
#bathset-img{left:0%;top:65.9942%;width:100%;}
#bathset-tamaboke{left:0%;top:65.0080%;width:100%;z-index:2;pointer-events:none;mix-blend-mode:screen;}
/* recommend バッジ（ボタンパネルの上に重ねる。クリックはボタン優先） */
#rec1,#rec2{z-index:3;pointer-events:none;}
#rec1{left:2.1333%;top:16.3877%;width:20.9333%;}
#rec2{left:2.1333%;top:94.4818%;width:20.9333%;}
/* CTA#1 ボタン */
#cta1-line{left:11.4667%;top:16.3972%;width:80.1333%;}
#cta1-mail{left:11.4667%;top:16.9695%;width:80.1333%;}
/* CTA#2 ボタン */
#cta2-line{left:11.4667%;top:94.4913%;width:80.1333%;}
#cta2-mail{left:11.4667%;top:95.0732%;width:80.1333%;}
#cta2-rakuten{left:11.4667%;top:96.5803%;width:80.1333%;}
/* 企画者メッセージ本文＋署名 */
#ft5{left:7.7333%;top:84.8047%;width:84.4000%;}
#ft4{left:7.4667%;top:85.9923%;width:84.2667%;}
#ft3{left:7.4667%;top:87.1751%;width:84.8000%;}
#ft2{left:7.6000%;top:88.3674%;width:84.6667%;}
#ft1{left:7.7333%;top:89.8080%;width:72.2667%;}
/* 署名：完成イメージの署名(x335-695,y19062-19185)に完全一致するよう拡大配置（PNG原寸より約1.42倍） */
#sign{left:44.4772%;top:90.6654%;width:49.4598%;}
/* フッター（新bgでは焼き込み除去済み＝クリック可能なスロット） */
#footer-link{left:25.2000%;top:98.4595%;width:49.6000%;}

/* ============================================================
   ユーザーボイス 横マーキー
   Y固定のまま横に流れ続ける。行ごとに方向を変える
   ============================================================ */
/* 動き（複製・無限ループ・流れ）はすべて script.js が制御（rAF＋画像リサイクル方式）。
   CSSは配置と“JS無効時の静止フォールバック”だけを担当する。 */
/* 行を bg と同色ネイビーで“不透明”に（背後は均一ネイビーなので見た目不変）。
   透明レイヤーが巨大bg画像とアルファ合成しながら動くと iOS で再描画チラつきが出るため、
   不透明にして合成を単純化する。 */
.uv-row{position:absolute;left:0;width:100%;overflow:hidden;aspect-ratio:750/245;background:#013058;}
#uvr1{top:22.3970%;}
#uvr2{top:23.7278%;}
#uvr3{top:25.0632%;}
.uv-track{display:flex;height:100%;width:max-content;}
/* JSが各画像に実px(width/height/margin-right)を付与する。
   下記はJS無効時のフォールバック（静止表示）。aspect-ratioで最低限の見た目を確保。 */
.uv-track img{height:100%;width:auto;aspect-ratio:513/245;display:block;margin-right:14px;}

/* ============================================================
   スクロール連動アニメーション（IntersectionObserver で .in 付与）
   ============================================================ */
.anim{opacity:0;will-change:transform,opacity;}

/* 下からフェードイン（about_shampoo / footerText / 署名） */
.fade-up{transform:translateY(42px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);}

/* aboutFragrance はゆっくりめに */
#af1,#af2{transition-duration:1.7s;}

/* 企画者メッセージ本文（footerText）もゆっくりめに */
#ft1,#ft2,#ft3,#ft4,#ft5{transition-duration:1.5s;}

/* 特別バスセット：商品写真＋玉ボケが一緒にゆっくり出現（opacityのみ） */
.slow-in{transition:opacity 1.8s ease-out;}

/* トップ「復刻！」：ふわっと浮かび上がる。開始はイントロ後半（JS側）、フェードはゆっくりめ */
.emerge{transform:translateY(14px) scale(.955);
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.22,1,.36,1);}

/* 成分の円リング：表示と同時に 透明→不透明 ＋ 一回転（線が円周を一周して描画される） */
.ring{position:absolute;opacity:0;transition:opacity 1.1s ease;}
.ring svg{width:100%;height:auto;display:block;overflow:visible;}
.ring circle{
  fill:none;stroke:#fff;stroke-width:2;
  stroke-dasharray:666;stroke-dashoffset:666;      /* 円周ぶん隠して */
  transform:rotate(-90deg);transform-origin:center; /* 頂点(12時)から描き始め */
  transition:stroke-dashoffset 1.1s ease;
}
.ring.in{opacity:1;}
.ring.in circle{stroke-dashoffset:0;}               /* 一周ぶん描画＝一回転 */

/* 表示状態 */
.anim.in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .anim{opacity:1;transform:none;transition:none;}
}

/* ============================================================
   FV イントロアニメーション（“下が透明な四角”方式）
   初期状態 = ネイビーのベタ塗りで画面いっぱい（下端の透明フェード部は画面外に隠す）→
   introFill が上へスライドすると、下端の透明部が昇ってきて、そこから奥のLPが透けて現れる。
   ============================================================ */
#intro{
  position:fixed;
  top:0; left:0; right:0;
  height:100vh;      /* フォールバック */
  height:100dvh;     /* 今見えているビューポート高にフィット。イントロ中はスクロール固定 */
  max-width:var(--stage-max);
  margin:0 auto;
  z-index:9999;
  overflow:hidden;   /* 画面外（下・上）にはみ出す四角をここでクリップ */
  background:transparent; /* 四角の下から下は透明＝奥のLPが見える */
}
/* 四角本体：ビューポート＋フェード分だけ縦を長くし、下端フェードは初期状態では画面外に置く。
   --fv-feather = 下端の透明フェードの高さ（画面比）。 */
#introFill{
  --fv-feather:20;                 /* dvh。フェード帯の高さ */
  position:absolute;
  left:0; right:0; top:0;
  height:calc(100dvh + 20dvh);     /* = 100dvh + フェード分。初期はフェードが画面下に隠れる */
  background:#0b1022;              /* ネイビーのベタ塗り（Frame2 の地色） */
  /* 下端だけを透明にするグラデーションマスク。solid部 = 100/120 ≒ 83.333% */
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 83.333%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 83.333%,transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
  will-change:transform;
}
/* 文字（intro.png）：幅を “画面幅の %” で固定 → 端末の縦横比に依らず画面に対する文字サイズが一定。
   縦はビューポート基準の45%（dvh）に中央。四角と一緒に上がる。 */
#fvtext{
  position:absolute;
  left:50%;
  top:45dvh;
  transform:translate(-50%,-50%);
  width:72.5333%;
  height:auto;
  object-fit:contain;
  animation:introTextIn 1s ease both;  /* transform は中央寄せに使うので opacity だけフェード */
}
@keyframes introTextIn{
  from{opacity:0;}
  to{opacity:1;}
}

/* 退場: 四角を上へスライド。下端の透明フェードが昇ってLPが透けて現れる。 */
#intro.lift #introFill{
  animation:introLift 1.4s .28s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes introLift{
  from{transform:translateY(0);}
  to{transform:translateY(-110%);}   /* 自身の高さ(120dvh)の110%＝完全に画面上へ抜ける */
}
#intro.done{display:none;}

/* モーション低減設定を尊重 */
@media (prefers-reduced-motion:reduce){
  #fvtext{animation:none;}
  #intro.lift #introFill{animation:none;}
  #intro.lift{opacity:0;transition:opacity .3s ease;}
}