/* ===================================================================== オープニング演出 スタイル ( css/opening.css ) --------------------------------------------------------------------- ・全クラスに op- プレフィックスを付与し、既存CSSと完全に分離。 ・色や濃さなど config 由来の値は CSS変数で受け取り、js/opening.js が :root（documentElement）へ setProperty して上書きします。 ・既存の style ブロック(index.html L10-305)には一切手を加えません。 ===================================================================== */ /* ---- config から上書きされる変数（ここは既定値／フォールバック） ---- */ :root { --op-bg: #0a0a0a; /* openingBackground（幕の色） */ --op-stroke: #ffffff; /* fontColor（手書きの色） */ --op-overlay-opacity: 0.35; /* backgroundOverlayOpacity */ } /* ===================================================================== 1. FOUC対策 ＋ 既存ファーストビューアニメの一時停止 --------------------------------------------------------------------- 状態は のみで管理（body へのクラス付与は行わない）。 html.op-preload … head のブートストラップが初回描画前に付与。 ::before で全画面カバー＝FOUC防止。 幕オープン開始時に解除（カバーを消し露出開始）。 html.op-opening-active … js/opening.js が overlay 生成時に付与。 scrollロック。cleanup 時に解除。 ===================================================================== */ /* FOUCカバー：初回描画前から全画面を openingBackground で覆う。 実DOMではなく ::before のため、head 時点（body未生成）でも有効。 z-index は実オーバーレイ(9999)の直下(9998)。幕開始で op-preload 解除→消滅。 */ html.op-preload::before { content: ""; position: fixed; inset: 0; z-index: 9998; background: var(--op-bg); pointer-events: none; } /* 既存 heroUp を一時停止（既存CSSは未改変・nav には一切触れない）。 ↓ 下記5セレクタは推測ではなく index.html L94 の heroUp 定義から verbatim で転記したもの。heroUp が適用されているのはこの5要素のみで、 hero内の他アニメ（.gradient=shimmer / .hero-badge::before=pulse / .hero::before,::after=float）は装飾ループのため対象外とする。 op-preload（head〜幕開始）と op-opening-active（生成〜cleanup）の両方で ゲートし、head〜cleanup まで連続して停止 → cleanup 解除で自然再生。 */ html.op-preload .hero-badge, html.op-preload .hero h1, html.op-preload .hero-sub, html.op-preload .hero-btns, html.op-preload .hero-stats, html.op-opening-active .hero-badge, html.op-opening-active .hero h1, html.op-opening-active .hero-sub, html.op-opening-active .hero-btns, html.op-opening-active .hero-stats { animation-play-state: paused !important; } /* オープニング中はスクロール禁止（html のみ） */ html.op-opening-active { overflow: hidden !important; } /* ===================================================================== 2. オープニングオーバーレイ（幕本体） ===================================================================== */ .op-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--op-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; will-change: transform; /* GSAPの translateY 用 */ transform: translateY(0); } /* ===================================================================== 3. 手書きSVG表示領域 ===================================================================== */ .op-svg-wrap { width: min(80vw, 900px); max-height: 60vh; display: flex; align-items: center; justify-content: center; } .op-svg { width: 100%; height: auto; overflow: visible; } /* OpenType.jsが生成したパス。stroke-dasharray/offset はJSが算出して設定。 */ .op-svg path { fill: none; stroke: var(--op-stroke); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; /* 微細なフェードインを併用（書き出しの唐突さを和らげる） */ opacity: 0; transition: opacity 0.6s ease; } .op-svg.op-drawing path { opacity: 1; } /* 書き終わり後に塗りを乗せて連筆の質感を締める（任意・JSが付与） */ .op-svg.op-filled path { fill: var(--op-stroke); transition: fill 0.5s ease, opacity 0.6s ease; } /* ===================================================================== 4. Skipボタン（控えめなテキストリンク／右下） ===================================================================== */ .op-skip { position: fixed; right: 1.6rem; bottom: 1.4rem; z-index: 10000; background: none; border: none; color: var(--op-stroke); font-family: inherit; font-size: 0.72rem; letter-spacing: 0.18em; opacity: 0; /* 既定は非表示。JSが skipDelay 後に表示 */ cursor: pointer; padding: 0.4rem 0.6rem; transition: opacity 0.6s ease, color 0.2s ease; } .op-skip.op-visible { opacity: 0.55; } .op-skip:hover { opacity: 1; } .op-skip::after { content: ' ›'; } /* ===================================================================== 5. 背景スライドショー（全画面 fixed / Ken Burns / クロスフェード） --------------------------------------------------------------------- z-index:-1 で body 背景の前・本文の後ろに敷く。既存セクションは不透明 なので、主に hero と開幕直後に見える（＝ファーストビュー演出）。 slideshowMode:"hero" の場合はJSが .op-bg--hero を付け hero内に内包。 ===================================================================== */ .op-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* heroセクション内モード（JSが hero に append し、このクラスを付与） */ .op-bg.op-bg--hero { position: absolute; z-index: 0; } .op-bg-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; /* クロスフェード */ will-change: opacity, transform; } .op-bg-slide.op-active { opacity: 1; animation: op-kenburns 12s ease-out forwards; /* ゆっくり拡大・移動 */ } /* スクロール停止後は Ken Burns を止めて最後の画像を静止維持（負荷軽減） */ .op-bg.op-stopped .op-bg-slide.op-active { animation-play-state: paused; } @keyframes op-kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1.5%); } } /* 可読性確保の黒オーバーレイ（濃さは config で調整） */ .op-bg-overlay { position: fixed; inset: 0; z-index: -1; background: #000; opacity: var(--op-overlay-opacity); pointer-events: none; } .op-bg-overlay.op-bg--hero { position: absolute; z-index: 0; } /* ===================================================================== 6. モバイル対応 ===================================================================== */ @media (max-width: 640px) { .op-svg-wrap { width: 88vw; max-height: 50vh; } .op-skip { right: 1rem; bottom: 1rem; font-size: 0.68rem; } /* スマホは描画距離が短いので線をわずかに太く（視認性） */ .op-svg path { stroke-width: 2.4; } } /* ===================================================================== 7. reduced-motion 対応（防御的セーフティネット） --------------------------------------------------------------------- 再生可否の最終判断は js/opening.js（config.reducedMotionEnabled）が行い、 非再生時はそもそも .op-opening-active を付けず DOM も生成しません。 ここでは「万一クラスが残っても本文が隠れたままにならない」よう、 隠す系を必ず解除する方向（=表示を保証する方向）のみ記述します。 ===================================================================== */ @media (prefers-reduced-motion: reduce) { .op-overlay { display: none !important; } html.op-preload::before { display: none !important; } /* カバーも出さない */ /* 万一クラスが残っても heroUp が止まったままにならないよう走行へ戻す */ html.op-preload .hero-badge, html.op-preload .hero h1, html.op-preload .hero-sub, html.op-preload .hero-btns, html.op-preload .hero-stats, html.op-opening-active .hero-badge, html.op-opening-active .hero h1, html.op-opening-active .hero-sub, html.op-opening-active .hero-btns, html.op-opening-active .hero-stats { animation-play-state: running !important; } .op-bg-slide.op-active { animation: none !important; } }