/* =========================================================
   Effects — TOPは派手目、下層ページは控えめ。
   html.fx は「動きを減らす」設定でない場合のみ付与（header.php）。
   ========================================================= */

@keyframes fxUp { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes fxUpSoft { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxDown { from { opacity: 0; translate: 0 -100%; } to { opacity: 1; translate: 0 0; } }
@keyframes fxLine { from { translate: 0 105%; } to { translate: 0 0; } }
@keyframes fxWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fxTrack { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; } }
@keyframes fxKen { from { transform: scale(1.14); filter: blur(6px) saturate(1.3); } to { transform: scale(1); filter: none; } }
@keyframes fxSweep { 0% { translate: -120% 0; opacity: 0; } 20% { opacity: 1; } 100% { translate: 120% 0; opacity: 0; } }
@keyframes fxPulse { 0%, 100% { opacity: .35; translate: 0 0; } 50% { opacity: 1; translate: 6px 0; } }
@keyframes fxFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes fxBar { from { scale: 0 1; } to { scale: 1 1; } }

/* ---------- 共通：行ごとのマスク表示 ---------- */
.fx-line { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.fx-line > span { display: inline-block; }

/* ---------- 共通：スクロールで表示（JSが data-fx を付与） ---------- */
.fx [data-fx]:not(.is-in) { opacity: 0; }
.fx [data-fx] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), scale .9s cubic-bezier(.2,.7,.2,1), filter .9s; transition-delay: var(--fx-d, 0s); }
.fx [data-fx="up"]:not(.is-in) { translate: 0 22px; }
.fx [data-fx="soft"]:not(.is-in) { translate: 0 14px; }
.fx [data-fx="zoom"]:not(.is-in) { translate: 0 36px; scale: .94; filter: blur(4px); }
.fx [data-fx="lines"] { opacity: 1; }
.fx [data-fx="lines"] .fx-line > span { transition: translate 1.1s cubic-bezier(.16,.84,.2,1); transition-delay: calc(var(--fx-d, 0s) + var(--i, 0) * .12s); }
.fx [data-fx="lines"]:not(.is-in) .fx-line > span { translate: 0 105%; }
.fx [data-fx="track"]:not(.is-in) { letter-spacing: .5em; }
.fx [data-fx="track"] { transition-property: opacity, letter-spacing; transition-duration: 1.2s; }

/* ボタンのきらめき（全ページ・ホバー時のみ） */
.fx .button { position: relative; overflow: hidden; isolation: isolate; }
.fx .button::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, #ffffff55 50%, transparent 70%);
  translate: -120% 0;
}
@media (hover: hover) {
  .fx .button:hover::after { transition: translate .7s ease; translate: 120% 0; }
}

/* =========================================================
   TOP（派手目）
   ========================================================= */
/* backwards：終了後に translate を残さない（残るとスマホメニュー(fixed)の基準がヘッダーになり高さが潰れる） */
.fx .top-page .site-header { animation: fxDown .9s cubic-bezier(.2,.7,.2,1) backwards; }
.fx .top-page .site-header.is-open { animation: none; }

.fx .top-page .hero { overflow: hidden; }
.fx .top-page .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: inherit; transform-origin: 70% 50%;
  animation: fxKen 2.6s cubic-bezier(.2,.7,.2,1) both;
}
.fx .top-page .hero__content { position: relative; z-index: 2; }
.fx .top-page .hero__content > .eyebrow { animation: fxTrack 1.4s .25s cubic-bezier(.2,.7,.2,1) both; }
.fx .top-page .hero h1 .fx-line > span { animation: fxLine 1.1s cubic-bezier(.16,.84,.2,1) both; animation-delay: calc(.45s + var(--i, 0) * .16s); }
.fx .top-page .hero__en { animation: fxWipe 1.3s 1s cubic-bezier(.6,0,.2,1) both; }
.fx .top-page .hero .lead { animation: fxUp 1s 1.2s cubic-bezier(.2,.7,.2,1) both; }
.fx .top-page .hero .button-row { animation: fxUp 1s 1.4s cubic-bezier(.2,.7,.2,1) both; }

