/*! motion-kit.css v1 — tsunagi-web の動きキット（自作・依存なし）
   data 属性（HTML）でも mk- クラス（WordPress のブロック）でも同じように動く
   使い方：HTML に data 属性を付けるだけ。JS（motion-kit.js）が動かないときは、すべての内容がそのまま見える。
   色・長さ・距離は tokens.css の変数があればそれを使い、なければ下の既定値。 */

:root {
  --mk-dur: var(--dur-slow, 720ms);
  --mk-dur-fast: var(--dur-fast, 180ms);
  --mk-dur-base: var(--dur-base, 360ms);
  --mk-ease: var(--ease-out, cubic-bezier(.22, .8, .24, 1));
  --mk-ease-io: var(--ease-in-out, cubic-bezier(.65, 0, .35, 1));
  --mk-ease-spring: var(--ease-spring, linear(0, .38 9%, .82 22%, 1.02 34%, 1.06 40%, 1.02 50%, .99 62%, 1));
  --mk-dist: var(--motion-distance, 24px);
  --mk-stagger: var(--motion-stagger, 80ms);
  --mk-brand: var(--color-brand, #2f5d50);
  --mk-accent: var(--color-accent, var(--mk-brand));
  --mk-marker: color-mix(in oklab, var(--mk-accent) 38%, transparent);
}

/* ---------- 出現（スクロールで見えたら1回だけ）---------- */
/* .mk-js は JS が動いたときだけ html に付く。JS が止まっても隠れたままにならない */
.mk-js :is([data-reveal],[class*="mk-reveal-"]) {
  transition:
    opacity var(--mk-dur) var(--mk-ease) var(--mk-delay, 0ms),
    transform var(--mk-dur) var(--mk-ease) var(--mk-delay, 0ms),
    clip-path calc(var(--mk-dur) * 1.2) var(--mk-ease) var(--mk-delay, 0ms),
    filter var(--mk-dur) var(--mk-ease) var(--mk-delay, 0ms);
}
.mk-js :is([data-reveal],[class*="mk-reveal-"]):not(.is-in) { opacity: 0; }
.mk-js :is([data-reveal="up"],.mk-reveal-up):not(.is-in) { transform: translate3d(0, var(--mk-dist), 0); }
.mk-js :is([data-reveal="down"],.mk-reveal-down):not(.is-in) { transform: translate3d(0, calc(var(--mk-dist) * -1), 0); }
.mk-js :is([data-reveal="left"],.mk-reveal-left):not(.is-in) { transform: translate3d(var(--mk-dist), 0, 0); }
.mk-js :is([data-reveal="right"],.mk-reveal-right):not(.is-in) { transform: translate3d(calc(var(--mk-dist) * -1), 0, 0); }
.mk-js :is([data-reveal="scale"],.mk-reveal-scale):not(.is-in) { transform: scale(.94); }
.mk-js :is([data-reveal="blur"],.mk-reveal-blur):not(.is-in) { filter: blur(10px); transform: translate3d(0, calc(var(--mk-dist) * .5), 0); }
.mk-js :is([data-reveal="fade"],.mk-reveal-fade):not(.is-in) { transform: none; }
/* 幕が上がるように現れる（画像・色面向け） */
.mk-js :is([data-reveal="clip-up"],.mk-reveal-clip-up):not(.is-in) { opacity: 1; clip-path: inset(100% 0 0 0); }
.mk-js :is([data-reveal="clip-left"],.mk-reveal-clip-left):not(.is-in) { opacity: 1; clip-path: inset(0 100% 0 0); }
.mk-js :is([data-reveal="clip-up"],.mk-reveal-clip-up).is-in, .mk-js :is([data-reveal="clip-left"],.mk-reveal-clip-left).is-in { clip-path: inset(0 0 0 0); }
/* 画像：枠が開きながら中身が少し縮む */
.mk-js :is([data-reveal="img"],.mk-reveal-img) { overflow: hidden; }
.mk-js :is([data-reveal="img"],.mk-reveal-img):not(.is-in) { opacity: 1; clip-path: inset(12% 0 12% 0); }
.mk-js :is([data-reveal="img"],.mk-reveal-img).is-in { clip-path: inset(0 0 0 0); }
.mk-js :is([data-reveal="img"],.mk-reveal-img) > img, .mk-js :is([data-reveal="img"],.mk-reveal-img) > picture { transition: transform calc(var(--mk-dur) * 1.8) var(--mk-ease) var(--mk-delay, 0ms); }
.mk-js :is([data-reveal="img"],.mk-reveal-img):not(.is-in) > img, .mk-js :is([data-reveal="img"],.mk-reveal-img):not(.is-in) > picture { transform: scale(1.12); }

/* ---------- 文字の分割（data-split）＋立ち上がり ---------- */
.mk-split { display: inline; }
.mk-ch, .mk-wd { display: inline-block; white-space: pre; }
/* 文節の箱：この中では折り返さない（禁則と文節での改行を守る） */
.mk-wdwrap { display: inline-block; white-space: nowrap; }
.mk-line { display: block; overflow: hidden; padding-bottom: .08em; }
.mk-line > .mk-line__in { display: block; }
.mk-js :is([data-split],[class*="mk-split-"]):is([data-reveal],[class*="mk-reveal-"]):not(.is-in) { opacity: 1; transform: none; filter: none; }
.mk-js :is([data-split],[class*="mk-split-"]) .mk-ch, .mk-js :is([data-split],[class*="mk-split-"]) .mk-wd, .mk-js :is([data-split],[class*="mk-split-"]) .mk-line__in {
  transition: transform var(--mk-dur) var(--mk-ease), opacity var(--mk-dur) var(--mk-ease), filter var(--mk-dur) var(--mk-ease);
  transition-delay: calc(var(--mk-delay, 0ms) + var(--i, 0) * var(--mk-split-step, 28ms));
}
.mk-js :is([data-split],[class*="mk-split-"]):not(.is-in) .mk-ch, .mk-js :is([data-split],[class*="mk-split-"]):not(.is-in) .mk-wd { opacity: 0; transform: translate3d(0, .6em, 0); }
.mk-js :is([data-split],[class*="mk-split-"]):is([data-reveal="blur"],.mk-reveal-blur):not(.is-in) .mk-ch, .mk-js :is([data-split],[class*="mk-split-"]):is([data-reveal="blur"],.mk-reveal-blur):not(.is-in) .mk-wd { filter: blur(8px); transform: none; }
.mk-js :is([data-split="lines"],.mk-split-lines):not(.is-in) .mk-line__in { transform: translate3d(0, 105%, 0); }

/* ---------- 最初の1回だけの登場（ヒーロー）data-intro="1,2,3…" ---------- */
.mk-js :is([data-intro],.mk-intro,.mk-intro-mask) {
  transition: opacity calc(var(--mk-dur) * 1.2) var(--mk-ease), transform calc(var(--mk-dur) * 1.2) var(--mk-ease), clip-path calc(var(--mk-dur) * 1.4) var(--mk-ease), filter var(--mk-dur) var(--mk-ease);
  transition-delay: calc(120ms + (var(--intro-i, 0)) * var(--mk-stagger) * 1.6);
}
.mk-js:not(.mk-intro-go) :is([data-intro],.mk-intro,.mk-intro-mask) { opacity: 0; transform: translate3d(0, calc(var(--mk-dist) * 1.4), 0); }
.mk-js:not(.mk-intro-go) :is([data-intro="mask"],.mk-intro-mask) { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.mk-js.mk-intro-go :is([data-intro="mask"],.mk-intro-mask) { clip-path: inset(0 0 0 0); }
/* 文字を分割した見出しは、箱ではなく1文字ずつ現れる */
.mk-js:not(.mk-intro-go) :is([data-intro],.mk-intro,.mk-intro-mask):is([data-split],[class*="mk-split-"]) { opacity: 1; transform: none; }

/* ---------- 流れる帯（マーキー）---------- */
:is([data-marquee],.mk-marquee) { overflow: hidden; contain: content; }
.mk-marquee__track { display: flex; width: max-content; gap: var(--mk-marquee-gap, 3rem); animation: mk-marquee var(--mk-marquee-dur, 30s) linear infinite; will-change: transform; }
.mk-marquee__track > * { flex: none; }
:is([data-marquee],.mk-marquee):is([data-direction="right"],.mk-dir-right) .mk-marquee__track { animation-direction: reverse; }
:is([data-marquee],.mk-marquee)[data-pause-on-hover]:hover .mk-marquee__track { animation-play-state: paused; }
@keyframes mk-marquee { to { transform: translate3d(calc(-50% - var(--mk-marquee-gap, 3rem) / 2), 0, 0); } }

/* ---------- 蛍光ペン（見えたら線が引かれる）---------- */
:is([data-marker],.mk-marker) {
  background-image: linear-gradient(transparent 58%, var(--mk-marker) 58%, var(--mk-marker) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size calc(var(--mk-dur) * 1.4) var(--mk-ease) var(--mk-delay, 0ms);
}
.mk-js :is([data-marker],.mk-marker):not(.is-in) { background-size: 0% 100%; }

/* ---------- SVG の線を描く（data-draw）---------- */
.mk-js :is([data-draw],.mk-draw) path, .mk-js :is([data-draw],.mk-draw) line, .mk-js :is([data-draw],.mk-draw) polyline, .mk-js :is([data-draw],.mk-draw) circle, .mk-js :is([data-draw],.mk-draw) rect {
  stroke-dasharray: var(--mk-len, 1000);
  stroke-dashoffset: 0;
  transition: stroke-dashoffset calc(var(--mk-dur) * 2.4) var(--mk-ease-io) var(--mk-delay, 0ms);
}
.mk-js :is([data-draw],.mk-draw):not(.is-in) :is(path, line, polyline, circle, rect) { stroke-dashoffset: var(--mk-len, 1000); }

/* ---------- 視差（パララックス）：対応ブラウザは CSS だけで動く ---------- */
@supports (animation-timeline: view()) {
  .mk-sd :is([data-parallax],[class*="mk-parallax-"]) {
    animation: mk-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes mk-parallax {
    from { transform: translate3d(0, calc(var(--mk-parallax, .15) * 120px), 0); }
    to { transform: translate3d(0, calc(var(--mk-parallax, .15) * -120px), 0); }
  }
  /* 読み進み具合のバー */
  .mk-sd :is([data-progress],.mk-progress) { transform-origin: 0 50%; animation: mk-progress linear both; animation-timeline: scroll(root); }
  @keyframes mk-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  /* 重なっていくカード：後ろのカードが少し縮む */
  .mk-sd :is([data-sticky-stack],.mk-sticky-stack) > * { animation: mk-stack linear both; animation-timeline: view(); animation-range: exit-crossing 0% exit-crossing 100%; }
  @keyframes mk-stack { to { transform: scale(.92); filter: brightness(.92); } }
}
:is([data-progress],.mk-progress) { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--mk-brand); transform-origin: 0 50%; z-index: 100; }

/* 重なっていくカード（sticky）*/
:is([data-sticky-stack],.mk-sticky-stack) > * { position: sticky; top: calc(var(--mk-stack-top, 80px) + var(--i, 0) * var(--mk-stack-step, 16px)); }

/* 横に流れるセクション（data-hscroll）*/
:is([data-hscroll],.mk-hscroll) { position: relative; }
:is([data-hscroll],.mk-hscroll) > .mk-hscroll__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
:is([data-hscroll],.mk-hscroll) .mk-hscroll__track { display: flex; gap: var(--gap-l, 48px); will-change: transform; padding-inline: var(--gutter, 24px); }

/* ---------- ヘッダーが縮む ---------- */
:is([data-header-shrink],.mk-header-shrink) { transition: padding var(--mk-dur-base) var(--mk-ease), background-color var(--mk-dur-base) var(--mk-ease), box-shadow var(--mk-dur-base) var(--mk-ease), transform var(--mk-dur-base) var(--mk-ease); }
:is([data-header-shrink],.mk-header-shrink).is-scrolled { box-shadow: var(--shadow-s, 0 2px 10px rgb(0 0 0 / .08)); }
:is([data-header-shrink],.mk-header-shrink):is([data-hide-on-down],.mk-hide-on-down).is-hidden { transform: translate3d(0, -100%, 0); }

/* ---------- 3D の傾き＋反射（data-tilt）---------- */
:is([data-tilt],.mk-tilt) { transform: perspective(900px) rotateX(var(--mk-rx, 0deg)) rotateY(var(--mk-ry, 0deg)); transition: transform var(--mk-dur-base) var(--mk-ease); transform-style: preserve-3d; position: relative; }
:is([data-tilt],.mk-tilt).is-tilting { transition-duration: 60ms; }
:is([data-tilt],.mk-tilt):is([data-glare],.mk-glare)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mk-gx, 50%) var(--mk-gy, 50%), rgb(255 255 255 / .35), transparent 55%); opacity: var(--mk-go, 0); transition: opacity var(--mk-dur-base) var(--mk-ease); mix-blend-mode: soft-light; }

