/*
 * ABOUT（slug 'about'）の固定ページ。XD ボード astra_about_3 の再現。
 * 既存の about-us（3D 分解ビュー）とは別ページ。
 *
 * ## 寸法の入れかた
 *
 * このページは巨大な文字（詩 68px / DEVICE 128px）と、画面幅いっぱいに広がる
 * 図版で出来ている。他の訴求ページ（component-lp-page.css）のように px を
 * 固定すると、1920 より狭いウィンドウで詩が途中で折り返してしまう。
 *
 * そこで「XD の実寸 × 縮尺」で全部を書く。縮尺 --about-u は
 *
 *   PC: 画面幅 ÷ 1920（1920 を超えたら 1 で頭打ち）
 *   SP: 画面幅 ÷ 375（520px を超えたら 1.387 で頭打ち。タブレット幅で
 *       SP ボードの文字が育ちすぎないように）
 *
 * なので、**1920px と 375px ではデザインと 1px 単位で一致し、その間は
 * ボードごと拡大縮小したものが出る**。以下の数値はすべて XD の実寸そのまま。
 *
 * ## 書体（XD の指定どおり2つ使い分ける）
 *
 *   - 和文（詩・DEVICE の見出し・仕様の本文）… Gen Interface JP
 *   - 英字（By:ONODERA・英訳・仕様のラベル・Find Your Orbit）… Source Code Pro
 *
 * ## 背景
 *
 * 黒・光の玉・粒は全ページ共通の固定背景（hero-image-background）が描いている。
 * XD の film noise / envato の背景動画はそれと同一素材なので重ねない。
 * ページ固有なのはヒーローのワイヤーフレーム動画だけ。
 */

.about-page {
  --about-u: calc(min(100vw, 1920px) / 1920);

  /*
   * body の margin-top（固定ヘッダーの高さ）を打ち消して、ボードの y=0 を
   * 画面の上端に合わせる。トップのヒーロー（section-hero-image.css）と同じ手。
   */
  margin-top: -160px;
  overflow-x: clip;
}

/*
 * XD はどのテキストも字送り 0。テーマの見出し（base.css の h1〜h5）は
 * 0.06rem の字送りと word-break: break-word を持っていて、そのままだと
 * SP の「DEVICE」（98px）が枠に収まらず2文字目以降で改行してしまう。
 * このページの中だけ素の値に戻す。
 */
.about-page,
.about-page h1,
.about-page h2 {
  letter-spacing: normal;
  word-break: normal;
}

@media screen and (max-width: 768px) {
  .about-page {
    --about-u: calc(min(100vw, 520px) / 375);

    margin-top: -80px;
  }
}

/* ── ヒーロー ──────────────────────────────────────
 * ワイヤーフレームの動画（画面右上にはみ出す）と、その手前の巨大な ASTRA。
 * 高さはすりガラスが始まる y=807 まで。
 */
.about-hero {
  position: relative;
  height: calc(1007 * var(--about-u));
}

/*
 * ワイヤーフレームの動画。
 *
 * XD は「描画モード: スクリーン」。黒地にネオンの線という素材なので、
 * スクリーンで重ねると黒が抜けて背景の光の玉が透ける。**ここで
 * position/opacity/filter を足して重ね合わせコンテキストを作ると、
 * 混色の相手が背景動画ではなくこの要素の中だけになり、黒い長方形が
 * そのまま出る**。z-index は付けないこと。
 *
 * 背景画像は動画の1コマ。自動再生が拒否された端末ではこれが残る
 * （about-wire-video.js が video を外す）。
 */
