/* パターン3(kimi)専用。P2 の複製（アジャスター・全画面HERO・枠なしヘッダー・住まいコラージュ）に、紙・墨・据わりの動きを足す。app.css は P2 と同一で、上書きはすべてこのファイル。契約は spec/p3-kimi.md */
:root {
  --bg: #f6f1e7;
  --ink: #2b2620;
  --muted: #8a8172;
  --line: #e0d7c6;
  --accent: #2b2620;
  --tile: #ede6d8;
  --paper: #efe9dc;
  --search: #ede6d8;
  --space-section: 138px;
  --space-block: 83px;
}

.header {
  position: fixed;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .3s ease, border-color .3s ease;
}

@supports (backdrop-filter: blur(1px)) {
  .header { background: color-mix(in srgb, var(--bg) 88%, transparent); }
}

.header.is-over-hero {
  background: transparent;
  border-bottom-color: transparent;
}

/* カバー（HERO / page-hero）が無いページは、fixed ヘッダー分の上余白を確保する */
.main:not(:has([data-cover])) {
  padding-top: calc(var(--space-section) * 1.25);
}

.login-text {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 6px 0;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: inherit;
}

.header.is-over-hero,
.header.is-over-hero .logo,
.header.is-over-hero .login-text,
.header.is-over-hero .icon-btn,
.header.is-over-hero .icon-link,
.header.is-over-hero .icon-count,
.header.is-over-hero .badge {
  color: #fff;
}

.header.is-over-hero .header-nav a { color: rgba(255,255,255,.78); }
.header.is-over-hero .header-nav a.is-on { color: #fff; border-bottom-color: #fff; }
.header.is-over-hero .badge { border-color: #fff; }

.search-panel,
.login-panel {
  border-top: 0;
  background: #fff;
  color: var(--ink);
}

.header.is-over-hero .search-panel,
.header.is-over-hero .login-panel {
  background: #fff;
  color: var(--ink);
}

.header.is-over-hero .search-panel input,
.header.is-over-hero .login-panel input,
.header.is-over-hero .search-panel button,
.header.is-over-hero .login-panel button,
.header.is-over-hero .login-note {
  color: var(--ink);
  border-color: var(--ink);
}

.scene-tabs { margin: 20px 0 28px; }

.hero {
  width: 100%;
  max-width: none;
  height: 100svh;
  min-height: 480px;
  margin-top: 0;
}

.lkd-rail .lkd-card { flex: 0 0 240px; }
.lkd-rail .lkd-kanji { font-size: calc(var(--fs-h1) * 1.5); }

.collage-main { display: grid; gap: 24px; align-content: start; }

.house {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--paper);
  overflow: hidden;
}

.house-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 0; }
.house-blend { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.house-spot { position: absolute; inset: 0; pointer-events: none; }
.house-face { position: absolute; inset: 0; pointer-events: auto; transition: background .15s ease; }
.house-ceiling .house-face { clip-path: polygon(0% 0%, 100% 0%, 100% 16%, 0% 16%); }
.house-wall .house-face { clip-path: polygon(18% 16%, 78% 16%, 78% 66%, 18% 66%); }
.house-floor .house-face { clip-path: polygon(0% 66%, 100% 66%, 100% 100%, 0% 100%); }
.house-table .house-face { clip-path: polygon(20% 50%, 80% 50%, 84% 60%, 16% 60%); }
.house-head .house-face { clip-path: polygon(8% 38%, 42% 38%, 42% 78%, 8% 78%); }
.house-leftwall .house-face { clip-path: polygon(0% 6%, 18% 6%, 18% 90%, 0% 90%); }
.house-doma .house-face { clip-path: polygon(0% 68%, 78% 68%, 78% 100%, 0% 100%); }
.house-cabinet .house-face { clip-path: polygon(78% 18%, 100% 18%, 100% 90%, 78% 90%); }
.house-shoji .house-face { clip-path: polygon(56% 8%, 100% 8%, 100% 82%, 56% 82%); }
.house-window .house-face { clip-path: polygon(0% 6%, 20% 6%, 20% 86%, 0% 86%); }
.house-door .house-face { clip-path: polygon(80% 10%, 98% 10%, 98% 82%, 80% 82%); }
.house-chair .house-face { clip-path: polygon(28% 62%, 72% 62%, 74% 76%, 26% 76%); }
.house-face img { display: none; }
.house-spot.is-over .house-face { background: rgba(26,26,26,.18); }
.house-floor { z-index: 1; }
.house-wall, .house-ceiling { z-index: 2; }
.house-leftwall, .house-doma, .house-cabinet, .house-shoji,
.house-door, .house-chair, .house-window, .house-head { z-index: 3; }
.house-table { z-index: 4; }

.house-scene-living .house-wall .house-face { clip-path: polygon(19% 16%, 71% 16%, 71% 69%, 19% 69%); }
.house-scene-entrance .house-wall .house-face-a { clip-path: polygon(12% 6%, 78% 6%, 78% 52%, 12% 52%); }
.house-scene-entrance .house-wall .house-face-b { clip-path: polygon(0% 6%, 11% 6%, 11% 78%, 0% 78%); }
.house-scene-entrance .house-floor .house-face { clip-path: polygon(10% 48%, 78% 48%, 78% 70%, 10% 70%); }
.house-scene-bedroom .house-wall .house-face { clip-path: polygon(4% 10%, 56% 10%, 56% 48%, 4% 48%); }
.house-scene-bedroom .house-ceiling .house-face { clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 0% 10%); }
.house-scene-dining .house-wall .house-face { clip-path: polygon(20% 10%, 80% 10%, 80% 56%, 20% 56%); }
.house-scene-dining .house-ceiling .house-face { clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 0% 10%); }

