/* =========================================================
   旅するものづくり工房 / ダイナミック演出レイヤー（実験）
   - style.css の上に重ねるだけ。外すには各HTMLの
     <link href="/css/dynamic.css"> と <script src="/js/dynamic.js"> を消す
     （または git checkout classic-v1）。
   - すべて html.dyn 配下。dynamic.js が付与する。
   ========================================================= */

html.dyn {
  --dyn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- ヘッダー：下スクロールで隠れ、上スクロールで戻る ---------- */
html.dyn .site-header {
  transition: transform 0.5s var(--dyn-ease), background 0.6s ease;
}
html.dyn .site-header.is-hidden {
  transform: translateY(-100%);
}

/* ---------- ヒーロー ---------- */
html.dyn .hero {
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
html.dyn .hero__slideshow {
  transform: translate3d(0, calc(var(--dyn-scroll, 0) * 0.25px), 0) scale(1.08);
  will-change: transform;
}
/* 切り替え中、消えていくスライド（is-leaving）にも同じ拡大を続けさせる。
   拡大が外れると元の大きさに戻り、画像が一瞬「引く」ように見えてしまうため。 */
html.dyn .hero__slide.is-active,
html.dyn .hero__slide.is-leaving {
  animation: dyn-kenburns 9s ease-out forwards;
}
@keyframes dyn-kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.09); }
}
html.dyn .hero__inner {
  transform: translate3d(0, calc(var(--dyn-scroll, 0) * -0.12px), 0);
  opacity: calc(1 - var(--dyn-scroll, 0) / 700);
}
html.dyn .hero h1 {
  font-size: clamp(1.85rem, 7.4vw, 5.6rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin-bottom: 0.45em;
}
html.dyn .hero h1 .dyn-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.9em) rotate(6deg);
  filter: blur(6px);
  transition: opacity 0.9s var(--dyn-ease), transform 1.1s var(--dyn-ease), filter 0.9s var(--dyn-ease);
  transition-delay: calc(var(--i) * 55ms + 250ms);
}
html.dyn.is-ready .hero h1 .dyn-char {
  opacity: 1;
  transform: none;
  filter: none;
}
html.dyn .hero__logo,
html.dyn .hero p,
html.dyn .hero__actions {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--dyn-ease), transform 1.2s var(--dyn-ease);
}
html.dyn.is-ready .hero__logo    { opacity: 1; transform: none; transition-delay: 0.05s; }
html.dyn.is-ready .hero p        { opacity: 1; transform: none; transition-delay: 1.05s; }
html.dyn.is-ready .hero__actions { opacity: 1; transform: none; transition-delay: 1.3s; }

/* スクロールを促すライン */
.dyn-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  transform: translateX(-50%);
  pointer-events: none;
}
.dyn-scrollcue::after {
  content: "";
  width: 1px;
  height: 46px;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
  transform-origin: top;
  animation: dyn-cue 2s ease-in-out infinite;
}
@media (max-width: 720px) {
  .dyn-scrollcue { display: none; }
}
@keyframes dyn-cue {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- 出現アニメーション ---------- */
html.dyn [data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 1s var(--dyn-ease), transform 1.2s var(--dyn-ease);
  transition-delay: var(--d, 0ms);
}
html.dyn [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* 写真は、覆いが上へスライドして現れる。
   ※clip-path を対象自身に掛けると IntersectionObserver が交差を検知できず、
     写真が永遠に出てこなくなるため、覆いの疑似要素で表現する。 */
html.dyn .photo-frame[data-reveal],
html.dyn .card__photo[data-reveal] {
  opacity: 1;
  transform: none;
  position: relative;
  overflow: hidden;
}
html.dyn .photo-frame[data-reveal]::after,
html.dyn .card__photo[data-reveal]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--curtain, var(--color-paper));
  transform-origin: 50% 0;
  transition: transform 1.2s var(--dyn-ease);
  transition-delay: var(--d, 0ms);
  pointer-events: none;
}
html.dyn .photo-stack .photo-stack__inset[data-reveal] { position: absolute; }
html.dyn .section--alt { --curtain: var(--color-paper-alt); }
html.dyn .photo-frame[data-reveal].is-in::after,
html.dyn .card__photo[data-reveal].is-in::after {
  transform: scaleY(0);
}
html.dyn .photo-frame img {
  transform: scale(1.12);
  transition: transform 1.8s var(--dyn-ease);
}
html.dyn .photo-frame.is-in img {
  transform: scale(1);
}

