/**
 * HERO MOTION — 開幕コレオグラフ + スクロール退場（front page限定・2026-08-20）
 * LCP保護が最優先:
 *  - .is-motion は JS が付与（JS無効なら素のヒーローのまま = 非破壊）
 *  - LCP候補(タイトル・実写proof)は opacity を一切触らず transform のみ
 *  - その他要素(eyebrow/CTA/trust/caption)だけ opacity+translate の時差入場（subtitleは実測LCPのためtransformのみ）
 * reduced-motion では全て無効。
 */

/* ---- LCP: poster img（background-imageの優先描画代替） ---- */
.p-hero__field-bg { background-color: #dfeef2; }
/* ---- 開幕: LCP安全レイヤー(transformのみ) ---- */
.p-hero.is-motion .p-hero__title {
  animation: urvHeroSettle .7s cubic-bezier(.22,.61,.36,1) both;
}
.p-hero.is-motion .p-hero__proof {
  animation: urvHeroProof .9s cubic-bezier(.22,.61,.36,1) both;
}
/* subtitle は実測でLCP要素(Lighthouse 2026-08-21)のため opacity を触らず transform のみ */
.p-hero.is-motion .p-hero__subtitle {
  animation: urvHeroSettle .7s cubic-bezier(.22,.61,.36,1) .1s both;
}
@keyframes urvHeroSettle {
  from { transform: translateY(16px); }
  to   { transform: translateY(0); }
}
@keyframes urvHeroProof {
  from { transform: translateY(14px) scale(1.02); }
  to   { transform: translateY(0) scale(1); }
}

/* em の下線が左から引かれる */
.p-hero.is-motion .p-hero__title em { position: relative; }
.p-hero.is-motion .p-hero__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.08em;
  height: 3px;
  background: var(--color-primary, #00D9FF);
  transform: scaleX(0);
  transform-origin: left;
  animation: urvHeroRule .6s cubic-bezier(.22,.61,.36,1) .55s both;
}
@keyframes urvHeroRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- 開幕: 非LCP要素の時差入場 ---- */
.p-hero.is-motion .p-hero__eyebrow,
.p-hero.is-motion .p-hero__actions,
.p-hero.is-motion .p-hero__trust,
.p-hero.is-motion .p-hero__proof-caption {
  animation: urvHeroRise .65s cubic-bezier(.22,.61,.36,1) both;
}
.p-hero.is-motion .p-hero__eyebrow        { animation-delay: .05s; }
.p-hero.is-motion .p-hero__actions       { animation-delay: .34s; }
.p-hero.is-motion .p-hero__trust         { animation-delay: .46s; }
.p-hero.is-motion .p-hero__proof-caption { animation-delay: .60s; }
@keyframes urvHeroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- スクロール退場(JSがCSS変数を駆動・transformのみ) ---- */
.p-hero.is-motion .p-hero__copy,
.p-hero.is-motion .p-hero__proof,
.p-hero.is-motion .p-hero__field-bg {
  will-change: transform;
}
.p-hero.is-exiting .p-hero__copy  { transform: translateY(calc(var(--hero-exit, 0) * -46px)); opacity: calc(1 - var(--hero-exit, 0) * .9); }
.p-hero.is-exiting .p-hero__proof { transform: translateY(calc(var(--hero-exit, 0) * -20px)); }
.p-hero.is-exiting .p-hero__field-bg { transform: scale(calc(1 + var(--hero-exit, 0) * .05)); }

/* ---- スクロールキュー ---- */
.p-hero__cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--ink, #0A1628);
  opacity: 0;
  animation: urvHeroRise .6s ease .9s both;
  pointer-events: none;
  z-index: 3;
  transition: opacity .4s ease;
}
.p-hero__cue::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--ink, #0A1628), transparent);
  animation: urvCueDrop 1.8s ease-in-out 1.4s infinite;
}
.p-hero.is-exiting .p-hero__cue { opacity: 0 !important; }
.p-hero__cue--native { transition: opacity .4s ease; }
.p-hero.is-exiting .p-hero__cue--native { opacity: 0; }
@keyframes urvCueDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---- 次セクションのシート被さり(STORYと同じモチーフ) ---- */
.is-motion-page .p-proof-band {
  border-radius: 28px 28px 0 0;
  margin-top: -28px;
  z-index: 2;
  box-shadow: 0 -18px 44px rgba(10, 22, 40, .10);
}

@media (max-width: 900px) {
  .p-hero__cue { display: none; }
  .p-hero.is-exiting .p-hero__copy,
  .p-hero.is-exiting .p-hero__proof,
  .p-hero.is-exiting .p-hero__field-bg { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .p-hero.is-motion .p-hero__title,
  .p-hero.is-motion .p-hero__proof,
  .p-hero.is-motion .p-hero__eyebrow,
  .p-hero.is-motion .p-hero__subtitle,
  .p-hero.is-motion .p-hero__actions,
  .p-hero.is-motion .p-hero__trust,
  .p-hero.is-motion .p-hero__proof-caption,
  .p-hero.is-motion .p-hero__title em::after,
  .p-hero__cue { animation: none; opacity: 1; transform: none; }
  .p-hero.is-exiting .p-hero__copy,
  .p-hero.is-exiting .p-hero__proof,
  .p-hero.is-exiting .p-hero__field-bg { transform: none; opacity: 1; }
}