/* AZRION 商圏分析 — ウェルカム（入口の舞台：泡と紺ジェルの世界）。
   html.ta-wc のときだけ表示され、welcome.js が退場させる。ゲート（gate.css、
   z-index 2000）より上、本体の起動エラー表示（3000）より下。
   部品はデザイントークン＋小さなコンポーネントで組む（場当たりのベタ書きを
   増やさない）。
   動きの作法（AZRIONモーション法）：長いイージングの静かなグライドのみ。
   跳ね・爆発はしない。演出の流れは「本社（馬ロゴ）の静かな先行スプラッシュ
   → 泡だけの世界 → 泡が集まってマークに結集 → 段階表示 → はじめる」。
   先行スプラッシュ分だけ既存の入場タイミングを約1秒後ろへずらしてある
   （各 delay の +1s がそれ）。タップで結集を飛ばして定常状態にできる。
   退場は「泡がボタンに集まって、ボタンが泡として弾けて開く」（弾けは
   泡1個分まで。画面シェイク・閃光はしない）。
   描画は transform / opacity のみ（キャンバス無し）。タブが隠れたら
   welcome.js が .wc-paused を付けて全アニメーションを止める。
   分析データの読み込みはブロックしない（裏で先読みが走る）。 */
.wc{
  --wc-navy:#060e40; --wc-navy2:#0a1660; --wc-deep:#04082a;
  --wc-ink:#eef1ff; --wc-dim:#b9c2ea; --wc-faint:#8b96c9;
  --wc-gel-a:#41c7e8; --wc-gel-b:#8b5cf6;
  --wc-gel:linear-gradient(120deg,var(--wc-gel-a),var(--wc-gel-b));
  --wc-radius:20px; --wc-ease:cubic-bezier(.22,.8,.24,1);
  display:none; position:fixed; inset:0; z-index:2400; overflow:hidden;
  background:linear-gradient(165deg,var(--wc-navy2) 0%,var(--wc-navy) 55%,var(--wc-deep) 100%);
  color:var(--wc-ink);
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  opacity:1; transform:translateY(0);
  transition:opacity .38s var(--wc-ease), transform .38s var(--wc-ease);
}
html.ta-wc .wc{display:block}
.wc.wc-out{opacity:0; transform:translateY(-10px); pointer-events:none}

/* 退場の儀式（ボタンを押したとき）：泡が押されたボタンへ集まり、ボタンが
   膨らんで、泡として小さく弾けて開く。集まりの移動そのものは welcome.js が
   各泡へ直接かける（現在位置からの滑走）。ここでは「ボタン以外の内容が
   静かに退く」部分と、ボタン／ポップの様式を持つ。
   ポップの実体（輪と微小な泡）は welcome.js が body 直下に .wc-popfx として
   一時的に差し込む（.wc のクロスフェードに巻き込まれないため）。
   ボタンを経ない退場（スキップ等）は .wc-out のフェードだけ。 */
.wc.wc-pop .wc-logo-wrap, .wc.wc-pop .wc-appname, .wc.wc-pop .wc-sub,
.wc.wc-pop .wc-exp, .wc.wc-pop .wc-what, .wc.wc-pop .wc-foot,
.wc.wc-pop .wc-panel, .wc.wc-pop .wc-dots, .wc.wc-pop .wc-btn-sub{
  opacity:0; transition:opacity .26s var(--wc-ease)}

/* タブが隠れている間は全ての動きを止める（welcome.js が付け外し） */
.wc.wc-paused *{animation-play-state:paused !important}

/* 先行スプラッシュ（本社・馬ロゴ）は 2026-10-31 に龍大が撤回（「本社とは話が違う」）。
   ウェルカムは AttA 自前の泡マークから始まる。 */

/* ===== 泡の世界（多層：遠景は小さく滲んで遅く、近景は大きく淡く速く）。
   上昇＋揺れ＋端でのフェードを1つのキーフレームに畳み、泡ごとに
   --wc-dur / --wc-del / --wc-o で位相と濃さを変える。 ===== */
.wc-bubbles{position:absolute; inset:0; pointer-events:none; animation:wc-world-in 1.2s var(--wc-ease) 1s backwards}
@keyframes wc-world-in{from{opacity:0}to{opacity:1}}
.wc-bubble{position:absolute; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.8), rgba(255,255,255,.10) 42%, rgba(139,92,246,.26) 78%, rgba(65,199,232,.32));
  box-shadow:inset 0 0 18px rgba(255,255,255,.16), 0 8px 28px rgba(0,0,0,.22);
  will-change:transform,opacity;
  animation:wc-rise var(--wc-dur,32s) linear infinite; animation-delay:var(--wc-del,0s)}
