/* hero-intro.css — 物語（かしゃ→ぽん→ホーム）を必ず見せて、着地でことばを出す
   2026-07-31 社長「最初の写真かしゃ→・・・→ホームに戻るまでの演出は絶対に見せたい」
   「思い切って、ぽんってなったら、左上のブランドロゴや、チップ、コピー等が出てくる演出もあり」
   「スクロールで切るようにするとかはどう思う？（スマホ版PC版どちらも）」

   決めた形:
   ・演出の間はことば（ブランド・チップ・見出し・リード）を伏せる＝主役を実機ひとつに絞る
   ・**着地の瞬間に**ことばが出る。読む順が「体験 → 意味」になる
   ・スクロールやタップは「飛ばす」ではなく**早送りして完了**（誰でも着地は必ず見る）
   ・右上に淡いスキップのチップ。**1.2秒遅れで出す**
     （最初から見えていると「我慢して見るもの」という合図になり、見せたい場面の価値を下げる）
   ・FAQから戻っても自動では再生し直さない。見たい人だけ「もう一度見る」を押す

   ヒーローの尺（実測）: 全体7.8秒のうち、写真が実機に入り終わる**着地は3.4秒地点**。
   残り4.4秒は何も起きていないので、ことばはそこで出す。 */

/* ── is-intro を出している間はスクロールを止める ──────────
   2026-07-31 社長「ホームに最後落ち着くまではすわいぷしても見るようにしてほしい」
   出口はスキップのチップだけ（袋小路は作らない）。 */
/* ★2026-08-08 社長「実機が出ない」（iPhoneのSafariとChromeの両方＝どちらもiOS。PCでは出ない）の是正。
   ここには `overflow: hidden` があった。だが実機 `.journey-phone` は `position: fixed` で描いており、
   **iOSは html/body に overflow:hidden が掛かっていると fixed の要素を正しく置かない**（描かれない・
   クリップされる）。掛かるのは演出中だけなので、「演出の間だけ実機が出ない」という症状と一致する。
   PC(Chrome/Firefox)は仕様どおり fixed を守るので再現しない＝これまで再現できなかった理由でもある。
   過去に外した8案（ベゼルの描き方・巻き戻し）は、いずれもこの原因の外側を触っていた。

   スクロールは overflow ではなく、下の2つ＋JS（touchmove/wheel/keydown の打ち消しと
   スクロール位置の引き戻し）で止める。fixed には一切さわらない方法。 */
html.is-intro,
html.is-intro body {
  overscroll-behavior: none;
  touch-action: none;
}
html.is-intro .intro-skip { touch-action: manipulation; }

