/* 演出（モーション）— 仕様は docs/MOTION.md。JS は assets/js/motion.js。
   原則:
   - 隠すのは html.mo（head のインライン script が付ける）の下だけ。JS なし・reduce・Playwright（?motion=1 なし）では最初から全部見える。
   - 出現は animation（fill-mode: backwards）。動かすのは opacity / translate / scale / rotate / clip-path / mask だけ。
     transform は hover.css が使うので触らない（個別プロパティは transform と合成される）。
   - 横方向にずらす初期状態は禁止（待機中の要素もレイアウトの横幅を増やさない）。横の見せ方は clip-path のワイプ。
   - 遅れは motion.js が要素ごとに --mo-d（ms）を inline で入れる（data-mo-delay ＋ stagger の番号 × --mo-step ＋ 親の遅れ）。 */

/* ---------- tokens（医院＝落ち着き／採用＝元気） ---------- */
:root {
  --mo-dur: .9s;
  --mo-ease: cubic-bezier(.22, 1, .36, 1);
  --mo-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --mo-dist: 24px;
  --mo-step: 90ms;
  --mo-letter-step: 30ms;
  --mo-count-dur: 1.6s;
}
.area-recruit { --mo-dur: .8s; --mo-dist: 36px; --mo-step: 80ms; }