/* ---------- 磁石のボタン（data-magnetic）---------- */
:is([data-magnetic],.mk-magnetic) { transition: transform var(--mk-dur-base) var(--mk-ease-spring); transform: translate3d(var(--mk-mx, 0px), var(--mk-my, 0px), 0); }
:is([data-magnetic],.mk-magnetic).is-pulling { transition-duration: 120ms; }

/* ---------- カーソル位置で光る縁・面（data-spotlight）---------- */
:is([data-spotlight],.mk-spotlight) { position: relative; isolation: isolate; }
:is([data-spotlight],.mk-spotlight)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), var(--mk-accent), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; }

/* ---------- ボタンの小さな演出（クラス）---------- */
/* 光が走る */
.mk-shine { position: relative; overflow: hidden; isolation: isolate; }
.mk-shine::after { content: ""; position: absolute; inset: -20% auto -20% -60%; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .45), transparent); transform: skewX(-18deg) translateX(0); transition: transform 0s; z-index: 1; pointer-events: none; }
.mk-shine:hover::after, .mk-shine:focus-visible::after { transform: skewX(-18deg) translateX(420%); transition: transform 900ms var(--mk-ease); }
/* 回る縁（@property で角度を動かす） */
@property --mk-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.mk-border-spin { position: relative; background: var(--color-surface, #fff); border-radius: var(--radius-m, 12px); isolation: isolate; }
.mk-border-spin::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; background: conic-gradient(from var(--mk-angle), var(--mk-brand), var(--mk-accent), var(--mk-brand)); z-index: -1; animation: mk-spin 6s linear infinite; }
@keyframes mk-spin { to { --mk-angle: 360deg; } }
/* 下線（左から伸びる） */
.mk-underline { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px; transition: background-size var(--mk-dur-base) var(--mk-ease); text-decoration: none; }
.mk-underline:hover, .mk-underline:focus-visible { background-size: 100% 1px; }
/* すりガラス */
.mk-glass { background: color-mix(in oklab, var(--color-surface, #fff) 62%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid color-mix(in oklab, var(--color-surface, #fff) 70%, transparent); }
/* 読み込み中のきらめき */
.mk-shimmer { background: linear-gradient(90deg, var(--color-surface-2, #eee) 25%, var(--color-surface, #fff) 50%, var(--color-surface-2, #eee) 75%) 0 0 / 300% 100%; animation: mk-shimmer 1.4s linear infinite; }
@keyframes mk-shimmer { to { background-position: -150% 0; } }
/* 押したときに少し沈む */
.mk-press { transition: transform var(--mk-dur-fast) var(--mk-ease); }
.mk-press:active { transform: scale(.97); }

/* ---------- 単語が入れ替わる（data-rotate-words）---------- */
.mk-rotate { display: inline-grid; vertical-align: bottom; overflow: hidden; }
.mk-rotate > span { grid-area: 1 / 1; transition: transform var(--mk-dur) var(--mk-ease), opacity var(--mk-dur) var(--mk-ease); }
.mk-rotate > span:not(.is-current) { transform: translate3d(0, 100%, 0); opacity: 0; }
.mk-rotate > span.is-leaving { transform: translate3d(0, -100%, 0); opacity: 0; }

/* ---------- アコーディオンの開閉（対応ブラウザだけ滑らかに）---------- */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details[data-accordion]::details-content { height: 0; overflow: clip; transition: height var(--mk-dur-base) var(--mk-ease), content-visibility var(--mk-dur-base) allow-discrete; }
  details[data-accordion][open]::details-content { height: auto; }
}

/* ---------- 動画の背景 ---------- */
video:is([data-video-bg],.mk-video-bg) { object-fit: cover; width: 100%; height: 100%; }

/* ---------- スムーズなページ内移動 ---------- */
html { scroll-behavior: smooth; }

/* ---------- 動きを減らす設定・静止モード（Figma取り込み・スクショ用 ?mk=static）---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mk-js :is([data-reveal],[class*="mk-reveal-"]), .mk-js :is([data-intro],.mk-intro,.mk-intro-mask), .mk-js :is([data-split],[class*="mk-split-"]) *, :is([data-marker],.mk-marker), :is([data-tilt],.mk-tilt), :is([data-magnetic],.mk-magnetic) { transition: none !important; }
  .mk-js :is([data-reveal],[class*="mk-reveal-"]), .mk-js :is([data-intro],.mk-intro,.mk-intro-mask), .mk-js :is([data-split],[class*="mk-split-"]) .mk-ch, .mk-js :is([data-split],[class*="mk-split-"]) .mk-wd, .mk-js :is([data-split],[class*="mk-split-"]) .mk-line__in { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .mk-js :is([data-marker],.mk-marker) { background-size: 100% 100% !important; }
  .mk-marquee__track, .mk-border-spin::before, .mk-shimmer { animation: none !important; }
  :is([data-marquee],.mk-marquee) { overflow-x: auto; }
  .mk-sd :is([data-parallax],[class*="mk-parallax-"]), .mk-sd :is([data-sticky-stack],.mk-sticky-stack) > * { animation: none !important; transform: none !important; }
  :is([data-draw],.mk-draw) * { stroke-dashoffset: 0 !important; }
}
.mk-static *, .mk-static *::before, .mk-static *::after { animation: none !important; transition: none !important; }
.mk-static :is([data-reveal],[class*="mk-reveal-"]), .mk-static :is([data-intro],.mk-intro,.mk-intro-mask), .mk-static :is([data-split],[class*="mk-split-"]) .mk-ch, .mk-static :is([data-split],[class*="mk-split-"]) .mk-wd, .mk-static :is([data-split],[class*="mk-split-"]) .mk-line__in { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
.mk-static :is([data-marker],.mk-marker) { background-size: 100% 100% !important; }
.mk-static :is([data-draw],.mk-draw) * { stroke-dashoffset: 0 !important; }
.mk-static :is([data-reveal="img"],.mk-reveal-img) > img { transform: none !important; }