/* ============================================================
   site-motion-kit / kit.css
   4サイト（do Kaori portfolio / do! STUDIO recruit / do smoothie / MELTBYTE）
   の解析から抽出した、依存ゼロの再利用パーツ。
   すべてのクラスは k- 接頭辞。既存 CSS と衝突しない。
   色は var(--accent) / var(--k-ink) 等のトークンで受け取り、サイト側で上書きする。
   ============================================================ */

:root {
  --k-ease: cubic-bezier(.22, 1, .36, 1);     /* 標準（4サイト共通の easeOutExpo 系） */
  --k-pop: cubic-bezier(.2, 1.4, .3, 1);      /* オーバーシュート（recruit / MELTBYTE） */
  --k-dur-micro: .2s;
  --k-dur-reveal: .7s;
  --k-dur-hero: 1.2s;
  --k-ink: #000;                              /* ハードシャドウの基本色 */
  --k-paper: #fff;                            /* 紙・チケットの地色 */
}

html { scrollbar-gutter: stable; }            /* モーダル開閉で横ズレしない（smoothie） */
body.dialog-open { overflow: hidden; }

/* ------------------------------------------------------------
   0. JS有無 / モーションON-OFF の土台
   - kit.js が <html class="js"> を付ける。演出用の高さ・ボタンは .js の時だけ有効。
   - 手動OFF は html.motion-off、OS設定は prefers-reduced-motion。必ず対で書く。
   ------------------------------------------------------------ */
html:not(.js) [data-kit-js-only] { display: none !important; }

/* ------------------------------------------------------------
   1. スクロールリベール（recruit 方式：IntersectionObserver で一度だけ）
   - transform ではなく translate / rotate の個別プロパティを使うので、
     静的な rotate（.k-sticker 等）と衝突しない。
   - JS が落ちたら html.js が付かない → 最初から表示される。
   ------------------------------------------------------------ */
html.js .k-reveal {
  opacity: 0;
  translate: 0 32px;
  transition:
    opacity var(--k-dur-reveal) var(--k-ease),
    translate var(--k-dur-reveal) var(--k-ease),
    scale var(--k-dur-reveal) var(--k-ease);
  transition-delay: var(--k-delay, 0ms);
}
html.js .k-reveal[data-reveal="left"]  { translate: -28px 0; }
html.js .k-reveal[data-reveal="right"] { translate: 28px 0; }
html.js .k-reveal[data-reveal="scale"] { translate: 0 0; scale: .92; }
html.js .k-reveal.is-in { opacity: 1; translate: 0 0; scale: 1; }

