/* cover-v20 — 夜空の和紙に、筆 → 角印 → 押す → 朱印 → 金の箔 → 題字へ（2026-09-29）。cover55-runtime.css・cover-v9d.css の後、
   cover-v10.css・cover-v19.css の代わりに読み込む。組み立てと着地の計測は cover-v20.js。ここは見た目と CSS アニメーション
   （transform と opacity だけ。線を描く所だけ stroke-dashoffset）。

   オーナーの指示
   - 「カバーアニメーション、ちょっとＡＩっぽすぎるな。あとハンコは正方形でいいと思う。それとサシ色がなくて地味な映像になってる。
     あと、黒い高級な紙という設定は嫌いじゃないんだけど、メイン画面との脈絡がなくていまいちフィットしてない。」
   この版での扱い
   - AI っぽさ：面取りの照り・スポットの光・よくあるきらめき・黒いタイルの立体感をやめた。版画・落款のように平らな形と、
     はっきりした線と、決然とした間（止め → 一度で押す → 止め）で見せる。光の効果は一つもない。
   - 角印：正方形の朱文印（朱の枠の中に朱の印）。一辺は題字の印の高さの 2.2 倍（1440 で約 180px）。スマホは幅の 40% まで。
   - サシ色：押した跡は朱 #b54a3a の角印。朱肉のかすれ（縁の荒れ・細かな抜け・濃さのむら・紙の目に沿う筋）は手続きのノイズ。
     朱の印の上に金の箔（金 #d8b66a・照り #ecd28a の 2 値。照りは押した瞬間だけの平らな一枚）。緑は使わない。
   - 紙：地はヒーローの夜空の実際の色 #0d0724（.ens-poster の背景。ヒーローの中は上から下まで同じ色）の和紙。紙の目は光に頼らず
     画面全体にごく淡く。ヒーローの下（LIVE の帯）は紙もページと同じ #08090e。紙が消えても空の色は変わらず、字・波・キャストが立つ。
   没（再発させない）：デカい V（角印は題字の印の 2.2 倍まで・中の印は 1.63 倍）、煙（なし）、流れる光の線（なし。線は印稿の輪郭と
   枠だけ）、青海波（カバーでは使わない）、のぞき窓（朱文なので、金が飛んだ後に印の形の穴は開かない。朱の印影が残って溶ける）。

   時間（ms、カバーの時計）
   | 区           | 時刻         | 内容 |
   | 序：紙と筆   | 0            | 夜空の和紙（最初のコマから）。
   |              | 140          | 題字の印とヒーローの下端を測り直し、角印・床の位置を置き直す（字の組みは開始から約 80ms で落ち着く）。
   |              | 150–450      | ヒーローの下（LIVE の帯）の所が、ページと同じ #08090e へ沈む。
   |              | 160–780      | 筆：紙色の細い線（1.2px）で印の輪郭を描く（620ms）。
   | 破：角印     | 680–940      | 同じ筆で正方形の枠を描き、印稿が閉じる＝角印ができる。
   |              | 1000–1180    | 持ち上げ：印稿が 1.00→1.05（ゆっくり止まる）。
   | 急：押す     | 1180–1240    | 押し下げ：1.05→0.97（速く、一度だけ）。
   |              | 1240         | 朱の角印が紙に残る（40ms）。印稿の線は同じコマで消える。
   |              | 1240–1640    | 間：朱印だけ。
   |              | 1640         | 金の箔が朱の印の上に乗る：照り #ecd28a の平らな一枚が一瞬で出て、360ms で地の金 #d8b66a へ落ち着く。
   | 受け渡し     | 1900         | 題字の印を測り直す（着地の先だけを合わせる）。
   |              | 1980–2730    | 金の印だけが題字の印へ（750ms、ゆっくり出て速く、長く減速して着地）。
   |              | 2080–2400    | 朱の角印が空に溶ける（320ms）。紙が消えて字が見え始める前に溶け切る（角印は題字の字と本文の場所に重なるため）。
   |              | 2400–2700    | 紙が消える：空の色はそのまま、紙の目が消え、字・ナビ・LIVE の帯が立つ（朱印が溶け切った所から。
   |              |              | 金の印が空に一つだけ浮く間を作らない）。
   |              | 2580         | v8:cover-reveal（着地の 150ms 前）。波とキャストが下から立ち上がる。
   |              | 2730         | 着地。
   |              | 2730         | 着地と同じコマで本物の印と入れ替える（紙は 2700 で消え切っている。差 1px 以内のとき一瞬。超えたら 120ms で溶かす）。
   |              | 2750         | 実行部の完了（c55-zoom の animationend）。実時間では CSS の時計の遅れ（40〜90ms）を足して約 2.8 秒。期限 3300ms は保険。
   時刻の合図（140・1900・2580）は、CSS アニメーションが実際に始まったコマ（紙のアニメの startTime）から数える。

   層（下から）
   .c70-paper（夜空の和紙）> .c70-grain（紙の目）・.c70-floor（ヒーローの下）
   .c70-red（朱の角印の跡）
   .c70-gold（金の印。着地の transform）> .c70-gold-fade > .c70-gold-flat（地の金）・.c70-gold-flash（照り）
   .c70-design（筆の印稿。持ち上げ・押し下げ）
   各層は will-change で合成の層にし、フィルターは組み立てのときに一度だけ描く。出る層は 0.002 から出して最初のコマで描かせる。 */

