/* =========================================================
   GarlondWorks — LINK AS ONE トークン（法典）
   見立て：白い紙に描いた円が、立体の「縁」になる。色はグレースケールだけ
   ---------------------------------------------------------
   場面転換の律：色を足さず、明暗だけで章を切り替える。
   白（paper）→ 暗い舞台（stage）へ、位置を越えたら時間で変える。
   スクロール量に連動させない（途中の灰色で止まらせない）。
   アクセントカラーは持たない。強調は明暗と書体の落差でつくる。
   ========================================================= */

:root {
  /* --- 紙（白い場面） --- */
  --paper:           #FEFEFE;                 /* ヒーロー動画の地（輝度254）と揃える。純白だと動画の縁が浮く */
  --ink-on-paper:    #3E3A39;                 /* ロゴと同じ墨グレー */
  --muted-on-paper:  #8A8785;
  --line-on-paper:   rgba(62, 58, 57, 0.14);

  /* --- 舞台（暗い場面） --- */
  --stage:           #282828;                 /* ミルーム実測値（2026-09-15）。色味のない暗いグレー */
  --stage-card:      #1A1A1A;                 /* メニューカード。舞台と同色だと暗い場面でカードの縁が消える */
  --ink-on-stage:    #F5F5F5;
  --muted-on-stage:  #A8A8A8;
  --line-on-stage:   rgba(245, 245, 245, 0.16);

  /* --- 書体（2つだけ） --- */
  --font-display: "Fugaz One", sans-serif;    /* 英字の見出し・メニュー */
  --font-text:    "M PLUS 1", sans-serif;     /* 和文 */

  --fs-body:    1rem;                         /* 16px。iOSの自動ズームを起こさない下限 */
  --fs-small:   0.8125rem;                    /* 13px。メニューの和文 */
  --fs-eyebrow: 0.875rem;                     /* 14px */
  --fs-menu:    1.75rem;                      /* 28px */
  --fs-menu-title: 1.375rem;                  /* 22px。メニューカードの「Menu」。大文字の高さ（0.725倍＝16px）を閉じるボタンの×（16px）にそろえる */
  --fs-h2:      clamp(2.25rem, 10vw, 3rem);   /* 36→48px */
  --fs-mark:    clamp(2.25rem, 9.6vw, 4rem);  /* 本文の締めの LINK AS ONE。スマホ約36px→PC最大64px（「もう一回り小さく」） */

  /* --- 柱と余白（8pxリズム） --- */
  --pillar:        430px;                     /* 一本柱。PCでも広げない */
  --gutter:        20px;                      /* ミルームSP実測 20px */
  --header-h:      80px;
  --logo-h:        20px;
  --tap:           44px;                      /* タッチターゲット最小 */
  --field-h:       52px;                      /* 入力欄の高さ（文字16px＋上下の余白） */
  --radius-field:  12px;
  --icon-size:     18px;                      /* 丸ボタンの中の図形（メニューの三本線と同じ幅）。SNSアイコンはAboutとフッターで共通 */
  --space-section: 120px;
  --radius-card:   24px;                      /* ミルーム実測（メニュー・カード） */

  /* --- PC（1024px〜）：ミルームの配置バランス（2026-09-15 判断・1280px実測） --- */
  --content-pc:     1200px;                   /* ミルーム max-width 1200px */
  --gutter-pc:      56px;                     /* ミルーム 1280px 時の左右余白 */
  --gutter-edge-pc: 24px;                     /* ヘッダー・メニューの画面端からの距離 */
  --header-h-pc:    96px;
  --logo-h-pc:      24px;
  --menu-w-pc:      390px;                    /* メニューカード幅（ミルーム目測 約390px） */
  --fs-h2-pc:       4rem;                     /* 64px（ミルーム Section Display 64px） */

  /* --- 動き --- */
  --dur-scene: 0.8s;                          /* ミルーム実測：白→暗が約0.8秒で完了 */
  --ease-scene: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-ui:    0.3s;
  /* メニューを開いたときの×の回転（右回りに半回転。少し行き過ぎて戻る＝クルンっ） */
  --dur-spin:  0.6s;
  --ease-spin: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* フッターのロゴ（歯車）が画面に入ったら時計回りに1回転 */
  --dur-gear:  1.2s;
  --ease-gear: cubic-bezier(0.65, 0, 0.35, 1);   /* ゆっくり回り始めて、ゆっくり止まる */

  /* 演出A：見出しの句が浮かび上がる（暗転0.8sの途中から始めて、句ごとに時間差） */
  --dur-reveal:     0.6s;
  --delay-reveal:   0.35s;                    /* 背景がある程度暗くなってから白い文字を出す */
  --stagger-reveal: 0.15s;
  /* 演出C：LINK AS ONE の文字が寄って一つになる */
  --dur-converge:    1.2s;
  --spread-converge: 0.3em;                   /* 中央から1文字離れるごとに広がる量 */
  /* Concept本文：段落がぼかしの中から、ふわっと浮かんで現れる */
  --dur-fade:     1s;
  --shift-fade:   0.75em;                     /* 下から上がってくる量 */
  --blur-fade:    8px;                        /* ぼけた状態からピントが合う */
  --wait-fade:    0.5;                        /* 見出しと同時に入ったときだけ、見出しの出始め（0.35s）より少し後に始める（秒・JSが読む） */
  --stagger-fade: 0.15;                       /* 複数の段落が一度に入ったときの時間差（秒・JSが読む） */

  /* --- 動きの再構築（2026-09-16 ミルームの型＋エリー案。戻すときは ~/Desktop/garlond_site_backup_2026-09-16_before-motion/）---
     スクロールに合わせる動き（進み具合 --p 0→1）は、目標へ毎フレーム少しずつ近づけて滑らかにする。色は動かさない */
  --lerp-scrub:    0.14;                      /* 1フレームで目標に近づく割合（JSが読む）。小さいほどゆったり追いつく */
  --hero-scale:    0.92;                      /* ヒーローの動画が遠ざかる大きさ */
  --hero-rise:     48px;                      /* ヒーローの動画が上へ逃げる量 */
  --spread-about:  40vw;                      /* LIVING と WITH AI が左右に離れている量（ミルーム Careers の横から寄る行の型） */
  --ground-shift:  64px;                      /* 地面が下から持ち上がる量 */
  --eyebrow-line:  32px;                      /* セクション名の横の「点から伸びる線」の長さ */
  --dur-line:      0.9s;                      /* 線が伸びる時間 */
  --dur-drop:      0.9s;                      /* フッターの丸が落ちて着地する時間（ミルームのフッターのドットの型） */
  --stagger-drop:  0.12s;
  --stagger-menu:  0.05s;                     /* メニューを開いたときに項目が順に上がる時間差 */
  --dur-hint:      2.4s;                      /* 「Scroll」の下を点が落ちる周期 */

  /* --- Works：資料が1枚ずつせり上がる（2026-09-15 案Aに決定） ---
     大きさの比はミルーム実測（1280px：カード幅 538→896px＝0.6倍→等倍）。
     ミルームはスクロール量に連動するが、ここは画面に入ったら時間で1回だけ動かす */
  --fs-lead:     clamp(1.25rem, 5.4vw, 1.5rem);  /* 20→24px。Worksの一文 */
  --works-w-pc:  896px;                        /* ミルームのカード最終幅 */
  --radius-doc:  clamp(12px, 2vw, 24px);       /* スマホ12px→PC24px（ミルームのカード角丸24px） */
  --gap-works:    48px;
  --gap-works-pc: 120px;
  --scale-rise:  0.6;
  --shift-rise:  48px;                         /* 下から上がってくる量 */
  --dim-rise:    0.55;                         /* 暗い状態から明るくなる（暗い地の上で「差し出される」感じ） */

  /* --- About：見出し LIVING WITH AI（Fugaz One） --- */
  --fs-about:    2.25rem;                      /* 36px。柱430px以内で1行に収まる大きさ（画面幅で大きくするとタブレットで2行に折れた） */
  --fs-about-pc: 4rem;                         /* 64px。LINK AS ONE と同じ */
}