/* RONDO — 段
   このファイルだけが値を持つ。ほかの CSS に生の数値と色を書かない。
   段に無い値が欲しくなったら、まず docs/DESIGN.md を直してからここに足す (実測の内訳は §2〜§4)。 */

:root {
    /* 色
       紙と墨の 2 つだけ。灰色も半透明も持たない。
       強さの差は、大きさと太さと、面の反転で付ける。 */
    --paper: #ffffff;
    --ink: #000000;

    /* 面。既定は紙。.on-ink を付けた節では根ごと入れ替わる */
    --surface: var(--paper);
    --fg: var(--ink);
    --rule: var(--fg);

    /* 書体 */
    --font: "Helvetica Neue", Helvetica, "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    /* 和文の詰め。ヒラギノのプロポーショナル字形 (palt) で、
       かなと約物のアキを字ごとに詰める。欧文の Helvetica は持たないので影響しない */
    --font-feature-text: "palt";
    /* グローバルメニュー専用。中身は英字だけなので、和文書体へ落ちる道を残さない。
       --font のままだと、環境によっては Hiragino が拾われて字形が変わる。 */
    --font-nav: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* 太さは 2 段だけ。見出しとキャッチは太字、それ以外は標準。
       ヒラギノの W8・W9 は太字より黒く詰まって見え、大見出しの太字と並ぶと別の書体に見えるので、800・900 は持たない */
    --weight-normal: 400;
    --weight-bold: 700;

    /* 文字の大きさ
       label は英字の大文字ラベル専用で、下限は 11px。和文に使わない。 */
    /* 画面の幅いっぱいに 2 行で組む見出し (主要な機能)。長いほうの行 (one map.) が
       文字の大きさの約 4.0 倍の幅になるので、本文の幅の 0.248 倍にすると端まで届く */
    --text-display-xl: min(calc((100vw - 2 * var(--gutter-x)) * 0.248), 32rem);
    --text-display-1: clamp(3.2rem, 8.5vw, 9.6rem);
    --text-display-2: clamp(3rem, 7vw, 7.6rem);
    --text-display-3: clamp(2.8rem, 6vw, 6.2rem);
    --text-display-4: clamp(2.4rem, 5.5vw, 5.5rem);
    --text-display-5: clamp(2.4rem, 4.6vw, 4.6rem);
    --text-display-6: clamp(2rem, 3.8vw, 3.8rem); /* 和文の特大の一段下。欧文のキャッチの下に置く見出し (メモリー) */
    --text-title: clamp(1.8rem, 2.6vw, 2.6rem);
    --text-subtitle: 1.8rem;
    --text-lead: clamp(1.05rem, 1.4vw, 1.25rem);
    --text-body-lg: 1.15rem;
    --text-body: 1.05rem;
    --text-body-sm: 0.95rem;
    --text-label: 13px;
    --text-label-sm: 12px;
    --text-label-xs: 11px;

    /* 行送り
       和文に 1.7 より詰めた値を当てない。仮名も漢字も字面いっぱいまで詰まっているので、
       欧文と同じ行送りにすると行が団子になる。--leading-display は欧文の特大専用。 */
    --leading-display: 0.95;
    --leading-display-xl: 0.8; /* 画面の幅いっぱいの見出し。大きすぎて 0.95 では行が離れて見える */
    --leading-tight: 1.08;
    --leading-heading: 1.4;
    --leading-heading-jp: 1.5; /* 和文の見出し (機能とメモリー)。1.08 と 1.4 では、本文の 1.8 と並べて詰まって見える */
    --leading-snug: 1.7;
    --leading-body: 1.75;
    --leading-body-jp: 1.8;
    --leading-list: 2.2;

    /* 字間
       大きいほど詰める。空けてよいのは英字の小ラベルだけで、和文の本文には当てない。 */
    /* 欧文の大見出し。-0.04em では Helvetica の字間が開いて見える */
    --tracking-display: -0.055em;
    /* 同じ大見出しの段に入る和文 (ファーストビューのキャッチ)。欧文に合わせて詰めない */
    --tracking-display-ja: -0.04em;
    /* 1 行で流す文字の帯 (端末の舞台の下)。画面の幅に収めず、はみ出させて横へ流す */
    --text-typeline: clamp(4.5rem, 10vw, 13rem);
    --tracking-title: -0.03em;
    --tracking-tight: -0.02em;
    --tracking-none: 0;
    --tracking-label: 0.04em;
    --tracking-label-wide: 0.08em;
    --tracking-label-xwide: 0.12em;

    /* 余白
       部品の中と、版面の高さを別の軸にしてある。
       中間の値を作らない。1.3rem が欲しくなったら 1.2 と 1.5 のどちらが正しいかを考える。 */
    --space-1: 0.4rem;
    --space-2: 0.6rem;
    --space-3: 0.8rem;
    --space-4: 1.2rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3.5rem;

    --gutter-x: 2.5rem;
    --section-y-sm: 4rem;
    --section-y: 6rem;
    --section-y-lg: 8rem;
    --section-y-xl: 10rem;
    --gap-col: 4rem;
    --gap-col-lg: 5rem;
    --gap-col-xl: 6rem;
    --page-max: 1680px;

    /* 行長は字数で決める。px で書かない
       em は要素の文字サイズ基準なので、大きさが違っても同じ字数で折り返す。
       36em / 40em のように場所ごとの値を書き足さない。 */
    --measure-hero: 15em; /* 2 文の見出し */
    --measure-display: 18em;
    --measure-text: 34em; /* 本文・リード・注記。ぜんぶ共通 */
    --measure-wide: 53em; /* 2 段組の中に置く長めの本文 */

    /* 罫・角丸・影・押せるもの */
    --rule-w: 1px;

    /* 角丸は押せるものと画面の複製にだけ。文章の入った箱を丸めない */
    --radius-figure: 16px;
    --radius-pill: 999px;
    --radius-round: 50%;

    /* 影は持たない。影は灰色になるので、白と黒だけの版面に置けない */

    --tap-size: 44px; /* 押せるものの最小。下回らない */
    --tap-reach: 12px; /* 一覧のリンクの、押せる範囲を文字の左右へ広げる幅。押したときに右へ寄せる 8px より広くする */
    --control-size: 36px; /* 天面の丸ボタン */
    --control-icon: 18px;
    --space-nav-sp: 16px; /* スマホの天面のボタンのあいだ。余白の段とは別に、指定どおりの値で持つ */
    --icon-fact: 3rem; /* Platform の枡の頭に置くアイコン */
    --feature-h: clamp(24rem, 52vw, 46rem); /* 主要な機能の、図形と端末を置く場所の高さ */
    /* 主要な機能が 1 列の幅 (481〜1024px) で、2 台を重ねる量。端末の幅に対する割合。
       PC の重なり (1280px 幅で、端末 333px に 34px) と同じ 1 割にする */
    --feature-phone-overlap: 0.1;
    --phone-figure-w: 280px; /* 使い方の画面写真の端末の幅 (縁を含む) */
    /* ファーストビューのロゴ (asset_22.svg) の縦横比。画像が届く前から高さを決めておく。
       オープニングの覆いも同じ比で組み、最後のコマでロゴと罫線の位置を合わせる */
    --logo-ratio: 305.74 / 75;
    /* 平らに置く端末 (主要な機能) の黒い縁。端末の幅に対する割合。
       0.55rem の固定だと、狭い画面で端末だけが縮み、縁が太く見える */
    --device-bezel-ratio: 0.024;
    /* 端末の画面の角の丸み。画面の幅に対する割合。
       iPhone 18 Pro のシミュレータの画面写真 (1206px 幅) で、下からせり上がるシートの角を測った。
       画面の角は円ではなく緩い曲線で、円で近づけると半径 195px (16.2%) になる。
       端末の縁の角は、この丸みに縁の太さを足して同心にする (home.css の .feature-phone)。
       3D の端末は home.js が同じ形 (幅 110.2 に 19.6 の二次曲線の角) で描いていて、こちらと合っている */
    --screen-radius-ratio: 0.162;
    /* メモリーの 3 台を横に収めるときの余白。1 より大きいと左右が空き、小さいと左右が画面の端で切れる。
       home.js の aimCamera が canvas から読む */
    --memory-fit-x: 1.06;
    /* 上下の余白。漂う揺れとマウスの傾きのぶん。home.js の aimCamera が読む */
    --memory-fit-y: 1.06;
    /* 3 台の開き方。0 は枠の縦横比に合わせて自動で寄せる。1 は寄せずに開いたまま。home.js の layoutDevices が読む */
    --memory-spread: 0;
    --abstract-scale: 1; /* SEDIMENT の 3D の図形の大きさ。home.js がカメラの距離に直す */
    --memory-canvas-ratio: 2; /* スマホでのメモリーの 3D の高さ。画面の幅に対する割合。低いと上下で先に止まり、左右まで大きくならない */
    --memory-canvas-max: 900px; /* その高さの上限。600〜767px の幅で伸びすぎないように */
    /* タブレットの幅 (1 列) でのメモリーの 3D の高さ。キャプション込み。
       画面の幅に比例させ、768〜1024px のどの幅でも同じ見え方にする */
    --memory-stage-h-tab: calc(100vw * 1.17);
    --memory-word-w: calc(var(--text-title) * 4.4); /* メモリーの一覧の英字の列。いちばん長い Category が収まる幅 */

    /* 動きと重なり */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.15s;
    --dur: 0.2s;
    --dur-slow: 0.25s;
    --stagger: 0.12s; /* 並んだものを順に出すときの、1 つぶんの遅れ */

    /* 文字を 1 行ずつ下から出す (site.js の bootLines)。行ごとの遅れと、1 行が上がりきるまで。
       動きは selora.modulify.website に合わせる。行の 126% 下から、3° 傾けて透明で始め、1 秒で真っすぐ不透明に戻す。
       文字に添う罫も同じ緩急で、左から右へ 0.9 秒で伸ばす */
    --dur-line: 1s;
    --dur-rule: 0.9s;
    --line-stagger: 0.1s;
    --ease-line: cubic-bezier(0.19, 1, 0.22, 1);

    /* 押したとき・載せたときの手応え。
       ease-pop は勢いよく出てゆっくり止まる。ease-snap は少し行き過ぎて戻る。
       控えめだと「効いていない」ように見えるので、はっきり付ける */
    --dur-pop: 0.4s;
    --ease-pop: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-snap: cubic-bezier(0.34, 1.4, 0.64, 1);

    /* オープニング (トップ・初回だけ。docs/DESIGN.md §5.4.1)。時刻は覆いが最初に描かれたときから数える。
       ロゴの下の罫線の高さに線を引き、3 回渡るたびに図形が積もる。3 回目に積もる 6 つがロゴの形で、ロゴから上が 0.6 秒だけ黒に反転する。
       線を引く 1 回目だけは等速 (歩く速さ)。ほかは点くか消えるかだけで、途中の段を作らない */
    --op-start: 100ms;       /* 線を引き始める */
    --op-drop-lag: 40ms;     /* 線が通ってから図形が点くまで */
    --op-pass-1: 800ms;      /* 1 回目 (線を引く) にかける時間 */
    --op-pass-2-at: 950ms;   /* 2 回目の波が左端を出る */
    --op-wave-2: 550ms;      /* 2 回目の波が右端へ着くまで */
    --op-pass-3-at: 1500ms;  /* 3 回目の波が左端を出る */
    --op-wave-3: 400ms;
    --op-invert-at: 2150ms;  /* ロゴから上が黒に反転する */
    --dur-invert: 0.6s;      /* 反転している長さ。目次から飛んだ先の見出し (components.css の arrive) と共有 */
    --op-letter-at: 80ms;    /* 反転してから R が点くまで */
    --op-letter-step: 60ms;  /* R・O・N・D・O を 1 つずつ点ける間 */
    /* 蛍光灯の拍。home.js の BLINK_BEATS の [0] と [2]、穴を開けるときの拍。
       拍の刻みはそれぞれの keyframes (home.css) が持つので、ここを変えたら両方直す */
    --lamp-a: 128ms;
    --lamp-c: 190ms;
    --lamp-holes: 96ms;
    /* 保険。JS が止まっても、この時刻で覆いを外してヘッダーを戻す */
    --op-failsafe: 3.5s;
    --op-failsafe-js: 3400ms;
    /* 開いたあとの 3D。スクロールの進みで 0.3 のところから 0 へ戻して落ち着かせる。
       図形は奥から 60ms おきに点ける。画面の広さの 3% より大きく見えるものは、ちらつかせずに 1 コマで点ける */
    --op-scene-from: 0.3;
    --op-scene-step: 60ms;
    --dur-op-scene: 1.4s;
    --op-scene-big: 0.03;

    --z-canvas: 10;
    --z-overlay: 20;
    --z-nav: 999;
    --z-menu: 1000;
    --z-opening: 1100;

    /* 404 のページ。404.html と lost.css だけが読む。docs/DESIGN.md §5.8
       404 を Helvetica の太字で、幅いっぱいに置く。Helvetica Neue Bold で字間 -0.02em のとき、404 の字形の幅は 1.595em、左の余白は 0.016em (canvas で測った)。
       幅 ÷ 1.595 で本文の端から端まで届く。高さでは、404 と罫線が最初の画面に収まるところまでだけ抑える */
    --lost-top: calc(var(--section-y-sm) + var(--space-6));
    --lost-code-leading: 0.78; /* 数字の高さ (0.71em) に近づけ、罫線に足を着ける */
    --lost-code-tracking: -0.02em; /* 大見出しの -0.055em では、太字の数字どうしが重なった */
    --lost-code-size: min(calc(100cqw / 1.595), calc((100svh - var(--lost-top) - 4rem) / 0.78));
    --lost-code-shift: -0.016em; /* 4 の左の字形の余白。これで字形の左端が本文の左端にそろう */
}

