/* ==============================
   Vegetables Color Palette
   ============================== */
:root {
  --veg1: #9a2407ff; /* 旧 Green → トーン1 */
  --veg2: #828282; /* 旧 Orange → トーン2 */
  --veg3: #779a46; /* 旧 Red → トーン3 */
  --veg4: #bb6b57ff; /* 旧 Dark Green → トーン4 */
  --veg5: #d1d1d1;
}

/* ==============================
   Splash screen base
   ============================== */
.splash {
  position: fixed;
  inset: 0;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: splashFadeOut 1s ease forwards;
  animation-delay: 3.2s;
  z-index: 9999;
}

/* ロゴ周り */
.logo-bg {
  background: #fff;
  display: inline-block;
  z-index: 1;
  position: relative;
}

.logo-wrapper {
  position: relative;
  max-width: 540px;
  height: auto;
  opacity: 0;
  filter: blur(12px);
  animation: fadeInPop 1.6s ease forwards;
}

/* ロゴ本体 */
.logo {
  display: block;
  position: relative;
  /* z-index: 2; */
}

/* ==============================
   Organic Glow Particles
   ============================== */
.glow {
  position: absolute;
  inset: -80px;
  pointer-events: none;
  /* z-index: 1; */
}

.glow span {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background: var(--veg1);
  opacity: 0;
  animation: blobFade 3s infinite ease-in-out;
}

/* 点滅アニメーション */
@keyframes blobFade {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* 丸と菱形を混ぜる */
.glow span:nth-child(odd) {
  border-radius: 50%; /* 丸 */
}

.glow span:nth-child(even) {
  border-radius: 0;
  transform: rotate(45deg); /* 菱形 */
}

/* ==============================
   個別ランダム風設定
   20粒分（位置・色・サイズ・速度）
   ============================== */
.glow span:nth-child(1) {
  width: 5px;
  height: 5px;
  top: -5%;
  left: 25%;
  background: var(--veg1);
  animation-duration: 2.4s;
}
.glow span:nth-child(2) {
  width: 8px;
  height: 8px;
  top: 30%;
  left: 110%;
  background: var(--veg3);
  animation-duration: 3.2s;
}
.glow span:nth-child(3) {
  width: 12px;
  height: 12px;
  top: 40%;
  left: -10%;
  background: var(--veg2);
  animation-duration: 2.8s;
}
.glow span:nth-child(4) {
  width: 6px;
  height: 6px;
  top: 65%;
  left: 50%;
  background: var(--veg4);
  animation-duration: 3.6s;
}
.glow span:nth-child(5) {
  width: 14px;
  height: 14px;
  top: 45%;
  left: 35%;
  background: var(--veg1);
  animation-duration: 2.6s;
}

.glow span:nth-child(6) {
  width: 7px;
  height: 7px;
  top: 70%;
  left: 85%;
  background: var(--veg2);
  animation-duration: 3.1s;
}
.glow span:nth-child(7) {
  width: 9px;
  height: 9px;
  top: 25%;
  left: 60%;
  background: var(--veg3);
  animation-duration: 2.3s;
}
.glow span:nth-child(8) {
  width: 11px;
  height: 11px;
  top: 80%;
  left: 30%;
  background: var(--veg5);
  animation-duration: 3.5s;
}
.glow span:nth-child(9) {
  width: 4px;
  height: 4px;
  top: 50%;
  left: 95%;
  background: var(--veg4);
  animation-duration: 2.9s;
}
.glow span:nth-child(10) {
  width: 15px;
  height: 15px;
  top: 15%;
  left: 40%;
  background: var(--veg3);
  animation-duration: 3.4s;
}

.glow span:nth-child(11) {
  width: 6px;
  height: 6px;
  top: 35%;
  left: 105%;
  background: var(--veg1);
  animation-duration: 2.7s;
}
.glow span:nth-child(12) {
  width: 14px;
  height: 14px;
  top: 55%;
  left: -8%;
  background: var(--veg5);
  animation-duration: 3.3s;
}
.glow span:nth-child(13) {
  width: 5px;
  height: 5px;
  top: 70%;
  left: 40%;
  background: var(--veg2);
  animation-duration: 2.5s;
}
.glow span:nth-child(14) {
  width: 13px;
  height: 13px;
  top: 40%;
  left: 25%;
  background: var(--veg4);
  animation-duration: 3.6s;
}
.glow span:nth-child(15) {
  width: 8px;
  height: 8px;
  top: 75%;
  left: 60%;
  background: var(--veg3);
  animation-duration: 3s;
}

.glow span:nth-child(16) {
  width: 5px;
  height: 5px;
  top: -6%;
  left: 70%;
  background: var(--veg5);
  animation-duration: 3.1s;
}
.glow span:nth-child(17) {
  width: 10px;
  height: 10px;
  top: 90%;
  left: 35%;
  background: var(--veg1);
  animation-duration: 3.3s;
}
.glow span:nth-child(18) {
  width: 6px;
  height: 6px;
  top: 50%;
  left: 68%;
  background: var(--veg2);
  animation-duration: 2.9s;
}
.glow span:nth-child(19) {
  width: 12px;
  height: 12px;
  top: 28%;
  left: 50%;
  background: var(--veg4);
  animation-duration: 2.6s;
}
.glow span:nth-child(20) {
  width: 7px;
  height: 7px;
  top: 65%;
  left: -5%;
  background: var(--veg3);
  animation-duration: 3.2s;
}

/* ==============================
   Fade-in (logo) / Fade-out (screen)
   ============================== */
@keyframes fadeInPop {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: scale(0.92);
  }
  60% {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes splashFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

/* スプラッシュ中に付与されるクラス */
.no-scroll {
  overflow: hidden;
  height: 100vh;
}