/* 製品ページ（/tonton）専用。共通部品は style.css、テンポやスクロールに連動する値は tonton.js が CSS 変数で渡す。 */

/* ---------- Hero（テンポに合わせて脈打つ） ---------- */
.tt-hero {
  position: relative; height: 100svh; min-height: 600px;
  display: grid; place-items: center; overflow: hidden; text-align: center;
}
.tt-grid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mask-image: radial-gradient(ellipse 48% 42% at 50% 50%, rgba(0, 0, 0, .06), #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 48% 42% at 50% 50%, rgba(0, 0, 0, .06), #000 100%);
  opacity: 0; transition: opacity 1.8s var(--ease) .4s;
}
.loaded .tt-grid { opacity: 1; }
.tt-hero-inner {
  position: relative; padding: 0 var(--gutter);
  opacity: calc(1 - var(--hp, 0) * 1.4);
  transform: translate3d(0, calc(var(--hp, 0) * -10vh), 0) scale(calc(1 - var(--hp, 0) * .08));
}
.tt-hero .eyebrow { justify-content: center; margin-bottom: clamp(12px, 3vh, 32px); }
.tt-hero .lead { margin-top: clamp(20px, 4vh, 44px); }
.tt-desc { max-width: 44em; margin: 1.2em auto 0; font-size: .85rem; line-height: 1.9; color: var(--muted); }
.js .tt-desc { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js.loaded .tt-desc { opacity: 1; transform: none; transition-delay: .95s; }

.tt-word {
  display: flex; justify-content: center; margin: 0;
  font-weight: 200; font-size: clamp(5.5rem, 21vw, 19rem); line-height: .95; letter-spacing: -.055em;
}
/* --pulse（0〜1）は自分の拍で 1 になり減衰する。拍のたびに少し沈み、下の点が光る */
.tt-syl {
  position: relative; display: inline-block; overflow: hidden; padding: 0 .02em .1em;
  transform-origin: 50% 100%;
  transform: translate3d(0, calc(var(--pulse, 0) * .035em), 0) scale(calc(1 + var(--pulse, 0) * .02), calc(1 - var(--pulse, 0) * .035));
}
.tt-syl:nth-child(2) { padding-right: .1em; font-family: var(--font-serif); font-style: italic; font-weight: 300; letter-spacing: -.02em; }
.tt-syl::after {
  content: ""; position: absolute; left: 50%; bottom: .02em; width: .05em; height: .05em; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%) scale(calc(.25 + var(--pulse, 0) * .75)); opacity: calc(.3 + var(--pulse, 0) * .7);
}
.tt-syl > span { display: inline-block; transition: transform 1.5s var(--ease); }
.tt-syl:nth-child(2) > span { transition-delay: .14s; }
.js .tt-syl > span { transform: translate3d(0, 110%, 0); }
.js.loaded .tt-syl > span { transform: none; }

