/* 初期状態 */
body.page-template-welcome-page {
  background-color: #c9eab9;
  background-image: none  !important;
}

/* 疑似要素で背景を持つ */
body.page-template-welcome-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('images/welcome/bg_no_chars.png')  !important;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;

  opacity: 0;
  z-index: -1;
}


/* レイアウト */
#top-visual {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* 各レイヤー */
.bg-object,
.character {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0;
}

/* 画像指定（ここは自分のパスに合わせる） */
.bg-object {
  background-image: url('images/welcome/bg-object.png');
  top: -100px
}

.character {
  background-image: url('images/welcome/chars.png'); 
}

/* ボタン */
.top-buttons {
  
  position: absolute;
  transform: translate(-35%, -50%);
  left: 50%;
  top: calc(100vw * 0.23);
}

.top-buttons a {
  display: inline-block;
  background-image: url("images/welcome/enter_btn.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 15vw;
  aspect-ratio: 1 / 1;

  transition: transform 0.3s ease, filter 0.3s ease;
  animation: floatingAnimation 3s ease-in-out infinite alternate;
  cursor: pointer;
}

@keyframes floatingAnimation {
  0%   { transform: translateY(0px) scale(1); }
  50%  { transform: translateY(-10px) scale(1.03); }
}

.top-buttons a:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.8))
          drop-shadow(0 0 20px rgba(0,255,200,0.6));
}

.top-buttons a:active {
  transform: scale(0.96);
  filter: brightness(0.9);
}

/* アニメーション */
@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
  }
}

/* 発火後 */
body.loaded::before {
  animation: fadeIn 1s ease forwards;
  animation-delay: 0.5s;
}

.loaded .bg-object {
  animation: fadeIn 1s ease forwards;
  animation-delay: 1.5s;
}

.loaded .character {
  animation: fadeInUp 1s ease forwards;
  animation-delay: 2.5s;
}

.loaded .top-buttons {
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 3.5s;
}