/* ========================================================================= motion.css — Lenis（慣性スクロール）+ GSAP ScrollTrigger の土台 相方は assets/motion.js。片方だけ読み込まないこと。 ■ 大原則 JS が落ちても・WebGL が無くても・reduced-motion でも、 このCSSだけで「全部見えている」状態に着地する。 演出は "見えているものを動かす" だけで、"見せるかどうか" は決めない。 ========================================================================= */ /* ------------------------------------------------------------------------- 1. Lenis の必須スタイル html の scroll-behavior:smooth（evmel.css 43行目）と Lenis は必ず喧嘩する。 ネイティブのスムーススクロールが走ると慣性が二重にかかってカクつくので、 Lenis が起動したときだけ無効化する。 ------------------------------------------------------------------------- */ html.lenis, html.lenis body { height: auto; } /* Lenis が付ける .lenis-smooth は smoothWheel の状態でしか付かないため、 これだけを頼りにすると evmel.css の html{scroll-behavior:smooth} が生き残る （実測で確認：起動後の html は "lenis lenis-on motion" で lenis-smooth が無い）。 起動していれば必ず付く .lenis を条件にする。 */ html.lenis, html.lenis body, .lenis.lenis-smooth { scroll-behavior: auto !important; } /* モーダル・ドロワー等、内部スクロールを Lenis に奪わせたくない要素に付ける */ .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } /* ------------------------------------------------------------------------- 2. GSAP が主導権を取ったときの既存 reveal の無効化 evmel.css の .reveal / .reveal-blur は IntersectionObserver で .visible を 付ける CSS トランジション。GSAP を重ねると同じ要素に2つのアニメーションが 乗って濁る（特に .reveal-blur の filter:blur と transform が干渉する）。 → motion.js が起動に成功したときだけ に .motion が付く。 そのときは既存トランジションを畳んで、動かすのは GSAP だけにする。 → motion.js が読めなかった場合は .motion が付かないので、 従来の IO + CSS トランジションがそのまま動く（＝無傷のフォールバック）。 .visible クラス自体は IO が付け続ける。 .gold-divider の scaleX 展開が .visible に依存しているため止めてはいけない。 ------------------------------------------------------------------------- */ html.motion .reveal, html.motion .reveal-blur { opacity: 1; filter: none; transform: none; transition: none; } /* ------------------------------------------------------------------------- 3. 行送りマスク（data-split） 見出しを
単位で行に割り、下から立ち上げる。 ・overflow:hidden で刈り取るが、そのままだと Cormorant Garamond の ディセンダ（g / y / j）と Noto Serif JP の濁点が切れる。 padding で逃がして同じ量の負マージンで詰め、レイアウトは動かさない。 ・行の初期状態は「見えている」。JS が動いたときだけ GSAP が下げてから戻す。 こうしないと JS 失敗時に見出しが消えたページになる。 ------------------------------------------------------------------------- */ .ln { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; } .ln > .ln-i { display: block; will-change: transform; } /* ------------------------------------------------------------------------- 4. パララックス 画像を親より縦に大きくしておき、その余剰分の中で動かす。 親に overflow:hidden が無いと隣のセクションへはみ出すので、 data-parallax は必ずこの .px-frame の中に置く。 ------------------------------------------------------------------------- */ .px-frame { position: relative; overflow: hidden; border-radius: 3px; /* 角丸は2〜3px（ブランド規約） */ border: 1px solid var(--gold-border); } .px-frame > [data-parallax] { display: block; width: 100%; height: 112%; /* 12%ぶんが動く余地 */ object-fit: cover; will-change: transform; } /* ------------------------------------------------------------------------- 5. スクロール速度に反応する要素 マーキーの帯を、スクロールの速さに応じてわずかに歪ませる。 「速度」を可視化すると、同じ速度で流れ続ける帯より生きて見える。 --mq-skew は motion.js が毎フレーム書き込む（既定は 0deg ＝ 無変形）。 ------------------------------------------------------------------------- */ .marquee-track { --mq-skew: 0deg; transform: skewX(var(--mq-skew)); transition: none; } /* ------------------------------------------------------------------------- 6. 縦書きラベルのドリフト セクション脇の .v-label（index.html のインラインJSが生成）を スクロールに合わせてゆっくり上下させ、奥行きを出す。 ------------------------------------------------------------------------- */ html.motion .v-label { will-change: transform; } /* ------------------------------------------------------------------------- 7. 金の細線ドロー 🚨 ここで transform:scaleX(0) を書いてはいけない。 一度そう書いたところ、ScrollTrigger が発火しなかった見出しの下線が 永久に幅0のまま＝消えたままになった（実測）。 CSSは「起点を左にする」ことだけを担当し、0→1 は motion.js の fromTo（immediateRender:false）が発火したときだけ与える。 発火しなければ evmel.css の .section-header.visible .gold-divider が scaleX(1) にするので、線は必ず出る。 ------------------------------------------------------------------------- */ html.motion .gold-divider[data-draw] { transform-origin: left center; } /* ------------------------------------------------------------------------- 8. reduced-motion — 例外なく全部止める ここでの「止める」は "静止した最終状態にする" であって "消す" ではない。opacity:1 / transform:none に固定する。 ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.motion .reveal, html.motion .reveal-blur { opacity: 1; filter: none; transform: none; } .ln { overflow: visible; padding-bottom: 0; margin-bottom: 0; } .ln > .ln-i { transform: none !important; } .px-frame > [data-parallax] { height: 100%; transform: none !important; } .marquee-track { --mq-skew: 0deg; transform: none; } html.motion .v-label { transform: none !important; } html.motion .gold-divider[data-draw] { transform: scaleX(1); } }