/* 旧い舞台（線描・障子・霞・黒い地）は使わない */
.c55-cover .c55-stage,
.c55-cover .c59-field,
.c55-cover .c59-kasumi {
  display: none !important;
}

.c55-cover[data-state] {
  background: transparent;
}

.c70,
.c70-paper,
.c70-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.c70-paper {
  background: #0d0724;
  will-change: opacity;
}

.c70-grain svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

.c70-floor {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--c70-hb, 100%);
  bottom: 0;
  background: #08090e;
  opacity: 0;
  will-change: opacity;
}

.c70-red,
.c70-design,
.c70-gold {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.c70-red {
  opacity: 0.002;
  will-change: opacity;
}

.c70-red-svg {
  position: absolute;
  display: block;
  overflow: visible;
}

.c70-gold {
  transform-origin: 0 0;
  will-change: transform;
}

.c70-gold-fade {
  position: absolute;
  inset: 0;
  will-change: opacity;
}

.c70-gold-flat,
.c70-gold-flash {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.002;
  will-change: opacity;
}

.c70-gold.c70-swap {
  visibility: hidden;
}

.c70-gold.c70-swap-soft {
  animation: none !important;
  transform: translate(var(--c70-tx), var(--c70-ty)) scale(var(--c70-k));
}

.c70-gold.c70-swap-soft .c70-gold-fade {
  opacity: 0;
  transition: opacity 120ms linear;
}

.c70-design {
  transform-origin: 50% 50%;
  will-change: transform;
}

.c70-design-svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: opacity;
}

