/* 表紙の種類。中身は covers.js が差し込み、ここは見た目と動きだけを受け持つ。
   --p はスクロール量（0〜1）、--at はその要素が動き始める位置。
   --k は要素ごとの進み具合で、--at から --len の間に 0 から 1 へ進む。 */

/* 表紙の後ろにスクロールの走り代を置く */
.cover-run { height: 180svh; }

.scene { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: center; gap: 2rem; padding: 4rem clamp(16px, 6vw, 96px) 5rem; color: var(--ink); overflow: hidden; }
.scene [style*="--at"] { --k: clamp(0, (var(--p, 0) - var(--at)) / var(--len, .2), 1); }
.scene-captions { position: relative; align-self: end; min-height: 6.5rem; }
.scene-caption { position: absolute; inset: auto 0 0 0; font: 500 clamp(1.15rem, 1.8vw, 1.5rem)/1.6 var(--heading); letter-spacing: .04em; opacity: 0; transform: translateY(.75rem); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.scene-caption small { display: block; margin-top: .6rem; font: 400 .75rem/1.6 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.scene-caption.on { opacity: 1; transform: none; }
.scene-stage { position: relative; height: 100%; display: grid; place-items: center; }

@media (max-width: 900px) {
  .scene { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding-bottom: 6rem; }
  .scene-captions { order: 2; align-self: start; }
}

/* 端末: 寝ている端末が起き上がり、画面が作ったものを1本ずつ映す */
.phone { --tilt: calc(1 - var(--k)); position: relative; width: min(15rem, 52vw); aspect-ratio: 600 / 1266; border: 9px solid #101114; border-radius: 2.4rem; background: #101114; overflow: hidden;
  transform: perspective(1200px) rotateX(calc(var(--tilt) * 58deg)) rotateZ(calc(var(--tilt) * -14deg)) scale(calc(1 - clamp(0, (var(--p) - .82) / .18, 1) * .3));
  box-shadow: 0 calc(10px + var(--tilt) * 40px) 60px -20px rgba(0, 0, 0, .35); }
.phone > * { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s var(--ease); }
.phone img { object-fit: cover; }
.phone .screen { background: var(--paper); align-content: center; }
.phone .screen kbd { font-size: .8rem; padding: .2rem .5rem; }
.phone .list { display: grid; gap: .9rem; padding: 1.5rem 1.25rem; font: 400 .8125rem/1.4 var(--mono); color: var(--ink-2); }
.phone .list b { font: 500 1.5rem/1 var(--heading); color: var(--ink); letter-spacing: var(--name-spacing); margin-bottom: .5rem; }
.phone .list span { padding-top: .9rem; border-top: 1px solid var(--rule); }
.scene[data-step="0"] .phone > :nth-child(1), .scene[data-step="1"] .phone > :nth-child(2), .scene[data-step="2"] .phone > :nth-child(3),
.scene[data-step="3"] .phone > :nth-child(4), .scene[data-step="4"] .phone > :nth-child(5) { opacity: 1; }

/* 名前の大きな字: 画面いっぱいの名前が縮みながら左上へ寄っていく */
.bigname { text-align: center; transform-origin: left top; transform: translate(calc(var(--k) * -24vw), calc(var(--k) * -26vh)) scale(calc(1 - var(--k) * .72)); }
.bigname b { display: block; font: 500 clamp(5rem, 19vw, 15rem)/1 var(--heading); letter-spacing: var(--name-spacing); }
.bigname i { display: block; margin-top: 1rem; font: 400 clamp(.8rem, 1.4vw, 1rem)/1 var(--heading-latin); font-style: normal; letter-spacing: .4em; text-transform: uppercase; color: var(--accent); }

/* 押せるキー: キーが順に押し込まれる。前半は呼び出しシステム、後半は Ctrl+V */
.keys { position: absolute; display: flex; gap: .9rem; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.keys + .keys, .scene[data-step="1"] .keys:first-child { opacity: 0; transform: translateY(1rem); pointer-events: none; }
.scene[data-step="1"] .keys + .keys { opacity: 1; transform: none; }
.key { min-width: clamp(4rem, 9vw, 6.5rem); padding: 1.4rem 1.6rem; font: 500 clamp(1.4rem, 3vw, 2.25rem)/1 var(--mono); text-align: center; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-2); border-radius: .6rem;
  box-shadow: 0 calc(8px - var(--k) * 6px) 0 var(--rule-2), 0 18px 30px -18px rgba(0, 0, 0, .3); transform: translateY(calc(var(--k) * 6px)); }
.key[style*="--at"] { --len: .04; }
.key.last { border-color: var(--accent); }

/* 声の波形: 波が静まり、言葉が浮かぶ */
.wave { display: flex; align-items: center; gap: clamp(3px, .5vw, 6px); height: 14rem; opacity: calc(1 - clamp(0, (var(--p) - .4) / .25, 1) * .88); }
.wave i { width: clamp(3px, .45vw, 6px); height: calc(var(--h) * (1 - var(--p) * .85) + 2px); background: var(--ink); border-radius: 99px; }
.wave i:nth-child(7n + 3) { background: var(--accent); }
.words { position: absolute; display: flex; gap: clamp(1.5rem, 5vw, 4rem); font: 500 clamp(1.5rem, 4vw, 3rem)/1 var(--heading); letter-spacing: .1em; }
.words span { opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 1.5rem)); }