/* ── 演出中は、ことばを伏せる ───────────────────────── */
html.is-intro .site-header .brand,
html.is-intro .site-header .header-nav,
html.is-intro .site-header .header-cta,
html.is-intro .site-header .mobile-menu-toggle,
html.is-intro .hero-copy .eyebrow,
html.is-intro .hero-copy h1,
html.is-intro .hero-mobile-lead,
html.is-intro .hero .cta,
html.is-intro .hero-trust,
html.is-intro .hero-replay {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* ── 着地したら、順に出す ───────────────────────────── */
html.is-intro-done .site-header .brand,
html.is-intro-done .site-header .header-nav,
html.is-intro-done .site-header .header-cta,
html.is-intro-done .site-header .mobile-menu-toggle,
html.is-intro-done .hero-copy .eyebrow,
html.is-intro-done .hero-copy h1,
html.is-intro-done .hero-mobile-lead,
html.is-intro-done .hero .cta,
html.is-intro-done .hero-trust,
html.is-intro-done .hero-replay {
  opacity: 1;
  transform: none;
  transition: opacity .52s ease, transform .52s cubic-bezier(.22, 1, .36, 1);
}
html.is-intro-done .site-header .brand { transition-delay: .02s; }
html.is-intro-done .hero-copy .eyebrow { transition-delay: .10s; }
html.is-intro-done .hero-copy h1 { transition-delay: .18s; }
html.is-intro-done .hero-mobile-lead { transition-delay: .26s; }
html.is-intro-done .hero .cta,
html.is-intro-done .hero-trust,
html.is-intro-done .hero-replay { transition-delay: .34s; }

/* ── スキップのチップ（右上・淡い・1.2秒遅れ） ───────── */
.intro-skip {
  position: fixed;
  z-index: 60;
  top: 14px;
  right: 14px;
  display: none;
  height: 30px;
  padding: 0 14px;
  align-items: center;
  border: 1px solid rgba(120, 108, 98, .28);
  border-radius: 15px;
  background: rgba(250, 248, 244, .72);
  color: #7A716A;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html.is-intro .intro-skip { display: inline-flex; }
html.is-intro.is-intro-skippable .intro-skip { opacity: 1; }
/* スマホは上端の余白（--sp-top）に合わせる */
@media (max-width: 560px) and (orientation: portrait) {
  .intro-skip { top: calc(var(--sp-top, 6px) + 7px); right: 16px; }
}

.hero-inner { position: relative; }

/* ── もう一度見る（2026-07-31 社長「字で書くのではなく、なんかそれっぽい
   インフォグラフィックにして、実機スマホの近くに置くのはどう？」）──
   丸いボタンにリプレイの記号だけ。文字を置かないぶん主役（実機）を取らない。
   記号は意味を持つもの（やり直しの矢印）だけにして、飾りは足さない。
   位置は実機の右わき。ヒーロー内に絶対配置するので、グリッドの行を増やさない
   ＝実機の高さを削らない。 */
.hero-replay {
  position: absolute;
  z-index: 20;
  top: 50%;
  right: 22px;
  display: inline-flex;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(120, 108, 98, .24);
  border-radius: 50%;
  background: rgba(250, 248, 244, .82);
  color: #8A8079;
  cursor: pointer;
  transform: translateY(-50%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-replay svg { width: 20px; height: 20px; }
.hero-replay:hover { border-color: rgba(120, 108, 98, .4); color: #5E564F; }
/* 演出が一度も終わっていない間は置かない（押す意味がない） */
html:not(.is-intro-done) .hero-replay { display: none; }
/* 出るときは、ことばと同じ間合いで */
html.is-intro .hero-replay { opacity: 0; transform: translateY(-50%); }
html.is-intro-done .hero-replay { opacity: 1; transform: translateY(-50%); }

@media (max-width: 560px) and (orientation: portrait) {
  .hero-inner { position: relative; }
  .hero-replay { right: 14px; width: 40px; height: 40px; }
  .hero-replay svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html.is-intro .site-header .brand,
  html.is-intro .hero-copy .eyebrow,
  html.is-intro .hero-copy h1,
  html.is-intro .hero-mobile-lead { opacity: 1; transform: none; }
  html.is-intro-done * { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   ヒーローの物語の順番（2026-08-04 社長がことばで確定）
     写真でます →「」でます → カシャってなります → 写真になります
     → スマホに入ります → チェキになってポンってなります

   これは **CD確定の元の設計そのもの**だった。
     写真の場   0%から出ている
     枠         6%〜27%（写真の上で被写体を囲む）
     かしゃ     22.5%（白い閃光。写真の上だから閃光に見える）
     実機       32.5〜36.5%
   ＝ ここは何も上書きしない。土台(preview-top.html)のままが正。

   私が2026-08-04に入れた上書き（写真をかしゃの後に出す／かしゃを暗転にする／
   枠の時間と色を変える）は**すべて取り消した**。
   本当の問題は「順番」ではなく、**起動スプラッシュの裏で頭の約0.9秒が流れていた**こと
   （実測 motion-ready 1305ms / スプラッシュ 2202ms）。
   それは top-mobile-study.js を `ashiato:booted` で待たせる形で直してあり、そちらは残す。

   ※学び: 「かしゃの前に写真になっている」は**順番の誤り**ではなく
     **頭を見られていない**ことの現れだった。現象の説明を、実装の指示として読まない。
   ═══════════════════════════════════════════════════════════ */

/* ── 実機の入り方だけはPCと揃える（社長「構造は今のまま演出をpcと同じに」）
   PC   hero-device-rise            translate3d(34px, 46px, 0) scale(.985) から
   スマホ study-device-rise-in-place translate3d( 0px, 38px, 0) scale(.985) から
   ＝ PCは斜めに寄るのに、スマホは真上に上がるだけだった。
   横の寄りは画面幅に対する比率をPCへ合わせる（PC 32px/1280=2.50%。
   スマホの実機は入れ子で縮むので指定14px＝画面上9px＝2.29%）。 */
@keyframes study-device-rise-in-place {
  0%,
  32.5% {
    opacity: 0;
    transform: translate3d(14px, 46px, 0) scale(.985);
  }

  36.5% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.008);
  }

  38%,
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════
   ヒーローの演出 v9（2026-08-08 社長指示）

   物語: はいはいの写真だけ →「」が体ごと構える → 光ってかしゃ →
         3:4の縦写真が生まれる → 空画面の実機へ一筆書きで入る →
         **触れた瞬間、できたこと・ひとこと入りのチェキに変わる** →
         ぽん！→ホーム（ここから先は現行のまま）

   これは操作説明ではなく短いCM。「写真がスマホへ入る」という非現実を、
   PCは浅い横弧、SPは縦方向＋奥行きの1カットで成立させる。

   情報量を増やさないための守り:
   ・実機の画面は着地まで静かな空の画面(#hero-screen-cover)＝結果を先に見せない
   ・着地は画面の内側＝乗り損ねに見せない
   ・別の棚への移動、接点の発光、波紋、粒子、全画面フラッシュは見せない
   ・途中停止、二段加速、多段バウンドを置かず、軌道は1本だけ
   ・土台のPC飛翔(.hero-captured-photo)は二重の主役になるので出さない

   時間割(7.8秒・土台のかしゃ22.5%とぽんはそのまま):
     6〜27%  「」（位置だけ体ごと・まんなかへ上書き）
     22.5%   かしゃ（土台のまま）
     26〜30.5%  3:4の写真が生まれる
     26〜36.5%  実機が定位置へ（覆いは空画面を保つ）
     33.5〜55.1%  PC=浅い横弧／SP=縦＋奥行きで、止まらず入る
     55.1%   スマホ上端へ接触
     55.1%以後  現行のチェキぽん→ホームへそのまま接続
     88〜96%  ことば（コピー・ヘッダー・CTA）の登場
   ═══════════════════════════════════════════════════════════ */

/* ── 1枚の写真（2026-08-06 社長「ホームにあるチェキと全く同じものに」）
   飛んでいる間= .hero-cheki-photo（素の縦3:4写真）。
   吸着の瞬間= .hero-pon-card の**クローン**（同一クラス＝アプリのカードと同一の見た目）
   に衣替えする。見た目の一致をスタイル模写でなく構造で保証する。 */
.hero-cheki {
  position: fixed;
  z-index: 46;
  top: 0;
  left: 0;
  width: 232px;                 /* ぽんカードのauthored幅と同値 */
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
}
.hero-cheki-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 232px;
  height: 309px;                /* 写真の間は3:4（2026-08-06 社長「写真の時は3:4の四角」） */
  border-radius: 12px;
  overflow: hidden;
}
.hero-cheki-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
/* クローン側: 土台の絶対配置・登場アニメを打ち消して、この箱の中で静かに佇む */
.hero-cheki .hero-pon-card {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  opacity: 0;
  transform: none;
  animation: none;
}

/* 吸着の瞬間に、素の写真がカード（アプリと同一）へ衣替え */
@keyframes hero-cheki-dress-in {
  0%, 54.6% { opacity: 0; }
  57%, 100% { opacity: 1; }
}
@keyframes hero-cheki-dress-out {
  0%, 55.4% { opacity: 1; }
  57.5%, 100% { opacity: 0; }
}
html.motion-ready .hero-cheki .hero-pon-card {
  animation: hero-cheki-dress-in 7.8s linear both;
}
html.motion-ready .hero-cheki .hero-cheki-photo {
  animation: hero-cheki-dress-out 7.8s linear both;
}

/* ── ①ぽんカードの写真＝アプリと同じ1:1＋
   §4.76の<picture>包みで死んだ土台の「> img」規則の復活（2026-08-06 実測で特定:
   imgが孫になり寸法が全滅→原寸がはみ出て白い隅だけ見えていた） ── */
.hero-pon-pic picture,
.home-demo-photo picture,
.paste-phone picture {
  display: contents;
}
/* カードの写真はアプリと同じ**正方形1:1**（2026-08-06 社長確認・3:4化は誤読だった） */
.hero-pon-pic img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 63% 55%;
  filter: brightness(1.05) contrast(1.04) saturate(1.08) sepia(.07);
}
.home-demo-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(1.05) contrast(1.04) saturate(1.08) sepia(.07);
}
.paste-phone img {
  height: 100%;
  object-fit: fill;
  object-position: top;
}

/* ── ④PC冒頭: ことばが出るまでは被写体を画面の主役に据える。
   ことばの登場(is-intro-done)で、コピーの居場所を空けるようにゆっくりパン ── */
@media (min-width: 561px) {
  .hero-photo { transition: object-position 1.2s cubic-bezier(.22, 1, .36, 1); }
  html.is-intro .hero-photo { object-position: 63% 45%; }
}

/* ── 実機の画面の覆い（着地まで結果を見せない） ── */
#hero-screen-cover {
  position: fixed;
  z-index: 45;
  background: linear-gradient(180deg, #FDFBF7, #F6EFE6);
  opacity: 0;
  pointer-events: none;
}
/* 覆いは吸着の直後に引く＝土台の「カード→ぽん58.5%」の連続設計へ直結（2026-08-06） */
@keyframes hero-cover-story {
  0%, 29% { opacity: 0; }
  33%, 54.5% { opacity: 1; }
  57.5%, 100% { opacity: 0; }
}
/* ★2026-08-08 覆いは出さない（7/30版の動きへ戻したため）。
   これは自前WAAPIの飛行と対で「着地まで結果を見せない」ために作った目隠し。
   土台の飛行は写真が入った直後にカードを出すので、隠す対象がそもそも無い。
   実測: 覆いが 2.6〜4.6秒 実機の画面を隠し、中が空に見えていた。 */
html.motion-ready #hero-screen-cover { animation: none; opacity: 0; }

/* v9では接触の意味を「写真→チェキ」の変化だけで伝える。追加の光は描かない。 */
#hero-contact-light {
  display: none;
  position: fixed;
  z-index: 47;
  width: 90px;
  height: 22px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 250, 238, .9), rgba(255, 250, 238, 0) 70%);
  opacity: 0;
  pointer-events: none;
}
@keyframes hero-light-story {
  0%, 53.5% { opacity: 0; }
  55.1% { opacity: .9; }
  57%, 100% { opacity: 0; }
}
html.motion-ready #hero-contact-light {
  animation: hero-light-story 7.8s linear both;
}

