/* =========================================================================
   手づくり村 鯉艸郷 デモサイト — ローディング演出（担当D）
   仕様：DESIGN.md §6 / 配色・フォントは §2 に準拠
   このファイルは単体（loading.html）でも index.html と組み合わせても
   動作するよう、必要な色トークンをすべて自前で持つ（style.css に依存しない）。
   ========================================================================= */

#risoukyo-loading{
  /* --- ブランドトークン（DESIGN.md §2 と同値。プレフィックス rk- で衝突回避） --- */
  --rk-base:#F6F2E8;
  --rk-base-deep:#ECE5D3;
  --rk-paper:#FFFDF8;
  --rk-ink:#2A2530;
  --rk-ink-sub:#6B6470;
  --rk-ai:#3E4478;
  --rk-fuji:#757CBA;
  --rk-fuji-pale:#E7E8F4;
  --rk-ayame:#E5205F;
  --rk-leaf:#009143;

  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--rk-base);
  color:var(--rk-ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  will-change:transform;
  transform:translateY(0);
}

/* 紙の粒子感（feTurbulence のノイズを背景に薄く重ねる） */
#risoukyo-loading::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

/* 読み上げ用の隠しテキスト */
#risoukyo-loading .rk-sr-only{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* --- 幕の下端（波形）。overlay 自体が「幕」で、これが最下端に付く --- */
#risoukyo-loading .rk-curtain-wave{
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:56px;
  display:block;
  color:var(--rk-base);
  pointer-events:none;
}
#risoukyo-loading .rk-curtain-wave path{ fill:currentColor; }

/* --- 中央ステージ --- */
#risoukyo-loading .rk-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  transform:translateY(0) scale(1);
  transition:transform .6s cubic-bezier(.65,0,.35,1);
}

/* --- マーク（葉・花びら）とその足元の池 --- */
#risoukyo-loading .rk-mark-wrap{
  position:relative;
  width:clamp(132px,30vw,184px);
  aspect-ratio:289/364;
}
#risoukyo-loading .rk-mark-svg{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

#risoukyo-loading .rk-pond{
  position:absolute;
  left:50%;
  bottom:1%;
  width:150%;
  aspect-ratio:1/1;
  transform:translate(-50%,44%);
  z-index:1;
  pointer-events:none;
}
#risoukyo-loading .rk-ripple{ position:absolute; inset:0; overflow:visible; transform:scaleY(.42); }
#risoukyo-loading .rk-ripple circle{
  fill:none;
  stroke:var(--rk-fuji);
  stroke-width:1.4;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
#risoukyo-loading .rk-koi{
  position:absolute;
  top:50%;
  left:50%;
  width:50px;
  height:25px;
  margin:-12.5px 0 0 -25px;
  overflow:visible;
  opacity:0;
  transform:translate(-104px,0) rotate(-90deg);
}

/* 葉・花びらは既定では「完成形（静止）」で表示 —
   .rk-run が付いたときだけ、育つ／開くアニメーションを再生する
   （JS未実行時やアニメーション無効時のフォールバックにもなる）。
   transform-origin は view-box 座標で指定：
   葉＝各葉の下端（data-ox / data-oy と同値）、花びら＝花の中心(164,112) */
#risoukyo-loading .leaf,
#risoukyo-loading .petal{ transform-box:view-box; }
#risoukyo-loading .leaf#leaf1{ transform-origin:103px 360px; }
#risoukyo-loading .leaf#leaf2{ transform-origin:164px 352px; }
#risoukyo-loading .leaf#leaf3{ transform-origin:207px 291px; }
#risoukyo-loading .leaf#leaf4{ transform-origin:248px 283px; }
#risoukyo-loading .petal{ transform-origin:164px 112px; }

/* --- 漢字ロゴ・「手づくり村」 --- */
#risoukyo-loading .rk-kanji-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
#risoukyo-loading .rk-kanji-img{
  display:block;
  width:clamp(172px,42vw,248px);
  height:auto;
  clip-path:inset(0 0% 0 0);
}
#risoukyo-loading .rk-kanji-sub{
  font-family:"Klee One","Zen Maru Gothic",sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:.16em;
  color:var(--rk-ai);
  opacity:1;
}

/* =========================================================================
   通常演出（.rk-run）— DESIGN.md §6 のタイムラインに合わせた遅延値
   ========================================================================= */

#risoukyo-loading.rk-run .rk-ripple .rk-ripple-c1{ animation:rk-ripple 1000ms cubic-bezier(.2,.7,.3,1) 0ms both; }
#risoukyo-loading.rk-run .rk-ripple .rk-ripple-c2{ animation:rk-ripple 1000ms cubic-bezier(.2,.7,.3,1) 180ms both; }
#risoukyo-loading.rk-run .rk-ripple .rk-ripple-c3{ animation:rk-ripple 1000ms cubic-bezier(.2,.7,.3,1) 360ms both; }
@keyframes rk-ripple{
  0%{ opacity:.7; transform:scale(.25); }
  100%{ opacity:0; transform:scale(2.1); }
}

#risoukyo-loading.rk-run .rk-koi{ animation:rk-koi-swim 1300ms ease-in-out 60ms both; }
@keyframes rk-koi-swim{
  /* 池の周りを半周（左端→上→右端）。円運動の接線方向に鼻先を合わせる */
  0%{ opacity:0; transform:translate(-104px,0) rotate(-70deg); }
  12%{ opacity:1; }
  25%{ transform:translate(-73.5px,-31px) rotate(-23deg); }
  50%{ transform:translate(0,-44px) rotate(0deg); }
  75%{ transform:translate(73.5px,-31px) rotate(23deg); }
  88%{ opacity:1; }
  100%{ opacity:0; transform:translate(104px,0) rotate(70deg); }
}