/* ---------- keyframes（すべて from だけ／backwards で待機中も from の値） ---------- */
@keyframes mo-up { from { opacity: 0; translate: 0 var(--mo-dist); } }
@keyframes mo-fade { from { opacity: 0; } }
@keyframes mo-rise { from { translate: 0 108%; } }
@keyframes mo-letter { from { opacity: 0; translate: 0 .55em; } }
@keyframes mo-pop { from { opacity: 0; scale: .6; } }
@keyframes mo-spin { from { opacity: 0; scale: .6; rotate: -12deg; } }
@keyframes mo-unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mo-unveil-img { from { scale: 1.12; } }
@keyframes mo-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mo-wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mo-bar-head { from { clip-path: polygon(-2% -20%, 102% -20%, 102% -20%, -2% -20%); translate: 0 calc(var(--mo-dist) * .5); } to { clip-path: polygon(-2% -20%, 102% -20%, 102% 130%, -2% 130%); translate: 0 0; } }
@keyframes mo-zoom-out { from { scale: 1.06; } }
@keyframes mo-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes mo-pulse { 0%, 76%, 100% { scale: 1; } 84% { scale: 1.08; } 92% { scale: .98; } }
@keyframes mo-grow-y { from { scale: 1 0; } }
@keyframes mo-pie { from { stroke-dashoffset: var(--mo-c); } to { stroke-dashoffset: 0; } }
@property --mo-a { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@keyframes mo-draw { from { --mo-a: 0deg; } to { --mo-a: 360deg; } }
@keyframes mo-bite-top { 0% { translate: 0 -34%; } 55% { translate: 0 5%; } 72% { translate: 0 -2%; } 100% { translate: 0 0; } }
@keyframes mo-bite-bottom { 0% { translate: 0 34%; } 55% { translate: 0 -5%; } 72% { translate: 0 2%; } 100% { translate: 0 0; } }

/* ---------- 待機状態（html.mo の下だけ） ---------- */
/* count（数字そのもの）・chart（枠は見せて中身だけ待たせる）・bite（歯は見せたまま口を開けて待つ）は透明にしない */
html.mo [data-mo]:not(.is-in):not([data-mo="count"]):not([data-mo="chart"]):not([data-mo="bite"]) { opacity: 0; }

/* 共通の再生（--mo-d は motion.js が入れる） */
html.mo [data-mo].is-in { animation-duration: var(--mo-dur); animation-timing-function: var(--mo-ease); animation-delay: var(--mo-d, 0ms); animation-fill-mode: backwards; }
html.mo [data-mo="up"].is-in { animation-name: mo-up; }
html.mo [data-mo="fade"].is-in { animation-name: mo-fade; }
html.mo [data-mo="pop"].is-in { animation-name: mo-pop; animation-duration: calc(var(--mo-dur) * .8); animation-timing-function: var(--mo-ease-pop); }
html.mo [data-mo="spin"].is-in { animation-name: mo-spin; animation-duration: calc(var(--mo-dur) * .85); animation-timing-function: var(--mo-ease-pop); }
html.mo [data-mo="wipe"].is-in { animation-name: mo-wipe; animation-duration: calc(var(--mo-dur) * 1.2); }
html.mo [data-mo="wipe"][data-mo-dir="down"].is-in { animation-name: mo-wipe-down; }
html.mo [data-mo="bar"].is-in { animation-name: mo-bar-head; }

/* rise: JS が中身を .mo-rise-in（block）で包む。字は見出しの下端の下からせり上がる（下端だけ切る。上と左右は切らない） */
html.mo [data-mo="rise"] > .mo-rise-in { display: block; }
html.mo [data-mo="rise"]:not(.mo-done) { clip-path: polygon(-50% -50%, 150% -50%, 150% 100%, -50% 100%); }
html.mo [data-mo="rise"].is-in { animation: none; }
html.mo [data-mo="rise"].is-in > .mo-rise-in { animation: mo-rise calc(var(--mo-dur) * 1.1) var(--mo-ease) var(--mo-d, 0ms) backwards; }

/* letters: 1 字ずつ（語は折り返さない塊。空白は素の文字のまま） */
html.mo [data-mo="letters"] .mo-w { display: inline-block; white-space: nowrap; }
html.mo [data-mo="letters"] .mo-ch { display: inline-block; }
html.mo [data-mo="letters"] :is(.mo-w, .mo-ch) { text-indent: 0; }   /* 中央揃えラベルの text-indent（.2〜.25em）が inline-block の字ごとに継承されて、再生中だけ幅が 25〜30% 広がり終わりに縮む */
html.mo [data-mo="letters"].is-in { animation: none; }
html.mo [data-mo="letters"].is-in .mo-ch { animation: mo-letter calc(var(--mo-dur) * .7) var(--mo-ease) backwards; animation-delay: calc(var(--mo-d, 0ms) + var(--mo-li, 0) * var(--mo-letter-step)); }

/* unveil: 写真の枠を下から開き、中の写真は 1.12 → 1（枠は動いている間だけ clip。止まったら素の見た目に戻す） */
html.mo [data-mo="unveil"]:not(.mo-done) { overflow: clip; }
html.mo [data-mo="unveil"].is-in { animation-name: mo-unveil; animation-duration: calc(var(--mo-dur) * 1.3); }
html.mo [data-mo="unveil"].is-in img { animation: mo-unveil-img calc(var(--mo-dur) * 2) var(--mo-ease) var(--mo-d, 0ms) backwards; }

/* count: 本当の数字（DOM の文字）は確定値のまま透明にし、動いている値は ::after で重ねる（検索エンジン・読み上げは確定値だけを拾う） */
html.mo [data-mo="count"].mo-counting { color: transparent; }
html.mo [data-mo="count"].mo-counting::after {
  content: "\2066" attr(data-mo-v) "\2069"; content: "\2066" attr(data-mo-v) "\2069" / "";   /* LRI…PDI で包む: rtl の中で「¥110,000-」の前後の記号が入れ替わらない */
  display: inline-block; width: 0; direction: rtl; white-space: nowrap; color: var(--mo-c, currentColor);
}

/* chart（円）: マスクの輪が 12 時から時計回りに開く → ラベルが後から */
html.mo .chart[data-mo="chart"]:not(.is-in) .mo-pie-mask { stroke-dashoffset: var(--mo-c); }
html.mo .chart[data-mo="chart"].is-in .mo-pie-mask { animation: mo-pie calc(var(--mo-dur) * 1.4) cubic-bezier(.45, .05, .25, 1) var(--mo-d, 0ms) backwards; }
html.mo .chart[data-mo="chart"]:not(.is-in) .pie-label { opacity: 0; }
html.mo .chart[data-mo="chart"].is-in .pie-label { animation: mo-fade .6s ease-out backwards; animation-delay: calc(var(--mo-d, 0ms) + var(--mo-dur) * 1.1 + var(--mo-i, 0) * 90ms); }
/* chart（棒）: 下から伸びる → 数値（motion.js がカウントアップ） */
html.mo .chart[data-mo="chart"] rect { transform-box: fill-box; transform-origin: 50% 100%; }
html.mo .chart[data-mo="chart"]:not(.is-in) rect { scale: 1 0; }
html.mo .chart[data-mo="chart"]:not(.is-in) .bar-val { opacity: 0; }
html.mo .chart[data-mo="chart"].is-in rect { animation: mo-grow-y var(--mo-dur) var(--mo-ease) backwards; animation-delay: calc(var(--mo-d, 0ms) + var(--mo-i, 0) * 120ms); }
html.mo .chart[data-mo="chart"].is-in .bar-val { animation: mo-fade .4s ease-out backwards; animation-delay: calc(var(--mo-d, 0ms) + var(--mo-i, 0) * 120ms + 250ms); }

/* smileDecor: 線を描く（円錐のマスクが右端から時計回りに一周。@property 非対応では最後に一度に出る） */
html.mo .smile[data-mo].is-in { animation: none; }
html.mo .smile[data-mo].is-in > .icon {
  -webkit-mask-image: conic-gradient(from 90deg at 50% 42%, #000 var(--mo-a), transparent 0);
  mask-image: conic-gradient(from 90deg at 50% 42%, #000 var(--mo-a), transparent 0);
  animation: mo-draw calc(var(--mo-dur) * 2) cubic-bezier(.45, .05, .35, 1) var(--mo-d, 0ms) both;
}
html.mo .smile[data-mo].mo-done > .icon { -webkit-mask-image: none; mask-image: none; animation: none; }

/* ctaBand: 背景写真がゆっくり 1.06 → 1（.cta-bg は overflow: clip の枠）・丸矢印が数秒おきに小さく脈打つ */
html.mo .cta.is-in .cta-bg img { animation: mo-zoom-out calc(var(--mo-dur) * 3) cubic-bezier(.25, .6, .3, 1) var(--mo-d, 0ms) backwards; }
html.mo .cta-ring.mo-loop { animation: mo-pulse 3.6s ease-in-out 1.2s infinite; }

/* 浮遊（小物だけ）・ループの画面外停止 */
html.mo .mo-float { animation: mo-float 5s ease-in-out infinite; }
html.mo .mo-float:nth-of-type(2n) { animation-delay: -2.5s; }
html.mo .mo-offscreen { animation-play-state: paused !important; }

/* フッターの口: 上下の歯が画面に入ったとき一度だけ噛む（縦方向だけ。待機中は口を開けて歯茎に少し引っ込む） */
html.mo .ft-bottom { overflow: clip; }
html.mo .ft-teeth[data-mo="bite"]:not(.is-in) > li { translate: 0 -34%; }
html.mo .ft-teeth-bottom[data-mo="bite"]:not(.is-in) > li { translate: 0 34%; }
html.mo .ft-teeth[data-mo="bite"].is-in > li { animation: mo-bite-top .62s cubic-bezier(.3, .7, .3, 1) var(--mo-d, 0ms) backwards; }
html.mo .ft-teeth-bottom[data-mo="bite"].is-in > li { animation-name: mo-bite-bottom; }

/* ドロワー: 開くたびに項目が stagger（display:none から出るたびに animation が頭から再生される） */
html.mo .drawer:not([hidden]) .dw-row,
html.mo .drawer:not([hidden]) .dw-cta > * { animation: mo-up .55s var(--mo-ease) backwards; animation-delay: calc(80ms + var(--mo-i, 0) * 45ms); --mo-dist: 16px; }

/* 視差（縦だけ・スクロール連動アニメ対応ブラウザだけ）。--mo-par は motion.js が data-mo-parallax から入れる。
   img（または .mo-par-cover の包み）に付けたときは枠（overflow: clip）いっぱいを保つため 1 + 係数 だけ拡大する（枠の外で使わない） */
@supports (animation-timeline: view()) {
  html.mo [data-mo-parallax] { animation: mo-parallax linear both; animation-timeline: view(); animation-range: cover; }
  html.mo img[data-mo-parallax], html.mo .mo-par-cover[data-mo-parallax] { scale: calc(1 + var(--mo-par, .1)); }
  @keyframes mo-parallax { from { translate: 0 calc(var(--mo-par, .1) * 50%); } to { translate: 0 calc(var(--mo-par, .1) * -50%); } }
}

/* ページ間の移動: 本文だけ 0.3s でクロスフェード（ヘッダー・電話ピルは動かさない）。reduce では無効 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .hd { view-transition-name: mo-header; }
  .reserve { view-transition-name: mo-reserve; }
  ::view-transition-group(mo-header), ::view-transition-group(mo-reserve),
  ::view-transition-old(mo-header), ::view-transition-new(mo-header),
  ::view-transition-old(mo-reserve), ::view-transition-new(mo-reserve) { animation: none; }
  /* 2026-09-28 医院の指摘「症状から探すに入るとフッターが崩れる」: 前後のページを 0.3 秒クロスフェードすると、前のページ（一番下のフッター）が新しいページのヒーローに透けて重なっていた。
     前のページは即座に消し、新しいページだけを 0.25 秒で出す */
  ::view-transition-old(root) { animation: none; opacity: 0; }
  ::view-transition-new(root) { animation-duration: .25s; }
}

/* 印刷は全部見せる */
@media print {
  html.mo [data-mo] { opacity: 1 !important; animation: none !important; clip-path: none !important; }
  html.mo [data-mo] img, html.mo [data-mo-parallax] { animation: none !important; scale: none !important; translate: none !important; }
}

/* Q&A の開閉（医院・採用の FAQ 共通。2026-09-28 採用 FAQ の演出を全体へ）: 開くたびに答えの塊が短く上がり、A の丸が pop。
   パネルは閉じると hidden（display:none）に戻るので、開くたびに頭から再生される */
html.mo .acc-panel:not([hidden]) .acc-a { animation: mo-up .55s var(--mo-ease) 60ms backwards; --mo-dist: 12px; }
html.mo .acc-panel:not([hidden]) .acc-q-a { animation: mo-pop .6s var(--mo-ease-pop) 180ms backwards; }