/* ── 土台のぽんカード: 写真が上端へ吸い込まれた直後、上から落ちてくる
   （2026-08-06 社長「上から落ちるようにチェキぽん」＝プリンタの物理）。
   動きは土台の元の落下バウンドをそのまま、開始だけ吸着直後(57.2%)へ寄せた。
   92.5%以降の退場は土台の値のまま。 ── */
/* ★2026-08-08 社長「チェキになった瞬間がゆっくりで変」
   実測: チェキが伸びる区間（clip-pathが開く）が
     7/30版 = 41.7 → 45%   ＝ 0.26秒
     現在版 = 41.7 → 59.8% ＝ 1.41秒  ← 5倍以上かかっていた
   自前WAAPIの吸着(55%付近)に合わせて後ろへ引き伸ばした名残。
   落下の弾みも同じだけずれていたので、**7/30版の定義をそのまま採用**する。 */
/* ★2026-08-08 社長「スマホに写真が触れた瞬間、チェキに代わるようにしてほしい」

   実測（touch_probe.mjs）で分かっていたずれ:
     写真が実機へ入り切って消える = 3.2秒（41%）
     カードが出る                 = 3.6秒（46%）  ← 0.4秒の空白
     チェキに変わる（clip開）     = 3.7秒（47%）  ← 触れてから0.5秒遅れ
   ＝「写真が消える → 間 → 降ってくる → 伸びる」で、触れた瞬間に何も起きていなかった。

   → 登場を写真が消える 41% へ合わせ、**落下をやめてその場で伸ばす**。
     写真が触れたその位置で白フチと文字が生まれる＝「触れた瞬間に変わる」。
     着地の弾み（64.3%以降）は手応えとして残す。 */
