/* ロゴと一行だけ丸いフォント（使う文字だけ取り寄せるので小さい。届かなければ下の字体で出る） */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800&display=swap&text=CAPYAGENTLEBRD%E3%81%AE%E3%82%93%E3%81%B3%E3%82%8A%E3%80%81%E3%81%84%E3%81%A3%E3%81%97%E3%82%87%E3%81%AB%E3%80%82%E5%BA%AD%E3%82%92%E3%81%A8%E3%81%AE%E3%81%88%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99");
/* CAPY ブラウザ版の読み込み画面。色は docs/reference/ui/capy_ui_design_system.png のカラーパレット */
#capy-loading {
  --ivory: #F7EAD3; --walnut: #7A4F33; --cocoa: #4D3628; --olive: #6E853E;
  position: fixed; inset: 0; z-index: 10; overflow: hidden;
  background: var(--ivory);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;
  color: var(--cocoa);
  transition: opacity .8s ease;
}
#capy-loading.done { opacity: 0; pointer-events: none; }

/* Godot 標準の待機画面（青い進み具合のバーと灰色の背景）は出さない。こちらの画面が出るまでの一瞬に見えていた。
   エラーの知らせ（#status-notice）は消さない */
#status { background-color: #F7EAD3 !important; }
#status-progress, #status-splash { display: none !important; }

/* 背景の絵：ゆっくり寄っていく */
#capy-loading .scene {
  position: absolute; inset: -2%;
  background: url("loading.jpg") center / cover no-repeat;
  opacity: 0; transition: opacity 1.2s ease;
  animation: capy-drift 40s ease-in-out infinite alternate;
}
#capy-loading .scene.ready { opacity: 1; }
@keyframes capy-drift { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1%, 1%); } }

/* 左上にかけてやわらかく明るくし、文字を読みやすくする */
#capy-loading .veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 22% 30%, rgba(247, 234, 211, .92) 0%, rgba(247, 234, 211, .55) 45%, rgba(247, 234, 211, 0) 75%),
    linear-gradient(to top, rgba(77, 54, 40, .28), rgba(77, 54, 40, 0) 30%);
}

#capy-loading .title {
  position: absolute; left: 8vw; top: 16vh;
  opacity: 0; transform: translateY(12px);
  animation: capy-rise 1.1s .3s ease forwards;
}
@keyframes capy-rise { to { opacity: 1; transform: none; } }
#capy-loading .logo {
  margin: 0; line-height: .9;
  font-size: clamp(64px, 12vw, 150px); font-weight: 800; letter-spacing: .02em;
  color: var(--walnut);
  -webkit-text-stroke: 3px var(--cocoa);
  text-shadow: 0 5px 0 var(--cocoa), 0 10px 22px rgba(77, 54, 40, .35);
}
#capy-loading .logo .leaf { display: inline-block; width: .3em; height: .3em; margin-left: -.02em; vertical-align: .75em; transform-origin: 10% 90%; animation: capy-sway 3.2s ease-in-out infinite; }
#capy-loading .en { margin: 18px 0 6px; font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .32em; color: var(--walnut); }
#capy-loading .tagline { margin: 0; font-size: clamp(18px, 2.2vw, 28px); letter-spacing: .12em; }

/* 読み込み中の目印：葉が 3 枚、順に揺れる */
#capy-loading .status {
  position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 26px 10px; border-radius: 999px;
  background: rgba(247, 234, 211, .88); border: 2px solid rgba(122, 79, 51, .35);
  box-shadow: 0 6px 18px rgba(77, 54, 40, .22);
  color: var(--cocoa);
}
#capy-loading .leaves { display: flex; gap: 14px; }
#capy-loading .leaves svg { width: 22px; height: 22px; animation: capy-hop 1.4s ease-in-out infinite; }
#capy-loading .leaves svg:nth-child(2) { animation-delay: .18s; }
#capy-loading .leaves svg:nth-child(3) { animation-delay: .36s; }
@keyframes capy-hop { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-9px) rotate(-12deg); } }
@keyframes capy-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
#capy-loading .wait { font-size: 14px; letter-spacing: .1em; white-space: nowrap; }
/* 長く待つときだけ、札の下に小さく添える */
#capy-loading .slow { position: absolute; top: calc(100% + 8px); white-space: nowrap; font-size: 12px; color: var(--ivory); text-shadow: 0 1px 4px rgba(77, 54, 40, .8); opacity: 0; transition: opacity 1s ease; }
#capy-loading .slow.show { opacity: .85; }

#capy-loading .credit { position: absolute; right: 14px; bottom: 10px; font-size: 11px; color: var(--ivory); opacity: .75; text-shadow: 0 1px 4px rgba(77, 54, 40, .7); }

/* 縦長の画面では、絵の右寄り（カピバラ）が見えるようにずらす */
@media (max-aspect-ratio: 1/1) { #capy-loading .scene { background-position: 72% center; } }
@media (max-width: 600px) {
  #capy-loading .title { left: 7vw; top: 12vh; }
  #capy-loading .logo { -webkit-text-stroke: 2px var(--cocoa); }
}
@media (prefers-reduced-motion: reduce) {
  #capy-loading .scene, #capy-loading .leaves svg, #capy-loading .logo .leaf { animation: none; }
}