/* ==========================================================================
   NBKマーケティング — FXレイヤー（brandingstudio.jp デモ群の技法を移植）
   出典技法：KOUSEI（スポットライト/シーン/ゲージ）、HARE（遷移ベール/ヘッダー挙動）、
   ongles（クリップ画像アンベール/マグネット）、CORE LAB（イントロ/カーソルリング/スイープ）、
   MIGIWA（ブラーアップ/マスク見出し）、toiro（文字分割/定速マーキー）、本体（進捗バー/シーン文字）
   すべて html.fx（JS有効時）配下でのみ発動。prefers-reduced-motion で全停止。
   ========================================================================== */

:root{
  --fxe:cubic-bezier(.16,1,.3,1);          /* 全デモ共通のハウスイージング */
  --fxe-io:cubic-bezier(.76,0,.24,1);      /* カーテン用 easeInOutQuart */
}

/* ---- 1. イントロオーバーレイ（CORE LAB / MIGIWA 方式：ワードマーク上昇＋罫線ドロー） */
#fxIntro{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:var(--navy-deep);
}
#fxIntro .fxi-inner{text-align:center}
#fxIntro .fxi-mark{
  font-family:var(--font-en);font-weight:700;color:#fff;
  font-size:clamp(1.6rem,4.4vw,2.6rem);letter-spacing:.18em;
  opacity:0;transform:translateY(16px);
  transition:opacity 1s var(--fxe),transform 1s var(--fxe);
}
#fxIntro .fxi-sub{
  margin-top:1em;font-size:.78rem;color:#8494AE;letter-spacing:.14em;
  opacity:0;transform:translateY(10px);
  transition:opacity .9s var(--fxe) .25s,transform .9s var(--fxe) .25s;
}
#fxIntro .fxi-rule{
  width:0;height:2px;background:var(--wine);margin:1.4em auto 0;
  transition:width .8s var(--fxe) .35s;
}
#fxIntro.fxi-go .fxi-mark,#fxIntro.fxi-go .fxi-sub{opacity:1;transform:none}
#fxIntro.fxi-go .fxi-rule{width:clamp(60px,14vw,150px)}
#fxIntro.fxi-out{opacity:0;transition:opacity .7s ease;pointer-events:none}

/* ---- 2. ページ遷移ベール（HARE：内部リンククリック→scaleY拡大→遷移） */
.fx-veil{
  position:fixed;inset:0;z-index:9998;background:var(--navy-deep);
  transform:scaleY(0);transform-origin:bottom;pointer-events:none;
}
.fx-veil.in{transform:scaleY(1);transition:transform .5s var(--fxe-io)}
.fx-veil.boot{transform:scaleY(1);transform-origin:top}
.fx-veil.boot-out{transform:scaleY(0);transition:transform .6s var(--fxe-io) .05s}

/* ---- 3. スクロール進捗バー（本体サイト：上端の極細バー） */
.fx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  background:var(--wine);transform:scaleX(0);transform-origin:left;pointer-events:none;
}

/* ---- 4. リビール強化（34px / 1s expo / --d 遅延。
        ※blurフィルタはスクロール時の描画負荷が大きいため撤去） */
html.fx .reveal{
  opacity:0;transform:translateY(34px);
  transition:opacity 1s var(--fxe),transform 1s var(--fxe);
  transition-delay:var(--d,0s);
}
html.fx .reveal.is-in{opacity:1;transform:none}

/* ---- 5. 見出しマスクリビール（KOUSEI .mask-line：overflow:hiddenの中を110%上昇） */
html.fx .fx-mask{display:block;overflow:hidden}
html.fx .fx-mask>.fx-mask-inner{
  display:block;transform:translateY(112%);
  transition:transform 1.1s var(--fxe);transition-delay:var(--d,0s);
}
html.fx .fx-mask.is-in>.fx-mask-inner{transform:none}

/* ---- 6. ヒーロー文字分割ライズ（toiro：1文字35ms階段） */
html.fx .fx-split .fx-ch{
  display:inline-block;transform:translateY(1.05em);opacity:0;
  transition:transform .9s var(--fxe),opacity .6s ease;
}
html.fx .fx-split.fx-in .fx-ch{transform:none;opacity:1}
.fx-split{overflow:hidden}

/* ---- 7. 画像アンベール（ongles/MIGIWA：clip-path上→下ワイプ＋ズーム収束） */
html.fx .fx-unveil{overflow:hidden}
html.fx .fx-unveil>img,html.fx .fx-unveil>.ph{
  transform:scale(1.14);clip-path:inset(0 0 100% 0);
  transition:transform 1.5s var(--fxe),clip-path 1.15s var(--fxe);
}
html.fx .fx-unveil.is-in>img,html.fx .fx-unveil.is-in>.ph{transform:none;clip-path:inset(0)}