.house-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: 0.08em;
  background: var(--bg);
  padding: 4px 10px;
  border: 1px dashed var(--line);
  pointer-events: none;
}

.house-ceiling .house-hint { top: 8%; }
.house-wall .house-hint { top: 38%; }
.house-floor .house-hint { top: 83%; }
.house-table .house-hint { top: 54%; }
.house-head .house-hint { top: 52%; left: 25%; }
.house-leftwall .house-hint { top: 40%; left: 9%; }
.house-doma .house-hint { top: 86%; left: 36%; }
.house-cabinet .house-hint { top: 48%; left: 89%; }
.house-shoji .house-hint { top: 36%; left: 78%; }
.house-window .house-hint { top: 36%; left: 10%; }
.house-door .house-hint { top: 40%; left: 89%; }
.house-chair .house-hint { top: 68%; }
.house-scene-entrance .house-wall .house-hint { top: 24%; }
.house-scene-entrance .house-floor .house-hint { top: 58%; }

.house-del {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  font-size: .6875rem;
  padding: 4px 10px;
  pointer-events: auto;
  z-index: 2;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
}

.house-ceiling .house-del { top: 16%; }
.house-wall .house-del { top: 58%; }
.house-floor .house-del { top: 90%; }
.house-table .house-del { top: 58%; }
.house-head .house-del { top: 70%; left: 25%; }
.house-leftwall .house-del { top: 48%; left: 9%; }
.house-doma .house-del { top: 88%; left: 36%; }
.house-cabinet .house-del { top: 56%; left: 89%; }
.house-shoji .house-del { top: 48%; left: 78%; }
.house-window .house-del { top: 48%; left: 10%; }
.house-door .house-del { top: 50%; left: 89%; }
.house-chair .house-del { top: 70%; }
.house-scene-entrance .house-wall .house-del { top: 36%; }
.house-scene-entrance .house-floor .house-del { top: 62%; }
.house-scene-bedroom .house-ceiling .house-del,
.house-scene-dining .house-ceiling .house-del { top: 6%; }
.collage-lib button[draggable="true"] { cursor: grab; }

.collage-lab { margin: 20px 0 28px; }
.collage-lab-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.collage-lab-actions button:disabled { opacity: .45; cursor: wait; }
.house.is-baked .house-img { object-fit: fill; }

@media (max-width: 900px) {
  .hero { height: 100svh; min-height: 380px; }
}

