/* アイキャッチ「シーン」専用スタイル（.ec-shake配下、window.Eyecatch.create()が
 * rootElの中に生成するDOMだけに掛かる）。
 *
 * /eyecatch単独ページだけが読む「ページchrome」（body/.ec-page/.ec-panel等）は
 * eyecatch-page.css に分離してある。このファイルを台本再生画面(index.html)から
 * 読み込んでも、bodyの見た目（背景色・フォント・パディング）を一切変えない
 * ことがその分離の目的（index.htmlの#openingLayer配下にこのシーンを
 * 埋め込むため。doc/devlog参照）。
 *
 * 既存の player.css（緑×黒のMatrix風テーマ）とは配色が全く異なる独立画面なので、
 * :root の変数系を共有せず、このファイル内に閉じたローカル変数だけを使う
 * （--ec-接頭辞なので player.css の --bg-0/--accent 等とは衝突しない）。
 * ステージ側(.ec-stage-outer/.ec-stage=1280x720固定ピクセル空間を外側だけ
 * scaleする仕組み)は各ページ側が持つ(/eyecatchはeyecatch-page.cssのそれ、
 * 台本再生画面はplayer.cssの既存.stage-outer/.stageをそのまま使う)ため、
 * このファイルにはステージ"内部"(.ec-shake以下)のルールだけを置く。
 * z-indexは使わず、DOM順だけで奥行きを表す（player.cssの全体方針を継承）。
 */

:root {
  --ec-ink: #e7ebf3;      /* ロゴ前景・字幕用の白 */
  --ec-gold: #d7b262;     /* ロゴ背面・飾り線・きらめき用の金 */
  --ec-bg-top: #23201d;   /* 背景グラデーション上(暖色寄り) */
  --ec-bg-mid: #17161a;
  --ec-bg-bottom: #0b0d12; /* 背景グラデーション下(寒色寄り)。床帯と同色 */
}

/* .ec-stage自身のtransform(responsiveなscale)とは別に、画面揺れ(translate)専用の
   層を1枚挟む。同じ要素のtransformをCSSの静的scaleとJSのWeb Animations APIで
   同時に扱うと競合する（animate()はその瞬間だけローカルなtransformで上書きする
   ため）ので、「静的スケール」と「揺れ」を別要素の責務に分ける。 */
.ec-shake {
  position: absolute;
  inset: 0;
}

.ec-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ec-bg-top) 0%, var(--ec-bg-mid) 52%, var(--ec-bg-bottom) 100%);
}

.ec-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* サイクル1.6: 14%(100.8px)だと床の線より下の帯が広く空きすぎていた。
     6%(43.2px)に詰めて要件の40〜45pxへ。キャラの接地位置(eyecatch.jsの
     CONFIG.charBottomPx)もこの値に合わせて同時に下げてある。 */
  height: 6%;
  background: var(--ec-bg-bottom);
  border-top: 1px solid rgba(215, 178, 98, .42);
}

/* ---------- キャラクター ---------- */
/* .ec-charsの中にJSが6体分の.ec-charを生成する。left/width/height/bottomは
   player.jsのcomputeSlotLayout(6)と同じ式をCONFIGから再現してJSがインラインで
   設定する（固定クラスにすると人数が変わる余地を潰すため、既存と同じ考え方）。 */
.ec-chars {
  position: absolute;
  inset: 0;
}

.ec-char {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* 足元のスポットライト。player.css .char のグリーン版と同じ発想で、
     暗い背景にキャラのボディが沈んで輪郭が消えるのを防ぐ。 */
  background: radial-gradient(ellipse 70% 55% at 50% 92%, rgba(215, 178, 98, .18), transparent 72%);
}

/* 落下〜着地〜揺れ戻りの一連はこの要素のtransformだけで表現する(Web Animations
   APIでJSから駆動。transform-originを足元にして「つぶれる」演出が自然に見える
   ようにする)。 */
.ec-char-fall {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}

