/* 動きだけを足すファイル（2026-09-18） 色・書体・余白・文言・画像・並び順は一切変えない。 1) スクロールで現れる 2) ヒーローの初回フェード 3) ホバーの浮き上がり 4) reduced-motionで全停止 既存のヒーロー動画／MIKANのスライドショー／海バンドの view-timeline には触らない。 */ /* ---- 1. スクロールで現れる ------------------------------------------------- 隠す指定は必ず html.js-reveal 配下に限定する。 js-reveal は の inline script が IntersectionObserver のある環境でだけ付けるので、 JSが無い／失敗した環境では中身が最初から見えている。 隠すのは「まだ出ていない要素」だけ（:not(.is-in)）。表示後の状態には opacity も transform も一切残さない ── 残すと詳細度 (0,3,0) が [data-r~="noterow"]:hover などの (0,2,0) に勝ち、ホバーの浮き上がりを潰すため。 そのため表示は transition ではなく keyframes で行い、fill-mode は backwards にする （forwards / both にすると最終キーフレームが残り、同じ問題が再発する）。 */ .js-reveal [data-reveal]:not(.is-in){opacity:0;transform:translateY(16px)} /* 動画を含むブロックは移動させない（再生が重くなるため）。フェードだけ。 */ .js-reveal [data-reveal="fade"]:not(.is-in){transform:none} .js-reveal [data-reveal].is-in{ animation:revealIn .7s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--reveal-i,0)*70ms) } .js-reveal [data-reveal="fade"].is-in{animation-name:revealFade} @keyframes revealIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes revealFade{from{opacity:0}to{opacity:1}} /* 兄弟要素の時間差は70msずつ・最大6段で打ち止め（7個目以降は待たせない） */ [data-reveal="1"]{--reveal-i:1} [data-reveal="2"]{--reveal-i:2} [data-reveal="3"]{--reveal-i:3} [data-reveal="4"]{--reveal-i:4} [data-reveal="5"]{--reveal-i:5} [data-reveal="6"]{--reveal-i:6} /* ---- 2. ヒーローの初回フェード --------------------------------------------- 対象は見出しブロックの中のテキストとCTAだけ。背景の動画・グラデーションには触らない。 fill-mode:both なので、JSが動かない環境でも最後は必ず表示される。 ここはホバーを持たない要素なので both のままでよい。 */ @keyframes heroFade{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} [data-r~="herobox"]>:nth-child(1){animation:heroFade .8s ease-out both} [data-r~="herobox"]>:nth-child(2){animation:heroFade .8s ease-out .12s both} [data-r~="herobox"]>:nth-child(3){animation:heroFade .8s ease-out .24s both} /* ---- 3. ホバー（タッチ端末には付けない） ------------------------------------ */ @media (hover:hover){ /* RECORDのリールタイル：本体が浮き、サムネイルだけ軽く寄る（角丸はspan側のoverflow:hiddenが守る） */ [data-r~="reeltile"]{transition:transform .25s ease} [data-r~="reeltile"]>span{transition:box-shadow .25s ease} [data-r~="reeltile"] img{transition:transform .25s ease} [data-r~="reeltile"]:hover{transform:translateY(-4px)} [data-r~="reeltile"]:hover>span{box-shadow:0 10px 24px rgba(27,26,23,.16)} [data-r~="reeltile"]:hover img{transform:scale(1.03)} /* NOTEの流れる帯のカード：他のカードと同じ「4px浮く＋画像1.03倍」。帯そのものの一時停止は index.html 側 */ [data-r~="notecard"]{transition:transform .25s ease} [data-r~="notecard"] img{transition:transform .25s ease} [data-r~="notecard"]:hover{transform:translateY(-4px)} [data-r~="notecard"]:hover img{transform:scale(1.03)} /* GEARの横並びリスト：罫線だけの静かな見た目なので影は足さず、浮きとサムネイルだけ */ [data-r~="noterow"]{transition:transform .25s ease} [data-r~="noterow"] img{transition:transform .25s ease} [data-r~="noterow"]:hover{transform:translateY(-4px)} [data-r~="noterow"]:hover img{transform:scale(1.03)} /* LINEボタン：色は変えない。既存の box-shadow/filter の transition を壊さず transform を足す */ a[href="https://lin.ee/rj117j8"]{transition:box-shadow .2s ease,filter .2s ease,transform .2s ease} a[href="https://lin.ee/rj117j8"]:hover{transform:translateY(-1px)} } /* ---- 4. reduced-motion では全部止める（要素は最初から表示） ------------------- refinements.css 末尾の全停止（animation/transition:none!important）が先に効くので、 ここでは「隠したままにならない」ことだけを保証する。 :not(.is-in) と同じ詳細度 (0,3,0) で後ろに置き、表示前の要素も見えるようにする。 */ @media (prefers-reduced-motion:reduce){ .js-reveal [data-reveal], .js-reveal [data-reveal]:not(.is-in), .js-reveal [data-reveal="fade"]:not(.is-in){opacity:1;transform:none;animation:none} [data-r~="herobox"]>:nth-child(1), [data-r~="herobox"]>:nth-child(2), [data-r~="herobox"]>:nth-child(3){animation:none;opacity:1;transform:none} [data-r~="reeltile"]:hover, [data-r~="noterow"]:hover, [data-r~="notecard"]:hover, a[href="https://lin.ee/rj117j8"]:hover{transform:none} [data-r~="reeltile"]:hover img, [data-r~="noterow"]:hover img, [data-r~="notecard"]:hover img{transform:none} [data-r~="reeltile"]:hover>span{box-shadow:none} }