/* --- P3: 紙の目・選択・フォーカス --- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .045;
}

::selection { background: #2b2620; color: #f6f1e7; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* --- P3: 静止状態は常に最終形。app.css の .reveal 常時隠しを解く --- */
.reveal { opacity: 1; transform: none; transition: none; }

/* --- P3: 紙を置く（セクションとカードの据わり） --- */
html[data-motion="on"] .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.21,1);
}
html[data-motion="on"] .reveal.is-visible { opacity: 1; transform: none; }

html[data-motion="on"] .stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease var(--sd, 0ms), transform .55s cubic-bezier(.22,.61,.21,1) var(--sd, 0ms);
}
html[data-motion="on"] .stagger.is-visible > * { opacity: 1; transform: none; }

/* --- P3: 墨線を引く --- */
.footer { position: relative; border-top: 0; }
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
}
.jp-side { position: relative; border-top: 0; }
.jp-side::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
}

html[data-motion="on"] .reveal .section-head::after {
  transform: translateY(-7px) scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.22,.61,.21,1) .1s;
}
html[data-motion="on"] .reveal.is-visible .section-head::after { transform: translateY(-7px) scaleX(1); }

html[data-motion="on"] .footer.line-draw::before,
html[data-motion="on"] .reveal .jp-side::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.22,.61,.21,1) .2s;
}
html[data-motion="on"] .footer.line-draw.is-visible::before,
html[data-motion="on"] .reveal.is-visible .jp-side::before { transform: scaleX(1); }

/* --- P3: 漢字が据わる --- */
html[data-motion="on"] .stagger .lkd-kanji {
  opacity: 0;
  letter-spacing: .34em;
  transform: translateY(-.08em);
  transition:
    opacity .8s ease calc(var(--sd, 0ms) + 140ms),
    letter-spacing .8s cubic-bezier(.22,.61,.21,1) calc(var(--sd, 0ms) + 140ms),
    transform .8s cubic-bezier(.22,.61,.21,1) calc(var(--sd, 0ms) + 140ms);
}
html[data-motion="on"] .stagger.is-visible .lkd-kanji {
  opacity: 1;
  letter-spacing: .12em;
  transform: none;
}

html[data-motion="on"] .page-hero.reveal h1 {
  opacity: 0;
  letter-spacing: .22em;
  transform: translateY(-.06em);
  transition:
    opacity .8s ease .15s,
    letter-spacing .8s cubic-bezier(.22,.61,.21,1) .15s,
    transform .8s cubic-bezier(.22,.61,.21,1) .15s;
}
html[data-motion="on"] .page-hero.reveal.is-visible h1 {
  opacity: 1;
  letter-spacing: .08em;
  transform: none;
}
/* LKD の題字は長く、字間の据わり（.22em→.08em）の途中で折り返す。この題字は字間を動かさない */
html[data-motion="on"] .page-hero.reveal h1.no-ls-motion {
  letter-spacing: .08em;
}
html[data-motion="on"] .page-hero.reveal .copy p {
  opacity: 0;
  transition: opacity .7s ease .35s;
}
html[data-motion="on"] .page-hero.reveal.is-visible .copy p { opacity: 1; }

html[data-motion="on"] .hero .vert {
  animation: p3-vert-settle .9s cubic-bezier(.22,.61,.21,1) .3s backwards;
}
@keyframes p3-vert-settle {
  from { opacity: 0; letter-spacing: .32em; transform: translateY(-.08em); }
}

/* --- P3: 地図に滲む --- */
html[data-motion="on"] .jp-map path {
  opacity: 0;
  transition: opacity .55s ease var(--sd, 0ms), fill .15s ease;
}
html[data-motion="on"] .jp-map.is-inked path { opacity: 1; }

