/* =========================================================
   動き
   1) 起動時：トップのファーストビュー（開くたびに毎回）
      大見出しが1行ずつ現れる → □・△・○が一筆書きで描かれる → すわる・たつ・あるく → 紹介文 → 縦書き
   2) スクロール時：色背景の帯（.bands）だけ。縦の線が伸び → 横に広がり → 文字が現れる。帯ごとに順番に
   「動きを減らす」設定の人には出さない（<head> のスクリプトが html にクラスを付けない）。
   ========================================================= */

/* トップのロゴは SVG を直接埋め込んでいる（画像と同じ大きさで表示） */
svg.hero-logo { display: block; height: auto; overflow: visible; }

/* ---------- 1) 起動時 ---------- */
/* 時間と速さは、参考動画（2026-10-01 受領）を 1/30 秒ごとに測った値に合わせている（図形の誤差は 1% 未満）。
   - 図形は前の図形を描いている途中から次を描き始め、線が途切れずに流れ続ける
   - 交差部分の上下（編み込み）は、描いている途中から正しい重なりで描く（hero-mark.svg の .hm-weave：本体と同じ線を交差部分だけ切り抜いて同時に描く）
   - 1本の線は約1.3秒。ゆっくり描き始め、後半で一気に描いて、静かに止まる（cubic-bezier(.7,0,.4,1)） */
:root { --hm-draw: cubic-bezier(.7, 0, .4, 1); --hm-out: cubic-bezier(.22, .61, .36, 1); --hm-inout: cubic-bezier(.45, 0, .55, 1); }

/* 準備中（線の長さを測る前）は、動く要素を隠しておく */
html.is-intro:not(.intro-ready) :is(.hero-line, .hero-intro, .hm-draw, .hm-label, .hm-vertical) { opacity: 0; }

/* 大見出し：1行ずつ、上から下へ（1行 0.32 秒、0.085 秒ずつずらす） */
html.is-intro .hero-line { display: inline-block; }
html.is-intro.intro-ready .hero-line { animation: hm-line .32s var(--hm-out) both; animation-delay: calc(.1s + var(--i, 0) * .085s); }
@keyframes hm-line { from { clip-path: inset(-20% -10% 100% -10%); } to { clip-path: inset(-20% -10% -20% -10%); } }

/* 紹介文 */
html.is-intro.intro-ready .hero-intro { animation: hm-fade .45s var(--hm-out) 1s both; }

/* □ → △ → ○ を一筆書きで */
html.is-intro.intro-ready .hm-draw { stroke-dasharray: var(--len) var(--len); animation: hm-draw 1.28s var(--hm-draw) .02s both; will-change: stroke-dashoffset; }
html.is-intro.intro-ready .hm-triangle { animation-name: hm-draw-rev; animation-delay: .44s; animation-duration: 1.36s; } /* 頂点から右下へ */
html.is-intro.intro-ready .hm-circle   { animation-delay: .9s; animation-duration: 1.36s; }
@keyframes hm-draw     { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes hm-draw-rev { from { stroke-dashoffset: var(--len-rev); } to { stroke-dashoffset: 0; } }

/* すわる・たつ・あるく：それぞれの図形を描き終えるころに */
html.is-intro.intro-ready .hm-label { animation: hm-fade .35s var(--hm-out) both; }
html.is-intro.intro-ready .hm-label--square   { animation-delay: 1.42s; }
html.is-intro.intro-ready .hm-label--triangle { animation-delay: 1.8s; }
html.is-intro.intro-ready .hm-label--circle   { animation-delay: 2.15s; }

/* 縦書き：最後に */
html.is-intro.intro-ready .hm-vertical { animation: hm-fade .7s var(--hm-inout) 2.12s both; }

@keyframes hm-fade { from { opacity: 0; } }

/* ---------- 2) スクロール時：色背景の帯 ---------- */
html.js-bands .bands span { position: relative; z-index: 0; background: transparent; }
html.js-bands .bands span::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: -1; background: var(--band); transform-origin: left top; }
html.js-bands .bands:not(.is-inview) span { color: transparent; }
html.js-bands .bands:not(.is-inview) span::before { transform: scaleY(0); }
html.js-bands .bands.is-inview span::before { animation: band-bar .9s cubic-bezier(.6, 0, .2, 1) var(--d, 0s) backwards; }
html.js-bands .bands.is-inview span { animation: band-text .45s ease calc(var(--d, 0s) + .6s) backwards; }
html.js-bands .bands span:nth-child(2) { --d: .22s; }
html.js-bands .bands span:nth-child(3) { --d: .44s; }
html.js-bands .bands span:nth-child(4) { --d: .66s; }
html.js-bands .bands span:nth-child(5) { --d: .88s; }
@keyframes band-bar {
  0%   { width: 4px; transform: scaleY(0); }
  38%  { width: 4px; transform: scaleY(1); }
  100% { width: 100%; transform: scaleY(1); }
}
@keyframes band-text { from { color: transparent; } }