/* 動きの演出。html.motion（motion-init.js が付与）のときだけ有効。視差効果を減らす設定では何も動かさない。 */
:root {
 --ease-out: cubic-bezier(.16,1,.3,1);
 --ease-io: cubic-bezier(.76,0,.24,1);
 --reveal-dur: .9s;
}

/* ---- ページ遷移：エンドミルが中央を切削 → その線で幕が上下に割れて開く。移動時は上下から閉じる ---- */
.motion::before, .motion body::after {
 content: ""; position: fixed; left: 0; right: 0; height: calc(50% + 1px); z-index: 100; pointer-events: none;
 background: var(--accent-deep);
}
.motion::before { top: 0; animation: pt-open-up .7s .5s var(--ease-io) forwards; }
.motion body::after { bottom: 0; animation: pt-open-down .7s .5s var(--ease-io) forwards; }
/* 切削された溝（熱を帯びた先端が明るい） */
.motion body::before {
 content: ""; position: fixed; left: 0; right: 0; top: calc(50% - 1px); height: 2px; z-index: 101; pointer-events: none;
 background: linear-gradient(90deg, var(--accent-bright) 0%, #9fd8b2 70%, #ffe7a3 100%);
 box-shadow: 0 0 10px #ffd97a99;
 clip-path: inset(0 100% 0 0);
 animation: pt-groove .5s var(--ease-io) forwards, pt-fade .25s .5s forwards;
}
/* エンドミル本体（刃先が溝の高さにくる） */
.motion::after {
 content: ""; position: fixed; left: 0; top: calc(50% - 76px); width: 28px; height: 78px; z-index: 102; pointer-events: none;
 background: url(../images/endmill.svg) center / contain no-repeat;
 filter: drop-shadow(0 0 8px #ffd97a80);
 transform: translateX(-40px);
 animation: pt-tool .5s var(--ease-io) forwards, pt-fade .2s .48s forwards;
}
.motion.is-leaving::before { animation: pt-close-down .45s var(--ease-io) forwards; }
.motion.is-leaving body::after { animation: pt-close-up .45s var(--ease-io) forwards; }
.motion.is-leaving body::before, .motion.is-leaving::after { animation: none; opacity: 0; }
@keyframes pt-open-up { to { transform: translateY(-101%); } }
@keyframes pt-open-down { to { transform: translateY(101%); } }
@keyframes pt-close-down { from { transform: translateY(-101%); } to { transform: none; } }
@keyframes pt-close-up { from { transform: translateY(101%); } to { transform: none; } }
@keyframes pt-groove { to { clip-path: inset(0 0 0 0); } }
@keyframes pt-tool { to { transform: translateX(calc(100vw - 28px)); } }
@keyframes pt-fade { to { opacity: 0; } }

/* 横から入ってくる要素や遷移の刃物で横スクロールが出ないようにする */
.motion body { overflow-x: clip; }

/* ---- スクロール進捗バー・ヘッダー ---- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30; pointer-events: none; background: var(--accent-bright); transform-origin: left; transform: scaleX(0); }
.motion .site-header { transition: box-shadow .3s; }
.motion .site-header.is-scrolled { box-shadow: 0 6px 20px #0000001a; }

/* ---- スクロールで現れる要素 ---- */
.motion [data-reveal] {
 opacity: 0; transform: translateY(32px);
 transition: opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out);
 transition-delay: calc(var(--i, 0) * 90ms);
}
.motion [data-reveal="left"] { transform: translateX(-40px); }
.motion [data-reveal="right"] { transform: translateX(40px); }
/* 画像はワイプで現れる。監視する外枠は切り抜かず、中の画像だけを切り抜く（切り抜くと交差判定されないため） */
.motion [data-reveal="img"] { opacity: 1; transform: none; overflow: hidden; }
.motion [data-reveal="img"] img { clip-path: inset(0 100% 0 0); transform: scale(1.18); transition: clip-path 1.1s var(--ease-io), transform 1.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion [data-reveal="img"].is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* 画像のワイプの先端に、切削の光る刃先ラインを走らせる */
.motion [data-reveal="img"] { position: relative; }
.motion [data-reveal="img"]::after {
 content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 2; pointer-events: none; opacity: 0;
 background: linear-gradient(#ffe7a300, #ffe7a3 20%, #fff 50%, #ffe7a3 80%, #ffe7a300);
 box-shadow: 0 0 14px 2px #ffd97a99;
}
.motion [data-reveal="img"].is-in::after { animation: cutter-edge 1.1s var(--ease-io) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes cutter-edge { 0% { left: 0; opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* ---- 見出しの線をエンドミルが削り出す（motion.js が .cut / .is-cut と刃物・切粉を付ける） ---- */
.motion h2.cut { position: relative; }
.motion .section-kicker + h2.cut::after {
 content: ""; display: block; width: 48px; height: 3px; margin-top: var(--space-3);
 background: var(--accent-bright);
}
.motion h2.cut::before, .motion .section-kicker + h2.cut::after { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-io); }
.motion h2.cut.is-cut::before, .motion .section-kicker + h2.cut.is-cut::after { transform: scaleX(1); }
.cut-tool {
 position: absolute; left: -6px; width: 12px; height: 34px; pointer-events: none; z-index: 2;
 background: url(../images/endmill.svg) center / contain no-repeat;
 filter: drop-shadow(0 0 4px #ffd97a99);
 opacity: 0;
}
.cut-tool.cut-top { top: -31px; }
.cut-tool.cut-bottom { bottom: -2px; }
.is-cut > .cut-tool { animation: cut-pass 1.25s forwards; }
@keyframes cut-pass {
 0% { opacity: 0; transform: translate(0,-14px); }
 12% { opacity: 1; transform: translate(0,0); animation-timing-function: var(--ease-io); }
 70% { opacity: 1; transform: translate(48px,0); animation-timing-function: ease-in; }
 100% { opacity: 0; transform: translate(52px,-26px); }
}
.chip {
 position: absolute; width: 5px; height: 2px; border-radius: 2px 2px 0 2px; pointer-events: none; z-index: 2;
 background: #d9b65a;
 animation: chip-fly .7s cubic-bezier(.2,.7,.4,1) forwards;
}
.chip.chip-steel { background: #c7d0cb; }
.chip.chip-hot { background: #ffcf6b; box-shadow: 0 0 4px #ffb84d; }
@keyframes chip-fly {
 0% { transform: translate(0,0) rotate(0); opacity: 1; }
 60% { opacity: 1; }
 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* ---- トップのヒーロー ---- */
.motion .hero h1 .line { display: block; overflow: hidden; }
.motion .hero h1 .line > span { display: block; transform: translateY(105%); animation: rise 1s var(--ease-out) forwards; animation-delay: calc(.55s + var(--i, 0) * .12s); }
.motion .hero .location, .motion .hero-lead, .motion .hero .intro-actions { opacity: 0; transform: translateY(20px); animation: fade-up .9s var(--ease-out) forwards; }
.motion .hero .location { animation-delay: .45s; }
.motion .hero-lead { animation-delay: .85s; }
.motion .hero .intro-actions { animation-delay: 1s; }
.motion .hero .location::before { transform: scaleX(0); transform-origin: left; animation: grow .8s .6s var(--ease-out) forwards; }
.motion .hero-photo img { transform: translateY(var(--parallax, 0px)); scale: 1.15; animation: ken-burns 2.4s .2s var(--ease-out) forwards; will-change: transform; }
.motion .hero-photo figcaption { opacity: 0; animation: fade-up .8s 1.4s forwards; }
.motion .hero-facts > div { opacity: 0; transform: translateY(24px); animation: fade-up .9s var(--ease-out) forwards; animation-delay: calc(1.1s + var(--i, 0) * .12s); }
@keyframes rise { to { transform: translateY(0); } }
@keyframes fade-up { to { opacity: 1; transform: none; } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes ken-burns { to { scale: 1.08; } }

/* 下層ページの見出し */
.motion .page-heading h1 { opacity: 0; transform: translateX(-24px); animation: fade-up .9s .5s var(--ease-out) forwards; }
.motion .page-heading h1 { border-left-color: transparent; position: relative; }
.motion .page-heading h1::before { content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: top; animation: grow-y .7s .8s var(--ease-out) forwards; }
.motion .page-heading .wrap > p, .motion .page-heading .breadcrumb, .motion .page-jumps { opacity: 0; animation: fade-up .9s .7s var(--ease-out) forwards; transform: translateY(14px); }
@keyframes grow-y { to { transform: scaleY(1); } }

/* ---- ホバー演出 ---- */
@media (hover: hover) {
 .motion .button { position: relative; overflow: hidden; isolation: isolate; transition: color .35s, border-color .35s, transform .35s var(--ease-out); }
 .motion .button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent-bright); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-io); }
 .motion .button:hover::before { transform: scaleX(1); transform-origin: left; }
 .motion .button:hover { color: var(--on-accent); border-color: var(--accent-bright); background: var(--accent); }
 .motion .button-light:hover, .motion .button-ghost:hover { background: transparent; }
 .motion .button span[aria-hidden], .motion .text-link span[aria-hidden] { display: inline-block; transition: transform .35s var(--ease-out); }
 .motion .button:hover span[aria-hidden], .motion .text-link:hover span[aria-hidden] { transform: translateX(5px); }

 .motion .text-link { border-bottom-color: var(--line-strong); background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .45s var(--ease-out); }
 .motion .text-link:hover { background-size: 100% 1px; }

 .motion .nav a { transition: background-color .25s, color .25s; }
 .motion .nav a:not(:last-child)::before { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 3px; background: var(--accent-bright); transform: scaleX(0); transition: transform .35s var(--ease-out); }
 .motion .nav a:not(:last-child):hover::before { transform: scaleX(1); }
 .motion .nav a:last-child { transition: background-color .3s, letter-spacing .3s; }
 .motion .nav a:last-child:hover { background: var(--text); letter-spacing: .08em; }

 .motion .brand img { transition: transform .6s var(--ease-out); }
 .motion .brand:hover img { transform: rotate(-12deg) scale(1.08); }

 .motion .service-image img, .motion .company-photo img, .motion .equipment-intro > figure img, .motion .service-detail figure img { transition: transform .9s var(--ease-out), filter .6s, clip-path 1.1s var(--ease-io); }
 .motion .services article:hover .service-image.is-in img, .motion .services article:hover .service-image:not([data-reveal]) img, .motion .service-detail figure:hover img, .motion .company-photo:hover img, .motion .equipment-intro > figure:hover img { transform: scale(1.06); }
 .motion .company-photo, .motion .equipment-intro > figure, .motion .service-detail figure { overflow: hidden; }
 .motion .services h3 a::after { transition: transform .35s var(--ease-out); }
 .motion .services article:hover h3 a::after { transform: translateX(6px); }
 .motion .services article:hover h3 a { color: var(--accent); }

 .motion .work-link figure { transition: transform .5s var(--ease-out); }
 .motion .work-link img { transition: box-shadow .5s var(--ease-out), border-color .3s, filter .5s; }
 .motion .work-link:hover figure { transform: translateY(-6px); }
 .motion .work-link:hover img { box-shadow: 0 16px 32px #00000040; filter: brightness(1.06) contrast(1.04); }
 .motion .work-link figcaption span { display: inline-block; transition: transform .35s var(--ease-out); }
 .motion .work-link:hover figcaption span { transform: translate(3px,-3px); }

 .motion .equipment figure { overflow: hidden; transition: transform .45s var(--ease-out), box-shadow .45s, border-color .3s; }
 .motion .equipment img { transition: transform .7s var(--ease-out); }
 .motion .equipment:hover figure { transform: translateY(-5px); box-shadow: 0 14px 28px #1c33281f; border-color: var(--line-strong); }
 .motion .equipment:hover img { transform: scale(1.06); }

 .motion .hero-facts > div { transition: background-color .3s; }
 .motion .hero-facts > div:hover { background: var(--bg-2); }

 .motion .process-list li { transition: background-color .3s, padding-left .4s var(--ease-out); }
 .motion .process-list li:hover { background: var(--bg-2); padding-left: var(--space-4); }

 .motion .business-calendar td[data-date] { transition: background-color .2s, transform .2s; }
 .motion .business-calendar td[data-date]:hover { transform: scale(1.12); background: var(--bg-2); position: relative; z-index: 1; }
}

/* 押した感触 */
.motion .button:active, .motion .nav a:active, .motion .mobile-contact a:active { transform: scale(.97); }

/* 設備の絞り込み時にふわっと入れ替わる */
.motion .equipment:not([hidden]) figure { animation: pop-in .5s var(--ease-out) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.94); } }

/* 製作事例の拡大表示 */
.motion .gallery-dialog[open] { animation: dialog-in .45s var(--ease-out); }
.motion .gallery-dialog::backdrop { animation: backdrop-in .4s ease; }
.motion .gallery-image { animation: dialog-in .4s var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes backdrop-in { from { opacity: 0; } }

/* ---- ページ上部へ戻る ---- */
.to-top { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 16; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 18px; cursor: pointer; box-shadow: 0 8px 20px #00000033; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s, transform .35s var(--ease-out), background-color .25s; }
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent-bright); transform: translateY(-3px); }
.to-top:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 700px) { .to-top { bottom: calc(var(--dock-height) + var(--space-4) + env(safe-area-inset-bottom)); right: var(--space-4); width: 44px; height: 44px; } }

@media print {
 .motion::before, .motion::after, .motion body::after, .motion body::before, .scroll-progress, .to-top { display: none !important; }
 .motion [data-reveal], .motion [data-reveal] img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ---- ヒーロー背景のCAM加工シミュレーション ---- */
.hero-copy.has-cam { position: relative; overflow: hidden; }
.hero-copy.has-cam > div { position: relative; z-index: 1; }
.cam-sim { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .5; }
.cam-swath { fill: none; stroke: #ffffff; stroke-opacity: .05; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.cam-swath-finish { stroke-opacity: .03; }
.cam-line { fill: none; stroke: #7fd19b; stroke-opacity: .55; stroke-width: 1.2; stroke-linejoin: round; }
.cam-finish { stroke: #ffe7a3; stroke-opacity: .8; stroke-width: 1.6; }
.cam-rapid { fill: none; stroke: #ffffff; stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 3 6; }
.cam-glow { fill: #ffd97a; fill-opacity: .18; }
.cam-tool { fill: #d9b65a; stroke: #fff3c4; stroke-width: 1; }
.cam-flutes { fill: none; stroke: #5a4410; stroke-width: 1.4; stroke-linecap: round; }
.cam-chip { fill: #c7d0cb; }
.cam-chip-hot { fill: #ffcf6b; }
@media (max-width: 700px) { .cam-sim { opacity: .35; } }
/* 削り終わった FT ロゴ（ロゴと同じ緑・白） */
.cam-part { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.cam-sim.is-done .cam-part { opacity: 1; }
.cam-part-f { fill: #2f9e48; fill-opacity: .45; stroke: #0d1f17; stroke-width: 2; }
.cam-part-t { fill: #ffffff; fill-opacity: .3; stroke: #0d1f17; stroke-width: 2; }
.cam-sim.is-done .cam-swath { transition: stroke-opacity 1.2s; stroke-opacity: .02; }