/* ★2026-08-08 社長「スマホの上部に写真があたったらチェキになり、それが落ちてぽんだよ」
   ＋「あとなんか変だよ」（カードがホームのカードと重なる）

   前回、落下をやめて「その場で伸びる」にしたのは行き過ぎだった。
   正しい順序は **上部で当たる → その場でチェキになる → 落ちる → ぽん**。
   あわせて、私が書き換えたときに落としていた**退場**（92.5%→99.11%で消える）を
   7/30版からそのまま復元する。これが無いとカードが最後まで残り、
   ホームのカードと二重に見える（社長のPCスクショで判明）。

   実測: 写真が実機の上部に入り切って消えるのは 3.2秒。
   当たる瞬間を 40.8%（3.18秒）に寄せ、伸び切りを 43%（3.35秒）にした
   （最初 41%/44.3% にしたら、写真が消えてから0.4秒の空きが見えたため）。

   ★2026-08-08 カーブを入れる（社長提供の Maya / ronaldo-avalos を参考）
   実測すると、落下が **完全な等速**（50msあたり 13.4/13.5/13.4/13.5…）だった。
   親が `7.8s linear` で、キーフレーム間の曲線が63%の1箇所しか指定されていないため。
   Maya の AnimationSampler.swift は「CMらしい動き」を6本のカーブとして持っており、
   ソース内のコメントは `briefly exceed 1 in the middle — that's intentional`。
   ＝**行き過ぎてから戻るのが意図**。ここに合わせてカーブを入れる。

     Maya名        数式             CSS
     Spring(1.55)  back-out         cubic-bezier(.34, 1.51, .64, 1)   8.5%行き過ぎ
     Snappy        easeOutQuart     cubic-bezier(.25, 1, .5, 1)       速く始まり収まる
     Gentle        easeOutSine      cubic-bezier(.61, 1, .88, 1)
     Smooth        easeInOutCubic   cubic-bezier(.65, 0, .35, 1)

   落ちる/上がるだけは Maya に無い（あちらのカーブはズーム用で全部 out 系）ので、
   **重力＝s∝t²** から easeInQuad / easeOutQuad を使う。
     落ちる  cubic-bezier(.11, 0, .5, 0)
     上がる  cubic-bezier(.5, 1, .89, 1)

   ※**位置と時刻は一切変えていない**。変えたのは点と点のあいだの進み方だけ。
     骨格（上部で当たる→チェキ→落ちる→ぽん）は社長確定なので動かさない。 */