/* 蛍光マーカー（recruit）。em 等に付ける。折り返しても各行に乗る。 */
.k-marker {
  --k-marker-color: var(--accent, #ffb648);
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: linear-gradient(transparent 62%, var(--k-marker-color) 62%, var(--k-marker-color) 92%, transparent 92%) no-repeat;
  background-size: 0% 100%;
  padding: 0 .08em;
}
html:not(.js) .k-marker,
.k-marker.is-in,
.is-in .k-marker { animation: k-ink-arrives .65s .15s var(--k-ease) both; }
@keyframes k-ink-arrives { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* ------------------------------------------------------------
   2. スクロール連動ステージ（portfolio / smoothie / MELTBYTE 共通の骨格）
   - 長い箱 .k-scene の中に sticky の .k-scene__stage。
   - kit.js が .k-scene に --k-p（0〜1）、--k-step-p（区間内 0〜1）、data-step を書く。
   - CSS 側は var(--k-p) を式に埋め込むだけ。静止状態は [data-step="N"] で宣言する。
   - モーションOFF時は高さを auto に戻し「空スクロール」ごと消す（MELTBYTE）。
   ------------------------------------------------------------ */
.k-scene {
  --k-p: 0;
  --k-step-p: 0;
  --k-scene-length: 4;                                   /* 画面高の何倍スクロールさせるか */
  position: relative;
  height: calc(var(--k-scene-length) * var(--scroll-viewport, 100svh));
}
.k-scene__stage {
  position: sticky;
  top: var(--k-scene-top, 0px);
  height: var(--scroll-viewport, 100svh);
  overflow: clip;                                        /* hidden ではなく clip（フォーカス移動で内部スクロールしない） */
  isolation: isolate;
}
html:not(.js) .k-scene,
html.motion-off .k-scene { height: auto; }
html:not(.js) .k-scene__stage,
html.motion-off .k-scene__stage { position: relative; height: auto; min-height: 100svh; }

/* 区間ごとのパネル。data-step と一致するものだけ表示（離散状態は CSS で宣言） */
.k-scene__panel {
  position: absolute; inset: 0;
  opacity: 0;
  translate: 0 24px;
  transition: opacity .5s var(--k-ease), translate .5s var(--k-ease);
  pointer-events: none;
}
.k-scene[data-step="0"] .k-scene__panel[data-i="0"],
.k-scene[data-step="1"] .k-scene__panel[data-i="1"],
.k-scene[data-step="2"] .k-scene__panel[data-i="2"],
.k-scene[data-step="3"] .k-scene__panel[data-i="3"],
.k-scene[data-step="4"] .k-scene__panel[data-i="4"],
.k-scene[data-step="5"] .k-scene__panel[data-i="5"] { opacity: 1; translate: 0 0; pointer-events: auto; }
html.motion-off .k-scene__panel,
html:not(.js) .k-scene__panel { position: relative; opacity: 1; translate: 0; pointer-events: auto; min-height: 100svh; }

/* 進捗バー（recruit / portfolio）。kit.js が span を scaleX する。 */
.k-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; }
.k-progress > span { display: block; height: 100%; background: var(--accent, currentColor); transform-origin: left; transform: scaleX(0); }

/* ------------------------------------------------------------
   3. ポインタ追従の奥行き（recruit / MELTBYTE）
   - kit.js が .k-depth に --depth-x / --depth-y（-1〜1）を書くだけ。
   - 子は --d（深度係数）と --turn（静的な傾き）を持ち、CSS の calc で追従する。
   ------------------------------------------------------------ */
.k-depth { --depth-x: 0; --depth-y: 0; }
.k-depth__layer {
  --d: 1;
  --turn: 0deg;
  transform:
    translate3d(calc(var(--depth-x) * var(--d) * 18px), calc(var(--depth-y) * var(--d) * 12px), 0)
    rotateX(calc(var(--depth-y) * var(--d) * -3deg))
    rotateY(calc(var(--depth-x) * var(--d) * 4deg))
    rotate(var(--turn));
  transition: transform .5s var(--k-ease);
  will-change: transform;
}
.k-depth.is-active .k-depth__layer { transition-duration: .12s; }   /* 追従中だけ高速（MELTBYTE） */

/* カードの傾き＋スペキュラ（MELTBYTE） */
.k-tilt {
  --tilt-x: 0deg; --tilt-y: 0deg; --shine-x: 50%; --shine-y: 50%;
  position: relative;
  transform: perspective(850px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  transition: transform .55s cubic-bezier(.15, .75, .22, 1), box-shadow .55s;
}
.k-tilt.is-active { transition: transform .12s ease-out, box-shadow .4s; }
.k-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(255, 255, 255, .38), transparent 65%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s;
}
.k-tilt.is-active::after { opacity: 1; }

/* ------------------------------------------------------------
   4. 紙・ハンコ・ステッカーの質感（recruit / smoothie / MELTBYTE）
   ------------------------------------------------------------ */
/* ぼかし0のハードシャドウ */
.k-hard { box-shadow: 6px 6px 0 var(--k-shadow, var(--k-ink)); }
/* 多段オフセット（recruit の manga-sheet）。ぼかしは最終段だけ。隣接要素で --k-shadow-2 を交互に変えると効く。 */
.k-hard--stack {
  box-shadow:
    7px 8px 0 var(--k-shadow-soft, rgba(0, 0, 0, .18)),
    10px 11px 0 var(--k-shadow, var(--k-ink)),
    19px 21px 0 var(--k-shadow-2, var(--accent, #7c5cff)),
    22px 24px 0 var(--k-shadow, var(--k-ink)),
    27px 32px 24px rgba(0, 0, 0, .125);
}
/* 押し込みボタン */
.k-press { transition: transform .18s var(--k-ease), box-shadow .18s var(--k-ease); }
@media (hover: hover) { .k-press:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--k-shadow, var(--k-ink)); } }
.k-press:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--k-shadow, var(--k-ink)); }

