/* 画面全体センター＆初期は非表示（ただしCSSは常に読み込む） */
html, body { height:100%; }
body { margin:0; }

/* 遅い時だけ出す：.slow が付いたら表示、.ready で非表示 */
.loader-overlay{
  position: fixed; inset: 0; z-index: 9999;
  display: none;                  /* デフォは出さない（遅い時だけJSで表示） */
  place-items: center;
  background:#3e8038;
  text-align:center;
  padding: 24px;
}
html.slow .loader-overlay{ display:flex;flex-direction: column; justify-content: center;align-items: center;}

.loading-logo{ max-width:240px; display:block; margin:0 auto 16px; }
#loadContainer{ margin: 0 auto 8px; }
#logo{ display:block; width:160px; height:auto;
  -webkit-mask: linear-gradient(#000 0 0) bottom / 100% 0 no-repeat;
          mask: linear-gradient(#000 0 0) bottom / 100% 0 no-repeat;
  animation: unmask 1.6s cubic-bezier(.22,.61,.36,1) infinite alternate;
  will-change: mask-size, -webkit-mask-size;
}
.loading-text{
  margin:0;
  color:#fff;
  letter-spacing:.08em;
  font:600 1rem/1.2 system-ui, sans-serif;
  animation:pulse 1.6s ease-in-out infinite alternate;
}

.grass{
  transform-origin:center;
  animation: grassColor 2.4s infinite alternate;
}

/* フェードアウト */
html.ready .loader-overlay{
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}

/* アニメ */
@keyframes unmask { to { -webkit-mask-size:100% 100%; mask-size:100% 100%; } }
@keyframes pulse  { from{opacity:.6; transform:translateY(0)} to{opacity:1; transform:translateY(-3px)} }
@keyframes grassColor{
  0%   { fill:#adca37; transform:scale(1); }
  50%  { fill:#FFDB59; transform:scale(1); }
  100% { fill:#FFB300; transform:scale(1.03); }
}

/* 動きが苦手な環境配慮 */
@media (prefers-reduced-motion: reduce){
  #logo, .loading-text, .grass { animation: none !important; }
}