/* ═══════════════════════════════════════════════════════════════
   全画面ローディング・オーバーレイ（発光する北海道マーク＋発光リング＋雪）
   - 画面に文字は一切出さない（読み上げ用 aria-label のみ／写真素材は使用しない）。
   - 淡いアイスブルーの階調を素地に、中央で北海道の輪郭が呼吸するように発光する。
   - スマホ表示領域を完全占有（100dvh）。Safe Area対応。背面透過させない。
   ═══════════════════════════════════════════════════════════════ */
:root{ --hkl-fade-in:250ms; --hkl-fade-out:400ms; }

#hk-loading{
  position:fixed; inset:0; z-index:2147483000; display:none;
  align-items:center; justify-content:center;
  width:100vw; height:100vh; height:100dvh; min-height:100dvh;
  background:#e7f1fb; /* 画像読込前の素地（白〜淡水色・真っ白/真っ黒を出さない） */
  opacity:0; transition:opacity var(--hkl-fade-out) ease;
  -webkit-tap-highlight-color:transparent; overscroll-behavior:none; touch-action:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#hk-loading.hkl-show{ display:flex; }
#hk-loading.hkl-in{ opacity:1; transition:opacity var(--hkl-fade-in) ease; }

/* 背景画像（cover・中央・縦横比維持・余白なし） */
.hkl-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* フォールバック背景（画像なし/失敗時）。淡い雪・青白の階調 */
.hkl-fallback{ position:absolute; inset:0;
  background:radial-gradient(140% 95% at 50% 42%, #ffffff 0%, #eaf4fe 24%, #d7e8fc 52%, #dcd8f3 100%); }
/* 画像の上の青白ウォッシュ（写真の幻想感を統一し、上に載る発光北海道を主役にする） */
.hkl-wash{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 44%, rgba(255,255,255,.28) 0%, rgba(225,240,255,.10) 42%, rgba(188,208,248,.22) 100%); }
/* 画像読込成功時はフォールバック階調を隠す（写真を見せる） */
#hk-loading.hkl-has-img .hkl-fallback{ opacity:0; }
#hk-loading.hkl-has-img .hkl-img{ filter:brightness(1.04) saturate(1.02); }

/* ── 北海道：中央配置・外周発光＋外周を一周する流れる光（文字は一切なし） ── */
.hkl-hokkaido{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(70vw,340px); height:auto; overflow:visible; pointer-events:none; }
.hkl-hokkaido path{ fill:none; }
/* ふんわりした外周ハロー（アイスシアン・ゆっくり呼吸 3.6s） */
.hkl-hk-glow{ stroke:rgba(143,224,255,.62); stroke-width:10; stroke-linejoin:round; stroke-linecap:round;
  filter:blur(7px); opacity:.85; animation:hkl-hk-breath 3.6s ease-in-out infinite; }
/* 常時の縁取り（白〜氷色・はっきり） */
.hkl-hk-base{ stroke:#eafbff; stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(174,239,255,.95)) drop-shadow(0 0 9px rgba(95,200,242,.6)); opacity:.95; }
/* 外周を一周する流れる光（白＋アイスシアン・約3秒で1周・はっきり視認） */
.hkl-hk-trace{ stroke:#ffffff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:150 850; stroke-dashoffset:1000; will-change:stroke-dashoffset;
  filter:drop-shadow(0 0 5px rgba(174,239,255,1)) drop-shadow(0 0 15px rgba(95,205,245,.95)) drop-shadow(0 0 30px rgba(70,190,240,.6));
  animation:hkl-hk-trace 3s linear infinite; }
@keyframes hkl-hk-trace{ from{ stroke-dashoffset:1000; } to{ stroke-dashoffset:0; } }
@keyframes hkl-hk-breath{ 0%,100%{ opacity:.5; } 50%{ opacity:.95; } }

/* 雪レイヤー（JSで雪片を生成。上から下へゆっくり・左右に弱い揺れ） */
.hkl-snow{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hkl-snow i{ position:absolute; top:-6vh; border-radius:50%;
  background:radial-gradient(circle, #ffffff 0%, rgba(255,255,255,.35) 70%, transparent 72%);
  opacity:0; will-change:transform,opacity; animation-name:hkl-fall; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes hkl-fall{
  0%{ transform:translate3d(0,-6vh,0); opacity:0; }
  12%{ opacity:.9; }
  88%{ opacity:.8; }
  100%{ transform:translate3d(var(--hkl-sx,12px),106vh,0); opacity:0; }
}

/* キラキラ（弱い呼吸） */
.hkl-spark{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(60% 40% at 30% 35%, rgba(255,255,255,.35), transparent 60%),
            radial-gradient(50% 36% at 72% 62%, rgba(200,225,255,.3), transparent 60%);
  animation:hkl-breath 6.5s ease-in-out infinite; }
@keyframes hkl-breath{ 0%,100%{ opacity:.25; } 50%{ opacity:.5; } }

/* エラー表示 */
.hkl-error{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:none; width:min(92%,360px);
  background:rgba(255,255,255,.96); border:1px solid #d8e2f1; border-radius:16px; padding:20px 18px; text-align:center;
  box-shadow:0 10px 40px rgba(30,50,90,.18); color:#1a2336; font-family:system-ui,'Hiragino Kaku Gothic ProN',sans-serif; }
#hk-loading.hkl-err .hkl-error{ display:block; }
#hk-loading.hkl-err .hkl-hokkaido,#hk-loading.hkl-err .hkl-snow,#hk-loading.hkl-err .hkl-spark{ display:none; }
.hkl-error p{ margin:0 0 14px; font-size:.92rem; line-height:1.7; color:#3a4660; }
.hkl-error .hkl-btns{ display:flex; flex-direction:column; gap:8px; }
.hkl-error button{ min-height:44px; border-radius:11px; font-family:inherit; font-weight:800; font-size:.92rem; cursor:pointer; border:none; }
.hkl-retry{ background:linear-gradient(180deg,#2f80ed,#2f6fe0); color:#fff; }
.hkl-back{ background:#eef2fa; color:#3a4660; }

/* 本文スクロールロック（iOS Safari でも背面が動かない） */
body.hkl-lock{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

/* reduced-motion：動きを止める/弱める（オーバーレイと最低表示時間は維持） */
@media (prefers-reduced-motion:reduce){
  .hkl-snow,.hkl-spark{ display:none !important; }
  /* 動きは止めるが、北海道の輪郭そのものははっきり見せる */
  .hkl-hk-trace{ animation:none; stroke-dasharray:none; stroke-dashoffset:0; opacity:.95; }
  .hkl-hk-glow{ animation:none; opacity:.7; }
  #hk-loading{ transition:none; }
}

/* ── 全国版ローディング：日本列島を思わせるアイスブルー同心リング＋周回ノード（AIネットワーク）＋照合中テキスト ── */
.natl-wrap{ position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); display:flex; flex-direction:column; align-items:center; gap:24px; pointer-events:none; }
.natl-net{ width:min(58vw,190px); height:auto; overflow:visible;
  filter:drop-shadow(0 0 4px rgba(120,200,255,.7)) drop-shadow(0 0 14px rgba(80,180,255,.45)); }
.natl-ring{ fill:none; stroke:rgba(95,190,255,.5); stroke-width:1.6; }
.natl-ring.r2{ stroke:rgba(95,190,255,.34); }
.natl-ring.r3{ stroke:rgba(95,190,255,.22); }
.natl-spin{ transform-box:view-box; transform-origin:120px 120px; animation:natl-spin 7s linear infinite; }
.natl-spin.rev{ animation-duration:11s; animation-direction:reverse; }
.natl-node{ fill:#f0fbff; filter:drop-shadow(0 0 4px rgba(150,225,255,1)); }
.natl-core{ fill:#7fd0ff; }
.natl-core-pulse{ transform-box:view-box; transform-origin:120px 120px; animation:natl-pulse 2.2s ease-in-out infinite; }
.natl-text{ font-family:'Noto Sans JP',system-ui,'Hiragino Kaku Gothic ProN',sans-serif; font-size:clamp(.86rem,3.6vw,1rem); font-weight:800; letter-spacing:.05em; color:#0a5fd0; text-shadow:0 1px 8px rgba(255,255,255,.9); animation:natl-text 1.7s ease-in-out infinite; }
@keyframes natl-spin{ to{ transform:rotate(360deg); } }
@keyframes natl-pulse{ 0%,100%{ opacity:.55; transform:scale(.86); } 50%{ opacity:1; transform:scale(1.16); } }
@keyframes natl-text{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
#hk-loading.hkl-err .natl-wrap{ display:none; }
@media (prefers-reduced-motion:reduce){
  .natl-spin,.natl-core-pulse,.natl-text{ animation:none; }
}