@keyframes hero-card-story {
  0%, 40.7% {
    opacity: 0;
    clip-path: inset(0 0 98px 0 round 20px);
    transform: translateX(-50%) translateY(-245px) scale(1);
  }
  /* 当たった瞬間＝写真が消える時刻。**上部に**、閉じた姿で現れる */
  40.8% {
    opacity: 1;
    clip-path: inset(0 0 98px 0 round 20px);
    transform: translateX(-50%) translateY(-245px) scale(1);
    /* Snappy＝速く開いてゆっくり収まる。磁石がパチッと吸い付く手応えはここ */
    animation-timing-function: cubic-bezier(.25, 1, .5, 1);
  }
  /* その場で白フチと文字が伸びる（0.17秒＝7/30版と同じ速さ）

     ★2026-08-08 社長「チェキになった瞬間、重力で落ちてぽんにしてほしい」
     ここにあった 43%→46% の**ため（0.23秒）を廃止**。伸び切ったら即落ちる。 */
  43% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 20px);
    transform: translateX(-50%) translateY(-245px) scale(1);
    /* 落ちる＝加速（重力）。等速だと「降ろされた」ように見えて紙が落ちない。
       つぶれ(scale 1.01,.97)も同じ曲線に乗るので、着地の瞬間に寄る＝正しい。

       ★社長「少し動きが速い」→ 落下を 43%→54%（0.86秒。変更前は0.43秒）へ倍に伸ばす。
       easeInQuad の着地の速さは 2d/T なので、0.86秒だと**等速だった頃と同じ速さで当たる**。
       ＝ゆっくり始まって、着地は前と同じ。速くなったようには感じない。 */
    animation-timing-function: cubic-bezier(.11, 0, .5, 0);
  }
      54% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 20px);
    transform: translateX(-50%) translateY(0) scale(1.01, .97);
    /* 跳ね上がる＝減速（上がりきる手前でいちばん遅い） */
    animation-timing-function: cubic-bezier(.5, 1, .89, 1);
  }
  57% {
    opacity: 1;
    transform: translateX(-50%) translateY(-34px) scale(1);
    animation-timing-function: cubic-bezier(.11, 0, .5, 0);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.008, .982);
    animation-timing-function: cubic-bezier(.5, 1, .89, 1);
  }
  62% {
    opacity: 1;
    transform: translateX(-50%) translateY(-13px) scale(1);
    animation-timing-function: cubic-bezier(.11, 0, .5, 0);
  }
  64% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.004, .99);
    animation-timing-function: cubic-bezier(.5, 1, .89, 1);
  }
  65.5%,
  92.5% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 20px);
    transform: translateX(-50%) translateY(0) scale(1);
    animation-timing-function: cubic-bezier(.2, .78, .24, 1);
  }
  98.7%,
  99.1% {
    opacity: 1;
    transform: translate3d(-116px, 108px, 0) scale(.8836);
  }
  99.11%,
  100% {
    opacity: 0;
    transform: translate3d(-116px, 108px, 0) scale(.8836);
  }
    }