.about-hero__wire {
  position: fixed;
  top: calc(-339 * var(--about-u));
  left: calc(854 * var(--about-u));
  width: calc(1278 * var(--about-u));
  height: calc(1598 * var(--about-u));
  background-image: url('img/about-wire-poster.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 動画が動き出したら下の静止画を消す（二重写しで明るくなるのを避ける）。 */
.about-hero__wire.is-playing {
  background-image: none;
}

.about-hero__wire-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 動きを減らす設定のときは静止画のまま見せる。 */
@media (prefers-reduced-motion: reduce) {
  .about-hero__wire-video {
    display: none;
  }
}

/*
 * 巨大な ASTRA。XD は白のロゴを「描画モード: オーバーレイ」で敷いてあり、
 * 後ろの光の玉の色を拾って赤〜黄のグラデーションに見える。単なる灰色の
 * 文字ではないので、色を決め打ちにせずオーバーレイのまま出す。
 */
.about-hero__wordmark {
  position: absolute;
  top: calc(540 * var(--about-u));
  left: calc(24.09 * var(--about-u));
  width: calc(1846.21 * var(--about-u));
  margin: 0;
  opacity: 0.996;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.about-hero__wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .about-hero {
    height: calc(610.3 * var(--about-u));
  }

  .about-hero__wire {
    top: calc(85 * var(--about-u));
    left: calc(-33 * var(--about-u));
    width: calc(442 * var(--about-u));
    height: calc(553 * var(--about-u));
  }

  .about-hero__wordmark {
    top: calc(129.6 * var(--about-u));
    left: calc(9 * var(--about-u));
    width: calc(357 * var(--about-u));
  }
}

/* ── すりガラスの板 ────────────────────────────────
 * XD の「長方形 5583」＝背景ぼかし 13.76 / 明るさ −34.7（塗りは不透明度 0）。
 * ヒーローの動画と全画面の背景動画が、この板ごしににじんで見える。
 *
 * z-index を持たせるのは、ヒーローの中で絶対配置している動画より必ず
 * 手前に描かせるため（絶対配置は通常フローより後ろに描かれない）。
 * backdrop-filter が効かないブラウザでは何も起きないだけで崩れない。
 */
.about-glass {
  position: relative;
  z-index: 1;
  padding-block: calc(270.7 * var(--about-u)) calc(416 * var(--about-u));
  backdrop-filter: blur(calc(13.76 * var(--about-u))) brightness(0.65);
  -webkit-backdrop-filter: blur(calc(13.76 * var(--about-u))) brightness(0.65);
}

@media screen and (max-width: 768px) {
  .about-glass {
    padding-block: calc(80.7 * var(--about-u)) calc(92.7 * var(--about-u));
  }
}

/* ── 詩 ───────────────────────────────────────── */
.about-poem__ja,
.about-poem__by,
.about-poem__en {
  margin-inline: auto;
  text-align: center;
  color: #fff;
}

/*
 * 枠は XD が 1150。旧13行目「でも、あなたの星は、すでにオンラインだ。」は
 * 1227 必要で、1150 だと2行に折れるため 1240 まで広げていた。
 *
 * コピー差し替え後は4行目「売っているのは単なるベイプではなく空気感。」
 * （21文字、旧最長行より1文字長い）が最長行になり、1240 でも折り返す。
 * 1240 → 1300 へ再度広げてある（ファイル冒頭の page-about.php の説明を参照）。
 * SP は元の幅のまま1行に収まるので変更していない。
 */
.about-poem__ja {
  width: min(100% - 48px, calc(1300 * var(--about-u)));
  margin-block: 0;
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-bold);
  font-size: calc(68 * var(--about-u));
  line-height: calc(86 * var(--about-u));
}

.about-poem__by {
  width: min(100% - 48px, calc(762 * var(--about-u)));
  margin-block: calc(29 * var(--about-u)) 0;
  font-family: var(--astra-source-code-pro);
  font-weight: var(--astra-font-weight-regular);
  font-size: calc(26 * var(--about-u));
  line-height: calc(22 * var(--about-u));
}

.about-poem__en {
  width: min(100% - 48px, calc(762 * var(--about-u)));
  margin-block: calc(73 * var(--about-u)) 0;
  font-family: var(--astra-source-code-pro);
  font-weight: var(--astra-font-weight-regular);
  font-size: calc(16 * var(--about-u));
  line-height: calc(22 * var(--about-u));
}

@media screen and (max-width: 768px) {
  .about-poem__ja {
    width: min(100% - 16px, calc(379 * var(--about-u)));
    font-size: calc(18 * var(--about-u));
    line-height: calc(25 * var(--about-u));
  }

  .about-poem__by {
    width: min(100% - 24px, calc(225 * var(--about-u)));
    margin-block-start: calc(6 * var(--about-u));
    font-size: calc(12 * var(--about-u));
  }

  .about-poem__en {
    width: min(100% - 24px, calc(309 * var(--about-u)));
    margin-block-start: calc(32 * var(--about-u));
    font-size: calc(9 * var(--about-u));
    line-height: calc(15 * var(--about-u));
  }
}

/* ── ポートレート ──────────────────────────────────
 * PC は 1588×768（左右 166 の余白）、SP は画面幅いっぱいの 376×263。
 * 切り抜きが違うので画像を2枚に分けている（<picture> で出し分け）。
 */
.about-figure {
  width: min(100% - 64px, calc(1588 * var(--about-u)));
  margin: calc(71.7 * var(--about-u)) auto 0;
}

.about-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .about-figure {
    width: 100%;
    margin-top: calc(96.5 * var(--about-u));
  }
}

