/* トップ(セールスページ)の見た目(2026-11-11)。App Storeの画像と同じ: 明るいグレイの背景紙、上からのスポットライト、
   濃い字の見出し。主役はいつも端末(小物は置かない)。動きは home.js */
.page-home main { position: relative; }

/* 文字 */
.kicker { margin: 0 0 14px; font-size: clamp(13px, 1.3vw, 15px); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.head { margin: 0; font-size: clamp(40px, 6vw, 76px); line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
:lang(ja) .head, :lang(ja) .body { word-break: auto-phrase; }
/* 日本語・中国語・韓国語の見出しは、1行が欄(520px)に収まる大きさに(「モックアップが」、韓国語は字の幅が広く「스크린샷 한 장으로」) */
:lang(ja) .head, :lang(zh-Hans) .head, :lang(zh-Hant) .head { font-size: clamp(38px, 5.6vw, 72px); }
:lang(ko) .head { font-size: clamp(38px, 5.4vw, 68px); }
:lang(ja) .head, :lang(ko) .head, :lang(zh-Hans) .head, :lang(zh-Hant) .head { line-height: 1.18; letter-spacing: -0.01em; }
.body { margin: 20px 0 0; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: var(--mute); max-width: 30em; }
.copy { max-width: 520px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center .body { margin-left: auto; margin-right: auto; }
/* 見出しの1行(<br>で決めた所)。行の中では折り返さない。欄に収まらない時は home.js の fitHeads が字を小さくする */
.head .ln { display: block; white-space: nowrap; }
.copy.center { max-width: 820px; }   /* 真ん中の見出し(「Everything Happens」など)は広く使う */

/* 浮かび上がる */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; } .reveal.d2 { transition-delay: .24s; } .reveal.d3 { transition-delay: .36s; }

.blk { position: relative; padding: clamp(100px, 16vh, 180px) 0; }

/* スタジオの紙とスポットライト(どの欄も同じ光) */
.hero, .pin .sticky, .end {
  background:
    radial-gradient(60% 55% at 50% -6%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #dcdce0, var(--paper) 40%, #dedee2);
}

/* ---- 1. 最初の画面 ---- */
.hero {
  position: relative; min-height: calc(100svh - 56px); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 2vw;
  padding: 4vh max(var(--gutter), calc((100% - var(--wrap)) / 2)) 8vh;
}
.hero-light {    /* 明かりが点く: 最初は暗く、ふっと明るくなる */
  position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #0b0b0d;
  animation: lightsOn 1.6s .25s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes lightsOn {
  0% { opacity: 1; } 12% { opacity: .55; } 18% { opacity: .9; } 30% { opacity: .35; } 36% { opacity: .6; } 100% { opacity: 0; visibility: hidden; }
}
.hero::before {  /* 上からの光の円錐 */
  content: ""; position: absolute; left: 50%; top: -20%; width: 120vmax; height: 120vmax; transform: translateX(-30%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 2; }
.hero-title { font-size: clamp(46px, 6.6vw, 92px); }
:lang(ja) .hero-title, :lang(ko) .hero-title, :lang(zh-Hans) .hero-title, :lang(zh-Hant) .hero-title { font-size: clamp(42px, 5.6vw, 80px); }
.hero .cta { margin-top: 34px; }
.note { margin: 14px 0 0 6px; font-size: 14px; color: var(--soft); }
.hero-stage { position: relative; z-index: 1; height: min(78vh, 760px); perspective: 1600px; }
.tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.dev { position: absolute; bottom: 4%; height: 92%; will-change: transform; }
.dev img { height: 100%; width: auto; }   /* 影と床の反射は絵に入っている */
/* 手前(Motion)は絵の余白が裏と違うので、本体の高さを裏と揃え(本体は絵の0.71、裏は0.83)、床を少し手前(下)に */
.dev.front { aspect-ratio: var(--ar, .5); height: 108%; bottom: -9%; }
.dev.front canvas, .dev.front img { position: absolute; inset: 0; height: 100%; width: 100%; filter: none; }

/* 連番のコマ: 読めるまでは最初のコマの絵、読めたらcanvas */
canvas.seq { opacity: 0; }
canvas.seq.ready { opacity: 1; }
.seq-poster.gone { visibility: hidden; }
/* Motionの動画(透明つきのHEVC)。流れ始めたら、連番のコマと最初のコマの絵を隠す */
[data-mov] > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
[data-mov].playing > video { visibility: visible; }
[data-mov].playing > canvas, [data-mov].playing > .seq-poster { visibility: hidden; }
.dev.front { left: 6%; z-index: 2; animation: rise 1.4s .6s cubic-bezier(.2, .8, .2, 1) both; }
.dev.back { right: 4%; z-index: 1; animation: rise 1.4s .85s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(80px) scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 6vh; gap: 4vh; }
  .hero .body { margin-left: auto; margin-right: auto; }
  .hero-stage { height: 62vh; }
  .note { margin-left: 0; }
}

/* ---- 画面に止まる欄(スクロールの量で中が動く) ---- */
.pin { position: relative; height: 330vh; }
.pin.angles { height: 280vh; }   /* 8つの絵を、1つ20vhくらいで替える(反応を早く) */
.pin.motion { height: 380vh; }   /* 1周を、ゆっくり回せるように */
.pin.video { height: 380vh; }    /* 1か月の満ち欠けを、ゆっくり */
.pin .sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.pin-grid {
  width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 0 auto; height: 100%;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw;
}
.pin-grid.flip .copy { order: 2; }
.stage { position: relative; height: min(82svh, 820px); }
.frames, .spin { position: absolute; inset: 0 0 64px; }
.frames > *, .spin > *, .mo > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* 角度の欄: スクロールですぐ替わる(短く、少しだけ動く) */
.frames > * { opacity: 0; visibility: hidden; transform: scale(.97) translateY(8px); transition: opacity .18s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .18s; }
.frames > .on { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 820px) {
  .pin-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 2vh; padding: 9vh 0 3vh; align-items: stretch; }
  .pin-grid.flip .copy { order: 0; }
  .pin .copy { text-align: center; margin: 0 auto; }
  .pin .head { font-size: clamp(32px, 9vw, 44px); }
  .pin .body { font-size: 16px; margin: 10px auto 0; }
  .pin .kicker { margin-bottom: 8px; }
  .stage { height: auto; min-height: 0; }
}

/* 2. 角度 */
.angles .shot { width: auto; height: 86%; max-width: 100%; margin: auto; border-radius: 7% / 3.3%; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.08); }
.meter { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 10px; }
.meter .label { font-size: 15px; font-weight: 600; color: var(--ink); min-height: 1.4em; }
.dots { display: flex; gap: 8px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, 0.18); transition: background .3s, transform .3s; }
.dots i.on { background: var(--ink); transform: scale(1.3); }

/* 3. Motion */
.dial { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 58px; height: 58px; display: grid; place-items: center; }
.dial svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.dial circle { fill: none; stroke: rgba(0, 0, 0, 0.1); stroke-width: 5; }
.dial .arc { stroke: var(--red); stroke-linecap: round; stroke-dasharray: 0 360; }
.dial b { font-size: 13px; font-variant-numeric: tabular-nums; }

/* 4. Simple を試す */
.pin.simple { height: 230vh; }   /* ちょっと止まって、スクロールで太さと色が変わる */
.pin.simple .sticky { background: linear-gradient(180deg, var(--paper), #f2f2f4 50%, var(--paper)); }
.simple-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 5vw; align-items: center; }
.simple-play { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.simple-stage { display: grid; place-items: center; padding: 20px 0; }
.simple-phone {
  --bpx: 12px; width: min(100%, 300px, calc((100svh - 150px) / 2.3)); padding: var(--bpx); background: var(--c);
  border-radius: calc(var(--rad) + var(--bpx)); transition: background .35s, box-shadow .35s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.simple-phone.shadow { box-shadow: 0 34px 60px rgba(0, 0, 0, 0.28), 0 8px 18px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.simple-phone .scr { position: relative; border-radius: var(--rad); overflow: hidden; aspect-ratio: 1206 / 2622; background: #000; }
.simple-phone .scr img { width: 100%; height: 100%; object-fit: cover; }
.simple-phone .island { position: absolute; left: 50%; top: 2.7%; width: 31.3%; height: 4.2%; transform: translateX(-50%); background: #000; border-radius: 99px; }
.panel { background: rgba(28, 28, 30, 0.96); color: #f5f5f7; border-radius: 22px; padding: 18px 18px 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); font-size: 14px; }
.panel .row { display: grid; gap: 10px; padding: 10px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.panel .row:last-child { border-bottom: 0; }
.panel .row > span { color: #a1a1a6; font-size: 13px; }
.panel label.row:first-child { grid-template-columns: 1fr auto; }
.panel label.row:first-child input { grid-column: 1 / -1; grid-row: 2; }
.panel output { font-variant-numeric: tabular-nums; color: #f5f5f7; }
.panel input[type=range] { width: 100%; accent-color: #0a84ff; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); transition: transform .2s; }
.chip:hover { transform: scale(1.12); }
.chip.on { box-shadow: 0 0 0 2px #1c1c1e, 0 0 0 4px #f5f5f7; }
.toggle { grid-template-columns: 1fr auto; align-items: center; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle i { width: 46px; height: 28px; border-radius: 99px; background: #3a3a3c; position: relative; transition: background .25s; }
.toggle i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .25s; }
.toggle input:checked + i { background: #30d158; }
.toggle input:checked + i::after { transform: translateX(18px); }
.toggle input:focus-visible + i { outline: 2px solid #0a84ff; outline-offset: 2px; }
@media (max-width: 900px) {
  .simple-grid { grid-template-columns: 1fr; text-align: center; }
  .simple-grid .copy { margin: 0 auto; }
  .simple-grid .body { margin-left: auto; margin-right: auto; }
  .simple-play { grid-template-columns: 1fr; text-align: left; max-width: 380px; margin: 0 auto; }
  /* 画面に止めるので、スマホでは端末と操作を横に並べて1画面に収める(アプリと同じ、見本の右に操作) */
  .pin.simple .simple-grid { gap: 3vh; }
  .pin.simple .simple-play { grid-template-columns: 0.95fr 1fr; gap: 14px; align-items: center; }
  .pin.simple .simple-stage { padding: 0; }
  .pin.simple .simple-phone { width: min(100%, calc((100svh - 300px) / 2.3)); }
  .pin.simple .panel { padding: 12px 12px 4px; border-radius: 18px; }
  .pin.simple .chips { gap: 8px; }
  .pin.simple .chip { width: 24px; height: 24px; }
}

/* 5. 1,600の壁 */
.wall-sec { overflow: hidden; min-height: 110vh; display: grid; align-items: center; background: #ececef; }
.wall { position: absolute; inset: -40% -6%; display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; transform: rotate(-8deg); }
.wall .col { display: grid; gap: 14px; align-content: start; will-change: transform; }
.wall span { aspect-ratio: 1; background: #fff; border-radius: 16px; display: grid; place-items: center; padding: 10%; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); }
.wall img { max-height: 100%; max-width: 100%; object-fit: contain; }
.wall-fade { position: absolute; inset: 0; background: radial-gradient(46% 40% at 50% 50%, rgba(236, 236, 239, 0.98), rgba(236, 236, 239, 0.92) 50%, rgba(236, 236, 239, 0) 100%); }
.wall-copy .copy { max-width: 760px; }
.wall-copy { position: relative; z-index: 2; }
.wall-copy .btn { margin-top: 30px; }
@media (max-width: 700px) { .wall { grid-template-columns: repeat(10, 22vw); inset: -40% -80%; } }

/* 6. 動画 */
.timeline { position: absolute; left: 6%; right: 6%; bottom: 8px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.timeline .track { position: relative; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.12); }
.timeline .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--ink); }
.timeline .knob { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }

/* 7. 歴史 */
.history { height: 420vh; --H: min(40vh, 400px); }
.history .sticky { flex-direction: column; justify-content: center; gap: 2vh; }
.history .copy { max-width: 760px; }
.history .year {
  position: absolute; left: 50%; top: 57%; transform: translate(-50%, -50%); font-size: min(34vw, 46vh); font-weight: 800;
  letter-spacing: -0.05em; color: rgba(0, 0, 0, 0.045); font-variant-numeric: tabular-nums; pointer-events: none; line-height: 1;
}
.history .track { position: relative; width: 100%; height: calc(var(--H) + 60px); }
.history .row { position: absolute; left: 0; bottom: 0; height: 100%; display: flex; align-items: flex-end; gap: min(7vw, 90px); padding: 0 50vw; will-change: transform; }
.history figure { margin: 0; flex: none; display: grid; justify-items: center; gap: 10px; transition: transform .4s, filter .4s; filter: saturate(.8) brightness(1.02); }
.history figure img { height: calc(var(--h) * var(--H)); width: auto; max-width: none; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.18)); }
.history figure.near { transform: translateY(-14px) scale(1.06); filter: none; }
.history figcaption { font-size: 14px; font-weight: 600; color: var(--soft); font-variant-numeric: tabular-nums; }
.history figure.near figcaption { color: var(--ink); }
@media (max-width: 820px) { .history .copy { padding-top: 6vh; } .history .head { font-size: clamp(32px, 9vw, 44px); } .history .body { font-size: 16px; } }

/* 8. どの端末でも */
.trio { position: relative; height: min(64vw, 620px); margin-top: 60px; }
.trio figure { position: absolute; margin: 0; display: grid; justify-items: center; gap: 12px; }
.trio figcaption { font-size: 14px; font-weight: 600; color: var(--soft); }
.trio img { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.18)); }
.trio .mac { left: 50%; top: 0; width: 62%; transform: translateX(-50%); }
.trio .mac.reveal { transform: translateX(-50%) translateY(40px); }
.trio .mac.reveal.in { transform: translateX(-50%); }
.trio .ipad { left: 3%; bottom: 0; width: 30%; }
.trio .iphone { right: 8%; bottom: 0; width: 16%; }

/* 9. 最後 */
.end { overflow: hidden; }
.end-light { position: absolute; left: 50%; top: -30%; width: 140vmax; height: 100vmax; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); pointer-events: none; }
.end .wrap { position: relative; }
.app-icon { width: 128px; height: 128px; margin: 0 auto 30px; border-radius: 22.5%; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25); }
.stats { display: flex; justify-content: center; gap: clamp(28px, 7vw, 90px); margin: 54px 0 46px; }
.stat { display: grid; gap: 4px; }
.stat b { font-size: clamp(36px, 5vw, 58px); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat > span { font-size: 14px; color: var(--soft); }

/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  .hero-light { display: none; }
  .dev.front, .dev.back { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .frames img { transition: none; }
}