/* ==========================================================
   演出（fx）：画像のマスクリビール / 文字の1文字ずつリビール /
   パララックス / 横流れ文字（マーキー） / カスタムカーソル・ホバー
   ※ fx.js が付けるクラスだけを対象にしているので、JSが動かない環境でも表示は崩れない
   ========================================================== */

/* ---------- 文字のマスクリビール ---------- */
.fx-c { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.fx-ci { display: inline-block; transform: translateY(115%); transition: transform .95s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * var(--fx-step, 36ms)); will-change: transform; }
.fx-split.is-in .fx-ci { transform: none; }
.fx-split--en { white-space: nowrap; --fx-step: 22ms; }

/* ---------- 画像：ブロックが階段状に消えて、下の画像が現れる ---------- */
.fx-mask { display: block; position: relative; align-self: start; width: 100%; overflow: hidden; border-radius: 4px; }
.fx-par { display: block; will-change: transform; }
.fx-blocks { position: absolute; inset: 0; z-index: 2; display: grid; pointer-events: none; }
.fx-b { background: var(--fx-cover, #fff); margin: -.5px; opacity: 1; transition: opacity .16s linear; transition-delay: var(--d, 0ms); }
.fx-mask.is-in .fx-b { opacity: 0; }
.fx-mask.is-done .fx-blocks { display: none; }
.fx-mask--shadow { overflow: visible; isolation: isolate; }
.fx-mask--shadow .fx-par { overflow: hidden; border-radius: 4px; }
.fx-mask--shadow .fx-blocks { border-radius: 4px; overflow: hidden; }
.fx-mask--shadow::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px; box-shadow: 0 16px 40px var(--color-card-shadow); opacity: 0; transition: opacity 1.2s ease .3s; }
.fx-mask--shadow.is-in::after { opacity: 1; }
.fx-mask img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; transform: scale(1.32); transition: transform 1.9s cubic-bezier(.2, .7, .2, 1); }
.fx-mask.is-in img { transform: scale(1.14); }
.fx-mask.is-in:hover img { transform: scale(1.22); transition-duration: 1.2s; }
.business__item--rev .fx-mask { order: 2; }
@media (max-width: 767px) {
  .business__item--rev .fx-mask { order: 0; }
}

/* ---------- ファーストビューの入場 ---------- */
.top__mv-en, .top__mv-lead, .top__mv-btn { animation: fxUp 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.top__mv-en { animation-delay: .1s; }
.top__mv-lead { animation-delay: .9s; }
.top__mv-btn { animation-delay: 1.1s; }
@keyframes fxUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- 横流れ文字（マーキー） ---------- */
.top__marquee { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 96px); background: var(--color-dark) url("../images/company-vision.webp") center / cover fixed; }
.top__marquee::before { content: ""; position: absolute; inset: 0; background: rgba(10, 28, 58, .62); }
.top__marquee-row { position: relative; }
@media (max-width: 767px) { .top__marquee { background-attachment: scroll; } }
.top__marquee-row { display: flex; width: max-content; }
.top__marquee-row + .top__marquee-row { margin-top: clamp(4px, 1vw, 12px); }
.top__marquee-track { display: flex; flex: none; animation: fxMarquee 48s linear infinite; }
.top__marquee-row--rev .top__marquee-track { animation-direction: reverse; animation-duration: 60s; }
.top__marquee-track span { flex: none; padding-right: .8em; font-family: var(--font-en); font-weight: 600; font-size: clamp(56px, 10vw, 150px); line-height: 1.15; letter-spacing: .02em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--color-white); }
.top__marquee-row--rev .top__marquee-track span { color: rgba(255, 255, 255, .16); -webkit-text-stroke: 0; }
.top__marquee-track span i { font-style: normal; color: var(--color-accent); -webkit-text-stroke: 0; padding-inline: .3em .1em; }
@keyframes fxMarquee { to { transform: translateX(-100%); } }

/* ---------- ホバー ---------- */
.top__biz-card { transition: opacity .9s ease, transform .9s ease, box-shadow .5s ease; }
.top__biz-card.is-visible:hover { transform: translateY(-8px); box-shadow: 0 20px 44px var(--color-card-shadow); }
.fx .common__btn { transition: background-color .3s ease, color .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1); will-change: transform; }

/* ---------- カスタムカーソル ---------- */
.fx-cursor-on, .fx-cursor-on a, .fx-cursor-on button, .fx-cursor-on label, .fx-cursor-on summary { cursor: none; }
.fx-cursor-on input, .fx-cursor-on textarea, .fx-cursor-on select { cursor: auto; }
.fx-dot, .fx-ring { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.fx-cursor-on.fx-cursor-live .fx-dot, .fx-cursor-on.fx-cursor-live .fx-ring { opacity: 1; }
.fx-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--color-accent); }
.fx-ring { display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1.5px solid var(--color-accent); border-radius: 50%; font-family: var(--font-en); font-size: 11px; letter-spacing: .18em; color: var(--color-white); transition: opacity .3s ease, width .35s cubic-bezier(.2, .7, .2, 1), height .35s cubic-bezier(.2, .7, .2, 1), margin .35s cubic-bezier(.2, .7, .2, 1), background-color .3s ease; }
.fx-ring.is-link { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: rgba(0, 165, 184, .16); }
.fx-ring.is-view { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--color-accent); }
.fx-ring.is-view::after { content: "VIEW"; }
.fx-ring.is-down { width: 32px; height: 32px; margin: -16px 0 0 -16px; }

@media (prefers-reduced-motion: reduce) {
  .top__marquee-track { animation: none; }
  .top__mv-en, .top__mv-lead, .top__mv-btn { animation: none; }
}

/* ---------- 数字の帯：区切り線が引かれ、1つずつ立ち上がる ---------- */
.fx .top__number-list .top__number { opacity: 0; transform: translateY(32px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--n, 0) * 140ms); }
.fx .top__number::before { width: 0; transition: width 1.2s cubic-bezier(.77, 0, .18, 1); transition-delay: calc(var(--n, 0) * 140ms + 300ms); }
.fx .top__number-list.is-in .top__number { opacity: 1; transform: none; }
.fx .top__number-list.is-in .top__number::before { width: 56px; }
@media (prefers-reduced-motion: reduce) {
  .fx .top__number-list .top__number { opacity: 1; transform: none; }
  .fx .top__number::before { width: 56px; }
}