/* ============================================================
   宮島大輔 OFFICIAL SITE — 世界反転FX層 (fx2.css + fx2.js)
   fx.css/fx.js と同じ後付け方式の第2層。依存ゼロ。TOPのみで作動。
   ─ ヒーローをクリックすると、その点から衝撃波が走り
     「白い設計図の世界」⇄「黒地の青焼き（ネオングリーン）の世界」が反転する。
     Rebuild the Business. ＝ 自分の手で世界を建て直す体験装置。
   ─ 誘導はボタンを置かず、ヒーロー上のカーソル自体をレティクル化する。
   実装上の必須事項（2026-08-11 実測で確立・変更する時は必ず読むこと）:
   ① clip-path のアニメは使わない。Chromeでは手法に関係なく常にメインスレッド
      描画になり、波面が重い領域を横切るとフレーム落ちする。
   ② CSSキーフレームに var() を書かない（コンポジタ合成が外れる）。
   ③ 正解＝円形マスク(overflow:hidden+border-radius)を transform:scale で拡大し、
      中身を逆scaleで静止させる。全フレーム transform/opacity のみ＝GPU合成。
   ④ 反転中は文字を全消しし、定着後に再点灯（波面が文字を切るのを防ぐ）。
   詳細セレクタ（.hero を必ず前置）はページ内<style>に勝つため。詳細度を下げない。
   ============================================================ */

/* ---------- 2世界のレイヤ構造（暗世界はfx2.jsが複製生成） ---------- */
.hero-mask {
  position: absolute; z-index: 3;
  overflow: hidden; border-radius: 50%;
  visibility: hidden;
  transform-origin: 50% 50%;
}
.hero.is-flipping .hero-mask, .hero.is-dark .hero-mask { visibility: visible; }
.hero-mask-inner { position: absolute; }
.hero-world--dark { position: absolute; inset: 0; background: var(--bg-dark); }
/* 反転定着後: マスクを解除して通常レイヤに（伸縮コストを残さない） */
.hero.is-dark .hero-mask { inset: 0; width: auto; height: auto; border-radius: 0; }
.hero.is-dark .hero-mask-inner { inset: 0; transform: none; }
.hero.is-flipping .hero-mask, .hero.is-flipping .hero-mask-inner { will-change: transform; }
/* 暖機: 読み込み後に暗世界を一度だけ不可視で描画させる。
   これが無いと初回クリック時に大きなSVGとWebフォントの初回ラスタライズが走り、
   反転開始が約200ms遅れる＝「1回目だけ反応が鈍い」体感になる（2026-08-11実測） */
.hero.fx2-priming .hero-mask {
  visibility: visible; inset: 0; width: auto; height: auto; border-radius: 0; opacity: .002;
}

