/* ============================================================
   マクロズWEBデザイン正典 — アニメーション層 (fx.css + fx.js)
   依存ゼロ。全ページ共通で後付け。prefers-reduced-motion対応。
   ============================================================ */

/* ---------- 起動ローダー ---------- */
.fx-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-dark, #0e0000);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px;
  transition: opacity .5s ease, visibility .5s;
}
.fx-loader.done { opacity: 0; visibility: hidden; }
.fx-loader img { height: 40px; width: auto; animation: fxLogoPulse 1.2s ease-in-out infinite; }
.fx-loader .bar { width: 180px; height: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.fx-loader .bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #fff, #01fe12);
  box-shadow: 0 0 12px rgba(1,254,18,.8);
  transition: width 1.1s cubic-bezier(.65,0,.35,1);
}
.fx-loader.run .bar i { width: 100%; }
@keyframes fxLogoPulse { 50% { opacity: .55; } }

/* ---------- スクロール出現 ----------
   「隠す」初期状態は html.fx-ready（fx.jsがJS有効時に即付与）でゲート。
   JS無効/失敗時は fx-ready が付かず、全コンテンツが最初から可視のまま（堅牢化）。 */
.fx-ready .fx-reveal { opacity: 0; transform: translateY(34px); }
.fx-in.fx-reveal {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--fx-delay, 0s);
}

/* ---------- 画像ワイプ ---------- */
/* 100%クリップだとIntersectionObserverが交差ゼロ判定になるため0.1%残す */
.fx-ready .fx-wipe { clip-path: inset(0 99.9% 0 0); }
.fx-in.fx-wipe {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s cubic-bezier(.65,0,.35,1);
  transition-delay: var(--fx-delay, 0s);
}

/* ---------- ディスプレイ見出しのネオン点灯 ---------- */
.fx-ch { display: inline-block; }
.fx-ready .fx-ch { opacity: 0; }
.fx-in .fx-ch { animation: fxIgnite .55s steps(1) forwards; animation-delay: var(--fx-ch-delay, 0s); }
@keyframes fxIgnite {
  0% { opacity: 0; } 18% { opacity: 1; } 30% { opacity: .25; }
  46% { opacity: 1; } 58% { opacity: .45; } 72% { opacity: 1; } 100% { opacity: 1; }
}
.fx-in .g .fx-ch, .fx-in.g .fx-ch { text-shadow: 0 0 16px rgba(1,254,18,.65), 0 0 42px rgba(1,254,18,.35); }

/* ---------- 常時アンビエント ---------- */
.dot-divider { animation: fxDotPulse 2.6s ease-in-out infinite; }
@keyframes fxDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(1,254,18,.55); }
  50% { box-shadow: 0 0 14px 4px rgba(1,254,18,.28); }
}
.cta-jump .tri { animation: fxTriBob 1.8s ease-in-out infinite; }
@keyframes fxTriBob { 50% { transform: translateY(-9px); } }

/* ---------- ホバー ---------- */
.global-nav a { position: relative; transition: color .25s; }
.global-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -8px; height: 1.5px; width: 100%;
  background: #01fe12; transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.global-nav a:hover { color: #01fe12; }
.global-nav a:hover::after, .global-nav a.active::after { transform: scaleX(1); }

.btn-more { position: relative; overflow: hidden; transition: color .35s, border-color .35s, box-shadow .35s; z-index: 0; }
.btn-more::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #01fe12; transform: translateX(-101%);
  transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.btn-more:hover { color: #0e0000; border-color: #01fe12; box-shadow: 0 0 22px rgba(1,254,18,.45); }
.btn-more:hover::before { transform: translateX(0); }
.btn-more .arrow { transition: transform .3s; }
.btn-more:hover .arrow { transform: translateX(7px); }

/* ---------- スクロール中ヘッダー ---------- */
.site-header { transition: box-shadow .3s, background .3s; }
.site-header.fx-scrolled { box-shadow: 0 6px 28px rgba(0,0,0,.55), 0 1px 0 rgba(1,254,18,.25); }

/* ---------- 低モーション設定では全停止 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-loader { display: none; }
  .fx-reveal, .fx-wipe { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .fx-ch { opacity: 1 !important; animation: none !important; }
  .dot-divider, .cta-jump .tri, .fx-loader img { animation: none !important; }
}

/* ===== 本サイト固有の追記: ローダーのテキストロゴ（fx.js側で注入） ===== */
.fx-loader .name {
  font-family: var(--font-display, 'Kode Mono', monospace);
  font-size: 20px; letter-spacing: 0.3em; text-indent: 0.3em;
  color: #fff;
  animation: fxLogoPulse 1.2s ease-in-out infinite;
}