/* ============================================================
   LATERAL 図形レイヤー
   移植元: design_handoff_2026-08-12/LATERAL_デザイン確認.html の <style> 2つ目
           （原文は assets/css/_orbit.src.css に保存）

   ⚠ 数値は確定値。勝手に変えない。
     - 線幅は直径連動（--w-lg = --fv * .01 ／ --w-md = --ring * .011）
     - stroke-dashoffset + lat-draw で「線が描かれながら現れる」
       ＝ 2026-08-11 に決めた「図形が"現れる動き"を持つ」の実体。これを落とさない
     - 自転は右回り・左回りを交互。周期は個別

   移植で変えた点:
     - .lat-card → :root（確認ページのカード単位ではなく、サイト全体に適用）
     - cqw → vw（本番値。元コードのコメントに明記があった）
     - --fill / --fill-fade / --band 系の塗り円用の変数は削除（塗り円は使わない）
     - .on-fill は残す（塗り円が無いので発火しないが、消すとCSSの対応関係が読めなくなる）
   ============================================================ */

:root {
  --line-on-base:    #E4D9C5;
  --line-on-fill:    rgba(230,140,0,.38);   /* 塗り円の上（現状は発火しない） */
  --line-on-contact: rgba(255,255,255,.35);
  --line-em:         #F29600;
  --line-fine:       rgba(242,150,0,.42);

  --w-lg: calc(var(--fv) * .01);
  --w-md: calc(var(--ring) * .011);
  --spin: 1;

  --ease-draw: cubic-bezier(.33,0,.15,1);
  --dur-draw-lg: 1.6s;
  --dur-draw-sm: .9s;

  /* SP（〜1023px）。PC値は下の @media で上書き */
  --fv:      760px;
  --fv-r:   -400px;   /* FVは右下へ深く沈め、1/4程度だけ見せる */
  --fv-b:   -430px;
  --ring:    320px;
  --d1: 420px; --d2: 320px; --d3: 240px;
}

@media (min-width: 768px) {
  :root {
    --ring:  clamp(480px, 34cqw, 700px);
    --d1: 560px; --d2: 420px; --d3: 320px;
  }

  /* ⚠ PCのFVの寸法は「紙面（.fv＝最大1280px）」を基準にする。
     確定デザインの元コードは cqw（容器基準）で書かれていた。
     これを vw（画面幅基準）に変換すると、紙面は1280pxで止まるのに軌道だけ
     画面幅に比例して大きくなり、紙面からはみ出す（2026-08-12 に実際に作り込んだ）。
     → .fv を容器にして cqw に戻す。 */
  .fv {
    container-type: inline-size;
    --fv:   clamp(620px, 57cqw, 980px);
    --fv-r: -16cqw;
    /* ⚠ 天地の余白を揃えてキャッチを下げると、そのままではリングが4本も文字に重なる。
       軌道の中心を下へ約200px下げて逃がす（実測に基づく。右へ動かしても効かない）。
       旧 -15cqw → -30cqw。 */
    --fv-b: -30cqw;
  }
}