/* ── DEVICE ───────────────────────────────────── */
.about-device {
  margin-top: calc(223.8 * var(--about-u));
}

/*
 * PC は左に本体の写真、右に見出しと仕様。写真は2行ぶんの高さをまたぐので
 * グリッドの領域で組む（SP は見出し → 写真 → 仕様 の1列に組み替える）。
 */
.about-device__inner {
  display: grid;
  grid-template-areas:
    'media title'
    'media specs';
  grid-template-columns: calc(292 * var(--about-u)) 1fr;
  grid-template-rows: auto 1fr;
  column-gap: calc(108 * var(--about-u));
  align-items: start;
  width: calc(1368 * var(--about-u));
  /* XD は中央寄せではない（左 249 / 右 303）。左端を実寸で合わせる。 */
  margin-inline: calc(249 * var(--about-u)) auto;
}

.about-device__media {
  grid-area: media;
  opacity: 0.694;
}

.about-device__media img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * 「DEVICE」は塗り無し・#707070 の1px 縁取り（XD の fill: none + stroke）。
 * text-stroke が使えないブラウザでは塗りつぶしの文字として出す。
 */
.about-device__title {
  grid-area: title;
  margin: calc(40.4 * var(--about-u)) 0 calc(93.9 * var(--about-u));
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-bold);
  font-size: calc(128 * var(--about-u));
  line-height: calc(86 * var(--about-u));
  color: #707070;
}

@supports (-webkit-text-stroke: 1px #000) {
  .about-device__title {
    color: transparent;
    -webkit-text-stroke-width: calc(1 * var(--about-u));
    -webkit-text-stroke-color: #707070;
  }
}

.about-device__specs {
  display: grid;
  grid-area: specs;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(98 * var(--about-u));
  /*
   * XD の行間は 130〜173 とばらついている（テキスト枠の高さがまちまちなため）。
   * 見た目のリズムを揃えたいので、その中間の一定値で並べている。
   */
  row-gap: calc(140 * var(--about-u));
  margin: 0;
}

.about-spec__label {
  margin: 0;
  font-family: var(--astra-source-code-pro);
  font-weight: var(--astra-font-weight-light);
  font-size: calc(20 * var(--about-u));
  line-height: calc(25 * var(--about-u));
  text-transform: uppercase;
  color: #fff;
}

.about-spec__body {
  margin: calc(23.2 * var(--about-u)) 0 0;
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-medium);
  font-size: calc(29 * var(--about-u));
  line-height: calc(30 * var(--about-u));
  color: #cbcbcb;
}