/* ---- 8. ヒーロー：カーソルスポットライト（KOUSEI/本体：--mx/--myラジアル） */
.fx-spot{
  position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(460px circle at var(--mx,68%) var(--my,42%),
    rgba(168,80,92,.20),rgba(90,120,190,.10) 45%,transparent 68%);
  transition:opacity .6s ease;
}

/* ---- 9. スクロールキュー（KOUSEI/ongles：scaleY 0→1→0 反転オリジン） */
.fx-cue{
  position:absolute;left:50%;bottom:22px;z-index:2;width:1px;height:64px;
  background:rgba(255,255,255,.22);overflow:hidden;
}
.fx-cue::after{
  content:"";position:absolute;inset:0;background:var(--wine-glow);
  animation:fxCue 2.2s var(--fxe) infinite;
}
@keyframes fxCue{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ---- 10. キーワード帯マーキー（toiro：定速・複製トラック・端マスク） */
.fx-band{
  overflow:hidden;background:var(--navy-deep);padding-block:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.fx-band__track{
  display:flex;width:max-content;gap:0;will-change:transform;
  animation:fxBand var(--fx-band-dur,40s) linear infinite;
}
.fx-band__track span{
  flex:0 0 auto;padding-inline:34px;white-space:nowrap;
  font-family:var(--font-en);font-weight:900;font-size:clamp(1rem,2.2vw,1.5rem);
  letter-spacing:.14em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34);
}
.fx-band__track span.solid{color:rgba(255,255,255,.88);-webkit-text-stroke:0}
@keyframes fxBand{to{transform:translate3d(-50%,0,0)}}

/* ---- 11. 巨大ウォーターマーク（KOUSEI巨大タイポ×CORE LAB「lit」点灯） */
.fx-wm{
  overflow:hidden;pointer-events:none;user-select:none;line-height:1;
  padding-top:clamp(28px,5vw,56px);
}
.fx-wm__track{display:flex;width:max-content;will-change:margin-left;
  animation:fxWm var(--fx-wm-dur,64s) linear infinite}
.fx-wm__track span{
  flex:0 0 auto;padding-right:.6em;
  font-family:var(--font-en);font-weight:900;white-space:nowrap;
  font-size:clamp(4rem,13vw,11rem);letter-spacing:.02em;
  color:rgba(255,255,255,.05);transition:color 1s ease;
}
.fx-wm.lit .fx-wm__track span{color:rgba(255,255,255,.11)}
/* iOS対策：transformではなくmargin-leftを流す（KOUSEIの手法） */
@keyframes fxWm{to{margin-left:calc(-1 * var(--fx-wm-shift,1200px))}}

/* ---- 12. 数値シーン（KOUSEI strengthSheen：グラデをテキストにクリップして流す） */
html.fx .fx-sheen{
  background:repeating-linear-gradient(100deg,
    #FFFFFF 0%,#E7ECF5 12%,#C3CCDC 17%,#FFFFFF 22%,#FFFFFF 40%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fxSheen 8s linear infinite;
}
@keyframes fxSheen{to{background-position:-80% 0}}

/* ---- 13. ボタン色スイープ（CORE LAB：::beforeがtranslateXで塗り潰す） */
html.fx .btn{position:relative;isolation:isolate;overflow:hidden}
html.fx .btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--navy-deep);
  transform:translateX(-101%);transition:transform .45s var(--fxe);
}
html.fx .btn:hover::before{transform:translateX(0)}
html.fx .btn:hover{background:var(--wine);border-color:var(--navy-deep)}
html.fx .btn--ghost::before{background:var(--navy)}
html.fx .btn--ghost:hover{background:transparent;color:#fff;border-color:var(--navy)}
html.fx .btn--on-dark::before{background:#fff}
html.fx .btn--on-dark:hover{background:transparent;color:var(--navy);border-color:#fff}
html.fx .cta-band .btn--fill::before{background:var(--navy-deep)}
html.fx .cta-band .btn--fill:hover{background:var(--wine);border-color:var(--navy-deep)}

/* ---- 14. カードホバー強化（HARE/ongles：リフト＋画像ズーム＋影） */
html.fx .pcard,html.fx .acard,html.fx .feature{
  transition:transform .5s var(--fxe),border-color .3s var(--fxe),box-shadow .5s var(--fxe);
}
html.fx .pcard:hover,html.fx .acard:hover,html.fx .feature:hover{
  transform:translateY(-6px);border-color:var(--navy);
  box-shadow:0 24px 48px -24px rgba(12,21,38,.35);
}
html.fx .pcard__thumb .ph,html.fx .pcard__thumb img{transition:transform 1s var(--fxe)}
html.fx .pcard:hover .pcard__thumb img{transform:scale(1.06)}
html.fx .news-row{transition:background .25s var(--fxe),padding-left .35s var(--fxe)}
html.fx .news-row:hover{padding-left:16px}

/* フッターリンク下線ドロー（ongles：background-size 0→100%） */
html.fx .footer-col a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size .45s var(--fxe),color .2s ease;
}
html.fx .footer-col a:hover{background-size:100% 1px;padding-left:0}

/* ---- 15. カスタムカーソルリング（CORE LAB：lerp追従・ホバーで拡大） */
.fx-cursor{
  position:fixed;top:0;left:0;z-index:9997;width:30px;height:30px;border-radius:50%;
  border:1.5px solid rgba(123,29,37,.65);pointer-events:none;
  transform:translate(-50%,-50%);
  /* mix-blend-mode:difference は全画面合成レイヤーを作りスクロールを重くするため不使用 */
  transition:width .3s var(--fxe),height .3s var(--fxe),opacity .3s ease;
  opacity:0;
}
.fx-cursor.on{opacity:1}
.fx-cursor.grow{width:56px;height:56px;border-color:rgba(168,30,39,.9)}

/* ---- 16. ヘッダー：下スクロールで隠れ、上で出る（HARE） */
.site-header{transition:transform .4s var(--fxe),box-shadow .3s var(--ease),background .3s var(--ease)}
.site-header.fx-hidden{transform:translateY(-100%)}

/* ---- 17. モバイルナビ：リンク階段ライズ（KOUSEI/ongles nIn） */
@media (max-width:1300px){
  html.fx .site-nav .nav-list li{
    opacity:0;transform:translateY(22px);
    transition:opacity .55s var(--fxe),transform .55s var(--fxe);
  }
  html.fx body.nav-open .site-nav .nav-list li{opacity:1;transform:none}
  html.fx body.nav-open .site-nav .nav-list li:nth-child(1){transition-delay:.10s}
  html.fx body.nav-open .site-nav .nav-list li:nth-child(2){transition-delay:.16s}
  html.fx body.nav-open .site-nav .nav-list li:nth-child(3){transition-delay:.22s}
  html.fx body.nav-open .site-nav .nav-list li:nth-child(4){transition-delay:.28s}
  html.fx body.nav-open .site-nav .nav-list li:nth-child(5){transition-delay:.34s}
  html.fx body.nav-open .nav-cta{opacity:0;transform:translateY(22px);
    transition:opacity .55s var(--fxe) .42s,transform .55s var(--fxe) .42s}
  html.fx body.nav-open .nav-cta{opacity:1;transform:none}
}

/* ---- 18. Ken Burns（実写動画/画像を入れた際に自動でゆっくり寄る：MIGIWA） */
html.fx .hero__video{transform:scale(1.06);animation:fxKb 24s ease-out forwards}
@keyframes fxKb{to{transform:scale(1.15)}}

/* ---- 19. ページヒーローのスキュー装飾（KOUSEI パラレログラム・アクセント） */
html.fx .page-hero::after{
  content:"";position:absolute;top:0;right:-60px;bottom:0;width:clamp(120px,18vw,260px);
  background:linear-gradient(160deg,rgba(123,29,37,.32),rgba(123,29,37,.06));
  transform:skewX(-11deg);pointer-events:none;
}
html.fx .page-hero{overflow:hidden}

/* ---- 20. デモ送信トースト（CORE LAB） */
.fx-toast{
  position:fixed;left:50%;bottom:28px;z-index:9996;
  transform:translate(-50%,18px);opacity:0;
  background:var(--navy-deep);color:#fff;font-size:.9rem;font-weight:700;
  padding:.9em 1.6em;border-radius:100px;box-shadow:var(--shadow-lg);
  transition:opacity .35s var(--fxe),transform .35s var(--fxe);
  pointer-events:none;max-width:88vw;text-align:center;
}
.fx-toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:820px){.fx-toast{bottom:calc(56px + 18px + env(safe-area-inset-bottom))}}

/* ---- 21. 減速モーション：FX全停止 -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #fxIntro,.fx-veil,.fx-progress,.fx-cursor,.fx-spot,.fx-cue{display:none!important}
  html.fx .reveal,html.fx .fx-mask>.fx-mask-inner,html.fx .fx-split .fx-ch,
  html.fx .fx-unveil>img,html.fx .fx-unveil>.ph{
    opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;
    transition:none!important;
  }
  .fx-band__track,.fx-wm__track,html.fx .fx-sheen,html.fx .hero__video{animation:none!important}
  html.fx .fx-sheen{color:inherit;background:none;-webkit-text-stroke:0}
}