/* 1本の線が字を書く: 差し色の線で名前の輪郭をなぞり、最後に塗る */
.sign { width: min(44rem, 90%); overflow: visible; }
.sign text { font: 500 220px/1 var(--heading-latin); letter-spacing: -.02em; fill: var(--ink); fill-opacity: clamp(0, (var(--p) - .7) / .2, 1); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 1400; stroke-dashoffset: calc(1400 * (1 - min((var(--p) + .1) / .7, 1))); }

/* 設計図から完成画面: 線だけの時間割に、上から実画面が満ちていく */
.draft { position: relative; width: min(15rem, 52vw); aspect-ratio: 600 / 1266; border: 1px solid var(--ink-3); border-radius: 2rem; overflow: hidden; }
.draft-lines { position: absolute; inset: 0; display: grid; grid-template-rows: 10% 7% 5% 1fr 9%; gap: 4%; padding: 0 6% 6%; }
.draft-lines > * { border: 1px dashed var(--ink-3); border-radius: 4px; }
.draft-lines > :first-child { margin-inline: -7%; border-radius: 0; border-width: 0 0 1px; }
.draft-lines .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5%; border: 0; }
.draft-lines .grid i { border: 1px dashed var(--rule-2); border-radius: 4px; }
.draft img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 calc((1 - var(--k)) * 100%) 0); }
.draft::after { content: ""; position: absolute; inset: calc(var(--k) * 100%) 0 auto; height: 1px; background: var(--accent); opacity: calc(1 - var(--k)); }

/* ターミナルから画面へ: コマンドが1行ずつ打たれ、最後に窓が実画面に替わる */
.term { width: min(34rem, 92%); background: #0f1012; color: #e6e7ea; border-radius: .6rem; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); transition: opacity .5s var(--ease); }
.term-bar { display: flex; gap: .4rem; padding: .7rem .9rem; background: #1b1c20; }
.term-bar i { width: .6rem; height: .6rem; border-radius: 50%; background: #3a3c43; }
.term pre { margin: 0; padding: 1.2rem 1.4rem 1.6rem; font: 400 clamp(.75rem, 1.3vw, .9rem)/2 var(--mono); white-space: pre-wrap; }
.term pre span { display: block; opacity: var(--k); }
.term pre span[style*="--at"] { --len: .05; }
.term pre em { font-style: normal; color: var(--accent); }
.term-shot { position: absolute; width: min(14rem, 48vw); aspect-ratio: 600 / 1266; border: 9px solid #101114; border-radius: 2.2rem; overflow: hidden; opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 3rem)); }
.term-shot img { width: 100%; height: 100%; object-fit: cover; }
.scene[data-step="2"] .term { opacity: .15; }

/* 大きな数字の 3: 3段に割れて、動いている3つのプロダクトの名前になる */
.three { position: relative; font: 600 clamp(14rem, 40vw, 30rem)/.8 var(--latin); letter-spacing: -.06em; }
.three span { display: block; }
.three span + span { position: absolute; inset: 0; }
.three { opacity: calc(1 - clamp(0, (var(--p) - .4) / .4, 1) * .8); }
.three span:nth-child(1) { clip-path: inset(0 0 66% 0); transform: translateX(calc(var(--p) * -16vw)); }
.three span:nth-child(2) { clip-path: inset(34% 0 33% 0); color: var(--accent); }
.three span:nth-child(3) { clip-path: inset(67% 0 0 0); transform: translateX(calc(var(--p) * 16vw)); }
.three-names { position: absolute; inset: auto 0 12%; display: flex; justify-content: space-between; gap: 1rem; font: 500 clamp(.9rem, 1.6vw, 1.15rem)/1.5 var(--heading-latin); }
@media (max-width: 900px) {
  .three-names { inset: auto 0 4%; flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
}
.three-names span { opacity: var(--k); }
.three-names small { display: block; font: 400 .7rem/1.6 var(--mono); color: var(--ink-3); }