.tt-tempo {
  position: absolute; left: var(--gutter); bottom: clamp(64px, 13vh, 132px);
  display: flex; align-items: baseline; gap: .7em;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.tt-bpm { min-width: 2.2em; text-align: right; font-size: 1.7rem; font-weight: 200; letter-spacing: 0; color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---------- Concept ---------- */
.tt-concept { padding: clamp(120px, 22vh, 240px) 0; }
.tt-statement { margin: 0 0 clamp(24px, 4vh, 40px); font-size: clamp(2rem, 5.6vw, 4.6rem); line-height: 1.35; letter-spacing: .02em; }
.tt-ml { display: block; overflow: hidden; padding-bottom: .06em; }
.tt-ml > span { display: inline-block; transition: transform 1.3s var(--ease); }
.tt-ml:nth-child(2) > span { transition-delay: .12s; }
.js .tt-statement[data-reveal] { opacity: 1; transform: none; }
.js .tt-ml > span { transform: translate3d(0, 105%, 0); }
.js .tt-statement.is-in .tt-ml > span { transform: none; }
.tt-statement-sub { max-width: 34em; margin: 0 0 clamp(64px, 12vh, 120px); font-size: clamp(.95rem, 1.3vw, 1.1rem); color: var(--muted); }

.tt-routes { display: grid; gap: clamp(48px, 9vh, 96px); }
.tt-route-label { display: block; margin-bottom: 28px; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.tt-route-fig { position: relative; }
.tt-route-fig svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; }
/* 道（これから通る部分）は点線、通った部分は実線で上書きする */
.tt-road { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }
.tt-trail { stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; }
.tt-stop { stroke: var(--muted); stroke-width: 1; fill: var(--bg); vector-effect: non-scaling-stroke; }
.tt-station { fill: var(--fg); }
.tt-runner { fill: var(--accent); }
.tt-rail { stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tt-sleepers { stroke: var(--muted); stroke-width: 26; stroke-dasharray: 1.5 26; opacity: .5; }
.is-with .tt-trail { stroke: var(--accent); stroke-width: 4; }
.tt-pin {
  position: absolute; transform: translate(-50%, calc(-100% - 14px));
  font-size: clamp(.68rem, 1vw, .85rem); letter-spacing: .1em; white-space: nowrap;
}
.tt-pin.is-below { transform: translate(-50%, 14px); }
.tt-pin.is-note { font-size: clamp(.58rem, .85vw, .7rem); color: var(--muted); }
.is-with .tt-pin { transform: translate(-50%, calc(-100% - 22px)); }
.is-with .tt-route-fig { margin-top: 44px; }
/* ゴールに着いたら、ゴールの印と名前をアクセント色にする */
.tt-goal, .tt-goal-pin { transition: fill .5s, color .5s; }
.is-done .tt-goal { fill: var(--accent); }
.is-done .tt-goal-pin { color: var(--accent); }

/* ---------- Process（横スクロール） ---------- */
.tt-process-stage { padding: 96px 0; }
/* 左端は .wrap の本文位置にそろえる */
.tt-track { display: flex; gap: clamp(48px, 14vw, 240px); padding: 0 max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))); overflow-x: auto; }
.js .tt-process-stage { position: sticky; top: 0; height: 100svh; padding: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.js .tt-track { overflow: visible; will-change: transform; }
.tt-process .sec-head { margin-bottom: clamp(20px, 4vh, 48px); }
.tt-panel {
  flex: none; width: min(80vw, 1160px);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding-top: clamp(24px, 4vh, 40px); border-top: 1px solid var(--line);
  transition: opacity .3s linear;
}
.js .tt-panel { opacity: calc(.22 + var(--act, 1) * .78); }
.tt-panel-no { font-size: .68rem; letter-spacing: .3em; color: var(--accent); font-variant-numeric: tabular-nums; }
.tt-panel .tt-panel-en { max-width: none; color: var(--fg); margin: .15em 0 0; font-weight: 200; font-size: clamp(3rem, 7vw, 6.5rem); line-height: 1; letter-spacing: -.045em; }
.tt-panel h3 { margin: .9em 0 .5em; font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 400; letter-spacing: .1em; }
.tt-panel p { margin: 0; max-width: 26em; font-size: .95rem; color: var(--muted); }
/* 製品画面のスクリーンショット（tonton/demo から capture.mjs で書き出す）。斜めから見た角度で置き、中央に来るほど正面を向く */
.tt-shot { margin: 0; perspective: 2400px; }
.tt-shot img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  outline: 1px solid var(--line); outline-offset: -1px;
  box-shadow: 0 2px 4px rgba(20, 16, 10, .06), 24px 40px 80px -24px rgba(20, 16, 10, .32);
  transform-origin: 30% 50%;
  transform: rotateY(calc(-26deg + var(--act, 1) * 12deg)) rotateX(calc(10deg - var(--act, 1) * 4deg)) rotateZ(calc(2deg - var(--act, 1) * 1deg));
}
/* 進捗バー：拍の目盛りの上を点が進む */
.tt-staff {
  position: relative; height: 9px; margin-top: clamp(28px, 6vh, 64px);
  background:
    linear-gradient(var(--line), var(--line)) 0 4px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 40px);
  opacity: .8;
}
.tt-staff i {
  position: absolute; top: 50%; left: calc(var(--pp, 0) * 100%); width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
}

/* ---------- Architecture（提供形態の構成図） ---------- */
.tt-arch { padding: clamp(120px, 22vh, 240px) 0 0; }
.tt-arch-title { margin: 0 0 clamp(40px, 7vh, 72px); font-weight: 200; font-size: clamp(1.6rem, 4vw, 3.2rem); line-height: 1.45; letter-spacing: .02em; }
.tt-arch-fig { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(24px, .3fr) auto minmax(24px, .3fr) minmax(0, 1fr); align-items: center; }
.tt-zone { padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--fg) 3%, transparent); }
.tt-zone.is-saas { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.tt-zone-label { display: flex; align-items: baseline; gap: .6em; margin-bottom: 14px; font-size: .78rem; letter-spacing: .14em; color: var(--muted); }
.tt-zone-label small { font-size: .62rem; letter-spacing: .2em; color: var(--accent); }
.tt-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tt-tools li { padding: .3em .9em; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); font-size: .82rem; }
.tt-link { position: relative; height: 9px; }
.tt-link i { position: absolute; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px) 0 0 / 12px 1px; animation: tt-flow 1.2s linear infinite; }
.tt-link i + i { bottom: 0; opacity: .5; animation-direction: reverse; }
@keyframes tt-flow { to { background-position: 12px 0; } }
.tt-relay {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 22px clamp(18px, 2vw, 28px); border: 1px solid var(--accent); border-radius: 18px; background: var(--bg); text-align: center;
}
.tt-relay-en { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; white-space: nowrap; line-height: 1; color: var(--accent); }
.tt-relay b { margin: 6px 0 4px; font-weight: 400; letter-spacing: .1em; }
.tt-relay small { font-size: .72rem; color: var(--muted); }
.tt-boundary { position: absolute; left: 50%; top: -56px; bottom: -56px; z-index: -1; border-left: 1px dashed color-mix(in srgb, var(--fg) 30%, transparent); }
.tt-boundary em { position: absolute; top: -1.8em; left: 0; transform: translateX(-50%); font-style: normal; font-size: .68rem; letter-spacing: .14em; color: var(--muted); white-space: nowrap; }
.tt-arch-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin: clamp(72px, 12vh, 120px) 0 0; padding: 0; list-style: none; }
.tt-arch-points h3 { margin: 0 0 .6em; font-size: 1rem; font-weight: 400; letter-spacing: .08em; }
.tt-arch-points p { margin: 0; font-size: .9rem; color: var(--muted); }

