/* 自社媒体サイトのテーマ — 配色・書体・タイポサイズ、および第1部のノートPC
 *
 * 骨格（章・背景メディア層・コピー層）は _kit/style-base.css。
 * ここはこのサイト固有の声と、_kit に無い新機能（ノートPCと画面の中身）だけを持つ。
 * 色の実値は書かない。すべて config.js の palette から CSS 変数で届く。
 *
 * 5本での差別化:
 *   sample01      暗 / 細身サンセリフ 400   / 線のピル
 *   sample-gym    暗 / 極太コンデンス 800   / 塗りのピル
 *   sample-dining 暗 / セリフ 600           / 角の枠線
 *   sample-cafe   明 / 幾何学サンセリフ 500 / 下線だけ
 *   ここ          暗 / ★等幅 700           / ★角丸6pxの塗り＋左端3pxのアクセントバー
 *
 * vh / dvh / svh / lvh は使わない。実サイズは _kit が配る --vpx。
 */

html, body {
  background: var(--c-bg, #000);
}

body {
  color: var(--c-ink);
  font-family: var(--f-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* ------------------------------------------------------------ タイポ */
/* 等幅体。字面が均一なので、字間を詰めずに素のまま置く */

.headline {
  font-family: var(--f-display);
  font-weight: var(--f-display-weight, 700);
  line-height: 1.24;
  letter-spacing: -.02em;
  font-size: clamp(1.7rem, 6.4vw, 4.4rem);
  color: var(--c-ink);
}

.headline--hero { font-size: var(--hero-size, clamp(2.2rem, 13vw, 8rem)); letter-spacing: -.045em; }

.sub {
  font-size: clamp(.95rem, 3.4vw, 1.15rem);
  color: var(--c-ink);
  line-height: 1.9;
}

/* 行頭にアクセントの短い罫。等幅体と相性がよい */
.tagline {
  font-size: clamp(.9rem, 3.2vw, 1.1rem);
  color: var(--c-ink);
  font-family: var(--f-display);
  letter-spacing: -.01em;
  border-left: 3px solid var(--c-accent);
  padding-left: .75em;
}

/* ★5本目の CTA は「角丸6pxの塗り＋左端3pxのアクセントバー」。既存4種と別の形 */
.cta {
  border: 0;
  border-left: 3px solid var(--c-accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-accent) 20%, transparent);
  color: var(--c-ink);
  font-family: var(--f-display);
  font-size: clamp(.9rem, 3.2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -.01em;
}
.cta:hover, .cta:focus-visible { background: color-mix(in srgb, var(--c-accent) 34%, transparent); color: var(--c-ink); }

.stage--static .headline { font-size: clamp(1.6rem, 5.4vw, 3.2rem); }

/* 最後の章。1画面ぶんの高さが無いとハッシュ遷移（#S11）で着地しきれない（G13） */
.chapter:last-of-type { min-height: var(--vpx, 800px); }

.footnote {
  border-top: 1px solid color-mix(in srgb, var(--c-accent2) 40%, transparent);
  font-size: .8rem;
  color: var(--c-ink);
}

/* ================================================================== */
/* 第1部 — 机の上のノートパソコン（_kit に無い新機能）                */
/* 背景メディア層より上、コピー層より下に置く                          */
/* ================================================================== */

.lp3d {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
}

/* 位置と大きさは laptop3d.js がレイアウト時に px で入れる（毎フレームは触らない） */
.lp3d__frame {
  position: absolute;
  display: block;
}

.lp3d__scene {
  position: absolute;
  inset: 0;
  perspective-origin: 50% 78%;
}

.lp3d__unit {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt, 70deg));
  transform-origin: 50% 100%;
}

/* 天板。机に伏せた面。金属の反射をグラデーションで作る */
.lp3d__deck {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px 4px 8px 8px;
  background:
    linear-gradient(184deg,
      color-mix(in srgb, var(--c-ink) 13%, transparent) 0%,
      color-mix(in srgb, var(--c-ink) 5%, transparent) 42%,
      color-mix(in srgb, var(--c-bg) 92%, transparent) 100%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--c-ink) 22%, transparent) inset;
}

.lp3d__keys {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 12%;
  height: 42%;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--c-ink) 9%, transparent) 0 6.6%,
      transparent 6.6% 7.6%),
    repeating-linear-gradient(180deg,
      color-mix(in srgb, var(--c-ink) 7%, transparent) 0 22%,
      transparent 22% 25%);
  opacity: .85;
}

.lp3d__pad {
  position: absolute;
  left: 36%;
  right: 36%;
  bottom: 9%;
  height: 22%;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--c-ink) 14%, transparent);
}

/* 蓋。hinge は下辺。開き角は laptop3d.js が rotateX で入れる */
.lp3d__lid {
  position: absolute;
  left: 0;
  right: 0;
  transform-origin: 50% 100%;
  transform: rotateX(0deg);
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(176deg,
      color-mix(in srgb, var(--c-ink) 11%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 88%, transparent) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-ink) 16%, transparent);
  backface-visibility: hidden;
}

/* 画面。点灯量は opacity で入る */
.lp3d__glass {
  position: absolute;
  left: 4.5%;
  right: 4.5%;
  top: 5%;
  bottom: 8%;
  border-radius: 3px;
  overflow: hidden;
  /* 画面の中の文字は「画面の幅」を基準にする。ビューポート幅ではない */
  container-type: inline-size;
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb, var(--c-accent) 22%, transparent) 0%,
      transparent 62%),
    color-mix(in srgb, var(--c-bg) 96%, transparent);
  opacity: 0;
}