/* ---------- 見出しを大きく ---------- */
html.dyn .section {
  padding: clamp(56px, 8vw, 96px) 0;
}
/* プロフィールと、その次の「大切にしていること」の間は詰める（上の汎用ルールより強く指定） */
html.dyn .section--profile {
  padding: 40px 0 16px;
}
html.dyn .section--profile.section--alt {
  padding-bottom: 48px;
}
html.dyn .section--profile + .section--tane {
  padding-top: 16px;
}
html.dyn .section-title {
  font-size: clamp(1.7rem, 5vw, 3.2rem);
  line-height: 1.4;
}

/* ---------- 「タネ」4ステップ：スマホでは、図だけを指で左右にスワイプして見る ----------
   JS（dynamic.js）が .is-swipe を付けたときだけ有効。付かなければ縦積みのまま。
   見出し・本文・ボタンはふつうに縦へ流れ、左右に動くのは「ステップ（題・説明・図）」だけ。
   1ステップは画面の84%の幅で、両隣が少しのぞく（＝横にも続いているとわかる）。 */
html.dyn .tane-track.is-swipe .tane-steps {
  display: flex;
  width: 100vw;
  max-width: none;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 0;
  row-gap: 0;
  transform: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.dyn .tane-track.is-swipe .tane-steps::-webkit-scrollbar {
  display: none;
}
html.dyn .tane-track.is-swipe .tane-steps::before,
html.dyn .tane-track.is-swipe .tane-steps::after {
  content: "";
  flex: none;
  width: 8vw; /* 最初と最後のステップも、真ん中で止まれるように */
}
html.dyn .tane-track.is-swipe .tane-step {
  flex: none;
  width: 84vw;
  box-sizing: border-box;
  padding: 0 12px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
html.dyn .tane-track.is-swipe .tane-step__title {
  font-size: 1.4rem;
  margin-bottom: 0.5em;
}
html.dyn .tane-track.is-swipe .tane-step__desc {
  padding: 0;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
html.dyn .tane-track.is-swipe .tane-figure {
  width: fit-content; /* 枠を画像ぴったりの幅に。タネ・吹き出しの位置は枠の％なので、画像とずれないように */
  margin: auto auto 0; /* 上：4つの図の下端（地面の線）をそろえる。左右：中央 */
}
html.dyn .tane-track.is-swipe .tane-step img {
  display: block;
  width: auto;
  max-width: none;
  /* 4つとも、まったく同じ高さ（＝地面の線の高さがそろう）。いちばん横長の4枚目（縦横比1.469）が幅に収まる範囲で */
  height: min(220px, calc((84vw - 24px) / 1.469));
  margin: 0 auto;
  -webkit-mask-image: none;
  mask-image: none;
}
/* 「旅するものづくり工房についてもっと知る →」は、工房名のあとで改行する */
html.dyn .tane-track.is-swipe .tane-more .btn {
  flex-direction: column;
  line-height: 1.5;
}
/* スワイプの案内と、いま何番目かを示す点 */
.tane-dots,
.tane-swipe-hint {
  display: none;
}
html.dyn .tane-track.is-swipe .tane-swipe-hint {
  display: block;
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  letter-spacing: 0.06em;
  transition: opacity 0.4s ease;
}
html.dyn .tane-track.is-swipe .tane-swipe-hint.is-done {
  opacity: 0;
}
html.dyn .tane-track.is-swipe .tane-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0.5rem 0 0;
}
.tane-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-line);
  transition: background 0.25s ease, transform 0.25s ease;
}
.tane-dots span.is-on {
  background: var(--tane-amber, #d79831);
  transform: scale(1.35);
}
html.dyn .tane-track.is-swipe [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- カード ---------- */
html.dyn .card {
  transition: transform 0.6s var(--dyn-ease), box-shadow 0.6s var(--dyn-ease);
  will-change: transform;
}
html.dyn .card:hover {
  transform: translateY(-10px);
}
html.dyn .card__photo img {
  transition: transform 1.1s var(--dyn-ease);
}
html.dyn .card:hover .card__photo img {
  transform: scale(1.08);
}
html.dyn .card {
  color: var(--color-ink);
}

/* ---------- 「社会には／ワクワク／が咲く／タネ／が落ちている」をぽんぽんと順番に出す ---------- */
html.dyn .tane-part {
  opacity: 0;
}
html.dyn .tane-part em {
  display: inline-block;
}
html.dyn .tane-head.is-in .tane-part {
  animation: tane-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i) * 0.5s + 0.2s);
}
html.dyn .tane-head.is-in .tane-part:nth-child(2),
html.dyn .tane-head.is-in .tane-part:nth-child(4) {
  animation-name: tane-pop-big; /* 「ワクワク」「タネ」は特に大きく跳ねる */
}
@keyframes tane-pop {
  0%   { opacity: 0; transform: translateY(0.6em) scale(0.5); }
  55%  { opacity: 1; transform: translateY(-0.18em) scale(1.12); }
  100% { opacity: 1; transform: none; }
}
@keyframes tane-pop-big {
  0%   { opacity: 0; transform: translateY(0.9em) scale(0.3) rotate(-6deg); }
  50%  { opacity: 1; transform: translateY(-0.3em) scale(1.28) rotate(3deg); }
  75%  { transform: translateY(0.05em) scale(0.94) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}

/* ---------- 動きを減らす設定の人には全部止める ---------- */
@media (prefers-reduced-motion: reduce) {
  html.dyn *,
  html.dyn *::before,
  html.dyn *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  html.dyn [data-reveal]::after { display: none !important; }
  html.dyn [data-reveal],
  html.dyn .hero h1 .dyn-char,
  html.dyn .hero__logo,
  html.dyn .hero p,
  html.dyn .hero__actions,
  html.dyn .tane-part {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* 落ち着いた出現アニメーション（<body data-calm>：「これまでのプロジェクト」ページ）
   移動量を小さく、時間をゆっくりにし、写真はカーテンではなくふわっと表示する */
html.dyn body[data-calm] [data-reveal] {
  transform: translateY(14px);
  transition: opacity 1.1s ease, transform 1.3s var(--dyn-ease);
  transition-delay: 0ms;
}
html.dyn body[data-calm] [data-reveal].is-in {
  transform: none;
}
html.dyn body[data-calm] .photo-frame[data-reveal],
html.dyn body[data-calm] .card__photo[data-reveal] {
  opacity: 0;
  transform: none;
  transition: opacity 1.3s ease;
}
html.dyn body[data-calm] .photo-frame[data-reveal].is-in,
html.dyn body[data-calm] .card__photo[data-reveal].is-in {
  opacity: 1;
}
html.dyn body[data-calm] .photo-frame[data-reveal]::after,
html.dyn body[data-calm] .card__photo[data-reveal]::after {
  display: none;
}
html.dyn body[data-calm] .photo-frame img {
  transform: scale(1.03);
  transition: transform 2s ease;
}
html.dyn body[data-calm] .photo-frame.is-in img {
  transform: none;
}

/* 写真の自動切り替え：上の「.photo-frame img」用の拡大・遅延ルールより強く指定して、フェードだけを効かせる */
html.dyn .photo-frame--slides img {
  transform: none;
  transition: none;
}
html.dyn .photo-frame--slides img.is-current {
  transition: opacity 2.4s ease-in-out;
}