/* ---------- Features ---------- */
.tt-features { padding: clamp(120px, 22vh, 240px) 0 clamp(80px, 14vh, 160px); }
.tt-rows { margin: 0; padding: 0; list-style: none; }
.tt-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 5fr);
  gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(28px, 5vh, 48px) 0;
}
.tt-row::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line);
  transform-origin: 0 50%; transition: transform 1.4s var(--ease) .1s;
}
.tt-row-no { font-weight: 200; font-size: clamp(3rem, 7vw, 6rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; transition: color 1.2s var(--ease) .35s; }
.tt-row h3 { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 400; letter-spacing: .08em; }
.tt-row p { margin: 0; font-size: .95rem; color: var(--muted); }
.tt-row:hover .tt-row-no { color: var(--accent); transition-delay: 0s; }
.js .tt-row::before { transform: scaleX(0); }
.js .tt-row.is-in::before { transform: none; }
.js .tt-row-no { color: color-mix(in srgb, var(--fg) 12%, transparent); }
.js .tt-row.is-in .tt-row-no { color: var(--fg); }

/* ---------- Early Access（反転したカード） ---------- */
.tt-cta { padding: 0 var(--gutter) clamp(80px, 14vh, 160px); }
.tt-cta-card {
  max-width: 1200px; margin: 0 auto; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center;
  padding: clamp(40px, 7vw, 104px); border-radius: clamp(20px, 3vw, 36px);
  background: var(--fg); color: var(--bg);
}
.tt-cta .sec-head { color: color-mix(in srgb, var(--bg) 55%, transparent); }
.tt-cta .sec-head .no { color: var(--bg); }
.js .tt-cta .sec-head .rule { transform: none; }
.tt-cta-title { margin: 0 0 1.2rem; font-weight: 200; font-size: clamp(1.6rem, 4.6vw, 3.8rem); line-height: 1.3; }
.tt-cta-note { margin: 0 0 2rem; color: color-mix(in srgb, var(--bg) 65%, transparent); }
.tt-cta-mail { padding-bottom: .1em; border-bottom: 1px solid currentColor; font-size: clamp(1rem, 1.6vw, 1.25rem); text-decoration: none; }
.tt-beat-btn {
  position: relative; justify-self: center; display: grid; place-items: center;
  width: clamp(168px, 18vw, 240px); aspect-ratio: 1; border-radius: 50%;
  background: var(--bg); color: var(--fg); text-decoration: none; transition: transform .7s var(--ease);
}
.tt-beat-btn:hover { transform: scale(.94); }
.tt-ring { position: absolute; inset: 0; border: 1px solid var(--bg); border-radius: 50%; animation: tt-ring 2.4s var(--ease-io) infinite; }
.tt-ring:nth-child(2) { animation-delay: .8s; }
.tt-ring:nth-child(3) { animation-delay: 1.6s; }
@keyframes tt-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
.tt-beat-label { display: flex; flex-direction: column; align-items: center; gap: .4em; font-size: 1rem; letter-spacing: .12em; }
.tt-beat-label small { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 860px) {
  .tt-tempo { bottom: 28px; }
  .tt-panel { width: 84vw; grid-template-columns: 1fr; gap: 12px; }
  .tt-shot { order: -1; max-width: min(100%, 52svh); }
  .tt-panel .tt-panel-en { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .tt-row { grid-template-columns: 1fr; gap: 10px; }
  .tt-arch-fig { grid-template-columns: 1fr; justify-items: stretch; }
  .tt-link { width: 9px; height: 32px; justify-self: center; }
  .tt-link i { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 12px) 0 0 / 1px 12px; animation-name: tt-flow-v; }
  .tt-link i + i { left: auto; right: 0; }
  /* 狭い画面では境界線を引かず、中継ツールの中に「境界」と書く */
  .tt-boundary { position: static; z-index: auto; margin-bottom: 8px; border: 0; }
  .tt-boundary em { position: static; transform: none; }
  .tt-arch-points { grid-template-columns: 1fr; }
  .tt-cta-card { grid-template-columns: 1fr; }
  .tt-beat-btn { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .js .tt-syl > span, .js .tt-ml > span, .tt-hero-inner { transform: none; opacity: 1; }
  .tt-grid { opacity: 1; }
  .js .tt-row::before { transform: none; }
  .js .tt-row-no { color: var(--fg); }
  .js .tt-desc { opacity: 1; transform: none; }
  .tt-link i { animation: none; }
}
@keyframes tt-flow-v { to { background-position: 0 12px; } }