/* ぽん！は着地(64.3%)とほぼ同時に（土台の形を+5.5%へ平行移動） */
/* ★2026-08-08 社長「ぽんのもじがおそい」。
   チェキが最初に着地するのは 54%（4212ms）なのに、文字は 66.5%（5187ms）＝**約1秒あと**に出ていた。
   跳ね終わり（65.5%）を待ってから出す形になっていたため。
   ぶつかった衝撃で言葉が出るのが自然なので、**最初の着地と同時**にした。
   終わり（87%〜）と表示の長さは変えない。 */
@keyframes hero-pon-story {
  0%, 54% {
    opacity: 0; transform: translateX(-50%) translateY(6px) scale(.86);
    /* Spring（Mayaの既定・back-out overshoot 1.55＝8.5%行き過ぎて戻る）。
       「ぽん」は行き過ぎてから戻ると、はずんで見える */
    animation-timing-function: cubic-bezier(.34, 1.51, .64, 1);
  }
  57% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  58.5%, 87% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  90%, 100% { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(.96); }
}

/* クローンカードは不要（落ちてくる土台カードがチェキ本体） */
.hero-cheki .hero-pon-card { display: none; }

/* ── 実機の入り方: うっすら先出し → 定位置 → 吸着の瞬間ひと呼吸 ── */
/* 提案書P2/P3/P4（2026-08-06 社長「これを実装して見て」）:
   かしゃと同時にスッと登場 → 写真を迎えて傾く → 吸着でのけぞる

   ★2026-08-08 社長「背景から写真が浮き出て、**少し間が出た後に**実機が出てほしい」
   実測すると、PCは実機が 22.5%→27%（1.76→2.11秒）で、写真が浮き出る26%(2.03秒)と
   **ほぼ同時**に出ていた。スマホ側も 38%→40.5% で定位置になり、
   写真が触れる41%まで**わずか0.04秒**しかなく、実機・接触・チェキが団子になっていた。
   ＝これが「速い」の正体。

   出だしを 31%（2.42秒）へ動かして、前後に間を作る:
     22.5% かしゃ → 26% 写真が浮き出る →【0.39秒の間】→ 31% 実機が出る
     → 34.5% 実機が定位置 →【0.51秒 写真が入っていく】→ 41% 触れる
   傾き・のけぞりは着地(51.5%→54%)の移動に合わせて +2.5% ずらす。値は変えていない。 */
@keyframes hero-device-rise {
  0%, 31% { opacity: 0; transform: translate3d(34px, 46px, 0) rotate(0deg) scale(.985); }
  34.5%   { opacity: 1; transform: translate3d(0, 4px, 0) rotate(0deg) scale(1.005); }
  36%, 47% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  51.5%   { opacity: 1; transform: translate3d(0, 0, 0) rotate(-1.2deg) scale(1); }
  57%     { opacity: 1; transform: translate3d(0, 0, 0) rotate(-0.4deg) scale(1); }
  58.3%   { opacity: 1; transform: translate3d(2px, 0, 0) rotate(0.6deg) scale(1.012); }
  60.5%, 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}
