/*
 * opening.css — 全ページ共通オープニング演出（図面 → モノクロ → 着色）
 *
 * 連携:
 *   - <head> インラインスクリプトが <html> に .sf-pre を付与する（毎回フル再生）。
 *     prefers-reduced-motion 時は付与しない（何もしない）。
 *   - js/opening.js が .sf-reveal → .sf-colored を順に付与し、ワイヤーフレームを描画する。
 *
 * 方針: transform / opacity / filter / visibility のみ。reduced-motion で完全無効。
 *       JS 失敗時もフェイルセーフで必ず本体を表示（クローク焼き付き防止）。
 */

/* ===== 先読みクローク（FOUC 防止）===== */
/* visibility:hidden でフォーカス・AT からも隠蔽し、オープニング中の誤ナビを防ぐ */
.sf-pre #main-content,
.sf-pre .site-footer {
  opacity: 0;
  visibility: hidden;
}

/* ===== モノクロ出現 ===== */
.sf-reveal #main-content,
.sf-reveal .site-footer {
  opacity: 1;
  visibility: visible;
  filter: grayscale(1) contrast(1.04);
  transition: opacity .5s ease;
}

/* ===== 着色（本来のサイトへ）===== */
.sf-colored #main-content,
.sf-colored .site-footer {
  filter: none;
  transition: filter .9s ease, opacity .5s ease;
}

/* ===== オーバーレイ（白い製図面）===== */
.sf-opening {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #ffffff;
  overflow: hidden;
  /* オーバーレイ全面クリックでスキップするため role=presentation(v7.4: スキップボタン廃止) */
}

/* 方眼グリッド: ブランド紺系に統一 (旧 rgba(61,122,196,...) → rgba(19,49,79,...)) */
.sf-opening__grid {
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(19, 49, 79, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 49, 79, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}

.sf-opening__svg {
  position: absolute;
  inset: 0;
}

.sf-opening--out {
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}

/* スキップボタンは v7.4 で廃止。オーバーレイ全面クリック/Esc でスキップ (opening.js 参照) */

@keyframes sfOpenDraw { to { stroke-dashoffset: 0; } }

/* ===== フェイルセーフ: JS が動かなくても 5 秒後に必ず本体表示 ===== */
/* visibility:visible を含めることでクロークも解除する */
@keyframes sfOpenFailSafe { to { opacity: 1; filter: none; visibility: visible; } }
.sf-pre #main-content,
.sf-pre .site-footer {
  animation: sfOpenFailSafe 0.01s linear 5s forwards;
}

/* ===== reduced-motion: 演出を完全無効・即時表示 ===== */
@media (prefers-reduced-motion: reduce) {
  .sf-opening { display: none; }
  .sf-pre #main-content,
  .sf-pre .site-footer {
    opacity: 1;
    visibility: visible;
    filter: none;
    animation: none;
  }
}