@charset "UTF-8";

/* 全体黒背景 */
#loader-bg {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* パネル共通（ひし形・暗め） */
.panel {
  position: absolute;
  background: #222; /* 暗めグレー */
  z-index:2;
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  opacity: 0.9;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* パネル個別アニメーション */
.panel-top { top:-150px; left:50%; animation: panelTop 2s forwards; }
.panel-bottom { bottom:-150px; left:50%; animation: panelBottom 2s forwards; }
.panel-left { left:-150px; top:50%; animation: panelLeft 2s forwards; }
.panel-right { right:-150px; top:50%; animation: panelRight 2s forwards; }

/* 中央グレー帯 */
.central-white {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:120px;
  height:120px;
  background: #333; /* 暗めグレー */
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  animation: pulse 2s infinite alternate;
  z-index:5;
}

/* ロゴ文字 */
.logo-text {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width: 100%;
  text-align: center;
  font-family: serif;
  font-size:7vw;      /* 少し小さめ */
  font-weight:1000;
  color:#888;          /* 明るめグレー */
  z-index:10;
}

.riseAndSettle-text .char {
  display:inline-block;
  opacity:0;
  transform:translateY(90px) rotateX(90deg);
  animation: riseAndSettle 0.8s forwards; /* 少し速め */
  animation-timing-function: cubic-bezier(0.6,0.05,0.1,0.95);
}

/* ドットローダー */
.loader-dots {
  position:absolute;
  bottom:15%;
  display:flex;
  gap:10px;
  z-index:10;
}

.loader-dot {
  width:12px;
  height:12px;
  background: #222; /* 暗めグレー単色 */
  border-radius:50%;
  animation: dotBounce 1s infinite ease-in-out, dotScale 1s infinite ease-in-out;
}

.loader-dot:nth-child(2) { animation-delay:0.2s; }
.loader-dot:nth-child(3) { animation-delay:0.4s; }

/* アニメーション */
@keyframes panelTop {0%{top:-150px; transform:rotate(45deg);}50%{top:30%; transform:rotate(10deg);}100%{top:50%; transform:rotate(0deg);}}
@keyframes panelBottom {0%{bottom:-150px; transform:rotate(45deg);}50%{bottom:30%; transform:rotate(-10deg);}100%{bottom:50%; transform:rotate(0deg);}}
@keyframes panelLeft {0%{left:-150px; transform:rotate(45deg);}50%{left:30%; transform:rotate(10deg);}100%{left:50%; transform:rotate(0deg);}}
@keyframes panelRight {0%{right:-150px; transform:rotate(45deg);}50%{right:30%; transform:rotate(-10deg);}100%{right:50%; transform:rotate(0deg);}}

@keyframes riseAndSettle {
  0% { opacity:0; transform: translateY(90px) rotateX(90deg); }
  60% { opacity:1; transform: translateY(-10px) rotateX(0deg); }
  80% { transform: translateY(5px) rotateX(-5deg); }
  100% { opacity:1; transform: translateY(0) rotateX(0deg); }
}

@keyframes dotBounce {0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes dotScale {0%,100%{transform:scale(1);}50%{transform:scale(1.5);}}
@keyframes pulse {0% { transform: translate(-50%,-50%) scale(1); }100% { transform: translate(-50%,-50%) scale(1.2); }}

/* レスポンシブ */
@media screen and (max-width:700px){
  .logo-text { font-size:10vw; }
  .panel { width:70px; height:70px; }
}