/* ========================================================== Tokisetsu モーションシステム（全ページ共通） - GSAP 読込成功時に が付与される - JS/CDN 不達時はこのファイルの大半が発動せず、既存の common.css の .reveal（IntersectionObserver）が生きる ========================================================== */ /* ---------- GSAP 稼働時は旧 .reveal を無効化（GSAPが引き継ぐ） ---------- */ html.gsap-on .reveal{opacity:1;transform:none;transition:none;} /* ---------- 文字分割・マスク行（JSが生成する要素） ---------- */ .ch{display:inline-block;will-change:transform;} .mask-line{display:block;overflow:hidden;} .mask-line > span{display:block;} /* ---------- スマートヘッダー（下スクロールで隠す） ---------- */ header{transition:background .4s ease,padding .4s ease,box-shadow .4s ease,transform .45s cubic-bezier(.2,.7,.2,1);} header.nav-hidden{transform:translateY(-110%);} /* ---------- イントロローダー（トップページのみ設置） ---------- */ .loader{ position:fixed;inset:0;z-index:200; display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,var(--sky-top),var(--sky-low)); /* JS不達でも消えるフォールバック */ animation:loaderFallback .6s ease 3.2s forwards; } @keyframes loaderFallback{to{opacity:0;visibility:hidden;pointer-events:none;}} .loader-inner{text-align:center;} .loader-mark{width:64px;height:auto;margin:0 auto 18px;} .loader-word{ font-family:"Cormorant Garamond",serif; font-size:44px;font-weight:500;letter-spacing:.14em;color:var(--ink); display:flex;justify-content:center; } .loader-tag{ margin-top:12px;font-family:"Cormorant Garamond",serif;font-style:italic; font-size:14px;letter-spacing:.12em;color:var(--teal-deep); } /* ---------- 飛行航跡ライン（トップページのみ設置） ---------- */ .flight-path{ position:absolute;top:0;left:0;width:100%;z-index:2; pointer-events:none;overflow:visible; } .flight-path path{stroke:var(--teal);stroke-width:1.4;opacity:.5;stroke-linecap:round;} .fp-dot{fill:var(--teal-deep);} .fp-ring{ fill:none;stroke:var(--teal);stroke-width:1;opacity:.7; animation:fpPulse 2.2s ease-out infinite; transform-origin:center;transform-box:fill-box; } @keyframes fpPulse{ 0%{transform:scale(.4);opacity:.8;} 100%{transform:scale(1.5);opacity:0;} } /* ---------- 下層 page-hero の写真パララックス用 ---------- */ .page-hero .photo{will-change:transform;} /* ---------- Responsive / Reduced motion ---------- */ @media(max-width:860px){ .flight-path{display:none;} .loader-word{font-size:32px;} } @media (prefers-reduced-motion: reduce){ .loader{display:none;} .flight-path{display:none;} }