.lp3d__view {
  position: absolute;
  inset: 0;
}

/* -------------------------------------------- 画面の中身（S2 / S3 / S4） */

.lpc {
  position: absolute;
  inset: 0;
  overflow: clip;
}

.lpc--code { padding: 4% 5%; }

.lpc__lines {
  position: relative;
  font-family: var(--f-display);
  font-size: clamp(3px, 1.55cqw, 13px);
  line-height: 1.5;
  letter-spacing: 0;
  white-space: pre;
  color: color-mix(in srgb, var(--c-ink) 82%, transparent);
}

.lpc__line { display: block; }

.lpc__num {
  display: inline-block;
  width: 2.4em;
  text-align: right;
  padding-right: .9em;
  color: color-mix(in srgb, var(--c-accent2) 70%, transparent);
}

.lpc__text { color: color-mix(in srgb, var(--c-ink) 88%, transparent); }

.lpc__caret {
  position: absolute;
  left: 3.3em;
  top: 0;
  width: .6em;
  height: 1.5em;
  background: var(--c-accent);
  opacity: 0;
}

/* S3 ワイヤーフレーム */
.lpc--wire {
  padding: 7% 8%;
  display: flex;
  flex-direction: column;
  gap: 4%;
  opacity: 0;
}

.lpc__box {
  border: 1px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
  opacity: 0;
}
.lpc__box--0 { flex: 2 1 0; }
.lpc__box--1 { flex: 1 1 0; }
.lpc__box--2 { flex: 1.4 1 0; }

/* S4 実物のページ */
.lpc--live { opacity: 0; }

.lpc__reel {
  position: absolute;
  inset: 0 0 auto;
  /* 高さを確定させる。確定しないと子の % 高さが auto に落ちて潰れる */
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}

.lpc__panel {
  position: relative;
  flex: 0 0 62%;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 10%, transparent);
}
.lpc__panel--0 { background: linear-gradient(160deg, color-mix(in srgb, var(--c-accent) 26%, transparent), transparent 74%); }
.lpc__panel--1 { background: linear-gradient(200deg, color-mix(in srgb, var(--c-accent2) 22%, transparent), transparent 70%); }
.lpc__panel--2 { background: linear-gradient(140deg, color-mix(in srgb, var(--c-ink) 12%, transparent), transparent 66%); }

.lpc__bar {
  position: absolute;
  left: 9%;
  top: 28%;
  width: 46%;
  height: 7%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--c-ink) 72%, transparent);
}

.lpc__hair {
  position: absolute;
  left: 9%;
  top: 46%;
  width: 66%;
  height: 3%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--c-ink) 34%, transparent);
}

/* ================================================================== */
/* 第3部 — 制作サンプルのレール（S9）と数字（S10）                     */
/* ================================================================== */

/* レールの窓。はみ出したぶんはトラックの transform で送る */
.rail {
  position: relative;
  overflow: clip;
  /* _kit はコピー層の直下を触れないようにしているが、カードは開けるようにする */
  pointer-events: auto;
}

.rail__track {
  display: flex;
  gap: clamp(.9rem, 3vw, 1.6rem);
  will-change: transform;
}

.rail__card {
  flex: 0 0 auto;
  width: clamp(15rem, 62vw, 21rem);
  text-decoration: none;
  color: var(--c-ink);
  border-top: 2px solid color-mix(in srgb, var(--c-accent) 60%, transparent);
  padding-top: .85rem;
}

.rail__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: color-mix(in srgb, var(--c-ink) 8%, transparent);
}

.rail__category {
  margin: .8rem 0 .2rem;
  font-size: .8rem;
  letter-spacing: .04em;
  /* ★accent2 は地の上で 4.5:1 に届かないので文字色に使わない（罫・下線だけ） */
  color: color-mix(in srgb, var(--c-ink) 84%, transparent);
}

.rail__brand {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--f-display-weight, 700);
  font-size: clamp(1rem, 3.6vw, 1.25rem);
  letter-spacing: -.02em;
  color: var(--c-ink);
}

.rail__open {
  display: inline-block;
  margin-top: .55rem;
  font-size: .76rem;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--c-ink) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
}

.rail__card:hover .rail__open, .rail__card:focus-visible .rail__open {
  border-bottom-color: var(--c-ink);
}

/* 数字 */
.counts {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem clamp(1.5rem, 6vw, 3.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 44rem;
}

.count__label {
  margin: 0 0 .25rem;
  font-size: .8rem;
  letter-spacing: .05em;
  color: color-mix(in srgb, var(--c-ink) 84%, transparent);
}

.count__value {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--f-display-weight, 700);
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--c-ink);
  /* 桁が増えても幅が動かない＝毎フレームの再レイアウトを起こさない */
  font-variant-numeric: tabular-nums;
}

.count__affix { font-size: .52em; letter-spacing: 0; padding: 0 .18em; }

@media (min-width: 768px) {
  .counts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 広い画面では1枚を大きく見せる。4枚でも画面に収まりきらず、レールが実際に動く */
  .rail__card { width: clamp(20rem, 32vw, 30rem); }
}

/* --------------------------------------- 演出を止めるときのふるまい */
/* ノートPCは装飾なので、reduced-motion では出さない。
   本文・見出し・CTA は _kit 側が素の状態で読めるようにしている（O5） */

@media (prefers-reduced-motion: reduce) {
  .lp3d { display: none; }
  /* ★レールは縦積みに切り替えて全カードを見せる（O5） */
  .rail { overflow: visible; }
  .rail__track { flex-direction: column; transform: none !important; }
  .rail__card { width: auto; max-width: 26rem; }
}

.is-static .lp3d { display: none; }