/* ランディング演出（案B「リッチ・動」）。LP でのみ読み込む（HomeController が extra_head で追加）。
   JS 無効時は html.js が付かず全コンテンツが即表示される。 */

/* ---------- 初期状態（JS 有効時のみ隠す） ---------- */
.js body:not(.lp-loaded) .hero-el { opacity: 0; }
.js [data-reveal] { opacity: 0; }
.js [data-reveal].in { opacity: 1; }

/* ---------- ヒーロー登場 ---------- */
.js .landing-rack .rod { transform: translateY(-18px); opacity: 0; }
.lp-loaded .landing-rack .rod { animation: lpRod .7s cubic-bezier(.34,1.56,.64,1) .05s forwards; }
@keyframes lpRod { to { transform: translateY(0); opacity: 1; } }

.lp-loaded .landing-hanger {
  transform-origin: 50% 0;
  animation: lpSwingIn 1.15s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(.3s + var(--i, 0) * .1s);
}
@keyframes lpSwingIn {
  0%   { opacity: 0; transform: translateY(-64px) rotate(-13deg); }
  45%  { opacity: 1; transform: translateY(0) rotate(5deg); }
  70%  { transform: rotate(-2.5deg); }
  100% { transform: rotate(0); }
}

/* 常時のゆらぎ（フックを支点に服だけ揺れる） */
.lp-loaded .landing-garment {
  transform-origin: 50% -22px;
  animation: lpSway calc(3s + var(--i, 0) * .4s) ease-in-out calc(var(--i, 0) * -1.1s) infinite alternate;
}
@keyframes lpSway { from { transform: rotate(-2.3deg); } to { transform: rotate(2.3deg); } }

.lp-loaded .landing-title { animation: lpPop .8s cubic-bezier(.34,1.56,.64,1) .85s both; }
.lp-loaded .landing-lead  { animation: lpPop .8s cubic-bezier(.34,1.56,.64,1) 1.0s both; }
.lp-loaded .landing-cta   { animation: lpPop .8s cubic-bezier(.34,1.56,.64,1) 1.15s both; }
.lp-loaded .landing-store { animation: lpPop .8s cubic-bezier(.34,1.56,.64,1) 1.3s both; }
@keyframes lpPop {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ストアバッジのふわふわ */
.lp-loaded .landing-store-badge { animation: lpFloat 2.6s ease-in-out infinite alternate; }
.lp-loaded .landing-store-badge:nth-child(2) { animation-delay: -1.3s; }
@keyframes lpFloat { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* ---------- スクロール登場（バネの効いたスタッガー） ---------- */
.js [data-reveal] {
  transform: translateY(34px) scale(.97);
  transition: opacity .75s ease, transform .75s cubic-bezier(.34,1.56,.64,1);
}
.js [data-reveal].in { transform: none; }

.js .landing-feature, .js .landing-step {
  opacity: 0; transform: translateY(30px) scale(.94);
  transition: opacity .65s ease, transform .65s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--i, 0) * .1s);
}
.js [data-reveal].in .landing-feature, .js [data-reveal].in .landing-step { opacity: 1; transform: none; }

/* 機能カード: 上辺に金のライン + ホバーで浮く */
.landing-feature { position: relative; }
.js .landing-feature::before {
  content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .7s cubic-bezier(.22,1,.36,1) calc(.3s + var(--i, 0) * .1s);
}
.js [data-reveal].in .landing-feature::before { transform: scaleX(1); }
.landing-feature:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(40,34,24,0.12); transition: transform .25s, box-shadow .25s; }

/* ステップ番号: ポンと弾けて金のリングが広がる */
.js .landing-step-num { transform: scale(0); }
.js [data-reveal].in .landing-step-num {
  animation: lpNum .7s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: calc(.15s + var(--i, 0) * .15s);
}
@keyframes lpNum {
  0%   { transform: scale(0); box-shadow: 0 0 0 0 rgba(196,160,82,.55); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(196,160,82,0); }
}

/* スクショ: 左右から流れ込む */
.js .landing-step:nth-child(odd) img  { transform: translateX(-40px) rotate(-2.5deg); opacity: 0; }
.js .landing-step:nth-child(even) img { transform: translateX(40px) rotate(2.5deg); opacity: 0; }
.js .landing-step img {
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(.25s + var(--i, 0) * .15s);
}
.js [data-reveal].in .landing-step img { transform: none; opacity: 1; }

/* 見出し: 金の下線がスッと伸び、輝きが流れる */
.landing-h2 { position: relative; display: inline-block; padding-bottom: 10px; }
.landing-h2::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 64px; height: 2px; margin-left: -32px;
  background: linear-gradient(90deg, var(--accent), #e6cf96, var(--accent));
  background-size: 200% 100%;
}
.js .landing-h2::after { transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.22,1,.36,1) .35s; }
.js [data-reveal].in .landing-h2::after { transform: scaleX(1); animation: lpShimmer 2.8s linear 1.2s infinite; }
@keyframes lpShimmer { from { background-position: 0 0; } to { background-position: 200% 0; } }

/* ---------- 写真バンド: パララックス ---------- */
.landing-photo { overflow: hidden; border: 1px solid var(--line); }
.js .landing-photo img {
  border: none;
  will-change: transform;
  transform: translateY(var(--para, 0px)) scale(1.16);
}

/* ---------- CTA ボタン: 光沢スイープ ---------- */
.landing .btn-primary { position: relative; overflow: hidden; }
.landing .btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-18deg);
}
.landing .btn-primary:hover::after { animation: lpGloss .7s ease; }
@keyframes lpGloss { to { left: 130%; } }

/* ---------- reduced-motion: 全演出を止めてそのまま見せる ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero-el, .js [data-reveal],
  .js .landing-feature, .js .landing-step, .js .landing-step img { opacity: 1 !important; transform: none !important; }
  .js .landing-rack .rod { transform: none !important; opacity: 1 !important; }
  .js .landing-step-num { transform: none !important; }
  .js .landing-h2::after { transform: none !important; }
  .js .landing-photo img { transform: none !important; }
  .lp-loaded .landing-rack .rod,
  .lp-loaded .landing-hanger,
  .lp-loaded .landing-garment,
  .lp-loaded .landing-title, .lp-loaded .landing-lead,
  .lp-loaded .landing-cta, .lp-loaded .landing-store,
  .lp-loaded .landing-store-badge,
  .js [data-reveal].in .landing-step-num,
  .js [data-reveal].in .landing-h2::after,
  .landing .btn-primary:hover::after { animation: none !important; }
  .js [data-reveal], .js .landing-feature, .js .landing-step, .js .landing-step img,
  .js .landing-h2::after, .js .landing-feature::before { transition: none !important; }
  .js .landing-feature::before { transform: none !important; }
}