/* 葉：下端（data-ox / data-oy）を基点に scaleY(0)→1。0.08s ずつずらす */
#risoukyo-loading.rk-run .leaf{ opacity:0; }
#risoukyo-loading.rk-run .leaf#leaf1{ animation:rk-leaf-grow 650ms cubic-bezier(.22,.9,.32,1) 400ms both; }
#risoukyo-loading.rk-run .leaf#leaf2{ animation:rk-leaf-grow 650ms cubic-bezier(.22,.9,.32,1) 480ms both; }
#risoukyo-loading.rk-run .leaf#leaf3{ animation:rk-leaf-grow 650ms cubic-bezier(.22,.9,.32,1) 560ms both; }
#risoukyo-loading.rk-run .leaf#leaf4{ animation:rk-leaf-grow 650ms cubic-bezier(.22,.9,.32,1) 640ms both; }
@keyframes rk-leaf-grow{
  0%{ opacity:0; transform:scaleY(0); }
  35%{ opacity:1; }
  100%{ opacity:1; transform:scaleY(1); }
}

/* 花びら：花の中心（x≈164,y≈112）から開く。中心の大花びら→左右→上の小花びら、easeOutBack */
#risoukyo-loading.rk-run .petal{ opacity:0; }
#risoukyo-loading.rk-run .petal#petal1{ animation:rk-petal-open 560ms cubic-bezier(.34,1.56,.64,1) 900ms both; }
#risoukyo-loading.rk-run .petal#petal2{ animation:rk-petal-open-r 560ms cubic-bezier(.34,1.56,.64,1) 1050ms both; }
#risoukyo-loading.rk-run .petal#petal3{ animation:rk-petal-open-l 560ms cubic-bezier(.34,1.56,.64,1) 1050ms both; }
#risoukyo-loading.rk-run .petal#petal4{ animation:rk-petal-open 520ms cubic-bezier(.34,1.56,.64,1) 1250ms both; }
#risoukyo-loading.rk-run .petal#petal5{ animation:rk-petal-open-r 520ms cubic-bezier(.34,1.56,.64,1) 1250ms both; }
#risoukyo-loading.rk-run .petal#petal6{ animation:rk-petal-open-l 520ms cubic-bezier(.34,1.56,.64,1) 1250ms both; }
@keyframes rk-petal-open{
  0%{ opacity:0; transform:scale(.2) rotate(0deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
@keyframes rk-petal-open-r{
  0%{ opacity:0; transform:scale(.2) rotate(6deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
@keyframes rk-petal-open-l{
  0%{ opacity:0; transform:scale(.2) rotate(-6deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}

/* 漢字ロゴ：左から右へ筆で書くように（clip-path inset の右側 100%→0%） */
#risoukyo-loading.rk-run .rk-kanji-img{
  clip-path:inset(0 100% 0 0);
  animation:rk-kanji-reveal 600ms cubic-bezier(.5,0,.2,1) 1500ms both;
}
@keyframes rk-kanji-reveal{
  0%{ clip-path:inset(0 100% 0 0); }
  100%{ clip-path:inset(0 0% 0 0); }
}
#risoukyo-loading.rk-run .rk-kanji-sub{
  animation:rk-fade-in 350ms ease-out 1800ms both;
}
@keyframes rk-fade-in{
  0%{ opacity:0; transform:translateY(4px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* =========================================================================
   退場（.rk-exit）— 幕が上へ抜ける。ロゴは少し縮んで上へ
   ========================================================================= */
#risoukyo-loading.rk-exit{
  transition:transform .6s cubic-bezier(.6,0,.3,1);
  transform:translateY(-102%);
}
#risoukyo-loading.rk-exit .rk-stage{
  transform:translateY(-26px) scale(.86);
}

/* =========================================================================
   prefers-reduced-motion / .rk-reduced（JSが付与）：
   ロゴを0.6秒表示してフェードのみ
   ========================================================================= */
#risoukyo-loading.rk-reduced .rk-pond{ display:none; }
#risoukyo-loading.rk-reduced .rk-stage{
  opacity:0;
  transition:opacity .3s ease;
}
#risoukyo-loading.rk-reduced.rk-visible .rk-stage{ opacity:1; }
#risoukyo-loading.rk-reduced.rk-exit{
  transition:opacity .4s ease;
  opacity:0;
  transform:none;
}
#risoukyo-loading.rk-reduced.rk-exit .rk-stage{ transition:none; transform:none; }

@media (prefers-reduced-motion: reduce){
  #risoukyo-loading .leaf,
  #risoukyo-loading .petal{ animation:none !important; opacity:1 !important; transform:none !important; }
  #risoukyo-loading .rk-kanji-img{ clip-path:inset(0 0% 0 0) !important; animation:none !important; }
  #risoukyo-loading .rk-kanji-sub{ animation:none !important; opacity:1 !important; transform:none !important; }
  #risoukyo-loading .rk-pond{ display:none !important; }
}

/* 最初の描画まで演出を待機（js/loading.js が rk-pre → rk-run に切り替える） */
#risoukyo-loading.rk-pre .rk-stage{ opacity:0; }