/* 表面のツヤがゆっくり移ろう（ジェルの丸さの表現。::after の小さな移動のみ） */
.wc-bubble::after{content:""; position:absolute; left:14%; top:8%; width:42%; height:32%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0));
  animation:wc-shine var(--wc-sdur,11s) ease-in-out infinite alternate}
@keyframes wc-shine{from{transform:translate(0,0)}to{transform:translate(18%,26%)}}
@keyframes wc-rise{
  0%{transform:translate3d(0,13vh,0); opacity:0}
  10%{opacity:var(--wc-o,1)}
  27%{transform:translate3d(1.6vh,4vh,0)}
  50%{transform:translate3d(-1.2vh,-3vh,0)}
  73%{transform:translate3d(1.2vh,-8vh,0)}
  90%{opacity:var(--wc-o,1)}
  100%{transform:translate3d(0,-13vh,0); opacity:0}
}
.wc-b1{width:120px;height:120px;left:-34px;top:9%;--wc-dur:24s;--wc-del:-6s;--wc-o:.5;filter:blur(1px)}
.wc-b2{width:64px;height:64px;right:12%;top:16%;--wc-dur:32s;--wc-del:-9s;--wc-sdur:9s}
.wc-b3{width:38px;height:38px;left:16%;top:64%;--wc-dur:28s;--wc-del:-17s;--wc-sdur:8s}
.wc-b4{width:88px;height:88px;right:-24px;top:58%;--wc-dur:27s;--wc-del:-13s;--wc-o:.5;filter:blur(1px);--wc-sdur:13s}
.wc-b5{width:26px;height:26px;left:38%;top:12%;--wc-dur:40s;--wc-del:-22s;filter:blur(1.5px);--wc-sdur:7s}
.wc-b6{width:48px;height:48px;right:30%;top:78%;--wc-dur:34s;--wc-del:-26s;--wc-sdur:10s}
.wc-b7{width:20px;height:20px;left:64%;top:34%;--wc-dur:44s;--wc-del:-5s;filter:blur(1.5px);--wc-sdur:7.5s}
.wc-b8{width:56px;height:56px;left:6%;top:34%;--wc-dur:30s;--wc-del:-19s;--wc-sdur:12s}
.wc-b9{width:16px;height:16px;left:52%;top:7%;--wc-dur:46s;--wc-del:-31s;filter:blur(1.5px);--wc-sdur:7s}
.wc-b10{width:30px;height:30px;right:20%;top:42%;--wc-dur:38s;--wc-del:-11s;filter:blur(1.5px);--wc-sdur:9s}
.wc-b11{width:34px;height:34px;left:26%;top:86%;--wc-dur:29s;--wc-del:-7s;--wc-sdur:8.5s}

/* ===== 配置 ===== */
.wc-in{position:relative; height:100%; max-width:430px; margin:0 auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(20px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom))}
.wc-view{text-align:center}

/* ===== 段階表示（ロゴ→名前→サブ→展開表記→説明→ボタン→フッタ）。
   fill は backwards のみ：終了後は自然な状態に戻るので、ボタンの
   :active 変形がアニメーションに上書きされ続けることがない。 ===== */
.wc-rise-in{animation:wc-rise-in .75s var(--wc-ease) backwards; animation-delay:calc(var(--wc-rd,0s) + 1s)}
@keyframes wc-rise-in{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}}

/* ===== ロゴ：泡が集まってマークになる =====
   .wc-former = 結集する泡。タイル中心から --fx/--fy だけ散らばった位置から
   滑って中心に吸い込まれ、タイルが受けて静かに光って定まる。 */
/* マークの直上に小さく添える「AZRION」の文字（2026-10-31 確定形：絵でなく文字、
   主役でなく添え。馬ロゴは本社の文脈のものとしてアプリには出さない） */
.wc-azrion{text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.38em;
  text-indent:.38em;color:rgba(226,234,255,.6);margin:0 auto 10px}
.wc-logo-wrap{position:relative; width:104px; margin:0 auto 14px;
  animation:wc-tile-in 1.2s var(--wc-ease) 1.5s backwards}