/* --- P3: 触れたとき（カーソル自体は動かさない） --- */
@media (hover: hover) and (pointer: fine) {
  .header-nav a {
    position: relative;
    border-bottom-color: transparent;
  }
  .header-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.22,.61,.21,1);
  }
  .header-nav a:hover::after,
  .header-nav a:focus-visible::after,
  .header-nav a.is-on::after { transform: scaleX(1); }
  .header-nav a.is-on { border-bottom-color: transparent; }

  .logo {
    display: inline-block;
    transition: letter-spacing .45s cubic-bezier(.22,.61,.21,1);
  }
  .logo:hover { letter-spacing: .12em; }

  .login-text,
  .icon-btn,
  .icon-link {
    transition: opacity .3s ease;
  }
  .login-text:hover,
  .icon-btn:hover,
  .icon-link:hover { opacity: .62; }

  .card-photo img,
  .home-about-fig img,
  .tile img,
  .lkd-card img {
    transition: transform .55s cubic-bezier(.22,.61,.21,1);
  }
  .card:hover .card-photo img,
  .home-about-fig:hover img,
  .tile:hover img,
  .lkd-card:hover img { transform: scale(1.035); }

  .lkd-card .lkd-kanji {
    transition: letter-spacing .45s cubic-bezier(.22,.61,.21,1);
  }
  .lkd-card:hover .lkd-kanji { letter-spacing: .06em; }
}

/* --- P3: 長文の物語（スクロールで語るフォトストーリー。章立て・継ぎ目線は付けない） --- */
/* ken-burns のはみ出しだけ隠す。静止状態は常に最終形 */
.longform-fig { overflow: hidden; }

/* 見出しは字間が据わる */
html[data-motion="on"] .longform-sec h2 {
  opacity: 0;
  letter-spacing: .18em;
  transform: translateY(-.04em);
  transition:
    opacity .8s ease,
    letter-spacing .8s cubic-bezier(.22,.61,.21,1),
    transform .8s cubic-bezier(.22,.61,.21,1);
}
html[data-motion="on"] .longform-sec.is-visible h2 {
  opacity: 1;
  letter-spacing: .08em;
  transform: none;
}

/* リードは見出しのあとに置く */
html[data-motion="on"] .longform-sec .longform-lead {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .75s ease .22s, transform .75s cubic-bezier(.22,.61,.21,1) .22s;
}
html[data-motion="on"] .longform-sec.is-visible .longform-lead { opacity: 1; transform: none; }

/* 写真は湿った墨からゆっくり乾いて据わる。本文が置き始めてもまだ動いている */
html[data-motion="on"] .longform-sec .longform-fig {
  opacity: 0;
  transform: translateY(16px);
  box-shadow: 0 18px 40px rgba(43, 38, 32, .14);
  transition:
    opacity 1.2s ease .38s,
    transform 1.2s cubic-bezier(.22,.61,.21,1) .38s,
    box-shadow 1.6s ease .38s;
}
html[data-motion="on"] .longform-sec .longform-fig img {
  transform: scale(1.055);
  filter: saturate(.74) brightness(1.04);
  transition:
    transform 2.6s cubic-bezier(.22,.61,.21,1) .38s,
    filter 2s ease .38s;
}
html[data-motion="on"] .longform-sec.is-visible .longform-fig {
  opacity: 1;
  transform: none;
  box-shadow: 0 0 0 rgba(43, 38, 32, 0);
}
html[data-motion="on"] .longform-sec.is-visible .longform-fig img { transform: none; filter: none; }

/* 本文は読む順に1段落ずつ墨を置く */
html[data-motion="on"] .longform-sec > p:not(.longform-lead) {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .7s ease var(--pd, 0ms),
    transform .7s cubic-bezier(.22,.61,.21,1) var(--pd, 0ms);
}
html[data-motion="on"] .longform-sec > p.is-visible { opacity: 1; transform: none; }

/* --- P3: 詳細の幕開け（写真がゆっくり据わり、縦書きが落ち着く） --- */
html[data-motion="on"] .detail-hero.reveal img {
  transform: scale(1.045);
  transition: transform 2.4s cubic-bezier(.22,.61,.21,1) .2s;
}
html[data-motion="on"] .detail-hero.reveal.is-visible img { transform: none; }
html[data-motion="on"] .detail-hero .vert {
  animation: p3-vert-settle .9s cubic-bezier(.22,.61,.21,1) .55s backwards;
}