@media screen and (max-width: 768px) {
  .about-device {
    margin-top: calc(93.3 * var(--about-u));
  }

  /*
   * SP は 見出し → 本体 → 仕様 の1列。左端は XD の実測（見出し 6 /
   * 本体 16 / 仕様 38）。見出しの枠を狭くすると 98px の「DEVICE」が
   * 2行に折れるので、枠は見出しに合わせて広く取り、中の2つを字下げする。
   */
  .about-device__inner {
    grid-template-areas:
      'title'
      'media'
      'specs';
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    width: calc(363 * var(--about-u));
    margin-inline: calc(6 * var(--about-u)) auto;
  }

  .about-device__title {
    margin: 0 0 calc(15.8 * var(--about-u));
    font-size: calc(98 * var(--about-u));
  }

  /*
   * SP は本体を横倒しにする（XD の 90 度回転）。回した後の見え方が
   * 340.7×100 になるよう、枠の側にその寸法を持たせて中身だけ回している。
   */
  .about-device__media {
    position: relative;
    width: calc(340.7 * var(--about-u));
    height: calc(100 * var(--about-u));
    margin-left: calc(10 * var(--about-u));
    margin-bottom: calc(76.9 * var(--about-u));
  }

  /*
   * 回しても行取りは縦のまま（transform は配置に影響しない）なので、
   * 枠の中央に絶対配置してから回す。通常フローに置くと、回す前の
   * 340px ぶんが下の仕様欄を押しのける／重なる。
   */
  .about-device__media img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100 * var(--about-u));
    transform: translate(-50%, -50%) rotate(-90deg);
  }

  .about-device__specs {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(48 * var(--about-u));
    width: calc(302 * var(--about-u));
    margin-left: calc(32 * var(--about-u));
  }

  .about-spec__label {
    font-size: calc(13 * var(--about-u));
    line-height: calc(17 * var(--about-u));
  }

  .about-spec__body {
    margin-top: calc(13 * var(--about-u));
    font-size: calc(14 * var(--about-u));
    line-height: calc(17 * var(--about-u));
  }
}

/* ── 軌道の図版 + CTA ─────────────────────────── */
.about-orbit {
  margin-top: calc(207.7 * var(--about-u));
  text-align: center;
}

.about-orbit__art {
  display: block;
  width: calc(1066.44 * var(--about-u));
  max-width: calc(100% - 48px);
  height: auto;
  margin-inline: auto;
}

.about-orbit__title {
  margin: calc(45.7 * var(--about-u)) 0 0;
  font-family: var(--astra-source-code-pro);
  font-weight: var(--astra-font-weight-regular);
  font-size: calc(72 * var(--about-u));
  line-height: calc(91 * var(--about-u));
  color: #fff;
}

.about-orbit__lead {
  margin: calc(11 * var(--about-u)) 0 0;
  font-family: var(--astra-gen-interface-jp);
  font-weight: var(--astra-font-weight-semibold);
  font-size: calc(52 * var(--about-u));
  line-height: calc(75 * var(--about-u));
  color: #fff;
}

/*
 * ボタンは共通部品（.lp-button）。寸法だけこのページの縮尺に合わせる。
 * 左右の余白は XD の実測（文字の左端 70 / 矢印の右端 35.1）。
 */
.about-orbit__button {
  min-width: calc(319 * var(--about-u));
  min-height: calc(66 * var(--about-u));
  margin-top: calc(44 * var(--about-u));
  padding: 0 calc(35.1 * var(--about-u)) 0 calc(70 * var(--about-u));
  font-size: calc(17 * var(--about-u));
}

.about-orbit__button svg {
  width: calc(57 * var(--about-u));
}

/* PC では「アイテム一覧」。SP だけ「へ」が付く。 */
.about-orbit__button-suffix {
  display: none;
}

@media screen and (max-width: 768px) {
  .about-orbit {
    margin-top: calc(60 * var(--about-u));
  }

  .about-orbit__art {
    width: calc(292 * var(--about-u));
  }

  .about-orbit__title {
    margin-top: calc(14.3 * var(--about-u));
    font-size: calc(20 * var(--about-u));
    line-height: calc(25 * var(--about-u));
  }

  .about-orbit__lead {
    margin-top: calc(13.5 * var(--about-u));
    font-size: calc(13 * var(--about-u));
    line-height: calc(18 * var(--about-u));
  }

  /* SP の XD には矢印が無く、文字だけを中央に置いている。 */
  .about-orbit__button {
    min-width: calc(268 * var(--about-u));
    min-height: calc(55 * var(--about-u));
    margin-top: calc(47.3 * var(--about-u));
    padding: 0 calc(24 * var(--about-u));
    font-size: calc(14 * var(--about-u));
    justify-content: center;
  }

  .about-orbit__button svg {
    display: none;
  }

  .about-orbit__button-suffix {
    display: inline;
  }
}