.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fx-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 50%), #ff8a3d2e, #4aa3ff14 40%, transparent 65%);
}
.fx-glow.is-on { opacity: 1; }
.fx-sweep { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.fx-sweep::before {
  content: ""; position: absolute; inset: -20% -10%; rotate: 12deg;
  background: linear-gradient(90deg, transparent 35%, #ffffffb3 50%, transparent 65%);
  animation: fxSweep 2.2s 1.1s cubic-bezier(.5,0,.3,1) both;
}
.fx .top-page .section-image > .container-wide { position: relative; z-index: 2; }
.site-footer > .fx-canvas { z-index: -1; } /* ロゴの合成（screen）を保つため背面に */
.fx .top-page .platform, .fx .top-page .site-footer, .fx .top-page .feature--dark { overflow: hidden; }

/* スクロール連動の背景パララックス（PC） */
@media (min-width: 1001px) {
  .fx .top-page .feature--dark { background-position: center calc(50% + var(--py, 0px)); }
  .fx .top-page .feature--product { background-position: center calc(52% + var(--py, 0px)); }
  .fx .top-page .platform { background-position: center calc(53% + var(--py, 0px)); }
}

/* 活用シーンカード：3Dチルト＋光沢 */
.fx .top-page .case-cards { perspective: 900px; }
.fx .top-page .case-card { position: relative; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.fx .top-page .case-card img { transition: scale .6s cubic-bezier(.2,.7,.2,1); }
.fx .top-page .case-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 30%), #ffffff5c, transparent 60%);
}
@media (hover: hover) {
  .fx .top-page .case-card:hover { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px); box-shadow: 0 22px 40px -18px #0b1a2a66; }
  .fx .top-page .case-card:hover img { scale: 1.07; }
  .fx .top-page .case-card:hover::after { opacity: 1; }
}

/* 表示アニメ中はカードの既存トランジションを上書き */
.fx .top-page .case-card[data-fx] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), scale .9s cubic-bezier(.2,.7,.2,1), filter .9s; transition-delay: var(--fx-d, 0s); }

/* 5領域リンク：アイコンの発光 */
.fx .top-page .platform-links .icon { transition: filter .3s, scale .3s; }
@media (hover: hover) {
  .fx .top-page .platform-links a:hover .icon { filter: drop-shadow(0 0 8px #ff8a3d); scale: 1.15; }
}
.fx .top-page .platform-links::before { transform-origin: left; scale: 0 1; transition: scale 1.2s .2s cubic-bezier(.2,.7,.2,1); }
.fx .top-page .platform-links.is-in::before { scale: 1 1; }

/* 3ステップ：矢印が流れる */
.fx .top-page .steps li:not(:last-child)::after { animation: fxPulse 2.2s ease-in-out infinite; }
.fx .top-page .steps li b {
  background: linear-gradient(120deg, #dce0e4 40%, #ff8a3d 50%, #dce0e4 60%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 1.6s cubic-bezier(.2,.7,.2,1);
  background-position: 100% 0;
}
.fx .top-page .steps li.is-in b { background-position: 0 0; transition-delay: calc(var(--fx-d, 0s) + .3s); }

/* 数字：カウントアップ中の幅ぶれを抑える */
.fx [data-count] { font-variant-numeric: tabular-nums; }

/* スクロール進捗バー */
.fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; pointer-events: none; transform-origin: left; scale: var(--p, 0) 1; background: linear-gradient(90deg, #ff690b, #ffb36b 60%, #4aa3ff); }

/* =========================================================
   下層ページ（控えめ）
   ========================================================= */
.fx body:not(.top-page) main > section:first-child .container-wide > * { animation: fxUpSoft .9s cubic-bezier(.2,.7,.2,1) both; }
.fx body:not(.top-page) main > section:first-child .container-wide > *:nth-child(2) { animation-delay: .15s; }
.fx body:not(.top-page) main > section:first-child .container-wide > *:nth-child(n+3) { animation-delay: .3s; }
.fx body:not(.top-page) main > section:first-child h1 .fx-line > span { animation: fxLine 1s cubic-bezier(.16,.84,.2,1) both; animation-delay: calc(.15s + var(--i, 0) * .12s); }

/* カード画像のゆるいズーム */
.fx :is(.usage-card, .study-card, .news-card) img,
.fx .solution-row__visual img { transition: scale .8s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  .fx :is(.usage-card, .study-card, .news-card):hover img,
  .fx .solution-row__visual:hover img { scale: 1.04; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-canvas, .fx-glow, .fx-sweep, .fx-progress { display: none !important; }
}