.lat-layer {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
/* 境界をまたぐ組だけ、切らずに面の外へ出す（本文にかぶらない位置に限る） */
.lat-layer.lat-cross { overflow: visible; z-index: 2; }
.lat-sec-cross { overflow: visible !important; }
/* ⚠ 面をまたぐ軌道は、背景より上・本文（.l-wrap は z-index:1）より下に置く。
   lat-cross（z-index:2）を使うとカードや文字の前に出てしまう。
   おじさん指示：「WEBサイト制作のカード化しているところは下にもぐらせる」 */
.lat-layer { z-index: 0; }

.lat-shape {
  position: absolute;
  overflow: visible;
  /* ⚠ base.css の `img, svg { max-width:100% }` に潰されるのを防ぐ。
     図形は意図的に画面外へはみ出すので、リセットの対象外にする。
     これが無いと width が容器幅に制限され、軌道が画面に出てこない。 */
  max-width: none;
  height: auto;
}
.lat-shape circle {
  fill: none;                       /* ⚠ 軌道は塗らない */
  stroke: var(--line);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.on-base    { --line: var(--line-on-base); }
.on-fill    { --line: var(--line-on-fill); }
.on-contact { --line: var(--line-on-contact); }

@keyframes lat-draw  { to { stroke-dashoffset: 0; } }
@keyframes lat-draw5 { to { stroke-dashoffset: -339.29; } }
@keyframes lat-cw    { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes lat-ccw   { from { transform: rotate(-90deg); } to { transform: rotate(-450deg); } }

/* ---- FVの多重リング（7本。半径 480/430/380/330/280/230/180） ---- */
.r1 { stroke-width: var(--w-lg); stroke-dashoffset: 3015.93;
      animation: lat-draw var(--dur-draw-lg) var(--ease-draw) forwards,
                 lat-cw calc(420s * var(--spin)) linear infinite; }
.r2 { --line: var(--line-fine); stroke-width: calc(var(--w-lg) * .25);
      animation: lat-ccw calc(75s * var(--spin)) linear infinite; }
.r3 { stroke-width: calc(var(--w-lg) * .6);
      animation: lat-cw calc(140s * var(--spin)) linear infinite; }
.r4 { stroke-width: calc(var(--w-lg) * .4); opacity: .7;
      animation: lat-ccw calc(200s * var(--spin)) linear infinite; }
/* ⚠ オレンジの強調線は r5（半径280）。README §11 の「最も内側の1本」は誤り */
.r5 { --line: var(--line-em); stroke-width: calc(var(--w-lg) * .35); stroke-dashoffset: 1420;
      animation: lat-draw5 var(--dur-draw-lg) var(--ease-draw) forwards,
                 lat-cw calc(310s * var(--spin)) linear infinite; }
.r6 { stroke-width: calc(var(--w-lg) * .2); opacity: .6;
      animation: lat-ccw calc(95s * var(--spin)) linear infinite; }
.r7 { stroke-width: calc(var(--w-lg) * .3); opacity: .55;
      animation: lat-cw calc(255s * var(--spin)) linear infinite; }

/* ---- セクションの軌道（4本。半径 190/150/110/70） ---- */
.s1     { stroke-width: var(--w-md); stroke-dashoffset: 1193.81;
          animation: lat-draw var(--dur-draw-sm) var(--ease-draw) forwards,
                     lat-ccw calc(165s * var(--spin)) linear infinite; }
.s2     { stroke-width: calc(var(--w-md) * .55); opacity: .95;
          animation: lat-cw calc(110s * var(--spin)) linear infinite; }
.s3     { stroke-width: calc(var(--w-md) * .7); opacity: .85;
          animation: lat-ccw calc(230s * var(--spin)) linear infinite; }
.s3cw   { stroke-width: calc(var(--w-md) * .7); opacity: .85;
          animation: lat-cw calc(190s * var(--spin)) linear infinite; }
.s4     { --line: var(--line-em); stroke-width: calc(var(--w-md) * .5); opacity: .7;
          animation: lat-cw calc(85s * var(--spin)) linear infinite; }
.s4ccw  { --line: var(--line-em); stroke-width: calc(var(--w-md) * .5); opacity: .7;
          animation: lat-ccw calc(125s * var(--spin)) linear infinite; }
.s5     { stroke-width: calc(var(--w-md) * .6); opacity: .8;
          animation: lat-cw calc(50s * var(--spin)) linear infinite; }

/* ---- 軌道上を回る● ---- */
.dot { fill: var(--line); stroke: none; transform-box: view-box; transform-origin: 50% 50%; }
.dot.em { fill: var(--line-em); }
.on-contact .dot.em { fill: var(--line-em); }
.dot-c     { animation: lat-ccw calc(95s * var(--spin)) linear infinite; }
.dot-s3    { animation: lat-ccw calc(230s * var(--spin)) linear infinite; }
.dot-s3cw  { animation: lat-cw calc(190s * var(--spin)) linear infinite; }
.dot-s5    { animation: lat-cw calc(50s * var(--spin)) linear infinite; }

/* ---- 速い層（JSで駆動。各面が overflow:hidden なので scroll()/view() は使えない） ---- */
.lat-fv-shape, .lat-ring-shape, .lat-fv-shape g.sc { will-change: transform; }
.sc { transform-box: view-box; transform-origin: 50% 50%; }

/* 本文の視認性を優先して淡くする */
.lat-soft { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .lat-layer * { animation: none !important; }
  .lat-shape circle { stroke-dashoffset: 0 !important; }
}