/* ═══════════════════════════════════════════════════════════════════════ SEAM Enhance Layer — world-class motion & texture 読み込み: 全ページ の reveal.css 直後 - 安定したネイティブページ遷移 - フィルムグレイン（紙のような手触り・極微） - スクロール駆動パララックス（メインスレッド外・60fps） - 押下/フォーカスのマイクロ反応 すべて prefers-reduced-motion を尊重 ═══════════════════════════════════════════════════════════════════════ */ /* ───────── 1. ページ遷移 ───────── クロスドキュメント View Transitions は、連続したリンク操作やリダイレクトで Chrome が AbortError ("Transition was skipped") を記録するため無効化。 装飾よりも、予約へ向かうナビゲーションの確実性を優先する。 */ /* ───────── 2. フィルムグレイン（極微の質感） ───────── */ .seam-grain { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0.05; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; } /* ───────── 3. スクロール駆動パララックス（ヒーロー映像） ───────── */ @supports (animation-timeline: view()) { .seam-parallax { will-change: transform; animation: seamParallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } @keyframes seamParallax { from { transform: translate3d(0, -4%, 0) scale(1.08); } to { transform: translate3d(0, 4%, 0) scale(1.08); } } } /* ───────── 4. マイクロ反応 ───────── */ /* 押下: わずかに沈む（タップの手応え） */ a[href], button, [role="button"], .seam-press { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } @media (hover: none) { a[href]:active, button:active, [role="button"]:active, .seam-press:active { transform: scale(0.978); transition: transform 0.08s ease; } } /* フォーカス可視化（キーボード操作）: 上質なゴールドリング */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgba(184,148,90,0.75); outline-offset: 3px; border-radius: 3px; } /* ───────── 5. キネティック見出し（読み込み時に静かに整う） ───────── */ .seam-kinetic { animation: seamKinetic 1.05s cubic-bezier(0.22,1,0.36,1) both; } @keyframes seamKinetic { from { opacity: 0; letter-spacing: 0.18em; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; } } /* ───────── reduced-motion 全停止 ───────── */ @media (prefers-reduced-motion: reduce) { .seam-parallax { animation: none !important; transform: none !important; } .seam-kinetic { animation: none !important; } .seam-grain { display: none; } }