/* 面の反転
   墨の面に入ったら、色を 1 つずつ上書きするのではなく根を差し替える。
   部品の側は --fg と --rule を見るだけでよく、面のことを知らなくていい。
   面は節ごとに決める。ページ全体の明暗という軸は持たない。 */
.on-ink {
    --surface: var(--ink);
    --fg: var(--paper);
    --rule: var(--paper);

    background-color: var(--surface);
    color: var(--fg);
}

/* 暗い地の上に、紙の面をもう一度作りたいとき */
.on-paper {
    --surface: var(--paper);
    --fg: var(--ink);
    --rule: var(--ink);

    background-color: var(--surface);
    color: var(--fg);
}

/* 主要な機能が 1 列になる幅 (481〜1024px)
   図形と端末の場所が横幅いっぱいに広がる。場所の高さを横幅の 88% にして、
   端末を横幅の 44% にする (端末の幅は場所の高さの半分)。2 台を 1 割重ねて真ん中に置くと、
   左右に横幅の 8% ずつ残る。PC で 2 台を端から 8% に置いているのと同じ空き方。
   上限はブラウザの高さの 85%。iPad の横向き (1024×768) やスマホの横向きで、
   場所がブラウザの高さより高くならないように。
   480px 以下は 24rem (384px) のまま。端末が横幅の 4〜5 割あり、PC と同じ置き方で 2 台が重なる */
