/* イントロ（積み木が降って積み上がる → タイトル札）。 設計: .ai/plans/intro-blocks/architecture.md, implementation-plan.md 時間の対応: LEAVE_MS(intro.js)=700 と下の 0.7s は同じ値（相互参照） */ /* 注意: にも class="intro" が付く（head の判定スクリプト）。 ただの ".intro" だと 自身にも当たり、 ルート要素に display:none が付いてページ全体が真っ白になる。 div.intro に絞って、オーバーレイの div だけを対象にする（intro.js の querySelector と同じ理由・同じ絞り方）。 */ div.intro { display: none; } html.intro div.intro { display: block; position: fixed; inset: 0; z-index: var(--z-intro); background: var(--c-white); overflow: hidden; cursor: pointer; /* JS が落ちた時のフェイルセーフ。--intro-failsafe 秒後に強制的に消す（appear.js も同じ値を読む） */ animation: intro-failsafe 0s var(--intro-failsafe) forwards; } /* 実測（Chrome 153・最小HTMLでの切り分け）: body だけの overflow:hidden で 実ユーザーのホイール操作は完全にブロックできる（html 側への追加やclipへの 変更は不要・効果なし）。一方 window.scrollTo() のようなプログラムからの スクロールは overflow:hidden でも overflow:clip でも一切ブロックできない （Chromiumの仕様で、ルート要素のプログラムスクロールはoverflow制約を無視する）。 これはCSSで防げる対象ではないので、狙いは「実ユーザーが触れない」ことに絞る */ html.intro body { overflow: hidden; } .intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .intro__title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(-120vh); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: clamp(20px, 3vw, 36px) clamp(28px, 5vw, 56px); background: var(--c-paper); border: 3px solid var(--c-ink); border-radius: 40px 34px 38px 30px / 32px 40px 30px 38px; box-shadow: 0 8px 0 var(--c-ink); } .intro__sub { font-family: var(--ff-base); font-weight: 900; font-size: clamp(14px, 1.6vw, 20px); letter-spacing: 0.1em; color: var(--c-ink); } .intro__main { display: flex; font-family: var(--ff-base); font-weight: 900; font-size: clamp(56px, 9vw, 120px); color: var(--c-ink); line-height: 1; } .intro__main span { display: inline-block; transform: translateY(-160%); } /* 積み上げが終わったらタイトル札が落ちてくる。字は札より少し遅れて1字ずつ */ html.intro .intro.is-title .intro__title { animation: intro-drop-title 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } html.intro .intro.is-title .intro__main span { animation: intro-drop-letter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } html.intro .intro.is-title .intro__main span:nth-child(1) { animation-delay: 0.25s; } html.intro .intro.is-title .intro__main span:nth-child(2) { animation-delay: 0.34s; } html.intro .intro.is-title .intro__main span:nth-child(3) { animation-delay: 0.43s; } html.intro .intro.is-title .intro__main span:nth-child(4) { animation-delay: 0.52s; } @keyframes intro-drop-title { from { transform: translate(-50%, -50%) translateY(-120vh); } to { transform: translate(-50%, -50%) translateY(0); } } @keyframes intro-drop-letter { from { transform: translateY(-160%); } to { transform: translateY(0); } } /* 退場: 積み木の山とタイトルが下へ落ち、白背景がフェードアウトする */ html.intro .intro.is-leaving { background-color: transparent; transition: background-color 0.7s linear; pointer-events: none; } html.intro .intro.is-leaving .intro__canvas, html.intro .intro.is-leaving .intro__title { animation: none; transition: transform 0.7s cubic-bezier(0.55, 0, 1, 0.45); } html.intro .intro.is-leaving .intro__canvas { transform: translateY(110vh); } html.intro .intro.is-leaving .intro__title { transform: translate(-50%, -50%) translateY(110vh); } @keyframes intro-failsafe { to { visibility: hidden; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { div.intro { display: none !important; } }