@keyframes study-device-rise-in-place {
  0%, 31% { opacity: 0; transform: translate3d(14px, 46px, 0) rotate(0deg) scale(.985); }
  34.5%   { opacity: 1; transform: translate3d(0, 4px, 0) rotate(0deg) scale(1.005); }
  36%, 47% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  51.5%   { opacity: 1; transform: translate3d(0, 0, 0) rotate(-1.2deg) scale(1); }
  57%     { opacity: 1; transform: translate3d(0, 0, 0) rotate(-0.4deg) scale(1); }
  58.3%   { opacity: 1; transform: translate3d(2px, 0, 0) rotate(0.6deg) scale(1.012); }
  60.5%, 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

/* 土台の hero-phone-slot は実機の「予告リング」を最初から描いている。
   かしゃの白の中で先に見えてしまう（実測1755ms）ので、実機と同じ曲線に載せる。 */
@keyframes hero-slot-ghost {
  0%, 31% { opacity: 0; }
  34.5%, 100% { opacity: 1; }
}
html.motion-ready .hero-phone-slot {
  animation: hero-slot-ghost 7.8s linear both;
}

/* ★2026-08-08 社長「背景が写真になり、それがスマホに入ってぽんとなる演出のところを
   反映させてほしい」＝ 7/30版（preview-mobile-p0.html）の動きへ戻す。

   【調べて分かったこと】キーフレームの定義は7/30版と現在版で**完全に一致**していた。
   差は読み込むJSだった:
     7/30版 = top-mobile-study.js ほかのみ（＝土台のCSSアニメだけで飛ばす）
     現在版 = そこへ hero-intro.js が加わり、
              ・ここで土台の飛翔を visibility:hidden で消し
              ・代わりに #hero-cheki を自前のWAAPIで飛ばしていた
   その自前飛行が「写真が実機の外へはみ出したまま動く」見え方を作っていた。

   → 打ち消しをやめ、土台の飛翔を出す。自前のWAAPIは js 側で止める。
     キーフレームは同一なので、これだけで当時の動きに戻る。 */
/* html.motion-ready .hero-captured-photo { visibility: hidden !important; } */

/* ── 「」は体ごと・まんなかへ ── */
@media (max-width: 560px) and (orientation: portrait) {
  .focus-corners {
    left: calc(50% - 118px);
    top: calc(50% - 150px);
    right: auto;
    bottom: auto;
    width: 236px;
    height: 300px;
    margin: 0;
  }
  /* 背景は縦9:16の専用写真（生成器が<picture>で差し替え）。被写体を画面まんなかへ */
  .hero-photo { object-position: 50% 55%; }
}
@media (min-width: 561px) {
  .focus-corners {
    left: calc(61% - 150px);
    top: calc(52% - 190px);
    width: 300px;
    height: 380px;
  }
}

/* ── ことばの登場は**土台の機構に任せる**（2026-08-05 検証で確定）
   土台(hero-intro.js + 土台CSS)に「is-intro中は言葉を隠し、着地(is-intro-done)で出す」
   機構が既にある。v7では LAND_AT=0.60 にしたので、ことばは吸着(55%)が落ち着いた
   4.7秒頃に出る＝承認絵コンテ(ぽんのコマでコピー可視)と一致。
   ここに独自のwords-inアニメを重ねたら二重機構で競合した（検証のコマ撮りで発覚）ので置かない。 */

/* ── 提案書P1: フォーカス枠が外から「カチッ」と収束する ──
   土台の hero-find-moment(不透明度)を残したまま、transformの収束だけ重ねる。 */
@keyframes hero-frame-converge {
  0%, 6% { transform: scale(1.16); }
  10.5%, 100% { transform: scale(1); }
}
html.motion-ready .hero.is-active .focus-corners {
  animation:
    hero-find-moment 7.8s linear both,
    hero-frame-converge 7.8s cubic-bezier(.2, .9, .3, 1) both;
}

/* v9では情報量になるため、接点の波紋とベゼル発光も描かない。DOMは検証互換のため残す。 */
#hero-impact-ripple {
  display: none;
  position: fixed;
  z-index: 47;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid rgba(255, 233, 200, .9);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
@keyframes hero-ripple-story {
  0%, 54.8% { opacity: 0; transform: scale(.4); }
  55.6% { opacity: .85; transform: scale(1); }
  58.5%, 100% { opacity: 0; transform: scale(2.1); }
}
html.motion-ready #hero-impact-ripple {
  animation: hero-ripple-story 7.8s linear both;
}
#hero-bezel-glow {
  display: none;
  position: fixed;
  z-index: 44;
  border: 2px solid rgba(255, 210, 156, .8);
  box-shadow: 0 0 16px rgba(255, 205, 150, .45);
  opacity: 0;
  pointer-events: none;
}
@keyframes hero-bezel-story {
  0%, 54.8% { opacity: 0; }
  56.2% { opacity: .9; }
  59%, 100% { opacity: 0; }
}
html.motion-ready #hero-bezel-glow {
  animation: hero-bezel-story 7.8s linear both;
}