/* 線の地の値は「描き終わり」（0）。描く前の 1 は backwards の塗りで出す（forwards で塗り続けると、描き終わった後も毎コマ描き直しになる） */
.c70-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.c70-done {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

@keyframes c70-in {
  from {
    opacity: 0.002;
  }
  to {
    opacity: 1;
  }
}

@keyframes c70-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes c70-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ---- 序：ヒーローの下を黒く沈める演出はやめた（オーナー 2026-09-29「カバーは画面全部を覆わないといけないからな？」）。
   紫の和紙が画面全体を覆ったまま再生し、最後に紙が溶けてページ（ヒーローとその下の黒い帯）が現れる ---- */
.c55-cover[data-state] .c70-floor {
  animation: none;
  opacity: 0;
}

/* ---- 序：筆で印の輪郭／破：正方形の枠 ---- */
.c55-cover[data-state] .c70-line-logo {
  animation: c70-draw 620ms cubic-bezier(0.45, 0, 0.25, 1) backwards;
  animation-delay: calc(160ms - var(--c55-t));
}

.c55-cover[data-state] .c70-line-frame {
  animation: c70-draw 260ms cubic-bezier(0.5, 0, 0.3, 1) backwards;
  animation-delay: calc(680ms - var(--c55-t));
}

/* ---- 急：持ち上げ（1000–1180、ゆっくり止まる）→ 押し下げ（1180–1240、速く一度） ---- */
.c55-cover[data-state] .c70-design {
  animation: c70-press 240ms linear both;
  animation-delay: calc(1000ms - var(--c55-t));
}

@keyframes c70-press {
  0% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  75% {
    transform: scale(1.05);
    animation-timing-function: cubic-bezier(0.7, 0, 1, 0.6);
  }
  100% {
    transform: scale(0.97);
  }
}

/* 押した同じコマで印稿の線は消える（visibility まで落として、後で描き直しを起こさない） */
.c55-cover[data-state] .c70-design-svg {
  animation: c70-cut 1ms linear both;
  animation-delay: calc(1240ms - var(--c55-t));
}

@keyframes c70-cut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* 朱の角印が残る（40ms）→ 金が飛び立つのを追って空に溶ける（2080–2400）。紙が消えて題字・本文が見え始める 2460 より前に
   溶け切らせる（角印は題字の字と本文の場所に重なるので、残すと字の上に朱の四角が透けた。実測） */
.c55-cover[data-state] .c70-red {
  animation:
    c70-in 40ms linear both,
    c70-out 320ms cubic-bezier(0.45, 0, 0.55, 1) forwards;
  animation-delay: calc(1240ms - var(--c55-t)), calc(2080ms - var(--c55-t));
}

/* ---- 金の箔：照りの一枚が一瞬で出て、地の金へ落ち着く ---- */
.c55-cover[data-state] .c70-gold-flat {
  animation: c70-in 40ms linear both;
  animation-delay: calc(1640ms - var(--c55-t));
}

.c55-cover[data-state] .c70-gold-flash {
  animation: c70-flash 400ms linear both;
  animation-delay: calc(1640ms - var(--c55-t));
}

@keyframes c70-flash {
  0% {
    opacity: 0.002;
  }
  10% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  100% {
    opacity: 0;
  }
}

/* ---- 受け渡し：金の印だけが題字の印へ ---- */
.c55-cover[data-state] .c70-gold {
  animation: c70-fly 750ms cubic-bezier(0.62, 0, 0.14, 1) both;
  animation-delay: calc(1980ms - var(--c55-t));
}

@keyframes c70-fly {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(var(--c70-tx, 0px), var(--c70-ty, 0px)) scale(var(--c70-k, 1));
  }
}

/* 題字が画面の外のとき（--c70-fade-to: 0）だけ、金の印も紙と一緒に消える。ふだんは 1→1 で何もしない */
.c55-cover[data-state] .c70-gold-fade {
  animation: c70-fade 300ms cubic-bezier(0.45, 0, 0.55, 1) both;
  animation-delay: calc(2400ms - var(--c55-t));
}

@keyframes c70-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: var(--c70-fade-to, 1);
  }
}

/* 紙が消える（空の色は変わらない） */
.c55-cover[data-state] .c70-paper {
  animation: c70-out 300ms cubic-bezier(0.45, 0, 0.55, 1) both;
  animation-delay: calc(2400ms - var(--c55-t));
}

/* 実行部の完了の合図（runtime は c55-zoom の animationend で finish("complete")） */
.c55-cover[data-state] .c70-done {
  animation: c55-zoom 1ms linear both;
  animation-delay: calc(2750ms - var(--c55-t));
}

/* スキップ：共通の「文字＋下線」（v10 と同じ形）。受け渡しの始まりで消える */
.c55-cover-skip {
  right: var(--hs-gutter, 20px);
  bottom: max(24px, env(safe-area-inset-bottom));
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(243 236 220 / 0.78);
  font: 700 13px/1.4 "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.c55-cover-skip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 0.7em + 6px);
  height: 1px;
  background: currentColor;
}

.c55-cover-skip:focus-visible {
  outline: 2px solid #f3ecdc;
  outline-offset: 4px;
}

.c55-cover[data-state] .c55-cover-skip {
  animation: c70-skip-out 240ms linear forwards;
  animation-delay: calc(1980ms - var(--c55-t));
}

@keyframes c70-skip-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c70 {
    display: none;
  }
}