@keyframes wc-tile-in{
  0%{opacity:0; transform:translateY(8px) scale(.92)}
  55%{opacity:1; transform:translateY(0) scale(.985)}
  80%{transform:scale(1.012)}
  100%{opacity:1; transform:scale(1)}
}
.wc-logo{width:104px;height:104px;border-radius:26px;display:block;
  box-shadow:0 14px 38px rgba(0,0,0,.45);
  animation:wc-tile-glow 1.2s var(--wc-ease) 1.5s backwards, wc-bob 9s ease-in-out 3.6s infinite alternate}
@keyframes wc-tile-glow{
  0%{box-shadow:0 14px 38px rgba(0,0,0,.45)}
  78%{box-shadow:0 14px 38px rgba(0,0,0,.45), 0 0 44px 8px rgba(99,140,246,.38)}
  100%{box-shadow:0 14px 38px rgba(0,0,0,.45)}
}
@keyframes wc-bob{from{transform:translateY(3px)}to{transform:translateY(-3px)}}
.wc-formers{position:absolute; inset:0; pointer-events:none}
.wc-former{position:absolute; left:50%; top:50%; border-radius:50%; opacity:0;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.9), rgba(65,199,232,.5) 52%, rgba(139,92,246,.55));
  box-shadow:inset 0 0 10px rgba(255,255,255,.25), 0 0 14px rgba(99,140,246,.35);
  animation:wc-form 1.35s var(--wc-ease) backwards; animation-delay:calc(var(--wc-fd,.1s) + 1s)}
@keyframes wc-form{
  0%{opacity:0; transform:translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(1)}
  14%{opacity:.95}
  82%{opacity:.9}
  100%{opacity:0; transform:translate(-50%,-50%) scale(.22)}
}
.wc-f1{width:46px;height:46px;--fx:-120px;--fy:-90px;--wc-fd:.05s}
.wc-f2{width:34px;height:34px;--fx:130px;--fy:-60px;--wc-fd:.15s}
.wc-f3{width:26px;height:26px;--fx:-90px;--fy:110px;--wc-fd:.25s}
.wc-f4{width:38px;height:38px;--fx:105px;--fy:95px;--wc-fd:.1s}
.wc-f5{width:20px;height:20px;--fx:-150px;--fy:10px;--wc-fd:.3s}
.wc-f6{width:16px;height:16px;--fx:60px;--fy:-130px;--wc-fd:.35s}
.wc-f7{width:24px;height:24px;--fx:-40px;--fy:140px;--wc-fd:.2s}
.wc-f8{width:14px;height:14px;--fx:150px;--fy:30px;--wc-fd:.4s}

/* タップで結集を飛ばす（welcome.js が .wc-instant を付ける）：
   全ての入場アニメーションを切り、定常状態を即時に出す */
.wc.wc-instant .wc-former{display:none}
.wc.wc-instant .wc-logo-wrap, .wc.wc-instant .wc-logo,
.wc.wc-instant .wc-rise-in, .wc.wc-instant .wc-view-in,
.wc.wc-instant .wc-panel-in, .wc.wc-instant .wc-bubbles{animation:none !important}

.wc-appname{font-size:30px;font-weight:800;letter-spacing:.06em;line-height:1.2}
.wc-sub{font-size:13px;font-weight:700;letter-spacing:.28em;color:var(--wc-dim);margin-top:4px}
.wc-sub b{background:var(--wc-gel);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
/* 展開表記（ATAA の綴り出し）。見出しではなく細字の注記として置く */
.wc-exp{font-size:10px;font-weight:600;letter-spacing:.34em;color:var(--wc-faint);margin-top:8px}
.wc-what{font-size:14px;line-height:1.9;color:var(--wc-dim);margin:18px 0 26px}
.wc-foot{margin:22px 0 0;font-size:11.5px;letter-spacing:.24em;color:var(--wc-faint)}

/* ボタン（主役級はジェルのピル、脇役はゴースト）。
   ゆっくり巡るシーン（光の帯）と、押したときの小さな沈み込み。 */
.wc-btn{position:relative; overflow:hidden; width:100%; min-height:54px; border:0; border-radius:999px;
  padding:14px 20px; font-size:16.5px; font-weight:800; cursor:pointer;
  background:var(--wc-gel); color:#fff; font-family:inherit;
  transition:transform .18s var(--wc-ease), opacity .18s var(--wc-ease)}
.wc-btn::after{content:""; position:absolute; top:0; bottom:0; left:0; width:45%; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.32) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-140%) skewX(-12deg);
  animation:wc-sheen 5.6s ease-in-out 3.4s infinite}
