/* ============================================================
   RAKUFUL — MOTION & MICRO-INTERACTIONS  (overlay layer 3)
   「細部まで作り込まれた」挙動：スクロール・ストーリー / 画像ワイプ /
   見出しアクセント描画 / スクロール進捗 / ボタン・カードの微動。
   基盤 .rkfl-reveal は design.css 定義。ここは全ページ（TOP＋下層）へ拡張。
   ============================================================ */

/* ---- 1. スクロール進捗バー（橙→青）：ITらしいディテールの合図 ---- */
.rkfl-progressbar{
  position:fixed; top:0; left:0; width:100%; height:3px; z-index:100000;
  background:transparent; pointer-events:none;
}
.rkfl-progressbar > i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--coral,#ef6f4c),var(--blue,#2f6df6) 70%,var(--blue-deep,#1f4fd0));
  box-shadow:0 0 10px rgba(239,111,76,.45);
  transition:width .1s linear;
}

/* ---- 2. リビール・バリアント（base .rkfl-reveal / rkflshot freeze 対象を継承） ---- */
.rkfl-reveal.r-soft{ transform:translateY(22px); }
.rkfl-reveal.r-left{ transform:translateX(-46px); }
.rkfl-reveal.r-right{ transform:translateX(46px); }
.rkfl-reveal.r-scale{ transform:scale(.93); }
.rkfl-reveal.r-rise{ transform:translateY(44px); }
.rkfl-reveal.rkfl-vis{ opacity:1 !important; transform:none !important; }

/* ---- 3. 画像リビール：クリップ・ワイプ＋内側ズーム（“見せ場”の一拍） ---- */
.rkfl-img-reveal{ position:relative; overflow:hidden; }
.rkfl-img-reveal img{
  transform:scale(1.14); transform-origin:center;
  transition:transform 1.4s var(--ease-out,cubic-bezier(.16,1,.3,1));
  will-change:transform;
}
.rkfl-img-reveal::after{            /* ワイプ幕：右へ引いて画像を出す */
  content:""; position:absolute; inset:0; z-index:3;
  background:var(--paper,#faf7f2);
  transform:scaleX(1); transform-origin:right center;
  transition:transform 1s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.rkfl-img-reveal.rkfl-vis img{ transform:scale(1); }
.rkfl-img-reveal.rkfl-vis::after{ transform:scaleX(0); }
/* ホバーで僅かに寄る（“反応する”感） */
#page_content .post_content .rkfl-bodyimg.rkfl-img-reveal.rkfl-vis:hover img{ transform:scale(1.045); }

/* ---- 4. 見出しアクセントの“描画” ---- */
/* h2 下線（橙グラデ）を 0→64px にドロー */
#page_content .post_content h2.rkfl-reveal::after{ width:0; transition:width .85s .18s var(--ease-out,cubic-bezier(.16,1,.3,1)); }
#page_content .post_content h2.rkfl-reveal.rkfl-vis::after{ width:64px; }
/* h3 左バーを縦に伸ばす */
#page_content .post_content h3.rkfl-reveal{ border-left-color:transparent; transition:border-color .01s; }
#page_content .post_content h3.rkfl-reveal::before{
  content:""; position:absolute; left:0; top:50%; width:4px; height:0; background:var(--brand,#ef6f4c);
  transform:translateY(-50%); transition:height .6s .1s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
#page_content .post_content h3.rkfl-reveal{ position:relative; }
#page_content .post_content h3.rkfl-reveal.rkfl-vis::before{ height:100%; }

/* ---- 5. ミクロインタラクション ---- */
/* 5-1 下層の主ボタン：シャイン走査＋矢印トラベル＋浮き */
#page_content .post_content .wp-block-button__link.rkfl-shine{ position:relative; overflow:hidden; padding-right:3em; }
#page_content .post_content .wp-block-button__link.rkfl-shine::before{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg); transition:left .7s var(--ease,cubic-bezier(.22,.61,.36,1)); z-index:1;
}
#page_content .post_content .wp-block-button__link.rkfl-shine::after{
  content:"→"; position:absolute; right:1.35em; top:50%; transform:translateY(-50%);
  font-family:var(--font-en,'Outfit',sans-serif); font-weight:600; opacity:.85;
  transition:transform .4s var(--ease,cubic-bezier(.22,.61,.36,1));
}
#page_content .post_content .wp-block-button__link.rkfl-shine:hover::before{ left:130%; }
#page_content .post_content .wp-block-button__link.rkfl-shine:hover::after{ transform:translate(4px,-50%); }

/* 5-2 関連カード：ホバーで矢印サークルが点灯・前進 */
#page_content .post_content .rkfl-rel-card .ar{
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
#page_content .post_content .rkfl-rel-card:hover .ar{
  background:var(--coral,#ef6f4c) !important; color:#fff !important; transform:translateX(3px);
}
#page_content .post_content .rkfl-rel-card .t{ transition:color .35s var(--ease); }
#page_content .post_content .rkfl-rel-card:hover .t{ color:var(--brand-deep,#c8502f); }

/* 5-3 本文リンク：下線をドロー（既存の常時下線を、伸びる下線へ） */
#page_content .post_content p a,
#page_content .post_content li a{
  text-decoration:none;
  background-image:linear-gradient(var(--brand,#ef6f4c),var(--brand,#ef6f4c));
  background-repeat:no-repeat; background-position:0 100%; background-size:100% 1.5px;
  transition:background-size .35s var(--ease), color .3s var(--ease);
  padding-bottom:1px;
}
#page_content .post_content p a:hover,
#page_content .post_content li a:hover{ background-size:100% 2.5px; color:var(--brand-deep,#c8502f); }

/* ---- 6. reduced-motion：全リビール即時可視・幕除去 ---- */
@media (prefers-reduced-motion: reduce){
  .rkfl-reveal{ opacity:1 !important; transform:none !important; }
  .rkfl-img-reveal img{ transform:none !important; }
  .rkfl-img-reveal::after{ transform:scaleX(0) !important; }
  #page_content .post_content h2.rkfl-reveal::after{ width:64px !important; }
  #page_content .post_content h3.rkfl-reveal::before{ height:100% !important; }
  .rkfl-progressbar{ display:none; }
}