/* =======================================================
   背景アニメーション設定（15秒スムーズ往復ズーム）
======================================================= */

/* 背景用レイヤー(particleで代替するため不使用)
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('./img/user_backimg.jpg') no-repeat center center / cover;
  z-index: -1;
  transform: scale(1);
  will-change: transform;
  animation: bgZoom 15s ease-in-out infinite alternate;
} */

/* 背景拡大アニメーション (particleで代替するため不使用)
@keyframes bgZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
} */

/* 黒透明レイヤー */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0.8) 0%,
      rgba(0,0,0,0.87) 55%,
      rgba(0,0,0,0.95) 100%
    );
  z-index: 0;
}

/* particles 背景（全画面固定） */
#particles-js{
  position: fixed;
  inset: 0;
  z-index: 1;
}

.container{
  position: relative;
  z-index: 2;
}

/* =======================================================
   レイアウト基本設定
======================================================= */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "ヒラギノ明朝 ProN W6", "游明朝", "MS 明朝", serif;
  color: #fff;
  overflow: hidden;
}

.container {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 400px;
  width: 90%;
}

.container img.icon {
  width: 120px;
  height: auto;
  margin-bottom: 1rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.catchphrase {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

/* =======================================================
   フォームデザイン
======================================================= */
form {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
}

input[type="text"],
input[type="password"] {
  width: 90%;
  padding: 0.7rem;
  margin-bottom: 1rem;
  border: none;
  border-radius: 6px;
  background: rgba(255,255,255,0.85);
  font-size: 1rem;
  text-align: center;
}

input[type="text"]:focus,
input[type="password"]:focus {
  outline: none;
  background: #fff;
}

input[type="submit"] {
  width: 100%;
  padding: 0.8rem;
  background-color: #BF4E4E;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1rem;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease;
}

input[type="submit"]:hover {
  background-color: #ffd74a;
}

.error {
  color: #ff6b6b;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

/* =======================================================
   ローディングオーバーレイ（白）
======================================================= */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

#loading-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.breeding-rhombus-spinner {
  height: 65px;
  width: 65px;
  position: relative;
  transform: rotate(45deg);
}

.breeding-rhombus-spinner .rhombus {
  height: calc(65px / 7.5);
  width: calc(65px / 7.5);
  animation-duration: 2000ms;
  top: calc(65px / 2.3077);
  left: calc(65px / 2.3077);
  background-color: #ffffffff;
  position: absolute;
  animation-iteration-count: infinite;
}

.rhombus.child-1 { animation-name: anim-1; animation-delay: 100ms; }
.rhombus.child-2 { animation-name: anim-2; animation-delay: 200ms; }
.rhombus.child-3 { animation-name: anim-3; animation-delay: 300ms; }
.rhombus.child-4 { animation-name: anim-4; animation-delay: 400ms; }
.rhombus.child-5 { animation-name: anim-5; animation-delay: 500ms; }
.rhombus.child-6 { animation-name: anim-6; animation-delay: 600ms; }
.rhombus.child-7 { animation-name: anim-7; animation-delay: 700ms; }
.rhombus.child-8 { animation-name: anim-8; animation-delay: 800ms; }

.rhombus.big {
  height: calc(65px / 3);
  width: calc(65px / 3);
  top: calc(65px / 3);
  left: calc(65px / 3); /* 元コードの "65x" は typo なので修正 */
  background-color: #ffffffff;
  animation: anim-big 2s infinite;
  animation-delay: 0.5s;
}

@keyframes anim-1 { 50% { transform: translate(-325%, -325%); } }
@keyframes anim-2 { 50% { transform: translate(0, -325%); } }
@keyframes anim-3 { 50% { transform: translate(325%, -325%); } }
@keyframes anim-4 { 50% { transform: translate(325%, 0); } }
@keyframes anim-5 { 50% { transform: translate(325%, 325%); } }
@keyframes anim-6 { 50% { transform: translate(0, 325%); } }
@keyframes anim-7 { 50% { transform: translate(-325%, 325%); } }
@keyframes anim-8 { 50% { transform: translate(-325%, 0); } }
@keyframes anim-big { 50% { transform: scale(0.5); } }