@keyframes wc-sheen{
  0%{transform:translateX(-140%) skewX(-12deg)}
  16%{transform:translateX(330%) skewX(-12deg)}
  100%{transform:translateX(330%) skewX(-12deg)}
}
.wc-btn:active{transform:scale(.975); opacity:.92}

/* 退場：ボタンが泡を受けて膨らみ、弾けて消える（様式は退場節の続き） */
.wc-btn.wc-btn-fill{transform:scale(1.045); filter:brightness(1.14) saturate(1.05);
  transition:transform .3s var(--wc-ease), filter .3s var(--wc-ease), opacity .16s ease}
.wc-btn.wc-btn-pop{animation:wc-btn-pop .16s ease-out forwards}
@keyframes wc-btn-pop{
  from{transform:scale(1.045); opacity:1}
  to{transform:scale(1.17); opacity:0}
}
/* ポップの実体（body 直下、左上＝ボタン中心に置く。泡が弾ける大きさまで） */
.wc-popfx{position:fixed; z-index:2500; width:0; height:0; pointer-events:none}
.wc-pop-ring{position:absolute; left:0; top:0; width:176px; height:176px; border-radius:50%;
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 0 24px rgba(99,140,246,.35), inset 0 0 18px rgba(255,255,255,.18);
  transform:translate(-50%,-50%) scale(.3); opacity:.9;
  animation:wc-pop-ring .22s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes wc-pop-ring{
  from{transform:translate(-50%,-50%) scale(.3); opacity:.9}
  to{transform:translate(-50%,-50%) scale(1); opacity:0}
}
.wc-pop-bit{position:absolute; left:0; top:0; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.9), rgba(65,199,232,.5) 52%, rgba(139,92,246,.55));
  box-shadow:inset 0 0 6px rgba(255,255,255,.3);
  transform:translate(-50%,-50%) scale(1); opacity:.95;
  animation:wc-pop-bit .21s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes wc-pop-bit{
  from{transform:translate(-50%,-50%) scale(1); opacity:.95}
  to{transform:translate(calc(-50% + var(--px,0px)), calc(-50% + var(--py,0px))) scale(.35); opacity:0}
}
/* バブルボタン標準（2026-11-01）：スキップも文字リンクでなくゴーストのピルに */
.wc-btn-sub{min-height:54px;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.05);
  border-radius:999px;color:#cfe6ff;font-size:14.5px;font-weight:700;
  cursor:pointer;font-family:inherit;padding:14px 22px;text-decoration:none}
.wc-btn-sub:active{background:rgba(255,255,255,.14)}

/* 導入パネル（初回だけ。次へ／スキップ式） */
.wc-view-in{animation:wc-rise-in .55s var(--wc-ease) backwards}
.wc-panel{text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--wc-radius);padding:22px 20px;min-height:196px}
.wc-panel-in{animation:wc-panel-in .5s var(--wc-ease)}
@keyframes wc-panel-in{from{opacity:0; transform:translateX(14px)}to{opacity:1; transform:translateX(0)}}
.wc-panel-no{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--wc-gel-a);margin-bottom:10px}
.wc-panel-h{font-size:19px;font-weight:800;line-height:1.55;margin:0 0 10px}
.wc-panel-t{font-size:14.5px;line-height:1.9;color:#d5dbf7;margin:0}
.wc-dots{display:flex;gap:7px;justify-content:center;margin:18px 0 6px}
.wc-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)}
.wc-dot.on{background:var(--wc-gel-a)}
.wc-nav{display:flex;gap:10px;align-items:center;margin-top:10px}
.wc-nav .wc-btn{flex:1}

@media (prefers-reduced-motion: reduce){
  .wc-bubble,.wc-bubble::after,.wc-logo,.wc-logo-wrap,.wc-former,
  .wc-rise-in,.wc-view-in,.wc-panel-in,.wc-bubbles{animation:none}
  .wc-former{display:none}
  .wc-btn::after{animation:none; display:none}
  .wc,.wc-in,.wc-bubbles{transition:none}
  /* reduced-motion ではポップ自体を出さない（welcome.js もフェードで閉じる） */
  .wc-popfx{display:none}
  .wc-btn.wc-btn-fill{transform:none; filter:none}
}