/* 押し出し文字（多段 text-shadow）と袋文字 */
.k-extrude {
  --k-x-light: rgba(255, 255, 255, .85);
  --k-x-side: var(--k-ink);
  --k-x-shadow: rgba(0, 0, 0, .18);
  paint-order: stroke fill;
  text-shadow:
    1px 1px 0 var(--k-x-light),
    2px 2px 0 var(--k-x-side), 3px 3px 0 var(--k-x-side), 4px 4px 0 var(--k-x-side), 5px 5px 0 var(--k-x-side),
    7px 8px 0 var(--k-x-shadow);
}
.k-outline { -webkit-text-stroke: var(--k-stroke-width, 1.5px) var(--k-stroke, #fff); paint-order: stroke fill; }

/* 微小ローテーションの散らばし。--turn を要素ごとに ±1〜8deg で変える。 */
.k-sticker {
  --turn: -3deg;
  rotate: var(--turn);
  transition: translate .3s var(--k-pop), rotate .3s var(--k-pop), box-shadow .3s;
}
@media (hover: hover) {
  .k-sticker:hover { translate: 0 -8px; rotate: calc(var(--turn) - 4deg); }
}
.k-sticker:nth-child(2n)   { --turn: 2deg; }
.k-sticker:nth-child(3n)   { --turn: -1.5deg; }
.k-sticker:nth-child(4n+1) { --turn: 4deg; }

/* 有機的な丸（smoothie の非対称 border-radius） */
.k-blob { border-radius: 47% 53% 49% 51%; }

/* チケット型ボタン（smoothie の coupon-ticket）。--paper / --stub / --notch をサイズ違いで使い回す。 */
.k-ticket {
  --stub: 48px; --notch: 6px; --paper: var(--k-ink);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 calc(var(--stub) + 20px) 0 24px;
  color: var(--k-paper); text-decoration: none; font-weight: 700;
  transition: transform .25s var(--k-pop);
}
.k-ticket::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 10px;
  background:
    radial-gradient(circle at 0 50%, transparent var(--notch), var(--paper) calc(var(--notch) + .75px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent var(--notch), var(--paper) calc(var(--notch) + .75px)) right / 51% 100% no-repeat;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .45));
  transition: filter .25s;
}
.k-ticket__stub {
  position: absolute; right: 0; top: 0; bottom: 0; width: var(--stub);
  border-left: 1px dashed color-mix(in srgb, var(--k-paper) 45%, transparent);
  display: grid; place-items: center; font-size: 18px;
  transform-origin: left center; transition: transform .3s var(--k-pop);
}
.k-ticket:is(:hover, :focus-visible) { transform: translateY(-2px); }
.k-ticket:is(:hover, :focus-visible) .k-ticket__stub { transform: rotate(4deg); }
.k-ticket:active { transform: translateY(2px); }
.k-ticket:active::before { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45)); }

