@charset "UTF-8";
/* 案A+｜3Dメタル・トライアングル（ダーク版） — hero-a2.js が生成する WebGL キャンバスのスタイル
   前提: base.css が :root の easing 変数と .hero__stage / .hero__fallback の土台を定義済み。
   稼働クラスは hero-a.css と同一（hero-a-on / hero-a-live / .hero-a-canvas）＝base.css のヒント表示条件を流用する。
   hero-a.css との差分はフォーカスリング色のみ（ダーク面で見える #6db6e8）。
   LCP保護: .hero__fallback を隠すのは「html.js」かつ「JSが1フレーム描画に成功して .hero-a-on を付けた後」だけ。 */

/* 三角形の重心をステージ中心に合わせる再フレーミング（a2のみ）。
   視野を左へ113pxぶん広げるだけ＝三角形の表示サイズ・ばち/リボンの見切れ方は従来のまま。
   カメラ側の注視点シフトは hero-a2.js（GCEN.x）が担当。fallback画像は同じ構図の triangle-a2.png（626×439）。 */
.rh {
  --hero-stage-w: min(683px, 97vw);
}

.rh .hero__stage {
  aspect-ratio: 626 / 439;
  /* base.css の margin:0 auto はSPで破綻する: ステージ幅(97vw)が親(.rh-hero__inner=100vw-48px)を超えると、
     flexの仕様「autoマージン付きのはみ出し要素は末尾方向にあふれる」で左寄せになり三角形が右に+18pxずれる。
     負値になれるcalcマージンで常に真ん中に置く（親より狭いPCでは従来のセンタリングと同値） */
  margin: 0 calc((100% - var(--hero-stage-w)) / 2);
}

/* 描画キャンバス。位置・サイズは base.css の `.hero__stage canvas` が担当する。 */
.hero-a-canvas {
  opacity: 0;
  transition: opacity 0.55s var(--ease-out-quart);
}

html.js.hero-a-on .hero-a-canvas {
  opacity: 1;
}

/* 3D描画が出たあとにだけ、静止画フォールバックを消す（描画失敗時は出したまま） */
html.js.hero-a-on .hero__fallback {
  opacity: 0;
  transition: opacity 0.45s var(--ease-out-quart) 0.16s;
}