/* 動きを減らす設定では全部出しっぱなし（隠し損ねを作らない） */
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .hero-cheki,
  html.motion-ready .hero-cheki .hero-cheki-frame,
  html.motion-ready .hero-cheki .hero-cheki-band,
  html.motion-ready #hero-screen-cover,
  html.motion-ready #hero-impact-ripple,
  html.motion-ready #hero-bezel-glow,
  html.motion-ready #hero-contact-light {
    animation: none;
    opacity: 0;
  }
  html.motion-ready .hero-captured-photo { visibility: visible !important; }
  html.motion-ready .hero-phone-slot { animation: none; opacity: 1; }
}


/* ── 実機描画の原因切り分け用ベゼル板（2026-08-08）──
   これはCM本編の部品ではない。通常表示ではDOMにも生成せず、
   色分け診断URL（?paint）のときだけ実機矩形の比較用に表示する。 */
#hero-bezel-plate {
  display: none;
  position: fixed;
  z-index: 44;
  box-shadow: 0 0 0 11px #101012,
              0 4px 10px rgba(43, 31, 19, .2),
              0 34px 72px -24px rgba(43, 31, 19, .46);
  opacity: 0;
  pointer-events: none;
}
html.is-paint-debug.motion-ready #hero-bezel-plate {
  display: block;
  animation: hero-bezel-plate-story 7.8s linear both;
}
@keyframes hero-bezel-plate-story {
  0%, 32.5% { opacity: 0; }
  36.5%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-paint-debug.motion-ready #hero-bezel-plate { animation: none; opacity: 1; }
}

/* 自前の飛ぶ写真は出さない（土台の飛翔と二重の主役になるため）。
   DOMは残す＝site-top.js が拍を掴んでいる可能性に備える。 */
html.motion-ready .hero-cheki { visibility: hidden !important; }

/* 土台のぽんカードを出す（2026-08-08）。
   現在版にはカードが**2つ**ある（実測）:
     .hero-cheki > .hero-pon-card      … 自前WAAPI用のクローン（伏せてある）
     .hero-pon-stage > .hero-pon-card  … 土台の本物（7/30版はこれだけ）
   出すのは**土台側だけ**。広く当てると、伏せてあるクローンまで巻き込む。 */
html.motion-ready .hero-pon-stage .hero-pon-card {
  display: block !important;
  visibility: visible !important;
}

/* ★2026-08-08 社長「写真になってから実機を出してほしい」
   実機の立ち上がりを、写真が生まれた後ろへずらす。
   土台のキーフレームは 0%,32.5% で待機 → 36.5% で定位置。
   その待機を 38% まで延ばし、40.5% で定位置＝写真が出てから実機が起きる。
   位置と大きさの値は土台のまま（動き方は変えない）。 */
@media (max-width: 560px) and (orientation: portrait) {
  @keyframes study-device-rise-in-place {
    /* ★2026-08-08 社長「少し間が出た後に実機が出てほしい」
       38%→40.5% だと、写真が触れる41%まで**0.04秒**しかなく団子になっていた。
       31%→34.5% へ前倒しし、写真(26%)との間に0.39秒、接触(41%)との間に0.51秒を作る。 */
    0%, 31% {
      opacity: 0;
      transform: translate3d(14px, 46px, 0) scale(.985);
      /* Snappy＝下からスッと起きる（等速だと押し上げられて見える） */
      animation-timing-function: cubic-bezier(.25, 1, .5, 1);
    }
    34.5% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1.008);
      /* Gentle＝行き過ぎた1.008から、やわらかく1.0へ収まる */
      animation-timing-function: cubic-bezier(.61, 1, .88, 1);
    }
    36%, 100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }
}

/* ★2026-08-08 社長「「」をもう少し小さめに」→「正方形型にしてほしい」
   フォーカス枠（撮る合図）を 236x300（縦長）→ **196x196（正方形）** へ。
   アプリのカード写真は 1:1（決定.md「チェキの正」）なので、
   撮る合図も正方形のほうが「この形で切り取られる」と読める。
   位置は中心を保つよう左上を合わせ直す。 */
@media (max-width: 560px) and (orientation: portrait) {
  .focus-corners {
    left: calc(50% - 98px);
    top: calc(50% - 98px);
    width: 196px;
    height: 196px;
  }
}