/* 全員コール時の小ジャンプだけを担当する層。.ec-char-fall(着地後はtransform:
   none相当で静止)の上に重ね、「1要素1transform関心」を守る(player.css
   .char-scale/.bob/.talk方式と同じ考え方)。 */
.ec-char-jump {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}

.ec-char-sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 表情(絵柄)の切替は既存プレイヤーと同じ「クロスフェードさせず瞬時に差し替える」
     方針。口パクのROI外ピクセル一致が前提の既存ルールとは別の理由だが、
     「落下→着地→コール→ニヤリ」の切替をキビキビ見せたいため同じ結論になる。 */
  transition: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 着地の瞬間に足元へ出すほこり。楕円を一瞬だけ拡大+フェードさせる。 */
.ec-char-dust {
  position: absolute;
  left: -10%;
  bottom: -6%;
  width: 120%;
  height: 10%;
  border-radius: 50%;
  background: #5f5a4c;
  opacity: 0;
  pointer-events: none;
}

/* ニヤリ(奸)の瞬間、最後に落ちた1体の目元に出す金のきらめき。
   キャラ絵のROI(roiByEmotion)は public_dict() で非公開のため、座席の右上寄りの
   固定位置に簡易配置する（本物の目の位置と多少ズレても「キラッ」の演出として
   機能すれば十分という判断）。 */
.ec-char-sparkle {
  position: absolute;
  top: 6%;
  right: -6%;
  width: 26%;
  aspect-ratio: 1;
  background: var(--ec-gold);
  opacity: 0;
  pointer-events: none;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

/* ---------- ロゴ「嘘八百万」 ---------- */
/* LP準拠: 前景は白の極太ゴシック、背面はうっすら金の一回り大きい同じ文字。
   全体を右上がりに3度傾ける。赤は使わない。 */
.ec-logo {
  position: absolute;
  /* サイクル1.6: 9%(64.8px)だと金の後ろ文字(font-size:268.8px)の右上がり3度傾け後の
     インク上端が舞台の上端から-21px(=はみ出し)になることをheadless Chromeで実測した。
     17%(122.4px)まで下げると同じインクの上端が+36.6pxになり、要件の「端から20px以上
     内側」を満たす(左右101〜1162px・下321.6pxは元々余裕があったので上だけ調整)。
     後ろ文字のサイズ・色・不透明度・白前景との重なり方・傾きは一切変更しない。 */
  top: 17%;
  left: 0;
  right: 0;
  height: 17%;
  opacity: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  /* 右上がり3度の傾きは最終的にJSのWeb Animations APIがtransformへ書き込む
     (scale(1) rotate(-3deg)で収束する)。同じtransformプロパティを静的CSSと
     animate()の両方で指定すると、アニメ中は静的側が無視されてJS側が勝つ
     (競合して意味を持たない)ため、ここでは静的なtransformを指定しない。 */
}
.ec-logo-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* vwは実ビューポート幅基準のため、1280x720の固定px空間を外側だけ
     transform:scaleする本画面の方式とは噛み合わない(.ec-stage-outerが
     ビューポートより狭い/広いとズレる)。px指定なら祖先のscale(100cqw/1280)
     に素直に追従する(player.css方式と同じ)。見本の calc(var(--u)*21)
     (--u=ステージ幅/100)を、内部空間1280pxで展開した値(1280/100*21)。 */
  font-size: 268.8px;
  color: rgba(215, 178, 98, .42);
  letter-spacing: .02em;
}
.ec-logo-fg {
  position: relative;
  /* 見本のcalc(var(--u)*14.5)を1280px内部空間で展開した値(1280/100*14.5)。 */
  font-size: 185.6px;
  line-height: 1.17;
  color: var(--ec-ink);
  letter-spacing: .06em;
  padding-left: .06em;
}

/* コール時の白フラッシュ。 */
.ec-flash {
  position: absolute;
  inset: 0;
  background: var(--ec-ink);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ec-char-dust,
  .ec-flash { transition: none; }
}