/* 叩ける状態のときだけカーソルとフォーカスリングを出す（reduced-motion時は .hero-a-live を付けない） */
html.js.hero-a-live .hero__stage {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html.js.hero-a-live .hero__stage:focus {
  outline: none;
}

/* ダーク面（#0a0e13〜#131a22）の上に出すリング。var(--tw-blue)=#1479c4 は #10161d に対して 3.95:1 で不足するため、
   明度を上げた青にする（実測: #6db6e8 は #10161d に対して 8.23:1、#0a0e13 に対して 8.76:1） */
html.js.hero-a-live .hero__stage:focus-visible {
  outline: 2px solid #6db6e8;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---- WebGLに到達できなかった時のフォールバック演出（html.js.hero-a-fail） ----
   hero-a2.js が3D描画に到達できず静かに終了すると（getContext不可・シェーダ失敗・リンク失敗・
   初回描画のGLエラー・webglcontextlost の5経路）、canvas はDOMに入らず fallback画像が
   opacity 1 のまま残る＝rAF 0回・クリック無反応の完全静止になる。そこだけCSSで短い演出に
   引き継ぎ、「PCなのに何も動かない」状態を無くす。

   使う道具を transform と opacity に限る理由: .hero__fallback は fetchpriority="high" の
   LCP候補。filter / box-shadow / backdrop-filter は合成コストを増やすので使わない。
   画像の opacity は常に1のまま（0から始めるとLCP候補から外れる）＝画像は transform だけ動かす。

   自動で動く総時間は 4.65秒で完全停止する（無限ループにしない）。内訳:
     フロート : delay 0.25s ＋ 2.20s × 2回 = 4.65s
     リング1  : delay 0.40s ＋ 1.90s × 1回 = 2.30s
     リング2  : delay 1.30s ＋ 1.90s × 1回 = 3.20s
   → 最長 4.65s（< 5s）＝ WCAG 2.2.2「5秒を超えて自動で動く」に該当しない。 */

html.js.hero-a-fail .hero__fallback {
  /* 上下フロート＋ごく浅い傾き（最大1.2度）。開始・終了とも transform:none と同値なので
     演出の前後で画像の位置がずれない（レイアウトシフトを作らない）。 */
  animation: tw-hero-fail-float 2.2s ease-in-out 0.25s 2 both;
}

/* 打点から広がる同心円リング。中心 left 74.5% / top 56% は 3D版の打点 STRIKE=(0.44,-0.12) を
   fallback画像の座標へ写した位置（uv = STRIKE -(GCEN.x,0) = (0.6979,-0.12) を アスペクト
   626/439 で正規化 → (x+1)/2 = 74.47% ／ (1-y)/2 = 56.0%）＝画像の右辺のチューブ上に乗る。
   直径はステージ幅の50%＝拡大しきってもステージ矩形の中に収まる（打点からステージ右端まで
   683-509=174px、リング半径の最大は 683×0.5÷2=171px）。SP幅でも比率は同じ＝横スクロールを作らない。 */
html.js.hero-a-fail .hero__stage::before,
html.js.hero-a-fail .hero__stage::after {
  content: "";
  position: absolute;
  left: 74.5%;
  top: 56%;
  width: 50%;
  aspect-ratio: 1 / 1;
  margin: 0;
  border: 2px solid rgba(125, 190, 235, 0.92);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.1);
  pointer-events: none;
  z-index: 2; /* fallback画像より上。金属の上を光の輪が通る見え方に揃える */
}

html.js.hero-a-fail .hero__stage::before {
  animation: tw-hero-fail-ring 1.9s var(--ease-out-quart) 0.4s 1 both;
}

html.js.hero-a-fail .hero__stage::after {
  animation: tw-hero-fail-ring 1.9s var(--ease-out-quart) 1.3s 1 both;
}

@keyframes tw-hero-fail-float {
  0% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-9px) rotate(-1.2deg); }
  65% { transform: translateY(4px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes tw-hero-fail-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
  14% { opacity: 0.7; } /* 実測: 0.55 では #10161d のダーク面で輪が見えにくかったので上げた */
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ヒント文はフォールバック時も出さない（base.css の既定 display:none のまま）。
   このフォールバックは読み込み後に1回だけ自動で流れるアニメーションで、クリックしても
   波紋は出ない（JSは3D描画に到達できず終了しているのでクリックの受け口自体が無い）。
   「クリックすると波紋が広がります」を出すと案内と挙動が食い違うため、出さない側に倒す。
   将来 base.css / rich.css 側の表示条件が変わっても嘘の案内が出ないよう、明示的に落としておく。 */
html.js.hero-a-fail .hero__hint {
  display: none !important;
}

/* ---- reduced-motion: 自分が使ったセレクタの動きを完全に止める ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-a-canvas,
  html.js.hero-a-on .hero-a-canvas,
  html.js.hero-a-on .hero__fallback {
    transition: none !important;
    animation: none !important;
  }

  html.js.hero-a-on .hero-a-canvas {
    opacity: 1 !important;
  }

  html.js.hero-a-on .hero__fallback {
    opacity: 0 !important;
  }

  /* 動きを出さない＝クリックしても波紋は広がらないので、その案内は隠す */
  html.js.hero-a-on .hero__hint {
    display: none !important;
  }

  /* WebGL不可時のフォールバック演出も完全に止める。JS側は reduce を見ずに hero-a-fail を付ける
     （reduce が後から解除された時に追随できるようにするため）＝止める責任はここが持つ。
     リングは display:none で存在ごと消し、画像は transform を初期値へ戻して静止させる。 */
  html.js.hero-a-fail .hero__fallback {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  html.js.hero-a-fail .hero__stage::before,
  html.js.hero-a-fail .hero__stage::after {
    content: none !important;
    display: none !important;
    animation: none !important;
  }
}