@charset "UTF-8";
.tab-night {
  background-color:#0b0c2a;
}
.tab-day {
  background-color:#87CEEB;
}

.moving-back {
  position: relative;
  height:100%;
  width:100%;
  overflow: hidden;
}
/*夜背景*/
.night-c {
background-color:#232B36;
background: linear-gradient(to bottom, #0b0c2a, #1e1f4b, #3c2a67, #5a3d85);
z-index: -1;
}
.night-active {
  background-color:#0b0c2a!important;
}
.moon {
  position: absolute;
  top: 3vh;
  right: 20px;
  width: 10vw;
  height: 10vw;
  background-image: url(/graderace2025/img/moon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;

  /* アニメーションでじわじわ光る */
  animation: moonGlow 3s ease-in-out infinite;
}

@keyframes moonGlow {
  0%, 100% {
    filter: brightness(1) saturate(1) hue-rotate(-15deg);
  }
  50% {
    filter: brightness(1.4);
  }
}

.sky {
  position: absolute;
  height:200vh;
  width:100%;
}

.shooting-star {
  position: absolute;
  width: 120px; /* 線の長さ */
  height: 2px;   /* 線の太さ */
  background: linear-gradient(90deg, rgb(255, 244, 181), transparent);
  opacity: 0;
  transform: rotate(-45deg); /* 流れる角度 */
  pointer-events: none;
  animation: shooting 1s ease-out forwards;
}

@keyframes shooting {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(-45deg);
  }
  100% {
    opacity: 0;
    transform: translate(-200px, 200px) rotate(-45deg);
  }
}

.star {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  animation: twinkle 1s infinite ease-in-out;
}

/* チカチカのアニメーション定義 */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
    filter: brightness(1) blur(0);
    background-color: white;
  }
  50% {
    opacity: 1;
    transform: scale(2); /* sparkle中に拡大 */
    filter: brightness(2.5) blur(2px);
    background-color: #ff0000; /* 柔らかい光色 */
  }
}

.star.sparkle {
  animation: sparkle 0.4s ease-in-out infinite;
}

/*昼背景*/
.day-c {
    background: linear-gradient(to bottom, #87CEEB, #B0E0E6, #defbff);
}
.day-active {
  background-color:#87CEEB!important;
}
/* 太陽 */
.sun {
  position: absolute;
  top: 3vh;
  right: 20px;
  width: 10vw;
  height: 10vw;
  background-color: rgb(253, 142, 37);
  border-radius: 50%;
  z-index: 1;
  overflow: visible;

  animation: sunGlow 3s ease-in-out infinite;
}

/* ☀️ box-shadow のふわふわアニメーション */
@keyframes sunGlow {
  0%, 100% {
    box-shadow: 0 0 20px 5px rgba(255, 200, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 35px 15px rgba(255, 220, 100, 0.7);
  }
}


/*雲*/
@keyframes moveAndFloatCloud {
  0% {
    transform: translateX(0) translateY(0);
  }
  10% {
    transform: translateX(10vw) translateY(-10px);
  }
  20% {
    transform: translateX(20vw) translateY(0);
  }
  30% {
    transform: translateX(30vw) translateY(-10px);
  }
  40% {
    transform: translateX(40vw) translateY(0);
  }
  50% {
    transform: translateX(50vw) translateY(-10px);
  }
  60% {
    transform: translateX(60vw) translateY(0);
  }
  70% {
    transform: translateX(70vw) translateY(-10px);
  }
  80% {
    transform: translateX(80vw) translateY(0);
  }
  90% {
    transform: translateX(90vw) translateY(-10px);
  }
  100% {
    transform: translateX(100vw) translateY(0);
  }
}
/*
@keyframes floatCloud {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(0);
  }
}
*/
.cloud {
  position: absolute;
  animation: moveAndFloatCloud s linear forwards;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite; /* 無限ループ */

  /* ここでアニメーションを指定 */
  animation-play-state: running, paused; /* 横方向は動かし、上下は止める */
}


/* ===== パターン1：基本の雲 ===== */
.cloud.basic {
  background-image: url(/graderace2025/img/cloud_1.svg);
  background-repeat: no-repeat;
}

.cloud.fat {
  background-image: url(/graderace2025/img/cloud_2.svg);
  background-repeat: no-repeat;
}