@media (min-width: 481px) and (max-width: 1024px) {
    :root {
        --feature-h: clamp(24rem, 88vw, 85svh);
    }
}

/* タブレット (768〜1024px)。主要な機能の場所の高さは、上の 481〜1024px のまとまりで持つ */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        /* メモリーの 3 台は、寄せずに開いたまま大きくし、左右の 2 台を画面の端で少し切る。
           上下は切らない (余白 1 = 端末の角がちょうど枠に収まる) */
        --memory-spread: 1;
        --memory-fit-x: 0.66;
        --memory-fit-y: 1;
    }
}

/* 狭い画面。左右の余白と節の高さを詰める。段そのものは変えない */
@media (max-width: 767px) {
    :root {
        --gutter-x: 1.5rem;
        --section-y-lg: 5rem;
        --section-y-xl: 6rem;
        --gap-col: 2.5rem;
        --gap-col-lg: 3rem;
        --gap-col-xl: 3.5rem;
        /* メモリーの 3 台は、スマホでは左右が少し画面の端にかかるまで大きくする */
        --memory-fit-x: 0.72;
        /* SEDIMENT の図形は、スマホでは小さくする。そのままだと横幅からはみ出して形が分からない */
        --abstract-scale: 0.55;
        /* Platform の枠のアイコンは、スマホでは 40px にする。1 列の枠の中では PC と同じ大きさだと大きく見える */
        --icon-fact: 2.5rem;
    }
}