/* 切手のミシン目（smoothie の footer-brand-label） */
.k-perf { position: relative; }
.k-perf::before, .k-perf::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 9px;
  background: radial-gradient(circle at center, var(--k-perf-bg, #000) 0 4px, transparent 4.5px) center 4px / 10px 18px repeat-y;
}
.k-perf::before { left: -4.5px; }
.k-perf::after  { right: -4.5px; }

/* 矢印が斜めに飛ぶ（portfolio） */
.k-arrow { display: inline-block; transition: transform .3s var(--k-ease); }
a:hover > .k-arrow, button:hover > .k-arrow, .k-arrow-host:hover .k-arrow { transform: translate(3px, -3px); }

/* ------------------------------------------------------------
   5. マーキー（MELTBYTE の closet-tape）。同じ内容を2つ並べて -50% 動かす。
   ------------------------------------------------------------ */
.k-marquee { overflow: hidden; white-space: nowrap; }
.k-marquee__track {
  display: inline-flex;
  animation: k-marquee var(--k-marquee-dur, 25s) linear infinite;
  will-change: transform;
}
.k-marquee__track > * { padding-right: var(--k-marquee-gap, 2.5em); }
.k-marquee.is-away .k-marquee__track { animation-play-state: paused; }   /* 画面外で停止 */
@keyframes k-marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------
   6. ネイティブ <dialog>（4サイト共通）。開閉・ESC・フォーカストラップはブラウザ任せ。
   ------------------------------------------------------------ */
.k-dialog {
  border: 0; padding: 0; margin: auto;
  width: min(960px, calc(100% - 40px));
  max-height: calc(100svh - 40px);
  background: var(--k-dialog-bg, #fff); color: var(--k-dialog-fg, inherit);
  border-radius: 20px; overflow: auto;
}
.k-dialog::backdrop { background: rgba(4, 3, 9, .72); backdrop-filter: blur(6px); }
.k-dialog[open] { animation: k-dialog-in .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes k-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.k-dialog__close {
  position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--k-ink); color: var(--k-paper); font-size: 20px; line-height: 1;
}
/* 600px 以下はボトムシート化（smoothie の coupon-dialog） */
@media (max-width: 600px) {
  .k-dialog--sheet { inset: auto 0 0; width: 100%; max-width: none; margin: 0; border-radius: 25px 25px 0 0; max-height: 92svh; }
  .k-dialog--sheet[open] { animation-name: k-sheet-in; }
  @keyframes k-sheet-in { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1024px), (pointer: coarse) { .k-dialog::backdrop { backdrop-filter: none; } }

/* トースト（MELTBYTE） */
.k-toast {
  position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; z-index: 300;
  padding: 10px 18px; border-radius: 999px; background: var(--k-ink); color: var(--k-paper);
  font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity .25s, translate .25s var(--k-pop);
}
.k-toast.is-on { opacity: 1; translate: -50% 0; }

/* ------------------------------------------------------------
   7. ヘッダーの通過後スタイル（portfolio の .past-journey / smoothie の .past-story）
   kit.js が最初の .k-scene を通過したら body.past-scene を付ける。
   ------------------------------------------------------------ */
.k-header { transition: background .4s, border-color .4s, backdrop-filter .4s; }
body.past-scene .k-header { background: var(--k-header-bg, rgba(5, 6, 15, .9)); border-bottom: 1px solid var(--k-header-line, rgba(255, 255, 255, .1)); backdrop-filter: blur(10px); }

/* モーションON/OFFボタン（MELTBYTE の3状態ラベル） */
.k-motion-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.k-motion-toggle .k-bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.k-motion-toggle .k-bars i { width: 3px; height: 100%; background: currentColor; transform-origin: bottom; animation: k-bar-wave 1s ease-in-out infinite alternate; }
.k-motion-toggle .k-bars i:nth-child(2) { animation-delay: -.35s; }
.k-motion-toggle .k-bars i:nth-child(3) { animation-delay: -.7s; }
@keyframes k-bar-wave { to { transform: scaleY(.3); } }
html.motion-off .k-motion-toggle .k-bars i { transform: scaleY(.3); }

/* ------------------------------------------------------------
   8. モーション停止（手動 / OS）。必ず対で同じ内容を書く。
   ------------------------------------------------------------ */
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation: none !important; transition: none !important; }
html.motion-off .k-reveal { opacity: 1 !important; translate: 0 !important; scale: 1 !important; }
html.motion-off .k-marker { background-size: 100% 100%; }
html.motion-off .k-depth__layer, html.motion-off .k-tilt { transform: none !important; }
html.motion-off .k-marquee__track { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .k-reveal { opacity: 1 !important; translate: 0 !important; scale: 1 !important; }
  .k-marker { background-size: 100% 100%; }
  .k-scene { height: auto; }
  .k-scene__stage { position: relative; height: auto; min-height: 100svh; }
  .k-scene__panel { position: relative; opacity: 1; translate: 0; pointer-events: auto; min-height: 100svh; }
  .k-depth__layer, .k-tilt { transform: none !important; }
  .k-marquee__track { transform: translateX(0); }
}

/* ------------------------------------------------------------
   9. オープニング動画（recruit 方式）。kit-opening.js とセット。
   ------------------------------------------------------------ */
.k-opening {
  border: 0; padding: 0; margin: 0; inset: 0; width: 100vw; height: 100svh; max-width: none; max-height: none;
  background: var(--k-opening-bg, #05060f); color: var(--k-paper); overflow: hidden;
  display: none; place-items: center; transition: opacity .65s ease;
}
.k-opening[open] { display: grid; }
.k-opening::backdrop { background: #000; transition: opacity .65s ease; }
.k-opening.is-leaving, .k-opening.is-leaving::backdrop { opacity: 0; }
.k-opening__stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; transform-origin: 50% 40%; transition: transform 1.15s var(--k-ease); }
.k-opening.is-final .k-opening__stage { transform: scale(var(--k-opening-zoom, 1.08)); }
.k-opening video { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-opening__title { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.55), rgba(0,0,0,.15) 60%, transparent); visibility: hidden; }
.k-opening__title > * { opacity: 0; translate: 0 22px; transition: opacity .8s ease, translate .8s var(--k-ease); }
.k-opening.is-final .k-opening__title { visibility: visible; }
.k-opening.is-final .k-opening__title > * { opacity: 1; translate: 0 0; }
.k-opening.is-final .k-opening__title > :nth-child(2) { transition-delay: .2s; }
.k-opening.is-final .k-opening__title > :nth-child(3) { transition-delay: .38s; }
.k-opening__controls { position: absolute; top: 18px; right: 18px; display: flex; gap: 10px; z-index: 2; }
.k-opening__controls button, .k-opening__start { font: inherit; font-size: 12px; letter-spacing: .08em; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(5,6,15,.55); color: var(--k-paper); cursor: pointer; backdrop-filter: blur(6px); }
.k-opening__controls button[aria-pressed="true"] { background: var(--accent, #fff); color: var(--k-ink); border-color: transparent; }
.k-opening__start { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; font-size: 16px; padding: 16px 28px; }
.k-opening__footer { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .2em; color: rgba(255,255,255,.7); z-index: 2; }
.k-opening__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.15); z-index: 2; }
.k-opening__progress > span { display: block; height: 100%; background: var(--accent, #fff); transform-origin: left; transform: scaleX(0); }
body.opening-active { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .k-opening, .k-opening::backdrop, .k-opening__stage, .k-opening__title > * { transition: none !important; } }