/* ---------- 黒の世界の意匠: 白い図面 → 黒地の青焼き ---------- */
.hero .hero-world--dark .lead { color: #ffffff; }
.hero .hero-world--dark .who { color: #b6b6b6; }
.hero .hero-world--dark .who b { color: #ffffff; }
.hero .hero-world--dark .catch {
  color: var(--green);
  text-shadow: 0 0 20px rgba(1,254,18,.5), 0 0 68px rgba(1,254,18,.2);
}
.hero .hero-world--dark .blueprint-wrap {
  background: #070406;
  border-color: rgba(1,254,18,.42);
  background-image:
    linear-gradient(rgba(1,254,18,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1,254,18,.09) 1px, transparent 1px);
  box-shadow: 0 0 60px rgba(1,254,18,.10) inset;
}
.hero .hero-world--dark .blueprint-svg .bp-ink { fill: rgba(255,255,255,.84); }
.hero .hero-world--dark .blueprint-svg .bp-ink-soft { fill: rgba(255,255,255,.62); }
.hero .hero-world--dark .blueprint-svg .bp-line { stroke: rgba(255,255,255,.72); }
.hero .hero-world--dark .blueprint-svg .bp-line-soft { stroke: rgba(255,255,255,.45); }

/* 反転中は文字（コピー）を両世界とも一旦すべて消す→定着後に浮かび上がる */
.hero .copy { transition: opacity .5s ease .08s; }
.hero.is-flipping .copy { opacity: 0; transition: opacity .13s ease; }

/* ---------- 衝撃（ヒーロー限定シェイク・transformのみ） ---------- */
@keyframes fx2-shake {
  0%{transform:translate3d(0,0,0)} 14%{transform:translate3d(-9px,4px,0)}
  28%{transform:translate3d(8px,-6px,0)} 44%{transform:translate3d(-6px,4px,0)}
  60%{transform:translate3d(4px,-2px,0)} 78%{transform:translate3d(-2px,1px,0)}
  100%{transform:translate3d(0,0,0)}
}
.hero.fx2-shaking { animation: fx2-shake .5s cubic-bezier(.36,.07,.19,.97); }

/* 化学反応スパイク: 色相は回さない（黒×白×緑が壊れる）。明暗の衝撃だけ */
@keyframes fx2-spike {
  0% { filter: none; }
  16% { filter: contrast(1.65) brightness(1.45); }
  48% { filter: contrast(1.12) brightness(1.06); }
  100% { filter: none; }
}
.hero.is-flipping .inner, .hero.is-flipping .hero-mask { animation: fx2-spike .6s cubic-bezier(.3,.7,.4,1); }

/* ---------- FXステージ（リング・粒・フラッシュ。動きはJSがWAAPIで駆動） ---------- */
.fx2-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.fx2-ring {
  position: absolute; width: 400px; height: 400px; margin: -200px 0 0 -200px;
  border-radius: 50%; border: 3px solid var(--green);
  box-shadow: 0 0 40px rgba(1,254,18,.5), inset 0 0 32px rgba(1,254,18,.35);
  transform: scale(.06); opacity: 0; will-change: transform, opacity;
}
.fx2-flash { position: absolute; inset: 0; animation: fx2-flash .45s ease-out forwards; }
@keyframes fx2-flash { to { opacity: 0; } }
.fx2-p {
  position: absolute; width: 0; height: 0; margin: -7px 0 0 -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 11px solid var(--green);
  filter: drop-shadow(0 0 6px rgba(1,254,18,.6));
  opacity: 0; transform: translate(0,0) scale(.2); will-change: transform, opacity;
}

/* ---------- カーソル・レティクル（クリック誘導・文言なし） ---------- */
@media (hover: hover) and (pointer: fine) {
  .hero { cursor: none; }
}
.fx2-cursor {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
  color: #068a10; /* 白地では読める緑に読み替え（正典ルール） */
  will-change: transform;
}
.hero.is-dark .fx2-cursor { color: var(--green); }
.hero.fx2-hovering .fx2-cursor { opacity: 1; }
.fx2-cursor .c-core {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: currentColor;
  box-shadow: 0 0 12px rgba(1,254,18,.55);
  animation: fxDotPulse 2.6s ease-in-out infinite;
}
.fx2-cursor .c-ring, .fx2-cursor .c-pulse {
  position: absolute; left: -23px; top: -23px; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid currentColor;
}
.fx2-cursor .c-pulse { animation: fx2-invite 1.6s cubic-bezier(.16,.8,.3,1) infinite; }
@keyframes fx2-invite { from { transform: scale(1); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }
.hero.is-flipping .fx2-cursor { opacity: 0; transition: opacity .1s; }

/* ---------- ボタン・CTAのマイクロ波紋（全ページ） ---------- */
.fx2-mini {
  position: fixed; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; pointer-events: none; z-index: 9998;
  border: 2px solid var(--green); box-shadow: 0 0 18px rgba(1,254,18,.55);
  animation: fx2-mini .5s cubic-bezier(.22,.9,.24,1) forwards;
}
@keyframes fx2-mini { to { transform: scale(7); opacity: 0; } }

/* ---------- 低モーション: 演出なしの即時切替 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero.fx2-shaking { animation: none !important; }
  .hero.is-flipping .inner, .hero.is-flipping .hero-mask { animation: none !important; }
  .fx2-ring, .fx2-flash, .fx2-p, .fx2-mini, .fx2-cursor { display: none !important; }
  .hero { cursor: auto !important; }
}